UI and UX - Understanding Different Design Principles

Every time you open your phone, computer, or laptop, you’re greeted with an interface through which to use the programing of the device. The interface might be for a specific application on the device, or an operating system that lets you work with the device as a whole.

We’ve gotten so used to the everyday nature of our lives with computers, that we’ve easily forgotten that each app, each icon, each button, and each click didn’t just magically appear. They were all created by deliberate design.

The design and concepts behind the design you see is part of a growing set of career paths called User Interface (UI) and User Experience (UX) design.

While the names sound similar, they each play distinct yet complementary roles in shaping how you experience the digital landscape.

We talked with Nick Adkins, instructor at the UC San Diego Division of Extended Studies User Experience (UX) Design Program about the relationship between UI and UX, how they’re different, how they work together, and what might be helpful to understand for somebody considering a career in that direction.

Understanding the Difference Between UI and UX

First off, let’s get the definitions out of the way. What’s the difference between UI and UX?

Most interface design starts with user experience (UX) research and design.

“You’re looking to understand the audience you're targeting and what’s going to create the best experience of your application for them,” shared Adkins.

User experience research will be looking into everything from the physical and cognitive needs of their target audience, to the aesthetics that might be most resonant and pleasing to them. They are literally developing a whole framework for how the user will experience the application.

One design that really flows for one user might not be intuitive for the next, so knowing what is most likely to work with your intended audience is crucial for good design.

Once the UX team feels like they have a framework that will create the desired experience, they then turn the work over to the UI team to implement the plan.

"UI stands for user interface," said Adkins. "It focuses on designing the graphical and interactive elements of the applications—the buttons, the menus, the navigation systems, and any other visual element.”

Essentially UI design is what you—the user—sees and interacts with when using an application or program.

Adkins shares examples from his own experience of the difference between UI and UX design.

“For example, if you have a web site that caters to an older audience, things like having a more defined check out structure and easy to understand navigation might be a better user experience for those types of users,” said Adkins.

“Versus if you're selling to a younger audience, you might want a one page checkout where everything's in one place. Younger users tend to understand that better and be more comfortable with those types of interfaces,” Adkins continued.

Interplay and Collaboration of UX and UI

The ideal relationship between UX and UI is a symbiotic one. If done right, they work hand in hand throughout the design process.

“As a user experience designer, I do research to understand what my target audience needs and come up with a framework or representation of what we think would be best based on our research,” said Adkins. “Then you're working with the user interface team to understand how to implement the actual visual design on the application so the two will work together.”

UX research identifies user needs and preferences and uses tools like wireframing and prototyping to give the UI team a sense of what they would like to see.

From there the UI brings it to life. The UI designers will translate the UX concepts into design elements that ensure visual and functional coherence.

“For instance, UX will decide on the color scheme for the application because it goes over really well with this audience they're targeting,’” said Adkins. “Then the user interface designers would implement that. They’ll decide to put the accent color on the menus and the bright primary color on the call-to-action button. There might be some wireframing and prototyping to share ideas, but when you get to the visual design, the UI designer is actually responsible for that part.”

Navigating the UI and UX Design Landscape

The other key thing to understand about UI and UX design is that none of this just happens based on the innate instincts and skills of the designers. There’s a structured approach, from conception to implementation to bring the best theory of design forward.

“It really revolves around first doing your research,” said Adkins. “It’s having the user experience designers go in and understand what is the need of the audience? Who are we targeting?”

In addition to the research done by the UX team to understand the needs and what will appeal to the target audience, there’s also a number of additional steps such as wireframing, developing prototypes, and conducting in-house quality assurance (QA) testing to make sure the application and design are coming together as planned.

“You could go through five or six designs before you even come up with something that actually fits,” said Adkins.

Even after the design goes live, there can be additional testing to affirm that the experience that’s been designed leads to the outcomes the team is hoping for. Programmers present different live users with different experiences to see which ones get the best results.

The process is very iterative, with continuous refinement based on feedback and analyzing the data of what users are doing on the application.

Examples of Excellent UI and UX Design

