What is the difference between UI and UX?

Curious about difference between UI and UX? Let's dive and demystify these design functions. In this post, you will learn more about what each one represents, how they differ from one another, and why it's so important for them to work together in product development.

We will review some of the tools that UI and UX designers use and share a few cool tips and tricks to satisfy your curiosity. Courses on many of theses tools (Figma, Photoshop, Illustrator, Dreamweaver, and Webflow) are available to BYOL members. As a BYOL member, you will also gain access to 30+ courses, enjoy personalized support, earn certificates, and participate in community challenges. Get started here.

If I have enough time left, I will also discuss a crucial philosophical question: What came first: the chicken or the egg? Confused? Don't be.

Follow along and prepare for… well, a great User Experience with the assistance of our blog's awesome User Interface design.

Before anything else, it’s not about you!

Design solves problems. People’s problems. So, it must be human centered. There’s no other way. UI and UX designers have one priority at the top of their work. It’s not about their brilliant ideas, their personal view on subjects, not even their skills or years of experience. It’s all about the user, the individual or group of people that will benefit from the designs and final products.

One more thing that we should see clearly. The wheel was invented to solve a simple problem. The need to move heavy stuff from one point to another, faster and without breaking your back. It was a rational design, made up to save the early user’s time and physical effort.

This first invention led to vehicles and roads, and then to better vehicles and longer roads and… suddenly, that wheel is now responsible for, let’s say: road trips, racing cars, and carpool karaoke.

The users’ emotions and expectations join their needs and desires – the emotional experience adds meaning to the design. UI and UX experts know this and they build their work up from this solid ground.

Don Norman wrote in his book, “The Design of Everyday Things” (if you haven’t read it, do it as soon as you finish this post), that “design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating”.

What is UI design?

UI connects the user to the product - it stands for what you can see and interact with on a screen.

It’s all about visual communication, graphic design, and how a product is developed for optimal interaction and learnability. Its aim is to provide a fast and efficient response, and – let’s not forget – an accessible and memorable experience.

Think about the layout. Combining shapes, colors, fonts, and icons. Managing white space, columns, and margins. Placing appealing call-to-action buttons, drop menus and easy to understand forms. Adding powerful words, sounds, images, and animations. UI is for design as Hollywood is for movies: the lights, cameras, special effects, the action!

Remember that users have varying levels of knowledge and skills, context, and goals. Less isn’t always more and UI and UX designers must adapt their planning and decisions for each new project.

I’ll give you three interface examples, from scary-confusing to one-touch solutions, with something in the middle to ease your mind.

If you’re not a pilot, this scene is likely overwhelming, right? How do all of those displays, buttons and switches make sense? Are they easy to interact with or provide efficiency? Notice that some of the key visual design principles are observed in this interface, such as hierarchy, movement, proportion, or unity, among others. The UI designers behind this console had to make sure that all elements and information were easy to understand and handle, allowing for fast and safe decisions and, ultimately, ensuring a stress-free trip for both crew and passengers.

Timeout #1

What are these “design principles”? There are a series of visual rules that you can apply to design in order to enhance your work’s usability and aesthetic appeal. Mastering these principles will also support your design thinking and lead you to better solutions.

Spotify Desktop Interface

This one should be more familiar and comfortable for you. Spotify’s UI team developed a layout that presents users with many different options and functionalities on one screen. You can browse through artists, music genres, playlists, podcasts, play songs, adjust volume, connect to devices, and it all makes sense.

Look at all the principles applied to this design. The distinctive icons and shapes help users to quickly learn and adapt to the interface, so they can sit right back and enjoy the music.

Coffee Machine

One button, one lever, and that’s it! Warm, creamy, smooth coffee. Chill out, not a single worry in the world for five minutes. And yes, sometimes less is more.

What is UX design?

The UX designer acts as a scientist who studies the user’s thoughts, actions, and emotions. We can even frame this job within the scientific method, as shown on the image below.

The easiest way to show you how UX design works is by setting this example: writing this blog post. Curious, already? Great!

As a UX designer, I begin by asking questions, such as:

1. Who will be reading this post?

2. Why will they read it?

3. How will they read it?

The answers to these questions will define:

1. My end users (ex: readers with different backgrounds and knowledge, students, entry-level UX/UI designers, people who are interested in design and technology)

2. Their goals (ex: understanding the concepts of UI and UX, knowing their differences and common ground, defining a career path, knowing some more about these topics)

3. The context (ex: will be reading online, via mobile phone, tablet, or desktop, while commuting or at the home at the end of the day)

After that, I do some research: read books and articles, review personal notes, check out other blog posts about UI and UX, as well as scroll through comments and feedback that users share with the authors.

With these two steps completed, I have a clear image that will support the writing.

From there, I shift into the role of copywriter, creating a first draft that I believe will meet the needs and goals of my end users – you!

Fun, isn’t it?

When I’m done with reviewing my first draft, I jump back into being a UX designer. Through this lens, I read it to a small audience that fits the profile, or persona, that my early steps provided. From their feedback, I make the necessary updates and fixes to the text and – you can’t run from it – it’s time to send it up to Design and Development for editing and publishing. I will work closely with them until the words are out there on your screen, all accessible and bright for you to read.

Some may think that the UX part ends here. Many do - don’t worry if you did. I’m happy to say it keeps on going and it’s time to get that lab coat back.

