What is Visual Design?

Visual design is all about how something looks. UX designer, David Rhyne, explains that visual design augments conceptual design to shape the perception of the user and persuade the user to like the content. It helps convey a message about the style of the company that goes beyond the literal message in the content and aligns with defined branding. Rhyne goes on to elaborate in this article exactly what visual design is and why it is so important.


Why is Visual Design Important?


Much of the reason that visual design is so important is that it is the first impression your product will make on a user and helps to build an instantly recognizable layer of branding. The aesthetic further builds a relationship with users and creates a personality for the product. Additionally, users will often decide the credibility of a product based more upon its visual design than the actual content (Rhyne).


The Aesthetic-Usability Effect


Visual design is also important because of the aesthetic-usability effect, which is an effect where users often perceive visually pleasing designs as more usable than they really are (Moran). Some key takeaways from UX Researcher Kate Moran's article are that aesthetically pleasing design can make users more tolerant of minor usability issues and creates a positive response which leads users to believe the design actually works better (Moran).


Good Design is C.R.A.P.


Although there are many, many design principles — 8 of which can be found discussed in detail by Amy Copperman here — they can be broken down to their most basic level in the form of four, easily memorable guidelines. C.R.A.P. stands for contrast, repetition, alignment, and proximity. These principles focus on arranging content to be more organized, structured, and pleasing to the eye (Copperman).

C stands for Contrast
Contrast can direct the attention of users around the page in a specific pattern. The most important content should be focused on first by using high contrast, and less important elements such as the background should not be distracting.
R stands for Repetition
Repetition maintains the consistency of style and operation. If elements differ from one another too much, the result is a cluttered look, which impacts usability and credibility. Repetition can also help users locate specific content because they are given an idea of what to look for.
A stands for Alignment
Structured alignment between elements connects groups of content as well as gives an ordered appearance and an easily navigated structure. Alignment also draws the user's attention to the appropriate following information.
P stands for Proximity
Proximity uses visual space to show relationships between elements and makes it easy to see at a glance what content is logically grouped together. Having extra white space around elements also helps the product feel more relaxed and less cluttered or confusing.


In addition to Amy Copperman's article, this video is an excellent guide to the above design principles. It uses visual aids to increase understanding and memorability of the concepts.

Which is More Important?