CRAP Way to Design
What is Visual Design?
Interaction Design Foundation define Visual Design as “ Visual design aims to shape and improve the user experience through considering the effects of illustrations, photography, typography, space, layouts, and color on the usability of products and on their aesthetic appeal. To help designers achieve this, visual design considers a variety of principles, including unity, Gestalt properties, space, hierarchy, balance, contrast, scale, dominance, and similarity.” While UX Booth defined Visual Design as the use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience. Visual design as a field has grown out of both UI design and graphic design.
I would like to say that Visual design is that Nigeria party Jollof Rice (Jollof rice is rice cooked with a fried tomato sauce.)that people often look forward to eat when they attend your party. Research shows that people believe that more attractive designs are easier to use than less attractive designs — even when they’re not. This is known in psychology as the aesthetic usability effect and in folklore more simply as, “first impressions count”. Visual design has an important impact on the usability of designs. In fact, we can use four key principles of visual design to create more usable interfaces. These principles are C.R.A.P Contrast, Repetition, Alignment and Proximity.
Contrast: Contrast in visual design helps to direct the viewer’s eyes to what’s important and helps them focus on what to do next. It is how we use opposites to express hierarchy and create visual interest, not to mention legibility.
In this example (Figure 1), the “Cancel” button is formatted identically to the “Save” button. This means that the user will have to carefully read the text on each button before making a choice. That can be a lot stress for the user and they may end up selection the wrong button in this case.
With good use of contrast, we can make the default choice immediately apparent to users. In this example (Figure 2), the “Cancel” button is formatted differently to the “Save” button. This means that the user will be able to differentiate which they want to click on without spending much time reading the text.
Repetition: Some designers like to refer to it as consistency. It simply means that systems are more usable (and easier to learn) when similar stuff is presented in similar ways. This mean that they have to be consistency in the term of fonts, icons, headings, list styles and page layout. Sometimes you maybe tempted to use different fonts on different pages but you have to be careful because this may mislead the user. In most cases for fonts I often advise that designers should stick to max two different fonts type, but it is better to maintain single font. Repetition is the way we create rhythm and unity within a design.
Alignment: Alignment simply means making sure that all elements of the design line up horizontally and vertically. This can best be achieved by designing the interface to an underlying grid. A good way to find alignment is to draw a line from one object to another, or the edge of an object to another. (With the use of FIGMA Alignment is easy).
In this example figure 3 it shows a poorly aligned form and how it is stressful to the user. The first day I saw this form I got tired because I thought they where too many and it is going to take the whole of my day to fill the forms. Note: a poorly aligned page can turn users off.
Proximity: means that if you place elements in a user interface near each other, people will think that they are related somehow. Designers use proximity to create relationship between elements on a page. When an object is close to another it indicates they relate to each other in some way.
