UX vs UI Design: The Difference Explained
Contrary to what their spelling might suggest, the titles of UI designer and UX designer differ by much more than just a letter. And yet the difference between them is not very widely understood, in no small part because these roles — like so many others in the field of tech — are relatively new.
In this article we will explain precisely what UI and UX designers are and do, as well as what it is they have in common, what distinguishes them, which skills their work demands, and how much they earn. If you are not clear on any of these topics, we promise you that you will be by the time you reach the end of this article!
Before we start, please bear in mind that neither of these roles are to be confused with that of a Digital Product Designer. We have explored that role, and contrasted it with that of UX design, in a dedicated piece.
Broadly and in order, these are the topics that we will cover.
What is a UX Designer and what does a UX Designer do?
What is a UI Designer and what does a UI Designer do?
What is the difference between a UI Designer and a UX Designer?
What skills do you need for UI and UX Design?
What tools are used in UX and UI Design?
What is the salary for a UI Designer and a UX Designer?
Read this first or you WILL be confused
UI and UX designers have a complicated conceptual history, one which goes at least as far back as the 1980s, when Don Norman published his seminal book The Design of Everyday Things. They are often (and inaccurately) confused with web designers, who are not the same thing.
Their muddled history has given rise to most of the confusion surrounding these two terms, but it can also help us clarify them. There are three things you should always keep in mind.
Firstly, UX and UI are not necessarily separate roles. It is not uncommon for professionals to cover both at the same time, and even when they don’t, there are always a considerable number of shared skills and competences. Almost nobody does only UX or only UI. This article provides some general guidelines on the differences between the two roles — but these are not rules set in stone, and for most of our statements there will be exceptions!
Secondly, these two professional roles have developed in parallel with the tech industry itself, which has been subject to constant transformation. This means that the precise definition of what UI and UX designers are and do has changed — and plausibly will continue to change — over time. (This is the reason an updated and detailed guide like this one is necessary in the first place.)
Thirdly, let’s be clear that both these roles have to do with websites, apps, and digital products in general (including offline ones). Some people like to describe them in relation to more traditional design, or to make aggrandising claims about how “universal” the skills involved in them are. Don’t let these arguments mislead you: if you are doing UI or UX design today, your feet are firmly planted in the field of contemporary tech.
Many of the ambiguities around these two roles may be resolved simply by keeping the above three principles in mind. Even some of the more advanced articles out there that deal with UI and UX design sometimes muddy the waters because they forget one or more of them, so make sure you don’t!
What is a UX Designer?
In any given project, the work of UX design comes before that of UI design, and so we will treat it first. UX stands for user experience, which reflects the fact that this type of design is essentially ‘outward’ looking: the design work is less about how a digital product is engineered or assembled, and more about how its user(s) will feel while and after using it.
UX designers typically do not come up with the idea for a digital product. Instead, the prospective product owners will tell them broadly what product it is that they want, what they expect it to do, and what its purpose will be. For example, a UX designer may be commissioned a food delivery app, or an online platform to host podcasts about some particular subject, or one to store and organize pictures.
The designer is then tasked with creating something that meets those guidelines (or updates and modifies them if a baseline already exists), while ensuring that those who use it find it not just practical and efficient, but also simple, pretty, intuitive, and overall a pleasure to use.
What does a UX Designer do?
Due to the nature of their work, UX designers will necessarily be among the first to get involved in the creation of a product. Their work is usually divided into two (non-sequential) phases.
In one phase, a designer will ‘map out’ a project conceptually, drafting (often on paper) its overall structure and that of its individual parts. If the product exists online, for example, this means defining things like what the home page will contain and what ‘paths’ will be described by its internal links.
The final objective of this phase is to create a prototype of the product, most commonly what is called a wireframe.
In the other phase, UX designers will conduct research. This in turn is divided into two parts — preliminary research with targeted users before building the prototype, intended to validate the ideas behind the project, and then post-prototype research, which analyses the users’ reactions and behaviour and allows designers to improve, tweak, update, and correct the product until it does exactly what they want it to do.
What is a UI Designer?
Interacting with objects through a monitor is not something that human beings originally evolved to do, so it takes a lot of discipline and craft to make that happen naturally. Even so, to say that UI designers “create the buttons” on a website sounds incredibly reductive — almost childish.
UI stands for user interface, and describing it typically makes it sound a lot less important than it really is. The interface of a product represents its interactive surface, the part that respond to what a person does and which lets that person actually use the product.
This means a great deal of buttons, yes, as well as icons, animations, patterns, accessibility, spacing, typography, and colour theory. Almost anything that relates to what a digital product looks like will fall under the domain of UI design, but the discipline is much more than purely cosmetic — it goes right to the heart of a product’s usability.
Note, once more, that the domain of UI design is digital. You could argue that designing the keyboard, mouse and swivel chair for a computer would fit with most definitions of ‘user interface’, but in the real world that is not what a UI designer does. This is a role about digital products, which segues nicely into the question of…
What does a UI Designer do?
UI designers inherit a prototype of the product from UX designers and begin to work within that framework. The design work that they do has a strong visual component, naturally, and parts of it may qualify as effectively graphic design — but much of what they do is about a lot more than aesthetics.
UI designers must create interactive elements that are as easy to use and intuitive as possible, and the structures and patterns that they come up with must be responsive — meaning, they have to translate dynamically from an ultrawide monitor to a smartphone display and still work just as well.
Like their UX counterparts, UI designers do a lot of research. This includes research before getting to work, by exploring user behaviour and design trends, as well as after the design process, by testing their prototypes on initial users and refining them accordingly.
What is the difference between a UI Designer and a UX Designer?
The above descriptions should have clarified some of the differences between UI and UX designers, but let’s make things simple and list these differences out. Here they are, in no special order.
1. UX designers work on the shape and nature of the product as a whole, crafting the entire experience of a prospective user. UI designers only work on its interactive elements, and therefore remain more ‘surface-level’.
2. UX designers often work from scratch, starting with no more than a general description of what a product must be and do, and designing it from the ground up. UI designers start their work when the skeleton of the product is already there, and needs to be furnished with elements that enhance usability and navigation. (Both designers may also be hired to update or expand an existing product, of course, but this order of precedence does not change).
3. UI designers specialise more closely in skills related to visual output, including colour theory and typography, and the creation of specific elements like buttons, menu bars, etc. UX designers must have a broader skill-set, and while presentation is highly important for them as well, they may not get quite as granular in terms of how each individual element of the product looks.
4. UI designers must research and understand the immediate psychology of their users — how they will react to certain colours, which visual patterns will lead them to click on something, and so on. UX designers must have a broader view, and understand their users in terms of their long-term motivations, their conscious desires, and their retrospective feelings after using the product.
Never forget, what does not differentiate UI designers from UX designers is the category of the product that they work on — both operate in the field of digital products — and the fundamental role of research both before and after their work. In this particular sense, these two job titles may have a slightly different slant, but for the most part they overlap.
What skills do you need for UI Design?
UI designers generally have a narrower set of skills than their UX counterparts, so for this section let’s start with them.
A UI designer must be a talented visual artist — not necessarily the next Van Gogh, but someone with an eye for detail and a strong sense of what looks good and what doesn’t. They must also be able to back up that talent with skills that are deployable not just on paper or canvas but in the digital field, manipulating things like colour gradients and textures. (For this, and for the specifics on all other technical skills, see the section below on Tools for UI design).
Differently from more traditional artists, UI designers are not allowed to be loners. They will have to work closely with management, marketing and of course their friendly neighbourhood UX designers to make sure that their work aligns with the general vision for the product, not to mention the brand.
Finally, UI designers must be qualified in the methodology of user research. That means understanding user personas (hypothetical users employed as ‘benchmarks’ for insights) as well as standard tools and procedures to collect data about user behaviour. It involves both qualitative research, such as interviews with prospective users and surveys, and quantitative research, which may consider how many people clicked on a button or how much traffic went to a certain page.
What skills do you need for UX Design?
Because UX designers work on the same products as UI designers but have a much more general approach, they will usually possess all of the skills described in the above section — although they may be a little less specialised.
In addition to the above, however, they must also possess a greater ability to think and create in the abstract, as they are more likely to work from scratch.
They must also have a keener commercial instinct and understanding of their respective market, as they will have to design a product that must outperform its competition.
As for their specific technical skills, well, that leads us to our next section, which is about the tools of the job.
What tools are used in UX and UI Design?
We now move on to a catalogue of the most important tools and apps used by UX and UI designers today. The list is restricted to technical tools, but of course a lot of design work also happens with more traditional means — a prototype can be sketched with coloured pencils and paper, for example.
It is essential at this point to reiterate what we said in the very first section of this article — that UX and UI overlap, and that nobody does only UX or only UI. Necessarily, then, this list will be a generalisation, and there will be many cases of UI designers who use tools we assign here to UX design, and vice versa.
Shared Tools
Essential to the work of both types of designers are those apps that allow for digital prototyping — that is to say, designing and then giving form to a desired object in a digital environment. The apps most commonly used for this purpose include Adobe XD, Origami Studio, Balsamiq, Framer and Figma, or Sketch for Apple users.
As far as more general tools (as opposed to specific apps) involved in design go, everyone should be familiar with the concepts of affinity diagrams, which serve the purpose of grouping, organising, and reviewing ideas and content within a team, and sitemaps, which make it easier for search engines to ‘read’ the product you put online.
What tools are used in UX Design?
UX designers are more likely to employ tools that allow them to create products at the broader, more structural level. In particular, they will use apps like Overflow and tools like Lucid Chart, which are geared specifically towards designing a product in terms of a desired user experience (also known as ‘user flow’). For interaction design, Principle is increasingly replacing Flinto as the most sought-after tool, although some teams still use the latter.
Other tools that are especially popular are those for centralising and organising a design project with the rest of a team, such as Marvel and InVision.
What tools are used in UI Design?
Tools that are particular to UI design are typically of the ‘support’ type, such as external resources and component libraries.
Thus, for example, UI designers will have to understand and develop frameworks, moodboards, style tiles, and style guides, and to this end they will work with online design portfolios like Dribbble, Behance, and Mobbin.
They will have to know about typography, which will lead them to choose a font out of resources like Google Fonts, Adobe Fonts (formerly known as Typekit), Variable Fonts, Fontpair, Fonts.com, and about colour theory, palettes, shadows and alignment, which will lead them to Adobe Color CC and Coolors for starters, and then literally entire lists of other resources.
Also — and this goes without saying — UI designers should all be reasonably handy with image manipulation tools like Photoshop or Gimp.
What is the salary for a UI Designer and a UX Designer?
Below, we provide a range of salaries for UI and UX designers in the European and American markets, obtained by cross-referencing data from LinkedIn, Glassdoor, and SalaryList.
Bear in mind that there are important differences between countries and cities (particularly between Europe and America) in terms of cost of living, taxation and social services, so these figures should always be contextualized before being compared.
For the European market, these are some of the most popular cities for design jobs, alongside the salaries that you may expect to earn.
For the American market, the average salary for a UX designer is $108,010 p/y, with a range of $63,200 to $145,000. For a UI designer the average is $84,229 with a range of $35,000 to $200,000. It is perhaps worth noting that on SalaryList these figures can vary slightly depending on whether one searches for the title “User Interface/Experience designer”, as opposed to “UI/UX designer”.
Below are the compared salaries for four representative cities in the USA.
Conclusion: Finding Your Own Way
If you have been paying attention throughout this article, you must have figured out that UI and UX design do not have an equal standing. A few specialisms aside, most UX designers already possess the skills for UI design — but the opposite is not necessarily true. This is why, as we said from the very outset, ‘pure’ UI designers are quite rare, and most people combine at least a few of the skills involved in UI and UX.
Generally, we may say that a UI designer naturally evolves into a UX designer, in the same way that a UX designer will typically evolve into a Product Designer. But it is important to understand that these categories are not fixed, and that their definitions are changing together with the industry.
The most important thing to do when approaching either of these career paths is to keep a flexible mindset. The field is rife with misconceptions about what UI and UX designers are and do, sometimes even perpetuated by the very people who hold those titles, while the nature of the work keeps changing all the time.
You must be prepared to find your own way, even when so many are pointing you in the wrong direction. This article was written to help you in that process. We hope that’s what it did.
