100% found this document useful (7 votes)
8K viewsUX - UI Design Process and Principles
Uploaded by
vũ nguyễnCopyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
100% found this document useful (7 votes)
8K viewsUX - UI Design Process and Principles
Uploaded by
vũ nguyễnCopyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
/ 153
UX/UI Design
Process & Principles
Comprehensive guide to designing usable
and smooth digital products
design.cip UX/UI Design Process and Principles
E-Book by Jan Mraz
Property of Atheros Intelligence Ltd.
Copyright © 2022. All rights reserved Table of Content
Introduction
Chapter1 Fundamentals
Chapter 2 Design Industry
Chapter 3 UX Principles
Chapter 4 Design Thinking
Chapter 5 UI Design Principles
Chapter 6 UX Research
Chapter 7 Product Architecture
Chapter 8 Wireframing
Chapter 9 Prototyping
Chapter 10 Usability Testing
Chapter 11 What's next?
Table of Content
11
33
38
98
105
111
115
120
124
002 Introduction
Hey designers, it's Jan here!
| appreciate that you're reading this e-book. It has been almost four
years since | started creating social media content, where you probably
found this e-book.
Based on the conversations | lead with designers of all experience
levels, | composed content for this e-book, fitting mainly aspiring and
junior designers to be well-oriented within the design industry,
principles, and core processes. On the other hand, mid and advanced
designers can find their core overview of the guidelines they will most
likely be supposed to follow daily.
The e-book provides a roadmap and knowledge which will help you get
your first design job and be a designer who can deliver smooth and
usable interfaces. The main emphasis is done on UX and UI design
principles, enabling you to be confident during prototyping, which is
the critical activity for you as a UX UI designer, not only at the
beginning of your journey.
Let’s start our design journey!
) Jan Mraz
{ @janm_ux
Introduction 003 Chapter 1
Fundamentals
Key learning:
+ UX and UI design definition
+ UX design sweetspot
+ Activities of UX designers
+ Soft skills of UX designers
004 Fundamentals
Success in the UX/UI design industry is achieved mainly through
practicing and working hard and smartly on your skills. On the other
hand, the necessary aspect is being confident with basic theory and
terms. In the first chapter of this guide, we will go through essential
definitions and terms representing pillars of the world of UX/UI design.
Just a few words before we start with the content, UXD is a very rich
multidisciplinary field, where you will probably never have a feeling that
you know everything or that you've faced every problem which must be
solved. There is always something new to learn or a problem that has to
be solved! Make sure you don't stop searching for new techniques and
approaches because the industry is growing and evolving quickly. You
already did a great first step - opening this book representing your
starting point to the design industry.
What is UX and UI design?
Some wrong definitions could say that UX design is how a digital
product, service, or system looks like. It's true, but it’s not complete. In
general, UX design represents a much more complex process, where
you should also care about the feelings of users and how a product
works as a unit.
We will understand UX design as a process of creating an interface of
digital products such as apps, web apps, or websites, which delivers
a positive and enjoyable experience for all groups of users.
Usually, it's not that easy and clear because you should keep in your
Chapter 1 / Fundamentals 005 mind three key UX design aspects determining a particular product.
You should satisfy real user's needs, respect business goals with the
interests of other stakeholders, and technical possibilities. If you
achieve this state, designers call it a UX design sweet spot.
Es Not.
Desirable
Business Technology
Sweet
Spot
Not Not
Feasible Profitable
Users
UX Design Sweetspot
Make sure you will balance those three aspects not only at the
beginning of the design process but also during designing every
component of an interface or making decisions in the structure of the
platform. Of course, finding a sweet spot could be tricky even for
experienced designers, but it's important to keep those three aspects
on your mind - Users - Business - Technology.
The mentioned definition represents a broader perception of the UX
design term, which is then divided into two groups of activities - user
experience (UX) and user interface (UI). Of course, both of those groups
of activities go hand in hand in the overall design process, but let's be
concrete. The following picture shows particular design activities
divided into two groups - UX and UI.
Chapter 1 / Fundamentals 006 UX Ul
Field Layout
Research Typography
User iref
Research Wireframes Alignment
Usability Prototypes Colors
Testing
Handoff
Information el
Architecture Branding
UX & UI Activities
Overall the UX part of the process is more focused on understanding
user needs and transforming them into easy-to-use structures. On the
other hand, UI design emphasizes visual aspects of design like colors,
typography, iconography, or presenting visual branding aspects within
the interface.
The deliverable joining those two processes are wireframes, which
connect all findings from the UX part of the process with UI design.
Wireframes easily work as a bridge between those two groups of
activities during the initial process. Later, once the core stuff is fully
designed to the detail, we can also use more developed prototypes for
backward testing and iterations.
Many designers focus on particular parts of the process, like UI design
or just researching users’ needs. Of course, you can choose what fits
you the most later, but it's essential to know all those activities to
understand the context of the whole process and have a base
knowledge of all activities.
Chapter 1 / Fundamentals 007 Soft skills of UX/UI designers
Activities of UX designers never stay alone. It doesn't matter if you work
as a freelancer or have a full-time job. You will work in teams, including
other designers, developers, and managers, or you will directly
cooperate on the project with clients. Not only working in teams brings
requirements on soft skills of every designer. Let's look at the seven
most important soft skills you should have as a designer.
Empathy
Solving a user's problems is the work of a UX designer. That's difficult
without understanding the actual user's needs, pains or feelings. Do
not overlook users who will benefit from the designed interface, talk
with them, and always aim to have a clear view of them.
Critical thinking
Do not succumb to the first impression. Instead, solve problems
systematically, evaluate arguments, ask questions, search for accurate
data, and go to the heart of a problem. Critical thinking is closely
related to cognitive biases, describing systematic errors in thinking,
processing, and interpreting information. You can find the complete list
on the following link wikipedia.org/wiki/List_of_cognitive_biases .
Communication
As we have mentioned, UX design is not a separate process. There are a
lot of connections to various stakeholders like users, product owners,
developers, etc. You will be supposed to communicate with them daily.
Make sure that it's a joy to communicate with you. Be kind, brief, apt,
and, last but not least, reliable. You will also need good communication
skills to present your work's deliverables to clients or users. A good
designer is a good speaker and a good listener.
Chapter 1 / Fundamentals 008 Collaboration
Designers aren't usually able to deliver a fully working digital product
independently. However, based on my experience, team spirit is a highly
evaluated aspect of a UX designer. Therefore, it could be your
significant advantage mainly when applying for some full-time jobs in
companies.
Adaptation
The world is changing at an enormous speed, especially in technology.
As a UX designer, you should learn about trends in the field and search
for new information daily. Get knowledge not only from experts, books,
or courses but mainly from your mistakes. It's okay to make mistakes
because it's actually through mistakes that you can grow.
Feedback
Designers who cannot deal with criticism and feedback will be stuck in
one place during their careers. Therefore, feedback and criticism should
be a source of improvement for you. Moreover, it would be best if you
searched for the mistakes in the design, not only during testing
sessions at the end of the process.
Open-Mindness
A closely related topic to feedback is open-mindedness. You should be
able to deliver innovative solutions to a product design process. That's
impossible without being open to new solutions, techniques, and
principles.
This ebook focuses mainly on presenting necessary theory on practical
examples and helping you accelerate your hard skills. Mentioned soft
Chapter 1 / Fundamentals 009 skills guarantee you some kind of professionalism and assumption for
being successful on your design journey. On the other hand, improving
those soft aspects might be quite a long process.
Before we start with the design content, | would like to highlight that
most of the visualization of mainly UI design principles is done in
freemium software called Figma, which is today's industry-standard
tool for most UX designers and design teams. The Figma software is
essential for understanding the context of some practical examples
and visuals like boxes for setting text properties, etc.
Chapter 1 / Fundamentals 010 Chapter 2
Design Industry
Key learning:
+ Industry statistics
+ Design education
+ Freelancing vs. Full-time job
on Design Industry
Before we start with the particular design examples, | would like to
discuss some frequently asked questions about entering the UX/UI
design industry.
Future and statistics of the industry
The speed of the design industry's growth is enormous. Companies now
understand the value of UX design much better and know it's an
essential process for every successful digital product development.
That's connected to how companies value designers.
According to the web uxdesignersalaries.com, the average yearly salary of
a UX designer is $52,683. In some countries, you can earn much more.
For example, in the United States, the average is almost 100,000 dollars.
Moreover, you don't need many years of experience and a rich skillset to
reach those numbers. Therefore, | want to explain that UX designers are
highly valued professionals working in the prosperous IT industry with
many opportunities.
As a UX designer, you should be able to explain the value of UX design.
To be able to do that, | recommend you learn some statistics about the
industry. Let's take a look at some of them.
According to McKinsey Design Index, design-centric businesses
increase their revenue 32 % faster than industry counterparts.
According to DMI and Motiv Strategies founded by Microsoft, design-
led companies outperform the S&P 500 index by 211 %
Chapter 2 / Design Industry 012 According to Capgemini’s report, 8 of 10 consumers are willing to pay
extra for a better user experience.
Those are relevant reasons why UX design has massive value for
businesses and overall customer satisfaction resulting from using a
digital product. Improving the product is your direct responsibility.
Do I need university?
| started with UX design when | was 19 and finished high school.
Although | was impressed and motivated to work in this industry, |
continued my education at the University of Economics in Prague. In
parallel with studying economics and business, | still invested much
more time self-taught exploring the UX design industry.
| want to say with my short story that you don't have to study UX at
university to be a designer. If you have an opportunity to learn design in
a university program, go for it! It might help you on your journey, but it's
not a must-have. Moreover, my economics and business background
helped me not directly in my UX design career, as | can understand how
the business works. | worked for small startups and big international
companies such as the United Nations; my hard and soft skills were
the most important. Yet, nobody asked me if | had a degree.
On the other hand, | don't want to discourage you from learning design
at universities because if | had this option, | would go for it. However,
the context of my journey showed me a different way. Therefore, |
believe that not having a degree in design isn't a handicap in my
design career.
Chapter 2 / Design Industry 013 Do I need coding skills?
Many aspiring designers ask me if they must implement the code
design. The short answer to this question is:
You don't need coding skills to be a great UX/UI designer, but it might
give you an advantage.
| also focus mainly on the UX/UI design process, and simply
implementing the design takes some time and focus, which | want to
keep on the design process, not its development. On the other hand,
being confident in HTML, Javascript, Reach, etc., might give you a
significant advantage, mainly if you want to start your freelancing
career. The design process usually takes less time than development,
so you need multiple streams of inquiries for your design services or
have an extensive client with great products requiring continuous
maintenance of the design, adding new features, testing, and
improving the design system. Being able to implement the design
allows you to help on a project in more phases of the product life cycle.
Another advantage of coding skills is that you will understand the
development process much better, so you can create more efficient
features as they will require less time for their implementation.
Moreover, you can easily speak the same language as developers, and
you know the technical possibilities, which we have already mentioned
in the UX design sweet spot topic. Last but not least, | want to point out
that having coding skills is a valuable skill for the future as the
importance of digital is still growing fast.
Chapter 2 / Design Industry o14 Freelancing vs. Full-time job
In the UX/UI design industry, you have two basic work options -
freelancing or a full-time job. Of course, you can also establish a design
or digital agency, but let's leave this option for now.
We will also discuss this topic in the last chapter of this ebook, but |
would like to mention some of the advantages and disadvantages of
both options. Overall | would point out that getting a full-time job is a
little bit easier. Bigger companies have no problem with hiring junior
designers. Especially platforms like Linkedin or Behance might be rich
sources of opportunities for finding full-time jobs and clients for your
freelance work. On the other hand, finding quality clients might be a
long process, especially when you have just started with design,
because you need a solid portfolio and online presence. Design
freelancers handle lots of benefits like working from anywhere,
managing your workday and workload on your own, in some cases, you
can make more money as well.
| would like to say that freelancing is not stressful and there are no
problems, but I can't. You will have to face challenges like being able to
say no to working 12 hours every day in a week, managing your cash
flow, caring about your mental health, inconsistent workload, and many
more. This topic is much broader, and we will discuss particular steps
of being an attractive designer for companies in one of the last
chapters of this ebook.
Chapter 2 / Design Industry 015 Chapter 3
UX Design Principles
Key learning:
+ Usability
+ Hierarchy
+ Consistency
+ Repetition
+ Accessibility
+ Balance
016 UX Design Principles
UX design is a creative industry where you should always search for
innovative techniques and solutions, but you should know a few
principles before starting. Principles are guidelines you should have in
mind during the design process. If you align your thinking with those
principles, they will lead your approach to create easy-to-understand
and easy-to-use products.
Usability
As a UX designer, you should remember the most important task of
this profession. It's problem-solving. The usability of a product refers
precisely to this ability. It's how a user can accomplish a given task or
goal with your product. This is a critical indicator, which we will also
measure during the testing activities of your designs. Excellent
usability is achieved by following five aspects.
Learnability
This aspect refers to how quickly users can understand the essential
functions of an interface and how quickly they understand the
product's structure. The better the learnability, the less training and
time required to understand the platform.
Efficiency
It refers directly to usability testing, where we will measure how fast
users are completing particular tasks.
Chapter 3 / UX Design Principles 017 Memorability
How quickly can users remember the interface's functionality and
structure? The answer refers to the memorability of your design.
Errors
Are there any errors? What errors do users make? How easily can users
understand and rebound from those errors? All those questions you
should ask during the design process.
User Satisfaction
How do users report satisfaction with the digital product afterward? |
mean after using your product. Ask them and learn from their feedback.
Those were five aspects of the usability of the product. To summarize
all those five attributes, we can perceive usability as more like an
overall feeling of using the particular interface. There are many bad
usability examples, like the navigation on the following screen.
aA & A
Nic Jordan HghOG thee Mike Jorden HighOG hase
S20 $169 sus § $20 $169 sus §
A® B©
Usability - Navigation
Chapter 3 / UX Design Principles 018 On the first try, they look similar, but the problem is the navigation. If
we look a little bit closer, we recognize that within screen A, there are
more than seven items in the bottom navigation. Within screen B, there
are just four navigation items. You're absolutely right if you wonder if B
provides better usability than A. Having too many items and also very
similar items does not provide great usability because users have too
many options in the decision process. They are just not sure where to
click to complete some of their goals. It will increase the time needed
to complete a task.
Navigation was just a short example; of course, usability is much more
complex than the number of items in navigation. On the other hand, |
think it's an excellent demonstration for presenting usability as a
practical example.
Hierarchy
The hierarchy represents one of the critical principles, allowing users to
learn and understand content much more quickly. In UX design theory,
we understand the hierarchy in two basic ways - visual and infromation
hierarchy.
Visual Hierarchy
Achieving proper visual hierarchy is done through the right typography,
color usage, alignment, etc. The key factor influencing the expression of
hierarchy is the importance of particular elements in the interface. We
will later analyze all the specific aspects like right typography, color
usage, and alignment, but for now, let's look at the practical examples.
Chapter 3 / UX Design Principles 019 A®
Prague
Introduction
Prague is political, cultural and economic
centre of central Europe complete with a
rich history. Founded during the
Romanesque and flourishing by the Gothic,
Renaissance and Baroque eras, Prague was
the capital of the Kingdom of Bohemia and
Visual Hierarchy
B®
eat a
Prague
Introduction
Prague is @ political, cultural and economic
contro of contral Europe complete with a
rich history. Founded during the
Romanesque and flourishing by the Gothic,
Renaissance and Baroque eras, Prague was
‘the capital ofthe Kingdom of Bohemia and
‘the main residence of several Holy Roman
Emperors, most notably of Charles V(t
‘the main residence of several Holy Roman
Emperors, most notably of Charles I(r.
YAAB-127R) Ht wae an imnartant city tn the,
The classical example demonstrating visual hierarchy is the usage of
typography. As we can see, both options show a short article about
Prague. In the first picture, there is no scale of typography styles. The
heading has the same font size and color as the body text. On the other
hand, example B uses visual hierarchy to prove better readability and
overall user experience of the article. We can see that the Headings are
more significant than the body text, and the spacing is slightly
different compared to example A.
The screen on the following page may be a little familiar to you because
it's the login screen of the Atheros Learning platform. Let's focus on the
highlighted part. We can see three buttons there and three different
visual presentations. The first one, "Log |
has the highest importance,
so it's big and bold with the primary color. Users will use this button
most frequently. The second one is a Create Account button, which still
has high priority, so it's in the primary color but limited only to the text.
The last one is Reset Password. This one has the lowest priority, so we
use just white as it doesn't bring that attention as the previous
buttons.
Chapter 3 / UX Design Principles 020 Buttons Hierarchy
What | want to say with those examples is that If you identify the
importance of the content, you can communicate it through its
visualization.
Information Hierarchy
The second meaning of hierarchy refers to information architecture,
which means the navigation of an interface or how a product is
structured.
To show interface structure, designers use sitemaps representing
pages and their connections. For example, the following picture shows
a simple sitemap of a mobile app for e-learning. This app is composed
of the main navigation items such as “Home’
My Courses”, “Explore”,
or “More” destinations. As mentioned, the sitemap also visualizes the
connection between the pages. The link is usually done with interactive
elements such as buttons within the pages.
Chapter 3 / UX Design Principles 021 Peer
een Pee
Cenc el eee
Cer eee
roe
Pn es nes om foo
Sitemap
The main takeaway is that we can understand the hierarchy in two
ways - visual hierarchy and hierarchy as a structure of the whole
interface represented by a sitemap.
Consistency & Repetition
Designers value users’ time as well as their own time spent on the
design of an interface because it might mean additional costs to your
clients or company. I'm mentioning it, because we will talk about
consistency and repetition. Repetition and consistency are not boring.
Chapter 3 / UX Design Principles 022 It creates concepts in the mind of a user, improves understanding and
learnability of a designed product, and it could capture the user's
attention.
In the UX design field, this principle is represented by design systems.
Lots of companies create their design systems. Moreover, they share
them publicly. One of the most famous design systems is material.io
from Google.
A design system is a practical collection of best practices, principles,
and rules, usually about particular Ul elements and patterns,
creating the whole interface of a digital product.
The following list shows well-known design systems. Overall the main
idea of creating a design system is reusing components and principles
across the whole system. Usually, design system components also
include developers’ code for faster design implementation.
( Material Design
materiaLio
<) Carbon System Mailchimp System
OO catvondesgnsystem.com vmalchimp.com
Atlassian Design
atlassian.design
Fluent System
microsoft.comidesigni/tluent
Apple Guidelines
developer.apple.com/design
Famous Design Systems
Chapter 3 / UX Design Principles 023 Accessibility
Accessibility is a really important aspect of UX design. Through
accessibility, we ensure that our final design could help everyone who
might use the platform. | will explain what it means in the following
examples.
Accessibility means dealing with colors in the first place. The first
problem represents color contrast, which affects almost all users.
A BO
og In og In
Color Contrast,
In the image above, you can see two buttons. On the first look, they look
pretty similar, but there is a problem with button A. The white text
blends in with the light blue background. It's because there is a
missing contrast ratio between those two colors. This case is evident,
and we can see on the first look that something is not okay with the
first button, but there might be more difficult color combinations,
where we should not be sure if the color meets the contrast ratio. You
can use external platforms to check the contrast ratio for those cases.
Chapter 3 / UX Design Principles 024 Contrast Checker @ rectnoc
Foreground color sackground color + Base ace
= ee) ="
pheress > gniness + Mascotte
8.59:1
secmalnk
Normal Text
wen ——
Large Text
WeAG aX wobaim.org
ncue ‘The five boring wizards jump quickly.
AIM contrast checker is my favorite tool, but there are tons of other
websites that you can use for this purpose, but WEBAIM is really simple
in my point of view. You can copy the HEX code of colors and see the
contrast ratio score with cases where you can use those colors without
a problem with contrast. As you can see, the requirements depend on
the colors’ usage for particular elements and text styles.
HEX code is a text representation of a web color. Besides, HEX code
designers use RGB, RGBA, HSL, or HSB. We will learn how to use HEX
codes later in the UI design principles chapter.
As we've mentioned, color contrast affects almost everyone, but we
should also take care of minor groups. For example, think about people
with color blindness, like Protanomia. It would be best if you carefully
chose a color palette to make an interface accessible for those people.
Chapter 3 / UX Design Principles 025 Simulation with Stark
Again many tools are helping you emphasize people with the colorblind
disease. A good example is Stark, enabling you to simulate those
specific views instantly.
For now, the most important thing to know is that you should make the
design accessible to all groups of users, even if it's a minority. But it's
not only about physical handicaps. Think also about devices that are
used by the target users. You should make your design responsive and
easily adjustable for all devices, whether desktop, tablet, mobile, Apple,
Samsung, or whatever.
Context
Through this design principle, we will go just very briefly. In. the book
The Design Studio Method, Brian Sullivan describes context as the key
for UX designer, and | agree. By the way, | recommend this book. It's one
of the first books I've read about UX design.
Chapter 3 / UX Design Principles 026 The Design Studio Method
Context includes all internal and external factors influencing a user's
behavior. For example, it could be a mental state, health, belief,
location, or device. The key takeaway from this UX design principle is
that you should research your target users and try to understand the
context accompanying particular user groups during, before, and after
your design usage.
Balance
In UX design, we understand balance as a distribution of all elements
in a particular layout. For example, some elements seem bigger and
heavier; others look lighter. The distribution of those elements directly
influences how your users perceive the design. You can choose from 3
basic ways how to achieve a balanced design.
Chapter 3 / UX Design Principles 027 Symmetrical
Using symmetry is the most common method to balance the layout.
Simply, you match the weight of elements on the right with elements
on the left side. As you can see in the following example all components
in the create account form are centered and symmetrically balanced.
symmetrical Balance
Chapter 3 / UX Design Principles 028 Asymmetrical
Repeating the symmetrical balance in all cases could sometimes be
boring, so designers use an asymmetrical approach, but the layout
should still look balanced. For example, you can use an object's color or
size to indicate its weight. The hero section of the following fintech
company is an excellent example of asymmetrical balance. There are
different objects on both sites, but the proportions and color make the
screen still balanced.
platform of
the future
| Asymmetrical Balance
Chapter 3 / UX Design Principles 029 Off-balance
You will probably not face this type of balance very frequently. The field
where designers use the off-balance principle is logo design. The Nike
Logo is a perfect example of using off-balance to communicate motion,
which is connected to sportswear and overall brand identity. We don't
usually use off-balance for UI design because users might feel
disharmonious, so use this approach carefully.
Off-balance, nike.com
White Space
Last but not least UX design principle is white space. White space, or if
you want, “negative space” is an area around, inside, and between the
design elements like text fields, buttons, and many more. So don't Look
at white space as an empty space, which has to be filled. Look at the
white space as a design element. We achieve enough white space in UX
design with padding, margin, letter size spacing, and line height.
Chapter 3 / UX Design Principles 030 CT wargn ti«id
Padding
errors
Box Model
If you're unsure what padding or margin is, developers and designers,
use a box model to provide a clear view of the differences between
those terms. You can see the box model in the picture above. Let's take
a look at a practical example.
AQ B®
Headphones MOR BSSOAP Headphones MOR-
ara bass" XBSSOAP EXTRA BASS™
White Space
Chapter 3 / UX Design Principles 031 In the Previous picture, you can see two screens with the same content,
but example B doesn't provide enough white space. As you can see, the
text and components are too big, so users might have cramped
feelings and simply feel like they can't breathe. There are many
approaches to setting proper spacing, but that's the topic for one of the
following chapters.
Chapter 3 / UX Design Principles 032 Chapter 4
Design Thinking
Key learning:
+ Design thinking definition
+ Phases within the design process
+ Design activities
033 Design thinking
To deliver usable interface designs, you must understand, define, and
follow a UX design process framework. The most popular approach is
the Design Thinking methodology, which established fundamental
principles for most other frameworks.
‘As we mentioned, we will understand UX design as a creative process.
So if you have misgivings about your creativity, don't panic. Everyone
has. Luckily, many frameworks were created fitting the creative
process, like the UX design process. Those frameworks will lead your
creativity and align all needed activities to achieve products solving
real problems. As mentioned, probably the most famous framework is
the Design Thinking method.
The Design Thinking process is based on the book The Sciences of the
Artificial written by Herbert Simon in 1969. Designers and design teams
use design thinking to solve problems that are not common and hard
to define. It means you will face problems that weren't already solved.
That's perfect for UX designers because every company and user group
is unique. As a UX designer, you will be supposed to deal with those
context inconsistencies within the problems. Design Thinking is a
great fit for you to solve problems systematically.
The Design Thinking process is divided into the six following steps,
determining the UX design approach.
Chapter 4 / Design Thinking 034 Design Thinking
i aN
=)
aS /
gs sf _¥#
Prototype Test Implement
|e
Emphasize
In this step, you should understand the user's needs and problems that
should be solved with the designed platform. Usually, it's done through
UX research techniques like interviews, surveys, or focus groups.
Emphasizing is important because, in this step, you will uncover all
customers’ expectations, which might significantly impact the overall
business success.
Define
Then there is the defining step, where designers collect all information
gained in the previous step, choose and define the most significant
user problems. The output of this process can be user personas,
empathy maps, customer journey maps, and many more. Most likely
you will create user personas, which are fictional characters presenting
a particular group of users. Usually, we include more detailed
information about demographic data, goals, pain points, frustrations,
motivations, favorite brands, ete.
Chapter 4 / Design Thinking 035 Ideate & Prototyping
Once we have a clear view of users, we should find some solutions for
them. In the ideation phase we differ two steps. First, you should
generate ideas and find new or traditional ways to help your target
users. The best way and the second step of the phase are to design
prototypes showing the real structure and functionality of the final
product. There are various types of prototypes based on how detailed
they are, but all those stuff we will discover later.
Test
Once your prototype is ready, you should test it on real users to know if
the design works as expected. Very often, it just happens that it's not
like you've imagined. Not only in the stage, you should keep in mind
that the design process is not linear. We will validate our findings. We
will research users again and develop new solutions. Then the
prototype can be pushed to the implementation stage, where
developers implement your design. You can jump back and forward
through all mentioned steps.
Those steps might seem quite vague and general. That's why I collected
the following overview, showing particular design activities, divided
into the mentioned steps.
Chapter 4 / Design Thinking 036 so @¢ . 8 7
Emphatise Define Ideate Prototype Testing
User interviews Empathy maps Bralnstorming stetches Usability testing
Stakeholder interviews Userstores Information Wiretrames SUS suneys
architecture
Surveys Personas errors AA testng
User fos
Data analyse Surveys Mockups vals
Card sorting
Focus groups bs tbe done Mirointeractions Eye tracking
Mind mapping
Competitor analysis _Problem statement
Customer journey maps
UX Activities & Design Thinking
Some of those activities are on the border of two phases, but the key
takeaway is to know what activities you can imagine behind the steps
of a general design thinking method.
The design thinking method is not the only one. Designers lead a never-
ending discussion of which of those frameworks is the best. From my
point of view, there is no correct answer. Every framework has some
advantages, but if a company or designer can adapt a framework
precisely to the conditions of a project, you can't say that it is wrong to
use Double diamond, Design thinking, or whatever. My tip is to be open-
minded to new principles and study frameworks and always take the
best from each.
Chapter 4 / Design Thinking 037 Chapter 5
UI Design Principles
Key learning:
+ Typography
+ Colors
+ Icons
+ Spacing
+ Shadows
+ Buttons
+ Forms & Inputs
+ Navigation
038 UI Design Principles
Also, while creating your interface design, you should follow some
principles and rules to keep the design smooth, accessible, and
visually attractive. Let’s discover the most crucial UI design principles.
Typography
Typography is very broad and not an easy discipline, but the effect on
the final design is enormous. Therefore, when we talk about typography,
we should mention choosing the proper typeface in the first place. The
first rule you should keep in mind is that there should be a limit on
typefaces that you use in the particular interface. Some resources state
that it shouldn’t be more than three typefaces. My advice is to have a
maximum of two different typefaces in the design - One primary font
for almost all texts and typography styles and the second one for very
long texts like a body of articles. This will hugely improve readability.
v9
veo agus ven od
Heading Regt Heading / 14/5
Heading Regular 4 Heading Bold 4
Heading / Regular / 3 Heading / Bold / 3
Heading / Regular / 2 Heading / Bold / 2
Heading / Regular / 1 Heading / Bold /1
Font Styles / Nile Design System
Chapter 5 / UI Design Principles 039 SANS
SERIF
Sans and Serif Typeface
Make sure you understand the difference between typeface and font.
Easily typeface is a proper design of lettering. On the other hand, a font
is a particular typeface represented in defined font size, weight, etc.
Typeface: Arial
Font: Arial, 24 pt, SemiBold, line-height 140%, letter spacing 0%
There are two primary sources of fonts. The first and probably the
biggest resource is Google fonts, containing more than one thousand
fonts. You can find all these fonts in the Figma prototyping tool by
default, and usage of most of them is entirely free. That's a significant
advantage, as premium fonts might be qutie expensive. My favorite
Sans Google fonts are Red Hat Display, Mulish, Sora, Open Sans,
Poppins, Inter, or Cabin, but there are tens of other awesome sans
Google fonts.
Chapter 5 / UI Design Principles 040 Mulish Georgia
Sora Merriweather
Open Sans Lora
Poppins Bitter
Inter Noto Serif
Cabin Playfair Display
Google Fonts
Some designers criticize Google fonts because they are used frequently
if we look at the interfaces nowadays. On the other hand, choosing
some paid fonts might be very expensive. From my point of view, it’s no
shame using Google fonts. Moreover, if you choose correctly, you can be
sure about providing a great user experience with your typography.
Let's look at some Google serif typefaces, which you can use as a
secondary for your UI design. My favorites are Georgia, Merriweather,
Lora, Bitter, Noto Serif, and Playfair Display. Those fonts are great
mainly for long texts like articles, but serif typefaces might fit for some
company websites design as well.
The second enormous resource of popular fonts is the Adobe package.
If you already use some Adobe software like Photoshop, or Illustrator,
and have an Adobe subscription, you have free access to those
typefaces. However, if you don't use Adobe software and don't have
access, don't worry. There are great alternatives in the Google package.
Anyway, | would like to mention my two favorite Adobe fonts.
Chapter 5 / UI Design Principles 041 Sofia Pro
Proxima Nova
Adobe Fonts
And finally, some additional resources, because there are never enough
typefaces!
Font Squirrel
fontsquirrel.com
1001 Fonts
1001fonts.com
fontfabric
fontfabric.com
8
@
Once we have chosen a typeface for an interface, we should focus on
scaling typography and defining styles we will use across an interface.
It's necessary to create a visual hierarchy of texts in the system.
Chapter 5 / UI Design Principles 042 It means that we define particular fonts. For that, you should determine
the following aspects:
+ Name/Scale category
+ Typeface
+ Weight
+ Size
+ Case
+ Letter spacing
+ Line height
Heading 1 Text n
karla
° e=a
Font Scaling
As mentioned, typography is not an easy discipline, but you can follow
some standard rules, helping you to make your typography usage much
smoother. Those rules are related precisely to the aspect of typography
scaling mentioned above.
Chapter 5 / UI Design Principles 043 Line spacing or line height is the vertical distance between lines of text.
Fonts require different settings, but you should choose 140-170% line
height for excellent readability. The percentages are based on particular
fonts, but overall small fonts require more spacing.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis pulvinar. Et harum Text
quidem rerum facilis est et expedita
distinctio. Nulla non lectus sed nis! molestie
malesuada. Duis ante orci, molestie vitae
vehicula venenatis, tincidunt ac pede. Itaque
earum rerum hic tenetur a sapiente 80% Ld
delectus, ut aut reiciendis voluptatibus
maiores alias consequatur aut perferendis
doloribus asperiores repellat.
Sora
Regular 32
Line height
When talking about line spacing, we should mention the maximum line
length, which shouldn't be longer than 80 characters in a single line. It
means that line length is flexible based on the font size. For bigger
fonts sizes you can use wider text blocks.
Max 80 Characters
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis pulvinar. Et harum
quidem rerum facilis est et expedita
distinctio. Nulla non lectus sed nis! molestie
malesuada. Duis ante orci, molestie vitae
vehicula venenatis, tincidunt ac pede. Itaque
earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus
maiores alias consequatur aut perferendis
dolorib lat.
joloribus asperiores repellat Line length
Chapter 5 / UI Design Principles 04a Then there is letter spacing, which means horizontal spacing between
text characters. | personally don't edit this aspect for most of the styles.
On the other hand, there is no rule saying that you can't adjust it.
Mainly for styles using all uppercases increasing letter spacing might
improve its readability.
Random Text Random Text
Line length
Accessibility represents a design principle influencing most of the
other design disciplines, and it’s the same for typography. Ensure you
provide enough contrast to make the readability of your designs on a
proper level!
A® BO©
Lorem ipsum
Color Contrast
Chapter 5 / UI Design Principles 045 When discussing typography, avoiding extremes like using bold or thin
font weights is good.
©
m lorem Lorem Lorem
Font Weight
From a readability perspective, you should prioritize alignment on the
left. On the other hand, a center-aligned text might be okay for some
websites, but preferring left-aligned text is a safer choice. Right-aligned
text blocks are used only for interface in the Arabic alphabet or tables
with columns containing number and date values.
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, _Lorem ipsum dolor sit amet,
consectetuer adipiscing consectetuer adipiscing elit. consectetuer adipiscing elit.
Aliquam erat volutpat. Fusce Aliquam erat volutpat. Fusce _—_—Aliquam erat volutpat. Fusce
dui leo, imperdiet in, aliquam dui leo, imperdiet in, aliquam dui leo, imperdiet in, aliquam
sit amet, feugiat eu, orci. sit amet, feugiat eu, orci. sit amet, feugiat eu, orci
Text Alignment
Ensure you understand and apply all the mentioned principles and
rules, as the typography game might be pretty tricky and significantly
impact the user experience.
Chapter 5 / UI Design Principles 046 Colors
Colors are with typography, one of the critical aspects of good interface
design. We've already discussed colors in the accessibility topic, where
we learned about the importance of color contrast. Color contrast ratio
is the first aspect you should think about when you want to apply some
colors to proper elements.
To identify a particular color, designers usually use HEX codes. This
code contains a six-digit number with a hashtag symbol in the
beginning, This code is also crucial for developers, who can copy and
implement them within the entire design.
a =
Hex ~ — [ oaoc2e 100%
HEX Codes
The first step for successful color usage is to choose the right colors for
an interface. For this process, you should know the meanings of proper
colors to match them with the purpose of an interface and the
company's branding. In the following picture, you can see some
examples of emotions asociated and stimulated by particular colors.
Chapter 5 / UI Design Principles 047 Fr
.dom, trust, loyalty, joy, winsdom
Imagination, mystery, sensitivity
Energy, passion, attention, courage
Growth, harmony, kindness, safety
Hapiness, spontanity, positivity, enthusiasm
Optimistic, fun, creativity, Intependency
Purity, simplicity, peace, precision
Power, control, elegance, authority emotion & col
We can identify specific industries using concrete colors based on
history and emotions associated with the colors. In the following
picture, you can find some bright examples. Of course, there's no rule to
use blue if you design a finance app. On the other hand, it's a great
source of inspiration for your picks.
Security finance, technology, accounting, banking, health
Physic, humanitarian, technology
Food, sport, children products, health
Enviroment, banking, realestate, non-profit,
Food, travel
ransportation, creative industries
Art, food, sport, entertainment.
Heath, luxury brands, fashion, jewels
Automotive
luxury brands, fashion
Industries & Colors
Chapter 5 / UI Design Principles 048 Once you choose a proper color palette, you should follow some
principles to implement it. This process should be based on your sense
of smooth color usage, but a pattern called 60-30-10 offers you a
general key to how to set the colors. It states that 60% of the screen
should be a dominant color, 30% should be a secondary color, and the
last 10% should be an accent color.
Of course, the 60-30-10 ratio is only approximate. You don't have to
measure objects to achieve precisely this ratio. Also, the mentioned
color assignment is flexible, so you can use the secondary color as an
accent if it's suitable for a particular screen.
60-30-10 Color Rule
Another topic related to the colors in UI design refers to gradients.
Gradients were, for a long time, a no-go thing in UI design, but in recent
years, gradients have turned into modern usage of colors in interface
design and branding. A bright example is Instagram, with its logo
released in 2016. Many people didn't like it at first, but everyone has
become accustomed to the new logo these days. From my point of view,
Chapter 5 / UI Design Principles 049 the new one is much better than the previous logo. | love its simplicity
and the color gradient combination.
For gradients, | recommend you choose neighboring colors in the
general color wheel to preserve the nature of the colors. You can also
see the smoothness of the second gradient, which looks much better in
comparison with the first option. Those rules are closely inspired by
colors in nature, where many designers find their inspiration.
oO
a
But it's not only about choosing the right colors for your gradient. It
would be best if you aimed to keep the transition smooth. In Figma, you
can adjust it by customizing the color picker's distance, which should
be relatively high rather than small.
Gradient Colors
Chapter 5 / UI Design Principles 050 = of as
7 7
= i eS
Color Distance
Ensure you don't use too many colors within the gradient. | usually don't
go beyond 2-3 colors within the gradient.
A® BO
eee oe
Number of Colors
Chapter 5 / UI Design Principles 051 We've mentioned that color gradient is a trendy way to use colors in UI
design. Another trend is dark mode interfaces, which may be absolutely
casual color usage these days. Moreover, some of the platforms on the
market offer to switch between light and dark modes to meet all user
requirements. I'm sure you will face designing some interfaces using
dark mode, so let's go quickly through some tips on properly using
colors for dark interfaces
The first very important rule is to avoid using saturated colors. As you
can see in the examples, saturated colors don't meet contrast ratio
requirements and look very distracting and vibrant.
Colors Saturation Dark Mode
According to the material design system by Google, you should avoid
using pure black #000000 for background. On the other hand, Apple
uses pure black as a background in their products, so it's up to you if
you follow Google or Apple guidelines in this way. | would rather follow
the Apple ones, so using pure black is fine with me
Chapter 5 / UI Design Principles 052 The following rule is the same for all dark mode interfaces, no matter
which design system you follow. You should avoid using white shadows
for the elements inside. This rule is different from light mode
interfaces, where designers use dark shadows to communicate the
depth of the components inside. In the examples, you can see that
white shadows do not look so natural.
Drop Shadows Dark Mode
There are many great resources and tools if you need inspiration for
finding the best color palette, checking a contrast ratio, or running a
color blindness simulation. Get inspired by my favorite resources to
help you improve your color usage
+ Color palettes & colors - colorhunt,com, picular.com, coolors.com
+ Gradients - grabient.com , gradienthunt.com, gradienta.io
+ Colors accessibility - webaim.org, getstark.co, colourcontrast.cc
Chapter 5 / UI Design Principles 053 Icons
Icons are small elements with a significant impact on the overall user
experience. Icons are like shortcuts providing an easy-to-understand
interface, for example, in navigation or system messages. At first sight,
it might look like an easy discipline, but sometimes choosing suitable
icons might take a lot of time and effort.
We can define system icons as small symbols that stand in an
interface to communicate some information quickly. You can be
creative in choosing a style of icons in the system, but you should be
conservative in the course of its meaning
If we look at the following icon in the context of an interface design, |
think most of us will imagine the same purpose. A cog icon usually
stands for some settings or customization. You shouldn't reinvent the
wheel. Follow the habits and practices developed during the years of
interface design and try not to confuse users with some revolution in
the meaning of icons.
Cog leon
Chapter 5 / UI Design Principles 054 It's not an icon like an icon. There are many types, but we can
differentiate five basic types of icons. There are no strict rules on when
you should use particular style, but overall we can say that using linear
icons is the safe choice. On the other hand, you can combine types of
icons as well. The key is to stay consistent with the icon design aspects
like line width or its complexity.
2. a —
