Every project is different, but it usually goes something like this:

 
Learn

A successful design must meet the needs of its target audience. Having a clear picture of who those people are, what they need, how they will apply the technology, and so on, create a vital foundation to establish before design begins.

Additionally, the site or product must support the client's business objectives. Understanding and balancing these goals is vital to creating a design that succeeds on more than just a visual level.


Frame
Before worrying about the visual style, it is generally best to establish the structure and functional flow of the site or application -- what the core building blocks are and how they fit together. This is done by creating diagrams, sitemaps, and often a prototype walkthrough to flesh out the entire experience. These tools enable the team to gauge how well the interface works and to identify usability issues, independent of what it looks like.
   
   
Sitemap
Used to assess overall structure and balance (see sample - PDF)
  Walkthrough
Used to "feel" interface flow
before graphic styling (sample)

Conceptualize
With the main structure established, we start to explore the visual personality. After discussing visual goals with the client, a few key screens are mocked up in different styles to emphasize various aspects of the product or the brand personality.
 
Concept 1
Rich, architectural feel
  Concept 2
Clean, publication feel
 

Sometimes, one of these initial concepts is perfect; other times, the final design is made by combining elements from different concepts. In either case, the final look and feel is established through iterative refinement on a few key screens.

 
 
Final Design
Mixes elements of both concepts
(see larger images)
 

Multiply
By this stage, the Frame phase locked down the screen-by-screen structure, and the conceptual work has given us an overall look and feel. The Multiply phase is where the overall style is propagated throughout the remaining screens to provide design specifications for the whole site or application.

Build
Now that everything is designed, we just have to build it. For HTML and graphics, I can produce much of this myself; for more advanced application programming, I collaborate closely with the programmers to provide art, specs, and guidance, and to help test code and components as they are readied for launch.

Launch
After everything has been tested and tweaked, you're ready to go live.
 
   
Back to Approach