Design

Once you have implemented sitemap and wireframes, you need to turn this wireframe to interactive design. With interactive ( High Fidelity ) prototypes, the designer must set response for each possible user action before the test happens. An interactive design or prototype is a simulation or sample version of a final product, which is used for testing prior to launch. The goal of a prototype is to test products (or product ideas) before spending lots of time and money into the final product.

In the design phase, we will study the implementation of a visual prototype and the hierarchy of colors and images.

Visual Hierarchy

According to the Interaction Design Foundation, Visual hierarchy is the order in which a user processes information on a page; its function in user interface (UI) design is to allow users to understand information easily.

By assigning different visual characteristics to sections of information (e.g., larger fonts for headings), a designer can influence what users will perceive as being further up in the hierarchy.

How to implement a visual hierarchy into your design:

Size

Larger things always grab the most attention. Changing font sizes is the easiest and most common way to create contrast into your design.

Color

Colors always have their own meanings and associations and it’s one of the most using elements to draw people’s attention. It’s being used to highlight important information and or images.

Lightness and darkness is also a great way for contrasting and prioritizing data over some others.

Whitespace

White space is the empty area between all design elements like typography, images or button. It’s also known as “negative spaces”, it doesn’t mean to be white. It can be colored with any color, it means any blank space that has no content.

Two important things to keep in mind when optimizing your text content are paragraph margins and line spacing(the space between each line).

Line spacing can improve the legibility of a body of text.

Generally, the larger the spacing, the better experience the user will have whilst reading, although too much can break the unity and make the design disconnected.

It also helps increase proximity that means spacing related items closer together.

Styles and weight

Many fonts have a variety of style and weight options. Styles might include italics, small caps, or condensed or extended versions. Weight refers to the visual lightness or heaviness of a font like light, medium bold and black.

Use of images and icons

Images and its importance

“Pictures usually speak louder than words”. One of the best ways to draw users attention and would help in achieving business goals is the use of images.

Any image is of several small elements when they group together they form the final scene that we see, so picture’s beauty doesn’t lie only in details, but in the way and method of continuity and harmony together.

Some guidelines when designing with pictures:

Use relevant images

Using irrelevant images would cause confusion to users and make the project less trustworthy. 

You should select images that have a strong relationship with your app or website goals and ensure that they are context-relevant.

Images could be a great representation to visualize the text to facilitate navigating and browsing for users.

Show Real people

Try using real photos that would express your product or service and avoid using stock images.

Consistent Style

All visual elements like icons, images, and graphics leave a great impression on the user. Using them should be consistent as it leads to visual communication that should have a sense of context. Maintain consistency of visual elements impact your UX design.

Icons

Icons are the visual representation of an object, idea or an action. When they are done correctly, they can communicate the idea easily. It also shortens the need for words and saves space.

There are some icons that are known universally like the symbols of home, magnifying glass, and the cart. These icons are rare as the most of icons can’t be recognized quickly. They may have different meanings depending on the interface and the context.

On the other hand, there are some icons that are different but are being used for the same functionality such as heart and star that represents the favorite, book and add to wishlist.

This similarity of using icons confuses users as they misunderstand them like the heart and star.

For example, as mentioned in NN Group, the heart icon on the vacations listing site Combadi allows users to mark that they “love” a trip, but does not save that trip to a short list to ease future referencing. (Users in our recent usability study disliked that anyone can “love” a trip, as opposed to only people who had actually purchased it.) In contrast, the interior-design shopping site Fab uses the heart icon as a way for a user to save that item in order to find it easily later.

Some guidelines when using icons in your design:

• Icons must communicate meaning from the first glance.
  
• Test icons for recognizability before launching the design.
  
• Attach a visible readable text label.
  
• Test icons for memorability.