Typically a graphic designer creates designs for a web application separate from the development of the web application software. During the project the design must be married to the software. Integration can be a very arduous and time-consuming process if the designer does not follow a few simple guidelines.

To simplify and ease the integration process I suggest these guidelines for the graphics designer:

Collaborate with the Developer at Project Start

Lack of discussion with the developer about the graphic designs leads to significant problems during integration.

To make the integration process smooth discuss your design ideas with the developer at the beginning of the project.

Keep Table Nesting Levels Shallow

As nesting levels increase so does the difficulty of understanding where you are in the table structure.

Conversely, shallow nesting means it's easier to know where one is at in the table structure.

Name Tables

Select names that clearly identify the purpose of tables. The name 'A' does not convey any meaning. Whereas, the name 'CollaborationGoals' provides a better indication of the purpose of the table.

Use Naming Conventions

Locating objects can be difficult in medium to large projects. Where is the CSS style? Where is the graphic image? Searching for project objects can waste significant amounts of time over the course of a project.

Using naming conventions to identify project objects eases the task of locating these items.

• Use a prefix.
• Use a hierarchical naming order.

Examples:

• NAMIC_ButtonBack.gif
• NAMIC_ButtonGo.gif
• NAMIC_MenuHome.gif
• NAMIC_MenuLeft.gif

Use CSS

Suppose FONT tags are used across 30 application pages. Now imagine you, as the designer, desires to change the font face. How much time is required to modify the FONT tag in all 30 pages?

Suppose a CSS style is defined and then used across the 30 application pages instead of the FONT tag. To change the font face requires changing one CSS style in the applications CSS style sheet.

Using CSS is a time saver.

Organize in Alphabetical Order

Suppose you have 26 cards each stamped with the letters of the alphabet on the front the cards. Shuffle the cards. Now attempt to locate 'G'.

Place all the cards in alphabetical order. Now attempt to locate 'G'. Could you find 'G' quicker in the randomly shuffled deck or the sorted deck?

Yes, the idea makes common sense and you might ask "Why bother mentioning this guideline?". Because I've worked on projects where the objects were not organized in alphabetical order.

Design Master Pages

ASP.NET developers can create master pages which contain common graphical elements for a set of pages. All pages using the same master page have a common look and feel. Make a change in the master page and the look and feel is changed on all pages using the master page.

At project start determine which pages in the application must have a common look and feel. Then design a master page for each common set of pages and hand the master page designs to the developer. The developer will create the ASP.NET master pages and apply them to all associated pages.

Design Reusable SubForms

A better approach is to design a single reusable subform for each function in the application. Using this approach reduces design time, software development time, debugging and testing time and ultimately reduces project costs.

For example, the NAMIC Mentor Program application collects company information from the user during the account and application creation processes. I designed a single Company subform and used that subform on the account and application pages.

Minimize Precise Graphics Positioning

Debugging and fixing precise graphics positioning requires enormous amounts of time by you and\or the developer. The development time increases as one needs to debug increasing numbers of positioning problems. The problem is compounded by the differences in browser and browser versions.

A better approach is to rely less on precise graphics positioning.

Minimize Graphical Elements

For one project I worked on the designer created about 80 tiny graphical elements that had to be precisely positioned in order to create his desired design for a set of pages. I spent many hours debugging browser problems related to the 80 elements.

Was 80 elements needed for this project? Probably not. Unless the client has a large budget for the project the best option is to keep the number of graphical elements to a minimum.