UX vs. UI: The Differences in This Dynamic Duo

illustration of mobile phone and wireframes

                                                                                                                                                                    There’s good reason for web design and web development to be such a hot topic. Think about everything you do online. Shopping, reading, catching up on the news, entertainment, connecting with friends—the list goes on. These activities make up a big portion of our daily lives and require thoughtful designs and layouts to make sure we keep coming back for more. 

With an onslaught of phone apps, websites that adapt to the dimensions of your device, and a host of social networks and interactive ways to communicate, the internet is easier to access than ever before. Users can order food, book tickets or purchase products with a few taps on their touch screens.

With that in mind, businesses and organizations across the spectrum are realizing that their product or service needs to be easy to learn about, access or use online in order to stay competitive. 

This obsession with apps and mobile internet use has paved the way for a whole new career niche in web design. Today, user experience (UX) and user interface (UI) design are becoming top priorities.

You’ve probably heard these terms used in similar conversations, but do you really understand the distinction of UX versus UI?

UX vs. UI: How are they different?

With such similar abbreviations, many people assume the terms UX and UI are interchangeable. But that’s not exactly the case.

“UX design is the whole, and UI design is a part of UX design,” says Rachel Rose, UX designer at Tuft & Needle. She explains that UX sees the full project and understands each step, including business objectives, problem statements, user research, designing flows and interfaces, working with development, and iterating post-launch and testing.

“UI is the visual styling of the content, making it a cohesive, clean package,” Rose says. “There are places where you could technically just focus on one or the other, but most of the time they overlap.”

UX and UI are different concepts that both play critical roles when building a new app or website. It’s important to understand that they are not competing concepts; instead, they go hand in hand in creating intuitive, user-friendly experiences.

What is user experience (UX) design?

The goal of UX design is to promote a positive perception toward a product, app or website. UX designers have failed if a user walks away feeling frustrated or confused after interacting with an app or website. The way to avoid this is to create an experience that’s as simple, seamless and satisfying as possible.

Great UX designers can predict what the user will think, feel and do in order to create an intuitive experience. In this way, a UX designer can have a completely different kind of job depending on their project or product. Websites, video games, a nice pair of headphones—practically any product or platform that involves user interaction calls for UX design.

Rose’s day usually involves user research, usability studies, collaboration with copywriting and development teams, and designing interfaces and user flows. Freelance UX designer Che Harvey says that while he uses the title “UX designer,” the reality is a title like “digital product designer” may better encapsulate his role.

“I like this term because I iteratively create solutions to user needs through research and testing—and the result is a product,” Harvey says. “Design follows a process, so depending on where the team is in the design cycle, my tasks will change. That said, I do spend a lot of my time capturing the trove of knowledge and expertise that is tucked inside stakeholders’ heads.”

Harvey runs design workshops and conducts and synthesizes user interviews to gather that valuable information. Without these insights, the quality of the final product can suffer.

“I really enjoy the process of understanding who our customer is and how they interact with our site,” Rose says. “Listening to real-life customers and then iterating on design to best serve them is very rewarding.”

What is user interface (UI) design?

If UX is about how users will interact with a product’s impact, aesthetic and functionality, UI focuses in on the specific elements that make up a product (e.g., colors, images, buttons, etc.). When UX designers make a plan for the user experience on say, a website, UI designers could spend their time making sure that visitors who want to find a product page and buy something can navigate there without even thinking twice.

Once the vision for the user experience is created, the user interface designer can determine the details to help elicit the preferred user experience. “I spend most of my time documenting UI changes for our developers,” says Blair McKee of Constellix.

“It’s usually not as simple as ‘Add a button here’ or ‘Change a color.’ Most times, I have to inspect the existing code and figure out how to implement the changes I want without a major rewrite or messing up other instances of that element on other screens,” McKee explains. This part of the work can be very technical.

