nimblehq.co

User Interface

Hero image for User Interface

User Interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.

Why Does The Team Use UI Design?

It is important for the team to design functional sites that can quickly generate interest and online traffic. The user interface design plays a vital role in bringing high volumes of web traffic to the product.

A good user interface not only increases the site’s usability but also leads to the smooth completion of any task at hand, thereby making everything enjoyable and flexible as expected by users.

Getting Ready for the UI

Before starting the UI process, all necessary resources should be ready in the project’s Google Drive folder. This includes:

  • Brand guidelines
  • Visual guidelines
  • Icon sets (if any)
  • Content (images, persona, profiles, copy, etc.)

Once gathered it all, the team is ready for the UI process.

UI Design Process

Everything starts with typography.

Typography plays a significant role in enhancing the usability of a website. The textual content has a central role to play in making any website appealing to online visitors. Therefore, it should be optimized for readability, convenience, and visual balance.

Consequently, it is advisable to establish typography, fonts, and font usage styles first of all.

Balance

Balancing is key in UI design.

Designers should stay between the client and the developers to balance features, complexity, and elegance.

The client usually has extensive experience and knowledge in his particular industry. The designer’s role is to bring expertise about common usage of systems, typical user behaviors, accepted and generalized UI patterns, and, of course, a touch of creativity.

Designers are also expected to research and familiarize with web components commonly used by developers (such as forms, placeholders, cards, feeds, navigation, etc.) to help the development team with implementation.

Novelty

In case “unusual” visual elements are being used/tested, the designer must ask herself/himself “why?”.

If this question can be answered with a valid argument, the “unusual” visual element may have its place. Bringing it up to the developers will help decide if the technical implications, in addition to the unusualness of the element, are worth the time and effort.

If a consensus can be reached between designers and developers, the element has its place.

Information and Context

The most important ingredient of UI design is context.

Working with actual content (images, persona, profiles, copy, etc.) facilitates the creation of an appropriate UI faster.

It also helps the client when reviewing the UI work. Seeing the UI with their content (as opposed to dummy content) helps them visualize and get a feel for the UI. It is not necessarily the case with dummy content. The result is fewer iterations to reach a result that satisfies the client.

The client must provide the content. And they should give it before the UI work starts (as explained in Getting Ready for the UI).

As much as the team tries to avoid dummy content, designers should only be using content provided by the client and never create content themself (unless explicitly requested by the client). Using real content that the client didn’t create may result in frustration and displease if the content doesn’t fit the business vision. It can have a significant (and negative impact) on the UI work.

If the UI requires content that hasn’t (yet) been provided by the client, the team should be using Lorem Ipsum instead.

Why So Early?

If the client doesn’t understand why (s)he should be providing content so soon in the process, it can be explained fairly simply.

  1. The UI will be designed around the content (and not the other way around). Hence, the content has a significant role to play in the UI design process.
  2. Designing elements such as a navigation bar can take roughly one hour. However, once this element has been applied to dozens of screens, making changes to it can easily take three times as long.

Approving the Concept

Even a simple app can contain hundreds of screens. Half of them with unique layouts and styling. For the other half, though, the layout is usually pretty similar.

To iterate fast and get the UI ready as soon as possible, the team should be designing all unique screens first.

Once the client has approved all unique screens (most likely after a few iterations), the team can design the remaining screens that share a common base (layout, components).