- Finally, the Planning Is Done!
- Crafting the User Interface Design
- Gathering Team Feedback
- What's Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Crafting the User Interface Design
To ensure that all of the design elements were covered in the final design, the wireframe was used as a punch list. The elements of the wireframe were brought into Illustrator, and the designer redesigned the wireframe elements using the final design, following the style guide that was completed during the design planning process (see Figure 1).
)
Figure 1 UI design comp in Illustrator CS5, based on the previous wireframes.
As part of the designer and developer contract, the developers worked with the designers to define the designs that were required to complete the functionality of the buttons and components of the application. For example, each button needed designs for all of its various formats: the design for the "normal" state, as well as any different looks that the button might take when the user hovered a pointer over the button or clicked it, or if the button was disabled. By establishing a component contract with the developers, the designers had a clear understanding of what they needed to do to keep the project moving along smoothly.