As interaction designers explore potential solutions through an iterative process. An interactive prototype defines the layout and functionality of the user interface and allows you to experience the solution faster. With an interactive model designers can gather feedback early in the design process.
Mood Boards visually communicate the intended messaging of the site through the use of branding, textures, color, typography and composition. Through an iterative design process a User Interface Designer will refine the Mood Boards into a single concept that can be used as a jumping point for the visual design.
Visual Preference Testing
In order to quantify the effectiveness of a design you implement visual preference testing. This is a process that provides metrics for gathering feedback and evaluating design as an independent variable.
This is typically done with a Semantic Differential Survey, which measures the connotative meaning of various visual concepts by rating them on a bipolar scale. After receiving feedback, the Designer will refine and narrow the designs iteratively to create a single validated design.
Throughout the user-centered design process, actual user feedback is gathered to help inform the solution. In moderated session, a moderator walks through a set of tasks with a representative user to determine how easy or difficult it is to interact with the solution in it’s current state.
Conducted at the end of the development cycle to ensure that the solution functions as intended, and has been developed following best practice guidelines.
The user interface design begins with static mockups based on the finalized mood board concept and wireframe prototype. The mockups combine the branding and visual communication established in the high-level design along with the layout and functionality of the interactive prototype.
Through the iterative design process, the initial comps are refined and modified into a single concept that demonstrated the intended visual design through a sample home page and usually a sample interior page.
The detailed design is a deeper dive into the various screens, and components that will be included within the site. This effort requires planning around reusable components and screen layouts. It provides the groundwork for page templates and component functionality that will be developed for the site. This is the point at which modules or modals are identified for re-usability
The CSS Box Model Hierarchy
To maintain a consistent rhythm and unity across all the pages of the web site, a series of templates will be built to establish the layout grid and style for handling text, titles, links and graphics. These core CSS elements will be implemented into a theme that can be applied to the application.
The accessibility review ensures the the output of the web site meets the target accessibility standards. By following W3C and WCAG guidelines, we can create an experience that meets the needs of all users.