Visual design is not just making things pretty
By: Mabel Ho
Tags: UI Design, Design, Visual Design

Most laymen have this idea that designers are just operating complicated software and pushing pixels on the screen to make pretty things.

Sometimes, you get feedback from teammates who are not designers telling you:

How can we make this look better? Currently, it is almost there, but I need it to be prettier and more oomph! Can you help me to fill up this space? I’m not sure how, it looks very empty now. Workaround it.

There are times I feel flattered but speechless. Knowing you are that designer in the office who makes things pretty, and receiving feedback for changes that are ridiculously vague too can be difficult. 😅

“How can we make this look better? Currently, it is almost there, but I need it to be prettier and more oomph!”

Visual design is more about:

Communicating the function and solution of how things work

Establishing hierarchy and order through a visual system

Optimising the user’s experience

Strengthening brand perception

Simplifying complex issues

Creating a balance of consistency and delight

And less about…

The likes and dislikes

Making things look attractive or better

Slapping trendy colours, fonts, and patterns

Filling up every space just because it is “too empty”

Aesthetics in visual design

What about aesthetics? Isn’t it important? Yes, the function of aesthetics plays an important role in visual design. Aesthetically pleasing design stimulates and satisfies our senses. It gives us pleasure, evokes positive emotions, and eases the user’s experience. For example, a website with a pleasant user interface and seamless experience leaves a better impression and tends to have more credibility.

However, aesthetics is not only looking at attractive design but also the perception of usability. People perceive attractive things as usable, it forms a bond with the user and the design.

As designers, we can leverage design to influence human behaviour and emotion.

Visual design matters all the time

It is a process that needs to account for the entire lifecycle of a product’s engagement. Visual design has to be integrated from the beginning to the end as deliverables can take forever. Not forgetting, pushing pixels is time-consuming as iterations take time when they are in the wireframing and prototyping stages.

Because visual design hardly happens by accident, this process has to be thoughtfully laid out and executed.

Communicate a consistent brand personality: Avoid adding too many elements and visual styles. Sometimes less is more. Sometimes design refactoring is needed if the project gets bigger– cleaning up and revising the style guide/mockup might be necessary.

Avoid adding too many elements and visual styles. Sometimes less is more. Sometimes design refactoring is needed if the project gets bigger– cleaning up and revising the style guide/mockup might be necessary. Establish a clear visual and typographic hierarchy: This ensures you are communicating your design effectively, how you want to influence your users to view them. Below is a list of key principles in visual design.

– Size and scale to draw the user’s attention.

– Pairing typefaces increases visual hierarchy. The size and weight of fonts play a part in how you want the content to be associated with them. For example H1 (Heading 1) as the largest font for headline, H2 (Heading 2) as the secondary font for the subheading, H3, and other styles in other areas of your content.

– Colours for contrast and importance to elements in your design.

– Perspective to create an illusion to focus on important areas in your design.

– Viewing patterns such as the F and Z patterns are used generally. Your design and content flow are crucial in helping the user to have a better reading experience.

– Spacing such as breathable white spaces creates an overall balance and call to action altogether.

– Symmetry and balance composition ensure no single area of the design overpowers other areas. Elements are organised, balanced, and fit together in a seamless whole. It is easy to navigate without feeling clueless.

– Proximity of elements gives the user the perception of which group of elements are related and allows them to engage further.

– Motion effect can engage with the user in a compelling way when done subtly and meaningfully. This is another way to call for attention as well.

Follow consistent standards and patterns: As users tend to bring in their own set of expectations to things they have already experienced elsewhere, confusion occurs when the user tries too hard to piece together information. This may lead to getting stuck for too long and feeling frustrated, resulting in an unpleasant user experience. Make things easier for the users, and not force them to learn new tricks and representations for each task. It will reduce the thinking process and eliminate confusion.

Research in visual design

Lastly, we must not underestimate the power of research! Research allows room for exploration and provides fuel for new ideas.

Doing research is vital before presenting your design to stakeholders and owners. It helps you to support your design solutions and processes, debate, and understanding on how the project should be done.

For example, when developing a product, insights into the user’s behaviour will provide a sense of understanding of how the action is, which can lead to empathy. It can also provide you with some clues and patterns to help you create a better user interface design for your product. Ultimately, it provides you as a designer, and the stakeholders a more nuanced understanding of the needs of your target audience you are designing for, while providing knowledge backed up by research, and addressing questions at the same time throughout the design process.

Nonetheless, research is not only exclusive to visual design but all other fields of design too. :)

In conclusion, visual design is much bigger than pixel perfection and making things pretty. It is about problem-solving and creating better experiences and places for people through thoughtful design work!