An Overview of the Basics of User Interface Design (UID)

It’s common to hear UXD and UID used interchangeably, even though they are two different things. It’s also common to see job openings that are looking for someone that does both at the same time. In truth, a small scale website designer does do both (and more). But when it comes to large scale projects, these two roles tend to separate. Why? Because they are in essence completely different jobs.

UXD stands for User Experience Design. UID stands for User Interface Design. The difference between the two is that UXD is about the overall experience of a digital or physical product, while UID is the specific design of the visual aspects of a product. A User Interface Designer uses all the information provided by the User Experience Designer to create the screens that the user sees and interacts with. This includes everything that can be clicked on, swiped, or loaded visually. Essentially, these are navigation menu buttons, hovers, sharing buttons and input controls.

app development

The things a UI designer does

When working on a project, the UX designer will give the UI designer a wireframe of how the product is going to function and how it should flow from screen to screen. A wireframe is like a building skeleton of the product. It does not include visual aspects, only functional ones. The UI designer builds upon the wireframe.

Depending on the size of the project, the UI designer can either do only the visual design or also take on other roles like branded icon design, motion design, and even the full scope of the UI brand style guide. UI designers sometimes also incorporate illustration into their work, it will depend on the style of the brand.

Here is a quick list of things a UI designer does: the visual design of the screens, sets the typography, sets the color palette, design of the buttons and hovers, icon design, the visual design of the forms, illustrations, gradients, motion design, and responsive design.

Design principles for a UI designer

UI design, like graphic design, should follow some basic principles. The Gestalt Principles are the most fitting for a UI designer. These describe the relationship between elements on a visual plane and how to make them work together well. Gestalt principles apply to colors, lines, shapes, form, background, hovers, and gradients.

The Gestalt principles are simplicity, similarity, proximity, closure, figure and ground, continuity, order and symmetry, and, Synchrony.

If you want to learn more about design principles, you can read our articles on the blog about design principles, and hierarchy.

mobile app design

Apart from the Gestalt principles, UI designers who also work with motion design, need to follow motion design principles which apply to load cycles, button hover motions, transitions, screen motions, etc. These principles are called The Twelve Principles of Animation.

The Twelve Principles of Animation are squash and stretch, anticipation, staging, straight ahead action and pose-to-pose, follow through and overlapping action, ease in, ease out, arcs, secondary Action, Timing, Exaggeration, Solid Drawing and, Appeal.

If you’d like to learn more about the principles of animation and motion design, you can read our article on the blog, and then take some tutorials on Tutpad to learn some techniques.

The Importance of a Visual UI Guide

When the UI designer is finished with all the elements which make up the screens of the product, it’s time to put all the elements in an index. This index is called the visual UI guide. This document has a few functions. It, along with the UX wireframe, will be handed over to the back-end and front-end developers to produce all the necessary code which will make up the final product.

The developers will then add the relevant code to the visual UI guide and all that will be part of the brand’s design system. The developers who work directly with the UI designer are the front end developers, who also code the motion graphic design.

A Visual UI Guide is the first step to a design system, which is the best way to keep a company on brand with a big team of designers and developers working together. It keeps everything in check in both visual and code parameters.

Transitioning from Graphic Design to UI Design

It’s quite common for a graphic designer to be interested in transitioning to UI Design. Fortunately, the principles are not too different and it really only takes some practice and maybe joining a team that will give you the opportunity to learn.

Over to You

Starting a career with UI design is not as hard as it may seem, have you done it? Tell us in the comments about your experience.

By Orana Velarde