UI stands for User Interface, which is the space where humans (also called users) interact with technology. This “space” can be a website, mobile app, or some other type of digital interface that you can click, tap, swipe, or talk to.
UI Design is the design of such interfaces. It concerns for example the design of websites, mobile apps, VR environments, and AR. It is the design of everything you see and interact with when using a digital product or app.
UI is also closely related to, and sometimes even synonymous with, the terms UX design, product design, interaction design, and front-end design – depending on who you’re talking to.
1.1. UI Design & UX Design
As mentioned, UI (user interface) design is closely related to UX (user experience) design – which is the design of how a user experiences a product or design.
The user experience can be both positive and negative. A user can for example experience a design as enjoyable if everything works as expected. But, if the user instead gets frustrated or irritated, that would lead to a negative user experience.
It is the job of a UX Designer to design and shape products to be enjoyable, efficient, and useful for the user. UX design is therefore highly human-centered and always considers the users’ wants and needs.
Generally, a UX Designer works with the research part of the design process, such as interviewing users and defining user needs and wants, performing usability tests, creating user journeys and personas, as well as drawing up the information architecture.
UI design generally refers to the latter parts of the design process, including creating polished visual designs and mockups, prototyping and animations, as well as the graphic design parts regarding color palettes, font choices, and illustrations.
However since UI and UX design are so closely related, UI design cannot be entirely separated from UX design. UI design is therefore also deeply rooted in human-centered design. And, to create designs that are enjoyable, efficient, and helpful, both UI and UX design must coexist.
For example, an app can look great and be aesthetically pleasing visually, but if the user is unable to do what they want with it, because of confusing navigation or missing key features, then they won’t return to use it again.
Likewise, if a design has great UX design, but lacks in the department of visual design, it can make the entire design or product look outdated, untrustworthy, and cheap.
Thus, the best combination is to always apply both user experience design and user interface design to any project.
1.1.1. Combined roles
In reality, many companies and teams are looking for multifaceted designers who can do both UI and UX design, as well as know some front end. These combined roles are often called UX/UI Designer, Product Designer, or just Designer.
Many also do not know the difference between various design roles, so they combine the roles. So, some companies may market a job opening as looking for a “UX Designer”, but in reality, they may be looking for a highly skilled visual designer.
The title “Digital Product Designer” has also become very popular in recent years. As the name suggests, Product Designers work with the entire product cycle, including research, visual design, business thinking, and sometimes even coding. The focus is on the entire product and strategy.
To find out what a company is truly looking for, read the job descriptions carefully and identify which skills and methodologies they mention.
- For more research-based roles you will find keywords such as usability tests, information architecture, design thinking, and interviewing
- For more visual roles you will find keywords such as pixel-perfect mockups, visual communication, and graphic design principles
- For combined roles, you will find: a combination of research skills, visual skills, and knowledge of HTML and CSS
In job interviews, you can also ask about how the design process usually works in the company, and which design methods they commonly use.
The combined information of all the above-mentioned aspects will help you distinguish what type of work you will be doing, and if it fits your desires.
1.1.2. The expected skill sets
While many companies may combine various design roles or confuse them with each other, some do know what they are looking for. And for those that do, there are some common distinctions between what’s expected from a UI design role versus a UX design one.
Let’s take a closer look at the differences between the roles of a “UX Researcher” – which will be our example for a UX design role, and the role of a “Visual Designer” – which will be our example for a UI design role.
UX Researcher
A typical UX Researcher performs research and usability tests, designs information architecture, creates personas, and maps out potential user journeys. These are examples of methods that a pure Visual Designer, usually is not expected to do.
Further, job positions as UX Researchers often require a higher academic degree, sometimes even a Ph.D. This is because these types of roles need to perform reliable research, as well as may require theoretical knowledge about psychology, human factors, cognitive science, and other similar subjects.
Visual Designers
In contrast, Visual UI Designers are in general expected to have somewhat of an artistic talent or a strong eye for aesthetics. Many who pivot into visual UI design work come from a graphic design or illustration background.
When companies advertise for a visual design role, they are generally looking for someone who can create gorgeous, polished, and aesthetically pleasing mockups. They may even already have a UX Researcher on the team and may be specifically looking for someone to take over the wireframes after research is done.
In the job application process for a visual design role, the applicant’s visual skills may be much more important than their academic or theoretical background. Employers might look for polished, gorgeous, and artistic screenshots and mockups, rather than long research-based documents.
Larger organizations
In larger organizations, such as Google and Facebook, specialized roles are more common. For example, the jobs of a UX Researcher, Visual Designer, Interaction Designer, and UX Writer are often separate.
The design roles may look like this
- UX Researchers perform research, create the overall layout of the design, and perform usability tests
- Visual Designers build on top of the work of UX Researchers, creating the visuals such as adding a coherent color palette, choosing typography, and creating gorgeous mockups and illustrations
- Interaction Designers create the prototyping – sometimes even in code – and all the micro animations for interactions
- UX Writers polish text content and make it readable
Smaller organizations
In smaller organizations and startups, it is more common to hire generalists, who can do combined roles such as a UX/UI Designer or Product Designer.
This is mostly because smaller organizations may not have enough financial resources to hire multiple specialized roles, or simply haven’t reached that level of design maturity yet.
Besides, smaller organizations must distribute their resources to other contributions as well such as marketing, development, sales, and customer support.
Can you be great at both?
There have been discussions in the design community for years about whether a person can be great at both UX and UI design at the same time. Some argue that you can’t be an expert at both because it’s too much work for one person, while others fully believe that it’s possible to master all necessary skills.
There is no clear winner to the argument. However, trends in the market show that there is an increasing amount of job postings looking for so-called unicorns, generalists, a combination of UX/UI designers, and the rise of product designers.
I believe that any person who is ambitious, driven, and self-disciplined can learn both disciplines. UX and UI design are not that far apart, although one lies a bit more toward research and the other toward aesthetics.
Further, there is a concept in economics, called human capital which states that a person’s human capital is the sum of our abilities and resources. The more skills and abilities you have and build, the more your human capital increases.
According to the concept of human capital, it follows that adding more valuable skills only makes you more valuable. It doesn’t make you less capable of other things. This applies to developing skills in both UX research and visual design.
Of course, a person’s natural talents may dictate how good one can get at a faster rate, but that does not mean someone without talent cannot work hard to improve to the same level.
Many people in the world are good at multiple things and enjoy many sides of life throughout life. For example, corporate workers who love the free art scene, writers who paint, boxers who enjoy reading and drinking tea, and so on.
As technology advances, with improved AI, increasing global competition, and fast-moving markets, we may all need to become generalists and flexible in expanding our skill sets.
In the future, we might not have any choice but to be good at multiple things at once.
1.1.3 Usability
Usability is traditionally more related to UX than UI, but even if you are a visual designer, understanding usability is essential when designing user interfaces.
Usability stands for how effectively, efficiently, and satisfactorily a user can utilize a design or product. It’s evaluated by asking the question of whether the user can perform the desired action and obtain the desired results.
Designing with usability starts with a user-centered approach, which means always keeping the user and their experience in mind. At every step of the way, emphasize with the users and reflect on how they might feel, act, and think.
This means not only focusing on designing visually pleasing interfaces, but to design interfaces that are valuable in terms of functionality, features, processes, and feedback.
The usability of a product or interface design is best assessed and improved through usability tests, which often fall into the tasks of a UX Researcher.
However, I’d highly recommend that every UI Designer also learn the skills of usability testing or at least usability evaluation. Great UI designs are always dependent on also having great UX design. Thus, UI is never fully separable from UX.
Learn more about usability in Chapter 4.2 Usability.
1.2. UI & Front-End Development
User interfaces such as websites and apps need to be developed in code, which is where front-end and back-end developers enter the picture.
Front-end developers create the visible parts of user interfaces using HTML, CSS, and Javascript, which is what you will be designing for as a UI Designer.
Back-end developers create the non-visible parts of user interfaces (e.g. fetching and sending data to databases and security checks that run in the background when logging in). This is not something UI designers typically need to dive into.
For UI Designers, front-end development is therefore the relevant part of development, and it’s more closely related than you might think.
1.2.1. Do UI Designers need to know how to code?
The answer is no, a UI Designer typically does not need to be able to write functional code.
However, you do need a solid basic understanding of front-end development and how interfaces are built. You need to at least know what types of components front-end developers work with and how they manipulate them.
If you do not have enough knowledge about front-end development, you will not be able to judge the feasibility of the features and designs that you create.
It will result in the risk that you design things that are not technically reasonable or functional.
1.2.2. UI Designers that code
Knowing the basics of front-end development is also crucial to being able to communicate with the rest of your team.
You’ll be able to answer questions developers may have about the design, as well as use the correct terminologies when discussing different solutions.
Needless to say, if you are not able to do any of these things, you’ll be severely restricted in your role and ability to function well with others.
UI Designers that understand the technical aspects of what they’re designing and building are of course more well-equipped and more valuable to any team.
This means that if you also learn the basics of code, you will be able to take on more jobs, work in a bigger variety of teams, as well as demand more pay.
In summary, with a combination of design and development skills you can:
- Communicate better with everyone on the team – especially developers
- Design more technically feasible interfaces
- Create more efficient Design Systems
- Be able to contribute to building components if needed
The value of someone who’s in the intersection of both design and code is so prominent that there are even roles specific to this intersection such as UI Engineers or UI Developers.
So, even if most of the time, a designer is not required to contribute to actual code, being able to do makes you more valuable.
1.2.3. The consequence of not knowing code
The risk of not having enough technical understanding may be more important than the benefits.
Bad business & reputation
If you do not understand what you’re designing, you may very well end up designing interfaces that are not technically feasible, which is a big waste of time and resources.
It costs companies a lot of money to hire skilled workers, and designing UIs that can’t be created on time within budget is simply bad business.
It could also affect your reputation as a designer in the long run, especially if you want to build a brand or business of your own.
Social status & impact
As mentioned, you may also experience problems communicating with the rest of the team which hinders overall productivity and affects the perceived value of the designer. You may not be able to explain your design choices or speak up to contribute.
It may result in the design being lower on the hierarchy of importance and influence, which could lead you into a position where you are not able to do anything impactful with your work. And being in that position is not fun.
Job competition
Other designers, who do have a better understanding of front-end development, may also be chosen before you when applying to the same jobs or getting higher pay for the same type of job.
With experience
The above-mentioned problems may not appear as a junior UI designer in a large team of more senior decision-makers, but they will probably become apparent at some point in your working life.
Most designers sooner or later realize the benefits that come from understanding basic front-end development and thus decide to learn it.
It is therefore recommended, even if it’s not always required, that UI Designers have a basic understanding of HTML, CSS, and Javascript.
I would recommend you learn the basics, and who knows, perhaps you’ll even enjoy it! It can be very satisfying to have the ability to create what you’ve designed, without needing the help of someone else.
Either way, as a UI Designer, be prepared to be around and interact with front-end code and developers plenty during your total work life.
1.2.4. In teams
Even if UX Design, UI Design, and Front-End Development can be seen as separate roles, they are often so intertwined that they need to work in collaboration and cross-functionally to produce the best results.
As mentioned above, depending on the size of the organization, UI Designers can be expected to possess a great variety of skills.
It is possible to have a purely visual role, but most likely you are expected to either learn UI and UX design, or UI and front-end development.
The smaller the company or team, the more likely you are to be expected to perform multiple roles. In most cases, it will also be highly appreciated if you can and are willing to contribute with more skills.
1.3 Generalists & Specialists
As you develop your skills as a designer, you will likely at some point need to choose how to focus your energy. Will you want to broaden your skill set (generalist) or niche down (specialist)?
Some designers and developers work across all sections of product development. They are called generalists or unicorns. Others specialize in one specific area, called specialists.
You can specialize in any niche area you want such as specifically creating dark mode UIs, mobile apps, websites, interactive components, creating Design Systems, or animations.
You can also broaden your skill set as much as you want. UI design related to UX design, interaction design, front-end development, back-end development, project management, digital marketing, content creation, writing, graphic design, and more.
The advantage of being a specialist is that you can become an expert in your specific niche, being able to do that thing better than anyone else. The advantage of being a generalist is that you can find connections between various specializations, draw upon each of their strengths, and come up with innovative approaches.
Both ways of developing one’s skills are valuable but will fit differently into different organizations and stages of product development, as well as your personality.
It is of course hard to know what to do right at the beginning of your career, so my advice is to try to learn as many basics as you can in different areas, and then experiment. You will with time notice where your natural talents and interests lie.
With experience, you will also more likely come in contact with all areas of product and business development. This will probably teach you things about various skill sets whether you do it on purpose or not.
So, for example, do focus on purely UI design in the beginning, but with every project and team you’re working with, keep an open mind towards the other aspects of product development.
1.3.1. T-shaped skill set
Designers are in general often also encouraged to develop a “T”-shaped set of skills.
The long top line of the T represents having a broad spectrum of general skills in many areas such as UI, UX, interaction design, front-end, and strategy.
The long middle line of the T represents specialized knowledge and skill in some areas, such as Design Systems, animation, interaction, project management, usability tests, or CSS.
The specific shape of your “T” may develop naturally as you gain more experience and learn your natural talents or interests. As a beginner, it is encouraged to try a lot of different areas and gain as much knowledge as possible, before specializing.
1.3.2. In companies
Generalists and specialists fit differently into different organization sizes and in different stages of product development because those states need different sets of skills.
Smaller organizations – Generalists
When working with startups, smaller companies, and early-stage product development, a generalist may be more fitting due to financial constraints and efficiency.
A generalist may be able to perform multiple roles at once and be more flexible. It is cheaper for smaller companies to hire one person to do the jobs of multiple people, which unfortunately also could mean extra stress for the designer.
Smaller companies may also need to move faster and by removing middle hands and trimming down the number of team members, a product can be developed faster and more efficiently.
The benefit of working as a generalist early on is that you get to try out and dabble in lots of different areas, which teaches you what you enjoy. You may also get to do more impactful work.
Larger organizations – Specialists
In contrast, in larger organizations, and with more established products, specialists may fit better for fine-tuning improvements and more funding.
Larger and more well-funded companies have more resources to hire experts in different areas. They can also afford to spend money to improve specific parts of a product, without rushing, compared to smaller companies with a tighter budget.
The advantage of entering a more specialized role in a big company is that you often get proper mentorship and they may even have a proper learning process for junior designers.
The disadvantage is that your work may be such a small part of the whole, that you may not feel like you are doing anything impactful or visible.
1.3.3. Generalist vs specialist when freelancing
If you’re aiming to become a freelancer or self-employed, you may still want to consider whether you want to be a generalist or specialist. Both have their advantages and disadvantages.
Being a generalist as a freelancer means that you have the skills to take on more possible projects. For example, if you’re having a hard time finding work within UX research, you can instead take a UI design project.
If you are a specialist, however, you can become well-known for your specific type of niche. This can make you become the “go-to” person for this type of project, which allows you to charge more.
Being a specialist is therefore one of the key components to developing a strong personal brand as an independent creative professional. However, it may also limit the variety of projects you may take on.
Most designers start as generalists and then niche down. This process can depend on factors such as where your talents lie, what you enjoy the most, and what is most in demand.