But the other side of the coin is a little more abstract and intuitive—user testing. McKee says it’s fascinating to watch people use a product and discuss their process, why they made certain decisions, what makes them uncomfortable and what they feel drawn to. “It’s even better when you have a group of test subjects that have no previous experience or aren’t in the same industry as the product.”

Let’s use a real-life example to bring it home. Think of your favorite place to shop online. The UI is the overall layout, the color of the buttons, the ability to filter by product or price, etc. The UX is the delightful experience of finding what you were looking for quickly and receiving it the following day. Both of these elements encourage you to return to that site in the future.

How do you decide between UX and UI?

As you learn UX and UI, you might gravitate closer to one specialty. Alena Karpava, UX designer at ScienceSoft, says UX is a great direction for people who love continuous learning, lots of collaboration and incorporating different opinions into their work. That, plus an overall passion for user-oriented experiences.

“If you feel more into fascinating users with intuitive and beautifully designed interfaces, consider focusing on UI,” Karpava says.

But whichever way you lean, our experts agree—you shouldn’t limit yourself to UX or UI exclusively. “Try both, be great at both,” McKee says. “They can’t exist without each other. Even if you only design UI, you need a UX mindset to predict what your user will want to do. And UX pros need UI so they can understand limitations of design.”

“I would tell someone who is trying to decide between a career in UI and UX to take a deep breath and relax!” Harvey says. “When someone is just starting out, they will be exposed to both sides anyway, and their natural reaction to tasks will help them pick the side of coin that they want to dig deeper into.”

UX, UI and you

One thing that will become clear as you further explore the worlds of UX and UI is that there’s a nearly limitless range of design solutions and possibilities available. To narrow it down, you’ll need a unique mix of skills and lenses to view the world with.

“To get through the challenge of solving people’s problems, to deliver human-centered designs, you should be a psychologist, an analyst and an engineer all at once,” Karpava says. “In time, finding elegant solutions becomes not just a work task but a life philosophy.”

If you can see yourself in that description, maybe a career in UX or UI would be the ideal, elegant solution for your own work life.

A Graphic Design degree can help you take the first step toward experimenting with both of these fascinating specialties. But that’s not the only avenue available to you. Learn more about your options in our article, “What Can You Do with a Graphic Design Degree?

EDITOR’S NOTE: This article was originally published in 2015. It has since been updated to include information relevant to 2019.

About the author

Brianna Flavin

Brianna is a senior content manager who writes student-focused articles for Rasmussen University. She holds an MFA in poetry and worked as an English Professor before diving into the world of online content. 

Related Content

Related Content

This piece of ad content was created by Rasmussen University to support its educational programs. Rasmussen University may not prepare students for all positions featured within this content. Please visit www.rasmussen.edu/degrees for a list of programs offered. External links provided on rasmussen.edu are for reference only. Rasmussen University does not guarantee, approve, control, or specifically endorse the information or products available on websites linked to, and is not endorsed by website owners, authors and/or organizations referenced. Rasmussen University is accredited by the Higher Learning Commission, an institutional accreditation agency recognized by the U.S. Department of Education.

