Interaction & Visual Design
Interaction design (or UI or GUI design) refers to designing how the user interacts with the product. What steps must be taken in what order to complete a task? How should the product content be organized so the most relevant and important information is seen and interacted with first but less important information is easy to find? An excellent visual design builds on the interaction design by further clarifying meaning through clear grouping, emphasis and color while maintaining a visually pleasing environment.
Information architecture describes the organization and structure of information. In UI product design, it is tied closely with navigation design. A good information architecture allows users to quickly find what they are looking for in a product’s structure. A good IA is especially important in products that provide a lot of content. The best IA’s are built on an understanding of how users think about the information naturally – their mental model. Mental models can be assessed through cognitive modeling techniques such as Card Sorting.
UX design is a broad term encompassing several design theories and techniques. For us, it means creating interaction designs based on user experience research & principles. Interaction design describes the steps and flows users work though to accomplish tasks. It encompasses everything from how content is displayed on the screen or device to which controls are used to interact with the product as well as what labels and instructions are needed. Interaction designs are typically communicated with annotated wireframes.
Wireframes are high level visual representations of product screens. Wireframes are quickly created using paper and pencil or productivity tools which make them ideal in the early design phase. Wireframes can be used to explore design options, build the conceptual framework for a product, and to later fill in screen details. When the design has been fleshed out after several iterations they can be included in functional specifications along with development notes and annotations.
Prototyping is an essential part of the design process to ensure the design transfers from static wireframes to an interactive experience. Prototypes can range from low-fidelity paper prototypes created early in the design process to more polished high fidelity, functional prototypes created later. Low- and high-fidelity prototypes can and should be used in usability testing. Because low fidelity prototypes are relatively quick and inexpensive to produce, they are often used to test out varying design ideas with users or team members.
Visual design uses color, shape, pattern, line, and text to create a positive, harmonious environment that users perceive as clear, pleasing, and complete. Visual design creates the personality of a product and helps connect the product to its core demographic. When a good visual design is applied to a set of wireframes, the design is propelled forward. Visual elements enhance meaning, highlight important information, and contribute to a soothing or stimulating user experience. In many cases, a few simple changes to an existing visual design can improve the product’s appearance and appeal.
Branding is the process of distilling your message into a single, vibrant visual statement. As part of our branding process, we make sure we spend the time upfront to fully understand your marketing message and goals. We’ll then take this understanding and work with you to find the right visual elements. Deliverables often include logos, letterheads, web page templates, and signs.