From here, I now have a look at your behavior and feelings – and that’s why having feedback from you is so valuable to me. I’ll try to understand how much time was spent on reading, how many users read it all the way through, if they checked out any suggested information, shared the post with other people, and carefully consider any thoughts, questions and comments left on the page.

This knowledge may lead me to an iteration – going back a few steps to adjust, update or fix some things that did not completely align with the readers’ needs or simply disturbed the… can you guess? Yes, the User Experience!

With this new step concluded, it’s time to update the post and keep an eye on your feedback – being ready for future iterations or celebrating with all of you at the finish line!

Want to dive further into UI and UX theory? You can go deeper in my How to Become a UX Designer course.

How do UI and UX work together?

The key word is “together”.

Can you deliver a product or a service without involving UX? Sure, you can, it’s been done for ages. However, designing without an UX influence is strongly based on instinct.. It’s quite easy to stumble upon many assumptions that may not suit the end user at all.

On the other hand, can a UX designer deliver that same product or service without the help of UI? I’m sure they can, and I know it’s been done many times. Keep in mind that knowing what your end user needs doesn’t mean that you understand exactly how to translate these into a real interaction.

Timeout #2

Don’t get me wrong, the concepts of UI and UX are young when you consider the History of Design and people often blend them together as one single discipline. Depending on your knowledge, skills and even the place where you work, you may find a balance between them. In a small agency or studio, you may act as both UI and UX designer in product development.

This may not be as common in larger companies that usually have specialized teams and solid work strategies, where you can find your spot and grow as a specialist in a particular area.

UI and UX should work as close as wallpaper and wall. Yes, they work with different information, methods, and use diverse tools, but they share a common purpose. By working as one, it is certain that everyone moves in the same direction. This positive synergy affects the whole project. Some benefits of UI designers and UX designers collaborating together:

1. Allows for reasonable and informed design decisions

2. Provides focus on a specific audience

3. Improves communication

4. Offers different perspectives and can prevent bias

5. Speeds up workflows

What tools do UI and UX designers use?

Right now, if you are thinking “I want to be a UX Designer!” or “I want to be a UI Designer!” or maybe “Hey, I’d like to try both!” your next thought may be: “Which tools should I learn?”

I’ll start with the most important tool of all, and it’s the best because it’s free and so easy to learn.

Empathy in UI & UX Designer

Empathy must be at the top of your toolbox for both UX design and UI design.

I’m not talking (well, writing) about stuff from motivational GIFs that land on your phone or that “Hope you get well” postcard you send to someone at the hospital. True empathy lies one level above the “walk a mile in my shoes” cliché. Marie Miyashiro says that “empathetic connection is built around guessing someone’s feelings and needs, rather than knowing them”. It may be like asking yourself the question: “in this context, how would I feel if this happened to me?” and answering out loud in front of a mirror.

UI tools

Since UI deals with visual communication, UI designers will often work with tools that help them build a digital product. This can range from sketching on paper to creating usable wireframes to building final high-fidelity prototypes that can be tested by end users before moving the project to development.

1. Adobe XD and Figma are two of leading tools in the UI/UX industry, offering a wide range of features for easily creating wireframes and prototypes that will amaze stakeholders and users. Edit, share, and handoff with just a few clicks can boost your workflow to Pro level in no time.

2. Graphic design tools like Adobe Photoshop, Illustrator or After Effects, among many others, will be an amazing assist on adding vector graphics, imagery, and impactful animations to your designs.

3. Having a basic understanding of Web Development is another asset to your toolbox. You will find tools like Adobe Dreamweaver or Webflow that enable web design are useful for entering and editing some code, allowing you to observe how things work up ahead.

Didn’t imagine there were so many options available? Bring Your Own Laptop offers 30+ courses covering UI/UX, graphic design, web design, and more.

UX tools

UX design works with people by observing how they live, think, feel, and behave. There are great UX Research tools online that offer a deep understanding of user behavior – providing amazing details that can change the way we look at digital product development.

1. Tools like Maze or Loop11 are great for product research. They offer remote or hands-on usability studies resources, collect insights, and generate reports. They also interact with UI tools like Adobe XD, Figma, and others.

2. Other tools like Survey Monkey or Google Forms offer feedback gathering that is vital for your UX research tasks, including helping you define a user persona or iterate on your project during development or post-launch.

3. Project Management and collaboration tools like Miro or Whimsical also have a special place in the UX designer’s toolbox. They speed up your workflow by creating online environments where brainstorming sessions happen in real-time. You can share strategy, user flows, task flows, and journey maps with your team and exchange feedback anytime.

These are just the tip of the iceberg. Keep in mind that as you approach each project, you should consider both your end user’s and team’s needs to pick the right tool.

UI and UX - It’s the world out there!

So, remember the egg and the chicken thing at the beginning? Hope you do! Which comes first? Is it the egg? Is it the chicken? Is it even important? Let me know which answer you find to be the right one and remember that it isn’t any different with UI and UX.

From airplane cockpits to coffee machines, from public service websites to streaming apps, the whole world needs UI and UX - someone to listen to who we are and what we need. All things in life should be useful, usable, and fun.

They work on separate floors, but inside the same building. UX sets the foundations and UI delivers the final product, that sparkling piece of design that will change our end user’s lives.

Isn’t that an awesome idea?

Doing what you love while making a difference!

What’s Next?

Want to know even more about UX and UI? When you become a BYOL member, you gain access to my 30+ courses on Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Get started here.

See you in class! - Dan