View all articles

Getting started in UX design illustration

Ask anyone who’s recently browsed design job listings, and they’ll tell you that the demand for UX designers is high. More importantly, the demands made of those designers are constantly shifting in light of new and improved technologies, and in response to changing user needs.

In this article we’re going to explore what UX design is, and how it’s different from user interface (UI) and visual design. To help those deciding whether to embark on the journey of becoming a UX designer, we’ll demystify core UX terminology, introduce some key tools, and point to further reading and resources so you can continue your learning.

1. What is UX Design – and is it for you?

Although the term “user experience” (UX) is quite new, designing user experience is not. For as long as there have been people, there have been products; for as long as there have been products, there have been users; and for as long as there have been users, there has been user experience. In this sense, all design is user experience design. (Ever used a pencil? Pretty good UX.)

But what UX usually refers to in today’s market is digital user experience. That’s to say, how people interact with and feel about digital products — including websites, mobile apps, and electronic devices.

Jennifer Aldrich from Invision has given the following definition of UX design:

“UX design is about having complete understanding of the user. UX designers will conduct intensive user research, craft user personas and conduct performance testing and usability testing to see which designs are most effective at getting a user to their end goal in the most delightful way possible.”

Don Norman, who coined the term “user experience design”, established a UX Architects’ office while he worked at Apple in the 1990s. He explains:

“I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.”

Norman also expresses some reservations about more recent usage of the term, saying that he believes it is again becoming too narrow — focusing on individual websites or apps rather than the whole context in which that particular experience happens.

To understand what he means, consider how Apple have in recent years crafted a user experience that extends far beyond their personal computers. They have harmonised UX across not only their product range, but also their OS, accessories, apps, advertising, website, physical and online stores, and even typography. All of these aspects of the Apple brand enrich any single user interaction with a device or app.

With this in mind, it’s instructive to think of true UX design as taking in as deep and holistic an understanding of the user’s goals as possible.

2. What is the difference between UX and UI (User Interface) Design?

One source of confusion when first looking into UX design is the proliferation of UX-related job titles. Here we’ll explain the difference between UX and User Interface (UI) design, although in reality often a single person will fulfil both of these roles. Even when they are performed by different designers, there is still likely to be a lot of overlap — for example, when it comes to user testing.

Why is there so much specialization?

There are a number of reasons why people have come to specialise as UX, UI, or visual designers. Above all, design has to adapt to technological innovations and enhancements, and respond to changing user demands.

What’s more, it has to do this considerably more quickly than in the past. Twenty years ago, we might have bought a software package and not expected to receive any updates or bug fixes for literally years (ahem Windows 95). Today, many mobile apps push out significant updates, fixes, and improvements every week, if not every day.

Establishing a division of labor between experience design, interface design, and visual design, makes it possible to complete these updates faster, with greater focus, and better expertise.

The need for specialisation is a feature of contemporary technology and culture. The demand for constant product enhancement is only going to increase. If you’re worried about over-specialising, just ensure that you have sound graphic design fundamentals and you will always be able to adapt your skills to a new area if required. (In other words, be a T-shaped designer!)

UX Designer vs UI Designer

UX graphic

User Experience (UX) Designer

UI graphic

User Interface (UI) Designer

– meet with clients and customers
– intensive user research
– specify user goals and personas
– design product to meet user goals
– define User Interface requirements
– design user flow through a site/product
– create wireframes and basic UI specs

– design each user touchpoint
– design User Interface behaviour
– craft visual appearance of interface
– make decisions on colour and typography
– design visual hierarchy
– create enjoyable interactions
– develop and define a consistent visual language

3. What is a good user experience?

When a UX or UI designer begins a project, their overall aim is to create a product which will allow the user to meet their goals as efficiently and enjoyably as possible.

But what features of a user experience design allow this to happen? Peter Morville of Semantic Studios describes how he and his colleagues devised this “UX honeycomb”:

UX Honeycomb

Let’s try to understand these by way of an example. Suppose we are building an app that promises to find you somewhere local to service your bicycle, and then allows you to book an appointment.

UX Wheelie mockup

The qualities of a good user experience of this app might be something like this:

  • Useful: allows the user to successfully find a convenient service point and book an appointment without an hour of Googling and phone calls.
  • Usable: the app itself is intuitive and its functions work properly. When the user taps “find service points near me”, the results are accurate and come back quickly.
  • Findable: the User Interface design allows users to find the buttons and menus they need. When the user needs to cancel an appointment, they don’t have to go through eight screens or send a fax to the shop.
  • Desirable: the app looks and feels cool, which makes the user (and their friends) want to use it. The aesthetic choices resonate with the target market and personas identified during user research (think hipster fonts, not Times New Roman)
  • Accessible: the service is designed with disability needs in mind. The app uses high-contrast colours and legible text sizes in the app, and indicates which service points have disabled access issues.
  • Credible: generates trust between the user, the service, and its partners. The app has a customer service section and a “Help!” button. The checkout screens look professional and don’t ask for more information than necessary.
  • Valuable: offers a valuable enhancement for the user, and a source of monetary or other value for the company or service provider.

4. Core UX & UI terms

