Visual Design: Face of your Product

6 min readMay 2, 2021

What is Visual Design?

Visual design goals are to improve a design’s/product’s aesthetic appeal and usability with suitable typography, space, layout, images, and color. Visual design is about more than aesthetics. Designers place elements carefully to create interfaces that optimize the user experience and drive conversion.

How to implement Visual Design?

To implement the visual design, firstly as a designer you can prepare your product's aesthetic appeal and usability before creating the product. To prepare the product design, you must make the “blueprint” of your product so you can imagine the big picture of your future product. In the making of the design preparation, here is an example to prepare your product design :

Wireframe

Wireframing is a way to design at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added. By building a wireframe will allow all stakeholders to agree on where the information will be placed before the developers build the interface out with code. Here is an example of a wireframe of a login feature in a website:

Mockup

Mockups are high-fidelity design choices for color schemes, layouts, typography, iconography, the visuals of navigation, and the overall atmosphere of the product. Mockups usually represent what the finished product looks like without the implementation of code. The key characteristic of the mockup is not only to describe the layout of the product but also the color and all design attributes that will be implemented in the product. Here is an example of a mockup of a login feature in a website:

But, is there a good way to implement visual design?

There are many good ways or best practices to implement the visual design. One of the most widely used ways or guidelines to implement visual design is Nielsen’s 10 usability Heuristics :

Visibility of system status

This usability heuristic means that the design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

When pressing the picture in the navbar, the page show child attribute inside it so user know what action can be done.

The user is being explicitly informed of the status of approval on this page.

Match between system and the real world

This usability heuristic means that the design should deliver information in real-life conventions. One example is to use words that are familiar to the user, rather than internal words.

The words used are in accordance with what is often used in real-life scenarios and familiar to users.

User control and freedom

This usability heuristic means that the design must allow users to control the system and permit easy reversal of actions. The design should avoid irreversible action, so the user can navigate through the feature easily.

Kembali button permit reversal to the previous feature after the feature are being accessed.

Consistency and standards

This usability heuristic means that the design must be consistent and follow normal real-life conventions. The goal of this heuristic is to help users to recognize features easily in different designs of a product.

Button color use the same color

Error prevention

This usability heuristic means that the designs must prevent error problems from users’ actions. To prevent this, the system can offer confirmation to users before actions are being done.

Pop Up confirmation before actions are being done

Recognition rather than recall

This usability heuristic means that the designs minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design should be visible or easily retrievable when needed.

Usually, the button for log out from the session is placed in the navbar of the profile picture. This help user to easily recognize log out feature without having trouble to access it.

Flexibility and efficiency of use

This usability heuristic means that the design should offer a feature that will speed up the interaction for all kinds of users. The aim of this heuristic to offer an effective feature for users.

This button helps the user to do feature action quickly, so the feature will offer an effective way to the user.

Aesthetic and minimalist design

This usability heuristic means that the design should contain only important information that needed. This means that you must make sure that the content and visual design focused on the essentials.

The landing Page show only important information that needed. The design also implements the minimalistic and aesthetic design.

Help users recognize, diagnose, and recover from errors

This usability heuristic means that the design should inform users about the error and how to recover from it. An example of this heuristic is to make a pop-up error message of the action from the user.

Telling error when the username doesn’t exist in the database help user to understand what error occurred and how to recover from it.

Help and documentation

This usability heuristic means that the design should provide documentation to help users understand how to complete their tasks.

In conclusion, visual design is an important process in software development. As a designer, you must implement the visual design in the best way possible so it will create a good interface and experience for the user in the finished product.

Disclaimer :

This is my article for my Individual Review for PPL course at the Faculty of Computer Science, University of Indonesia.

Resources :

Visual Design: Face of your Product

What is Visual Design?

How to implement Visual Design?

But, is there a good way to implement visual design?

Written by Rabialco Argana