Back to Phase 3: Detailed Design
3.5.1.1 High-Fidelity Wireframing & Visual Design
High-fidelity wireframing and the creation of visual design comps are activities done to create a fully detailed articulation of the interface (plus all its attendant states necessary to support a functionality).
Like low-fidelity wireframes, high-fidelity wireframes are still mostly line renderings representing the interface. But the additional detail at this stage should offer language, labels and fully depicted interactions including success and error cases, and provide guidance for how to handle not just primary use cases but also all edge cases.
Visual design comps should offer presentation details such as how individual components should be visually styled, and how the components relate to one another in the interface.
Requirements
- A determination of which conceptual design direction to pursue in detail.
- A scope of design work to be detailed, in user stories or similar.
Product/output
High-fidelity wireframes and comps serve as the foundation for communicating the final design. For lean documentation practices and usability testing, these artifacts will serve as the design source for a prototype. They also serve as the source material for writing full developer specifications.
Practical considerations
- Visual design comps can organize the interface differently than the wireframes, so long as there is no contradiction between the two. In cases where the comps do not match the wireframes exactly, the comps should be followed for form and the wireframes should be followed for function.
- Frequently high-fidelity wireframes and visual design comps are created in parallel, and help inform one another. In this process, the best ideas from each are combined in the final solution.
Resources
- What is Interaction Design? https://www.interaction-design.org/literature/article/what-is-interaction-design
- Adaptive vs. Responsive Design https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design