Business

Getting Started in User Interface Design

And lots of freebies for you to download for UI design.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

So you’re thinking you might like to try designing a user interface? You’ve found yourself in the right place.

In this article, we’re going to look at what exactly user interface design is, what it entails, and how you can get started with designing your very first user interface.

Image: 

About UI Design

What is UI design?

Put simply, user interface design (often abbreviated to UI design) is defining the look and feel of an interactive product. Let’s take Facebook, for example. A UI designer at Facebook would help determine the look of the website and/or mobile apps. This includes colors, styles, icons, and other visual elements.

I’ve often heard the term UX – is this the same as UI?

UX is short for user experience. This differs from UI in that it is about defining the layout and interactivity of a website or app. UX designers use knowledge and data on how humans interact with interfaces as a basis for making design decisions. In simple terms, UX is how it works, UI is how it looks.

The term ‘UI/UX designer’ is often used. This refers to a designer who has knowledge and experience with both aspects of the design process.

The Basics

There are a number of ways to get started learning user interface design. There are some great free online courses like this one from InVision.

It’s a good idea to focus on one particular platform to begin with. The three main platforms are the web, iOS, and Android. Pick one of these and go from there. Each one will help you pick up the basics of user interface design. For iOS and Android, reading the companies user interface guidelines is a great way to get started with learning about the platforms, and what it takes to design an app. In these, you will find details on sizing, dimensions, styles, and colors. They are quite detailed so don’t feel the need to read every section. Have a run through and pick out sections of interest. For the sake of this article, we will be focusing mainly on mobile user interface design as a starting point.

Links to user interface guidelines:

Android / iOS / (Bonus Reading)


Software

Of course, you’re going to need a way to design your first user interface. Luckily, there are some really great options out there, and it’s a case of seeing which works best for you. Listed below are a few options with benefits of each listed below. All cost under $100.

Affinity Designer

  • Mac and Windows
  • Under $50
  • No subscription
  • Traditional layout/functionality

Sketch

  • Mac only
  • $99
  • No subscription

Adobe Photoshop

  • Mac and Windows
  • Monthly subscription (from $10/month)
  • Traditional layout/functionality

Figma

  • All operating systems
  • Can be used in-browser
  • Free
  • Innovative features

Don’t know which to choose? I use Figma.


Designing your first user interface

Now that you’ve grasped some of the basics and found yourself an application to design in, let’s take a look at some tips for how to design your first user interface.

Download some free icons

Image: Iconic

Almost every user interface will need to include some icons. Take a look on the Noun Project, find yourself some icon sets you like and download them to your computer.

Get familiar with default dimensions

When setting up your design, you need to use the correct dimensions. The iPhone 7, for example, is 375 x 667 points. Many softwares will come included with this information.

Also get familiar with default font sizes, icon sizes, and elements sizes. This all might seem daunting at first, but it’s all included in the user interface guidelines linked above and there’s no need to remember them – just bookmark the page and use it as a reference when you need.

Get inspired

There’s no shame in copying other’s work when you are getting started. Just be sure not to publicise it or credit it as your own. It’s a really great way of learning the ins and outs of user interface design, and beginning to discover styles and tips.

Sources for inspiration


Read around the subject

There’s some really great content and tutorials out there to get started and learn new aspects of user interface design. A simple Google search for ‘user interface design tutorials’ returns some excellent resources.

Content sources:

Download some freebies

Downloading other designer’s UI files is a great way to look at how an interface is built. Thankfully there are some great sites which allow you to do just this. See how they structure their files, apply styles, and create certain effects and layouts.


Conclusion

Now more than ever is a great time to get started with user interface design. There are some brilliant resources available, software is better and cheaper than it’s ever been, and more and more companies are being formed every day, knowing design will form a key part of their success. Be sure not to be disheartened along the way. There are so many great personalities and talented designers who will help you along the way in communities such as Behance and Dribbble. Even after over nearly eight years in the industry, I see examples of work which are so perfect it’s hard to fathom. Take one step at a time, keep learning, and enjoy the ride!


About the Author Ben Bate

I'm Ben, a Product Designer from the United Kingdom. You can visit my website or follow me on Dribbble.