UI Design is not UX Design

Featured article thumbnail

What is UI Design?

User Interface design is the visual arrangement of elements within a browser or software application to facilitate a comfortable user experience.

Ever heard of the phrase ‘don’t judge a book by its cover’? Yeah, UI Design is the reverse of that. The better your site or app looks and functions, the better the UI design is.

User Experience design and User Interface design aren’t the same but they work hand-in-hand to create a desirable environment for the end user.

The importance of UI Design

Picture this, you’re googling ‘how to grow your vegetables’ and you come across a farmer’s blog that covers everything from types of soil to the length of time each vegetable takes to grow. You’re excited to explore this wealth of knowledge but there’s one big issue, the site looks hideous.

Sure, the information is good, it might even be the best around, but if the website makes the reading experience unbearable, the UI design is a failure.

Airfocus blog's user interface makes reading enjoyable

UI Design is not UX Design

People often get UI and UX design confused with each other and that’s understandable considering how interconnected the two fields are.

A simple way of looking at their relationship is that UX design is the ‘why’ while UI design is the ‘how’.

UX Designer: 'Why is this element here? Why would the user click this button?'

UI Designer: 'How does this font look? How much white space should I apply?'

The UX design utilises research and data analysis to make informed decisions on how to improve the end user’s navigation through the interface.

The UI designer builds upon the info gathered by the UX designer and converts it into a visually pleasing and functional website or application for the end user.

A UI designer may know some UX design but, they are separate jobs.

Related: 6 Profitable Design Niches for Freelancers in 2021

Examples of UI Design

Are you a visual learner? Here are a few examples of UI design:

Food delivery UI Kit by Dosamarvis on Figma Community

Marvie iOS app UI kit by blackhead studio

How can I learn UI Design?

Learning UI Design isn’t hard. You just need dedication, time and practice. A good graphic design foundation is also recommended. UI design focuses on using elements such as text, images and shapes to create unique layouts that allow users to easily digest the information in front of them.

Like with other graphic design fields, it’s not about watching hundreds of tutorials on YouTube or buying premium courses, but take time out to practise.

Related: Basic graphic design terms for non-designers

The UI Designers' Toolkit

Some common tools used by UI Designers include:

  • Figma (Alternatives: Adobe XD or Penpot)
  • InvisionApp
  • A sketchbook and pen (Or Microsoft OneNote)
  • Web Content Accessibility Guidelines (WCAG)
  • Adobe Photoshop (or GIMP)
  • Adobe Illustrator (or Inkscape)

Of course, there are way more tools out there out there but my intention is just to get you on the right track.

The "Tutorial Limbo"

The phenomenon where someone consumes hundreds and hundreds of hours of online tutorials but never actually practises.

A common example of tutorial limbo is somebody who watches YouTube videos on graphic design but never launches Photoshop or someone who signs up for paid coding lessons but never downloads Visual Studio Code.

Watching lessons without practising is a waste of time. Sit down, brew a cup of tea, open up the program and ‘JUST DO IT’. It doesn’t matter if your first design looks like crap because that’s the point. It’s supposed to look like crap at first. The more you practise, the more you’ll improve.


I used to be in the tutorial limbo. I would spend tens of hours just watching YouTube videos from Tutvid, Spoon Graphics and Tasty Tuts. Don’t get me wrong, these channels are amazing but tutorials without practice will get you nowhere.

Black man with afro folding arms. Don't get trapped in UI design "Tutorial Limbo"
Don't get trapped in "Tutorial Limbo"

The "I don't know what to make"  excuse

I understand this one, I really do. Inspiration doesn't always come to us and it can get very frustrating at times.  

However, making excuses like "I don't know what to make" or "I'm not skilled enough" is not only self-destructive but it also prevents you from leaving the tutorial limbo.

Conclusion

To summarise, User Interface Design and User Experience Design are not the same fields but they are closely related. UI and UX designers work closely together to use research and statistics to create beautiful but functional interfaces for end users.

Hopefully, this article did a great job of explaining the difference between UI Design and UX Design, the importance of UI Design and common tools used in the industry.

Further reading

LET'S COLLABORATE

Got a project? We'd love to hear about it

wwworkshop believes in small businesses just like you, so no idea is too wacky or inconceivable for us. Send us a message so we can talk about how wwworkshop can support your vision with graphic design and web development services.

RADA website redesign