Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This
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 05

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 06

Figure 6 Use callouts with the wireframes to describe the positioning and layout of all the various elements on the page.

Figure 07

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.

  • + Share This
  • 🔖 Save To Your Account