Visual design improves the aesthetic appeal and usability of a product/interface.
The 5 principles that impact user experience are:
The principle of scale refers to using size to signal the relative importance and rank in an interface. The more important elements are larger in size because a larger-sized component is likely to get more attention. A good design is made from a combination of 3 sizes, as they develop a good hierarchy and allow reasonable differentiation. As shown below, the categories have a larger size as the aim is to draw more attention to the categories available.
The principle of visual hierarchy refers to guiding the eye on the interface so that it catches the elements in order of their importance. Visual hierarchy can be applied by variation in scale, color, spacing, placement, and other signals. Similar to the scale principle, we can use 2-3 typeface sizes to create a visual hierarchy. As shown below, despite multiple user interface elements being present, attention is immediately drawn to the food delivery card because of its larger size and prominent color.
The principle of balance refers to the equal distribution of the number of visual elements throughout the interface. The elements must be distributed equally (not necessarily in a symmetrical manner) across both sides of an imaginary axis. The axis is usually vertical but can be horizontal. We should create a balance between the visual weight of the elements and not the number of elements on both sides of the axis. As shown below, the cards are distributed equally on both sides of the interface.
The principle of contrast refers to the juxtaposition of not visually similar elements to convey they are different. Contrast provides a noticeable difference to emphasize that the elements are different. Contrast is implemented through color, e.g., green implies confirming something, and red implies deleting, thus making the element distinct from others, as shown below:
These principles improve user experience, increase usability and make the interface aesthetic.
View all Courses