 |
|
|

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

 |
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.
|
| |
|
 |
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. |
| |
|
|
|
|