Edy Dawson-Yoro
Home
History
Theory
User Exp.
Technology
Visualization
Summary

Designing User Interfaces

After the UX team has gathered the user information, the next step is to start the design process. Generally this is associated with the overall look-and-feel of the product, but the design considerations go beyond the visual appearance. The questions that now arise:

  1. Where is this product going to live?
  2. What technology should be used to create this product?

Technological requirements and limitations will affect the overall visual/tactile user experience of the product. An example of this could be a website which may be accessed in several ways, such as through a computer, a cellphone or an iPod. Although the information from this website may appear very different viewed through each of these avenues, it is important that the overall identity of the product remains intact. This is the importance of Branding. The overall look-and-feel, and the user interface, whether it's hardware, software, or a combination of both, should aid the user in accomplishing the task at hand, as pleasantly as possible, and represent the overall persona of the product.

There are several steps in the design process:

  1. Brainstorming visual directions - This may include gathering examples of visual styles, color palettes, and creating rough sketches.
  2. Initial roughs and comps - At this stage, the rough sketches begin to solidify into more complete designs. Several design directions and color palettes may be explored to compare the strengths and weaknesses of each.
  3. Interaction Schema - Wireframes illustrating a page-by-page storyboard and descriptions of page elements and features.
  4. Low-fidelity prototypes - As the visual design comes together, it is time to begin combining them with the the interaction schema.
  5. High-fidelity prototypes - After choosing the color palette and the visual design, and the interaction models, a prototype is created that more closely resembles the final product, often using Powerpoint, or HTML/JavaScript/CSS.
  6. Final design assets - Depending on the production environment these design assets can be in many forms, such as .jpg, .png, or .ico icon files.
  7. Styleguides or Design Guidelines - Documentation outlining the visual style, the color palette and the interaction model are created.
  8. Constant reiterations throughout the process - The best design paths spiral toward the finished product. The design is revised on a continual basis, slowly approaching the best possible final solution.