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.

Brianna Flavin

Brianna is a content writer for Collegis Education who writes student focused articles on behalf of Rasmussen University. She earned her MFA in poetry and teaches as an adjunct English instructor. She loves to write, teach and talk about the power of effective communication.

female writer

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-acenlogo-accreditation-ccnechart-credential-laddering-associates-bachelors-masters0 Credits90 Credits180 Credits48 CreditsStart HereHIGH SCHOOL GRADSStart HereTRANSFER STUDENTSStart HereSECOND DEGREE PURSUERSEnd HereASSOCIATE’S DEGREEStart HereMASTER’S DEGREEPURSUERSEnd HereBACHELOR’S DEGREEEnd HereMASTER’S DEGREEchart-credential-laddering-associates-bachelors0 CreditsStart HereHIGH SCHOOL GRADSStart HereTRANSFER STUDENTS90 CreditsStart HereSECOND DEGREE PURSUERSEnd HereASSOCIATE'S DEGREE180 CreditsEnd HereBACHELOR'S DEGREEchart-credential-laddering-healthcare-management0 Credits90 Credits180 Credits48 CreditsStart HereHIGH SCHOOL GRADSStart HereTRANSFER STUDENTSStart HereSECOND DEGREE PURSUERSEnd HereASSOCIATE’S DEGREEStart HereMASTER’S DEGREEPURSUERSEnd HereBACHELOR’S DEGREEEnd HereMASTER’S DEGREEchart-credential-laddering-rsb0 CreditsStart HereHIGH SCHOOL GRADSStart HereTRANSFER STUDENTS90 CreditsStart HereSECOND DEGREE PURSUERSEnd HereASSOCIATE'S DEGREE180 CreditsEnd HereBACHELOR'S DEGREEchart-credential-laddering-rsd0 CreditsStart HereHIGH SCHOOL GRADSStart HereTRANSFER STUDENTS91 CreditsStart HereSECOND DEGREE PURSUERSEnd HereASSOCIATE'S DEGREE181 CreditsEnd HereBACHELOR'S DEGREEchart-credential-laddering-rsjs0 CreditsStart HereHIGH SCHOOL GRADSStart HereTRANSFER STUDENTS91 CreditsStart HereSECOND DEGREE PURSUERSEnd HereASSOCIATE'S DEGREE180 CreditsEnd HereBACHELOR'S DEGREEchart-credential-laddering-rsn0 CreditsStart HereHIGH SCHOOL GRADSStart HereTRANSFER STUDENTS91 CreditsStart HereSECOND DEGREE PURSUERSEnd HereASSOCIATE'S DEGREE181 CreditsEnd HereBACHELOR'S DEGREEicon-colored-outline-bankicon-colored-outline-certificateicon-colored-outline-circle-dollar-signicon-colored-outline-folder-searchicon-colored-outline-hand-hearticon-colored-outline-head-blocksicon-colored-outline-head-cogicon-colored-outline-head-hearticon-colored-outline-health-plus-leavesicon-colored-outline-hospitalicon-colored-outline-lifelong-learningicon-colored-outline-light-bulb-analyticsicon-colored-outline-maginify-glassicon-colored-outline-magnifying-glassicon-colored-outline-monitor-healthcareicon-colored-outline-monitor-paper-searchicon-colored-outline-nurse-raysicon-colored-outline-padlock-shieldicon-colored-outline-scalesicon-bankicon-general-charticon-general-connecticon-general-degreeicon-general-discussicon-general-emailicon-general-findicon-general-haticon-general-hearticon-general-laptop-buildingicon-general-laptopicon-general-leadericon-general-mapicon-general-moneyicon-general-paperworkicon-general-peopleicon-general-phoneicon-general-speak-outicon-head-hearticon-mglassicon-scalesrebrand-arrowsicon-colored-advanceicon-colored-arrows-cross-curveicon-colored-briefcase-staricon-colored-buildicon-colored-bulb-analyticsicon-colored-certificateicon-colored-continual-developmenticon-colored-duo-chatboxicon-colored-folder-mortarboardicon-colored-forward-ribbonicon-colored-gears-clockicon-colored-globe-penicon-colored-growthicon-colored-hand-bubbleicon-colored-hand-starsicon-colored-hands-gearicon-colored-head-blocksicon-colored-head-cogicon-colored-laptop-cbe-skyscrapericon-colored-laptop-checkmarkicon-colored-laptop-webpageicon-colored-location-mapicon-colored-location-pinicon-colored-monitor-paper-scanicon-colored-mortarboard-dollaricon-colored-nationalicon-colored-people-chat-bubblesicon-colored-person-cheer-staricon-colored-person-laptop-checkboxesicon-colored-person-screen-instructoricon-colored-person-whiteboardicon-colored-phone-chatboxicon-colored-police-lighticon-colored-prepicon-colored-presentericon-colored-regionalicon-colored-save-timeicon-colored-shirt-haticon-colored-skyscrapericon-colored-stateicon-colored-student-centeredicon-colored-supporticon-colored-world-experienceicon-arrowicon-cameraicon-filtericon-info-circleicon-mail-forwardicon-play-solidicon-quote-mark-lefticon-quote-mark-righticon-share-square-oicon-spinnericon-tagicon-simple-chaticon-simple-desktopicon-simple-findicon-simple-hamburgericon-simple-phoneicon-testimonial-quotesicon-social-facebook-square-coloredicon-social-facebook-squareicon-social-facebookicon-social-google-plus-squareicon-social-google-plusicon-social-instagramicon-social-linkedin-square-coloredicon-social-linkedin-squareicon-social-linkedinicon-social-pinterest-picon-social-twitter-squareicon-social-twittericon-social-youtube-play-coloredicon-social-youtube-playlogo-rasu-horizontalras-logo-flameras-logo-horizontalras-logo-stackedicon-util-checkbox-whiteicon-util-checkboxicon-util-checked-whiteicon-util-checkedicon-util-chevron-downicon-util-chevron-lefticon-util-chevron-righticon-util-chevron-upicon-util-language-switchicon-util-loadingicon-util-open-window-buttonicon-util-open-window-linkicon-util-pdf-buttonicon-util-pdf-linkicon-util-refreshicon-util-x