logo-accreditation-acen logo-accreditation-ccne chart-credential-laddering-associates-bachelors-masters 0 Credits 90 Credits 180 Credits 48 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE Start Here MASTER'S DEGREE PURSUERS End Here BACHELOR'S DEGREE End Here MASTER'S DEGREE chart-credential-laddering-associates-bachelors 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 90 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-msn chart-credential-laddering-nursing-programs chart-credential-laddering-nursing DNP MSN RN to BSN LPN to RN Bridge Accelerated BSN Professional Nursing ADN Practical Nursing Diploma Pre-Licensure Post-Licensure icon-colored-outline-bank icon-colored-outline-certificate icon-colored-outline-circle-dollar-sign icon-colored-outline-folder-search icon-colored-outline-hand-heart icon-colored-outline-head-blocks icon-colored-outline-head-cog icon-colored-outline-head-heart icon-colored-outline-health-plus-leaves icon-colored-outline-hospital icon-colored-outline-lifelong-learning icon-colored-outline-light-bulb-analytics icon-colored-outline-location-pin icon-colored-outline-magnifying-glass icon-colored-outline-monitor-healthcare icon-colored-outline-monitor-paper-search icon-colored-outline-nurse-rays icon-colored-outline-padlock-shield icon-colored-outline-person-presenter-screen icon-colored-outline-scales ras-logo-flame ras-logo-horizontal ras-logo-stacked icon-colored-advance icon-colored-arrows-cross-curve icon-colored-briefcase-star icon-colored-build icon-colored-bulb-analytics icon-colored-certificate icon-colored-continual-development icon-colored-duo-chatbox icon-colored-folder-mortarboard icon-colored-forward-ribbon icon-colored-gears-clock icon-colored-globe-pen icon-colored-growth icon-colored-hand-bubble icon-colored-hand-stars icon-colored-hands-gear icon-colored-head-blocks icon-colored-head-cog icon-colored-health-plus-leaves icon-colored-hospital-building icon-colored-laptop-cbe-skyscraper icon-colored-laptop-checkmark icon-colored-laptop-webpage icon-colored-location-map icon-colored-location-pin icon-colored-monitor-paper-scan icon-colored-mortarboard-dollar icon-colored-national icon-colored-people-chat-bubbles icon-colored-person-cheer-star icon-colored-person-laptop-checkboxes icon-colored-person-screen-instructor icon-colored-person-whiteboard icon-colored-phone-chatbox icon-colored-police-light icon-colored-prep icon-colored-presenter icon-colored-regional icon-colored-save-time icon-colored-shirt-hat icon-colored-skyscraper icon-colored-state icon-colored-student-centered icon-colored-support icon-colored-world-experience icon-triangle-arrow-up-plant icon-triangle-calendar-pencil icon-triangle-clock-rotating-arrows icon-triangle-display-gears icon-triangle-hand-right-speech-bubble icon-triangle-laptop-coding-brackets icon-triangle-mortarboard icon-triangle-paper-ribbon icon-triangle-person-cheer-star icon-triangle-person-juggle icon-triangle-triple-people-chat-bubble icon-modality-campus icon-modality-field icon-modality-online icon-modality-residential icon-arrow icon-bank icon-camera icon-filter icon-general-chart icon-general-connect icon-general-degree icon-general-discuss icon-general-email icon-general-find icon-general-hat icon-general-heart icon-general-laptop-building icon-general-laptop icon-general-leader icon-general-map icon-general-money icon-general-paperwork icon-general-people icon-general-phone icon-general-speak-out icon-head-heart icon-info-circle icon-mail-forward icon-mglass icon-play-solid icon-quote-mark-left icon-quote-mark-right icon-scales icon-share-square-o icon-simple-chat icon-simple-desktop icon-simple-find icon-simple-hamburger icon-simple-phone icon-spinner icon-tag icon-testimonial-quotes icon-util-checkbox-white icon-util-checkbox icon-util-checked-white icon-util-checked icon-util-chevron-down icon-util-chevron-left icon-util-chevron-right icon-util-chevron-up icon-util-circle-arrow-down icon-util-circle-dot icon-util-language-switch icon-util-loading icon-util-open-window-link icon-util-pdf-link icon-util-refresh icon-util-x rebrand-arrows icon-social-facebook-colored icon-social-facebook-square-colored icon-social-facebook-square icon-social-facebook icon-social-google-plus-square icon-social-google-plus icon-social-instagram-colored icon-social-instagram icon-social-linkedin-square-colored icon-social-linkedin-square icon-social-linkedin icon-social-pinterest-p-colored icon-social-pinterest-p icon-social-twitter-colored icon-social-twitter-square icon-social-twitter icon-social-youtube-play-colored icon-social-youtube-play graduate-cap-star-coin hand-coin hand-heart nurse-stethoscope-rays card-send-smile person-yoga-pose suitcase-star