When asked for real-world examples of exemplary UI and UX design Adkins cited Instagram as a prime example.

“Everything on the application is labeled and easy to find,” said Adkins. “When you see the plus sign button at the bottom middle, you understand that’s for creating a new post. You can scroll through other people’s posts just by using your thumb.”

Other functionalities—such as carousel posts for multiple pictures and being suggested other content you might find interesting—all factor into the over user interface and user experience design.

Just as importantly, anybody who’s been using social media over the years knows it's also been a process of constant iteration to improve the experience and design.

“If you look back at what they had before and what they have now it’s just mind-blowing how different it is. It's evolved so much,” said Adkins.

Trends in UX and UI Design

Like all things, UX and UI are also evolving to fit the changing needs of users and the updated dynamics of technology.

Adkins underscored the growing importance of accessibility in UI and UX design. Ideas like inclusivity and accessibility are no longer afterthoughts. They’re fundamental aspects of design ethics, with legal implications for non-compliance.

“Being able to have screen readers read your application for people that need that type of accessibility and enhancement is a huge thing in today's web and application world,” said Adkins. “We've even seen an uptick in sites being sued because they're not meeting the accessibility standards. It takes some time and effort to update those types of things so it's really important to have that in mind from the beginning.“

Another trend in UI and UX design is responsive design, which means having an application that will work on any device.

“Responsive design is always a huge thing because of all the different types and sizes of screens that we use today,” said Adkins. “You want your application to look good whether they’re looking at it on a big computer monitor or small phone screen.”

Designing back office systems is another burgeoning aspect of the UI and UX design field.

”You see a lot of this within the medical industry,” said Adkins. “They have to fill out a lot of forms and It's very crucial for it to all be done quickly and accurately. It takes a lot of interface designing and user experience to make sure that it all works the way the users need it to.”

Current Challenges in UX and UI Design

Like every other industry, UX and UI are also experiencing challenges as it adapts to new times and technology.

Automated design tools, AI-driven chatbots, and artificial intelligence are reshaping the design landscape.

“AI has been able to do so much,” said Adkins. “The AI tools can help you understand what needs to be updated for accessibility on your site, and even write the code you’d need for these updates. But those tools aren’t always reliable and can create more work if you’re not careful.”

Adkins also remarks on how AI has been integrated into UX design with things like chatbots for help on websites.

“You've seen companies integrating AI into their chatbots where you ask them a question and they'll come up with the response for you by knowing all their documentation,” shared Adkins. “Those types of features are really good from a user experience standpoint.”

UI and UX Career Trajectories

For those considering a career switch into UX or UI design, there are many possible paths you can go. Knowing the range of options available can be helpful for aspiring UX and UI designers.

”On the UX side there are many different roles for research, testing, and design, as well as overall leadership and direction of the process,” said Adkins. “UX can tend to best suit ‘big picture’ thinkers and designers.”

On the UI side, Adkins shares that there is often a bifurcation of roles.

“On the UI side, what I often see is people either start learning code and doing more work involving that, or focus more on the direct visual interface design.”

Adkins stresses that learning a basic level of HTML and CSS will help you immensely in your UI journey.

Salary expectations can vary widely for UI and UX designers, depending on experience level, responsibility, location, and industry.

Entry level salaries for UI and UX designers tend to fall in the low-$70k/year range. Salaries for upper level and more senior designers are closer to $120k/year or more. The average seems to be in the high $90k/year to low $100k/year range.

Adkins also emphasized the importance of versatility and continuous learning in the field as needs are always changing and expanding.

“So many industries need some sort of application built for them,” he shared. “It can be in any industry from an e-commerce company to a medical industry, where they need to create some sort of application for their users as well as maintain it and update it. Having that user experience and user interface designer perspective is going to be crucial in those types of fields.”

Is a Career in UX or UI Design Right for You?

If you’re looking to explore a career field that asks you to use your creative and analytical skills to create helpful and appealing technical applications, UX and UI design might be the right future field for you.

To learn more, view the UC San Diego Division of Extended Studies User Experience (UX) Design Program page.