Introduction to User Interface design
Tags: beginners, design
Published: 2020-01-23 23:17:28

---
title: Introduction to User Interface design
published: true
description: A an introductory guide to user interface design
tags: beginners, design
series: FrontEnd Development Zero to Hero
---

The word "_user interface design_" is a combination of three words &mdash; _user_, _interface_ and _design_. In plain language, this means it's about the design of _interfaces_ for the _user_ and __not ourselves__ &mdash; the _designers_. This might seem like a lot to take in, but we'll do our best to explain.

The _interface_ in question is the __point of interaction__ between a user and a computer system or an application.

A desktop or _web application_ will be used by end users to perform specific tasks that's why the field of _user interface design_ focuses on what the users might need to do their task and making sure the interface is __easy to use and understand__. Speaking of _easy_, read the following tweet:

{% twitter 1132989077274464257 %}

When designing an _interface_ there are lot of things to keep in mind. Now, you might ask: What should i keep in mind?

Let's find out.

<hr>

One of the first thing to keep in mind when designing an interface are the basic _principles_ of actually designing an interface. From a theoretical point of view, these are questions you need to ask yourself as the designer. They can include:

* What is the user doing?
* What information is the user looking for? (check the tweet above)
* How will they find the information?

The answer to these questions will be the stepping stone for designing any interface you might have in mind.

On the other hand, when you are designing for a computer screen, you should know your tools. The "tools" in this context are interface elements that are familiar to users, so it is best to be __consistent__ and __predictable__ in their layout.

The interface elements include but not limited to:

* Input controls e.g buttons and text field
* Navigational components e.g search field and pagination
* Informational components e.g tooltips and modal windows

In addition to this you should know how to:

* Group related items
* Order items
* Decorate items
* Align text based on the language (<abbr title="Right to left">_rtl_</abbr> or <abbr title="left to right">_ltr_</abbr>)
* Use white space between items

Take a look at the image below:

![An form layout](https://thepracticaldev.s3.amazonaws.com/i/8nzlyzmdsir83jbi7kma.png)<figcaption>A form layout</figcaption>

From the image its clear that related items like _names_ and _addresses_ are __grouped__ and __ordered__  as it should be. If you should deviate from this approach, you will be __forcing the user to learn how to use this layout which is not a good thing__.

Take a look at the following image and compare it to the previous image:

![An form with a confusing order](https://thepracticaldev.s3.amazonaws.com/i/merm9wiqp02cd5bnfab0.png)<figcaption>A confusing form layout</figcaption>

English language is a _left to right_ (ltr) language, which means the language is written from the left of the paper or screen to the right. When your layout is meant for anyone proficient in reading and writing English they'll expect to read from _left to right_.  When you sacrifice this familiarity for some design aesthetics the user will not be comfortable using the design.

![A confusing comment textarea](https://thepracticaldev.s3.amazonaws.com/i/b1cnefwvgoxl75n815xo.png)<figcaption>A confusing comment form</figcaption>

This also applies to other languages and writing formats (<abbr title="Right to left">_rtl_</abbr> or <abbr title="left to right">_ltr_</abbr>).

When it comes to decoration, the mild use or combination of different _fonts_ and _colors_ is good for aesthetics.

![A CSS form design](https://thepracticaldev.s3.amazonaws.com/i/jngles2uz24omd3juo4w.jpg)<figcaption>&copy; <a href="https://uicookies.com/beautiful-css-forms/">UICOOKIES</a></figcaption>

The lack of _white space_ can make it difficult to work or use a design.

![An improperly aligned form](https://thepracticaldev.s3.amazonaws.com/i/lscqa3ketbej6qcgud9d.png)<figcaption>An improperly aligned form</figcaption>

With this out of the way, the following are considered __best practices__ for designing a user interface ([source](https://www.usability.gov/what-and-why/user-interface-design.html)):

* Keep the interface simple
* Create consistency and use common UI elements
* Be purposeful in page layout
* Strategically use color and texture
* Use typography to create hierarchy and clarity
* Make sure that the system communicates what’s happening
* Think about the defaults

Take a look at the layout that was designed in our post on [introduction to responsive design](https://dev.to/ziizium/introduction-to-responsive-web-design-45g6), it's as simple as it gets.

![An example layout](https://thepracticaldev.s3.amazonaws.com/i/3e4qgsaplhfphcg28jam.png)<figcaption>An example layout</figcaption>

###__Tools for designing user interface__

Designers employ tools that they find comfortable but, listed below are the common tools:

* Sketch
* Adobe XD
* Balsamiq mockup

###__Further reading__

We've merely scratched the surface here, therefore here are the recommended reading on this subject:

* [What is UI Design](https://www.everyinteraction.com/definition/ui-design/)
* [What is User Interface Design](https://www.interaction-design.org/literature/topics/ui-design)
* [User Interface Guidelines](https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb)
* [User Interface Design Basics](https://www.usability.gov/what-and-why/user-interface-design.html)

<hr>

Now that you a have an idea what UI design is all about and the job of a UI designer, __someone will have to ensure that the user has a good experience__ using the UI and that's the job of a _user experience_ designer and the field of UX design. That's next.