Like all professions, UX design comes with its own peculiar set of jargon and acronyms. Here’s our list of 10 core terms. For a longer list, check out this glossary from UX Mastery.

  • User-centered design: a design process where the primary point of reference are user needs (rather than, say, programmer or business needs).
  • User research: Information-gathering techniques used to gain an understanding of user behaviors and requirements. Could include user interviews, which are formal meetings or informal conversations held with a user or group of users, to help the UX designer gain an understanding of their needs and goals.
  • User journey: A description of the steps the user follows to reach their goal when interacting with the product.
  • Usability: How easy it is to learn to interact with the product.
  • Persona: a profile of one of your user groups (e.g. Pat the project manager, Ann the accountant, Rob the receptionist) that identifies their character and expected goals when using your product.
  • Ideation sketches: small, low-detail thumbnails of user touchpoints like websites, apps, and packaging.
  • Wireframe: a rough outline of a webpage or app design. The purpose of a wireframe is to plan layout and visual hierarchy without the distractions of images, color, or typography.
  • Mockup: A picture of the final website, app, or product as it would look – but without any interactions included (this would be a prototype).
  • Prototype: A prototype is a simulation of a final product made for testing. In particular, it tests whether the user’s journey through the app or website is as intended, and whether it allows the user to reach their goal in a satisfactory way.
  • Deliverable: A product you will give to the client. This could be an interim product like a wireframe or a mockup, or it could be the finished item, like a final style guide or full set of app screen designs.

5. Core UX & UI tools

Notebook icon

A nice notebook with squared or dotted paper will allow you to sketch ideas, thumbnails, and brainstorm user personas. (Consider your own user experience of the notebook: it is pleasant to use premium products like Moleskine or Leuchtturm, and this positive relationship with the product encourages you to use it more often. And you’ll look cool in Starbucks.)

Wireframe icon

Wireframing tools: there a lot of packages out there. We suggest starting out by experimenting with inexpensive packages like Balsamiq Mockups, Framebox, and Sketch. If you want to explore more, CreativeBloq has a great list of 20 wireframing tools.

UX Tools icon

Graphic design tools: get familiar with Photoshop and Illustrator – you can try them out with a free trial of Adobe Creative Cloud. Sketch is great for putting together high-fidelity mockups and creating user interface assets like icons and illustrations. You could also experiment with Figma, which is a bit like an in-browser version of Sketch. Also, check out our article on Sketch vs Illustrator!

Collaboration and prototyping icon

Collaboration & prototyping tools: try out Origami Engine, Framer JS, Invision, and Marvel.

UX blogs icon

UX blogs & newsletters are a key means of keeping up with developments in the world of UX Design. For starters, check out Invision Blog, Marvel Blog, The UX Notebook, UX Mastery, and UX Design Weekly. And why not sign up for updates from this blog too?

6. Core reading

UX Book

Steve Krug – Don’t Make Me Think (Revisited). Originally published in 2000, this was reissued a couple of years ago to update it for today’s web and mobile devices. Its author, usability consultant Steve Krug, describes it as a book about “designing great, usable websites”. He applied usability principles to the book itself: it’s short, designed to be read by an executive on a short-haul flight. The title is also Krug’s “first law of usability”: don’t make me think!

UX Book

Donald Norman – The Design of Everyday Things. Earlier in this article, we took a look at Don Norman’s definition of user experience design. This revised edition of his book The Design of Everyday Things looks at how user experience design is part of the design of any effective domestic object. Before becoming a designer, Norman was a cognitive scientist studying human perception, memory, and attention.. Many of the insights in this book are therefore into understanding human psychology, and how design can either work with or against it.

UX Book

Frank Chimero – The Shape of Design. This lovely volume by has recently been reissued in paperback. It is a beautiful presented philosophical essay by multi-disciplinary design Frank Chimero (pronounced Camaro). He writes about how good design is characterised by improvisation between others’ ideas and our own. You can also read the book for free on the website

UX Book

Susan Weinschenk – 100 Things Every Designer Needs to Know about People. This book offers 100 short chapters about aspects of human behaviour that user experience designers should take into account when developing products. These span human perception (especially seeing), reading, memory, thinking, attention, motivation, social interaction, emotions, mistakes, and decisions.

UX Book

Alan Cooper, Robert Reimann, David Cronin, and Christopher Noessel – About Face: The Essentials of Interaction Design. About Face is co-authored by four writers with over a century of experience in design, software engineering, and user experience. It offers a highly practical guide to many UX design processes, including how to research and construct user personas, apply interaction design principles, and design for different user needs.

7. Want to learn more?

This article has offered a basic introduction to UX design — what it is, what good user experience is, as well as some key UX terms, tools, and books. If you want to learn more, video-led courses are available from many online providers, including Coursera, Lynda, and Creativelive.

Here at Designlab, we offer a UX Academy program. Working one-to-one with a design mentor, students receive feedback on a portfolio of UX projects through a dedicated online platform, community critique sessions, and Skype meetings. Find out more!

About Designlab

Designlab teaches you UI/UX design skills through online courses with 1-on-1 mentorship from expert designers.

Get Updates

Be the first to read our new articles on UI/UX design education, career development, and more!

Got it! We'll keep you in the loop.

Get the syllabus & take a tour