- Define Phase
- Design Phase
- Web Design Application Checklist
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Design Phase
Design can mean many different things, but it is generally used to refer to visual design. Design goes beyond just adding graphics on top of the wireframes, though. Care has to be given to making sure that the visual design places the correct emphasis where it is most needed. It also means detailing exactly how the UI and visual design are to be implemented. A picture might be worth a thousand words, but it can tell you the hex value of your accent red.
- Comps
- UI specifications
- Visual specifications
Comps
The comps (composites) are the main thrust of the visual design, presenting a static version of what the final interface will look like.
)
Figure 5 Composites are meant to show a static version of what the final site should look like.
Download comp example here.
Application |
Rating |
Notes |
|
Illustrator |
____ |
Powerful vector illustration tool for creating final designs. |
|
Photoshop |
___ |
Powerful bitmap illustration tool for creating final designs, but often proves difficult when trying to make simple changes. |
|
Freehand |
___ |
Decent illustration tools, but not as powerful for illustration as Illustrator. |
|
Fireworks |
____ |
Combines strong vector and bitmap editing tools for final designs. |
|
Flash |
____ |
Although Illustrator and Freehand offer comping tools for Flash, many designers prefer to simply start in Flash. |
Design Specifications
The design specifications document collects all the wireframes and visual comps into a single document for presentation. This document also uses callouts to specify the exact nature of all elements on the screen including a description, dimensions, user interactions, and system reactions.
Although the comps show what the final interface should look like, details such as the exact color values, fonts, and other styles should be detailed as a reference for developers as they work. The more detailed the design specifications document, the less time the designers will spend answering the phone fielding questions from the developers.
)
Figure 6 Use callouts with the wireframes to describe the positioning and layout of all the various elements on the page.
)
Figure 7 Use callouts with the comps to describe the colors, fonts, and graphics used to create the presentation layer.
Download design specification example here.
Application |
Rating |
Notes |
|
WordPerfect |
__ |
Older word processor that is still easier to use in many respects than Word. |
|
Word |
__ |
Requires placed images to be manually updated. |
|
InDesign |
____ |
Best for professional creative layouts. Automatically updates images when changed. |
|
Writer |
__ |
Word processor built for OS X. Good alternative to Microsoft Word. |
|
Pages |
___ |
New word processor and page layout software from Apple computer. |