<aside> ⭐ Visual design goes beyond making layouts and designs look nice and aesthetically pleasing. When thoughtfully applied, it can increase usability, provoke emotion, and strengthen brand perception.
</aside>
This phase is focused on creating the visual language that will be used throughout the product, including the color palette, typography, and graphic elements. The goal is to create a design that is visually appealing, easy to use and effectively communicates the brand and product message.
When looking at a visual, we can usually immediately say whether it is appealing or amiss. (Because they often play out at the visceral level in Don Norman’s model of emotional design.) However, few can verbalize why a layout is visually attractive. Graphics that take advantage of the principles of good visual design can drive engagement and increase usability.
Visual-design principles inform us how design elements such as line, shape, color, grid, or space go together to create well-rounded and thoughtful visuals.
5 visual-design principles that impact UX:
Definition: The principle of scale refers to using relative size to signal importance and rank in a composition.
In other words, when this principle is used properly, the most important elements in a design are bigger than the ones that are less important. The reason behind this principle is simple: when something is big, it’s more likely to be noticed.
A visually pleasing design generally uses no more than 3 different sizes. Having a range of differently sized elements will not only create variety within your layout, but it will also establish a visual hierarchy (see next principle) on the page. Be sure to emphasize the most important aspect of your design by making them biggest.
When the principle of scale is used properly and the right elements are emphasized, users will easily parse the visual and know how to use it.
Definition: The principle of ****visual hierarchy refers to guiding the eye on the page so that it attends to different design elements in the order of their importance.
Visual hierarchy can be implemented through variations in scale, value, color, spacing, placement, and a variety of other signals.
Visual hierarchy controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy.
To create a clear visual hierarchy, use 2–3 typeface sizes to indicate to users what pieces of content are most important or at the highest level in the page’s mini information architecture. Or, consider using bright colors for important items and muted colors for less important ones.
Scale can also help define the visual hierarchy, so incorporate various scales for your different design elements. A general rule of thumb is to include small, medium, and large components in the design