Visual Design: Face of your Product

Image Source from Unsplash

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 :

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:

Example of Wireframe Design in IGRI

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:

Example of Mockup Design in IGRI

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 :

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.

Navbar

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.

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.

Sign Up Petani Page

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

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.

Detail Produk Page

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

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

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

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.

Navbar with logout feature

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.

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.

Petani Verification Page

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

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.

Landing Page

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

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.

Operational Login Page

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

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.

Writer with a Big Dreams

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store