UX and UI: How Different Designers Come Together
We are guided by UX, we are moved by UI, and we can appreciate them both - but what are they? How do they relate?
Let’s break this down.
UX stands for user experience. UX is “the process design teams use to create products that provide meaningful and relevant experiences to others”, according to the Interaction Design Foundation.
The UX designer is focused on the entire process of integrating a product using design, branding, usability, and function. Think about it as a story that begins before people interact with the device.
UI stands for user interface. To quote the ID Foundation once more, UI is “the process of making interfaces in software or computerized devices with a focus on looks or style”,
To help better understand, UI is the tangible space where users interact with the technology. Think of the screens and pages that allow us to navigate an app or webpage, or the physical machines with buttons or touchscreens that allow us to buy a metro ticket. The designer’s main focus is building interfaces that are useable, efficient and effortless for the user.
The terms are related to one another and the terms can overlap, but they are not interchangeable. There is a reason for understanding both and how they interact with one another to create a successful service or product.
These definitions require context, and context comes from academia. What is being taught to become a successful UX and UI designer?
The overarching field where both UX and UI live is called Interaction Design. At Harbour.Space University, the Interaction Design program is led by renowned creative UXD duo Irene Pereyra and Anton Repponen. The program explores new roles, contexts, and approaches for interaction design and trains students to research, analyze, prototype, and design concepts in business, social, and cultural contexts within existing and emerging technologies.
In an interview with Creative Bloq, Irene gave her thoughts on what good UX means for her:
Everything. You want things to make sense and to be designed around the person who will be using it. However, I do find it interesting how so many things have become boring and visually uninteresting under the flag of ‘good user experience’. Maybe it’s OK for some products to be hard to use, or difficult to figure out. Maybe your mom shouldn’t always be able to use it. Think of Snapchat.
Two of Anton and Irene’s most influential design projects are the design of the websites for USA Today and The Met. Both projects are of significant difficulty for an experience designer, due to the fact that they are used by a very broad audience, and also because they contain immense amounts of information from numerous categories that needs to be organized and presented in an intuitive way for the user. Check out both projects below:
Anton and Irene worked on the project during their time at Fantasy Interactive.
Click on the image for the video narrated by Irene (Global Director of UX & Strategy) and Anton (Global Creative Director), that describes is the story behind the redesigned website that boldly reimagines the way users interact with news online.
In Anton and Irene’s words:
The new website — which had 33 million visitors last year — needed a modern design that would work flawlessly on devices big and small. The Met selected Wolff Olins to do the rebrand, Fantasy to lead up the program management, and Velir to do the development. Together we worked on the UX & Design component of the website and designed a fully responsive experience.
Click on the image to see the project on their portfolio, or head over to The Met’s website to see the finished product.
Aside from adding character and that pleasing final touch to your user interface, UI animations provide valuable feedback to how a user can interact with your app, or what a specific design element is supposed to signify. Take a look at two examples of UI animations.
These designs were created in Po-Chen Chia’s Intro to Motion Design class. This is a core class for all ID master students.
A measurement visualization by Sonnia Kuo, Interaction Design Master Student at Harbour.Space.
A navigation menu brought to life by Francisca Moura, Interaction Design Master Student at Harbour.Space.
So, who does what?
Or to put it more delicately, after finishing academia, what embodies a designer’s responsibility?
Every career looks different depending on the aspirations of a designer. However, illustrated below are the key job responsibilities of a UX and UI Designer.
Responsibilities of a UX Designer
The main responsibility of a UX Designer is to bridge the gap between a user's needs and goals, and the final design of a product. UX Designers must not only have a strong understanding of human psychology and best practices in product design and functionality but also be able to conduct research and testing with a critical, unbiased eye to continually improve and iterate upon the product.
Responsibilities of a UI Designer
The job responsibilities of UI Designers are similar as far as meeting client expectations and using analytics to monitor enjoyment, but their roles are more focused on the execution and production of the final tangible product. This is based on research and conceptual work that the UX designers focus on.
Despite the similarities of both responsibilities, the practical application in the marketplace varies vastly.
The three primary differences between a UX and UI designer highlighted using Usability Geek’s mantra:
1. A UX designer deals with purpose and functionality, whereas a UI designer deals with the quality of the end-user interaction.
2. A UI designer approaches their work more artistically, whereas a UX designer mainly takes on the social and research component with their clients.
3. A UX designer focus is more on project management and analysis, while the UI designer focuses more on the technical component.
Ultimately however, although both roles have varying requirements, expectations, and responsibilities, understanding both UX and UI designers individualy is best achieved by understanding how they work together.
If you’re interested in the intersection between UX and UI design, consider Harbour.Space’s Interaction Design program, taught by remarkable leaders in the industry. Take a look at our website to learn about our designers and fine-tuned program!
And be sure to get in touch with us at firstname.lastname@example.org to let us know your thoughts!