Free sample (50+ pages) 100+ High-quality app screens included
AdrianK
@uiadrian
the UI Professional’s
Design Manual
the ultimate guide to master mobile design
Learn and practice mobile design on a real Figma project
with auto-layout and responsive constraints.
iOS Theory | Fintech UI Kit | Auto-layout ready | UX/UI Design Templates | Style Sheet | Design System | Figma Practice Files
Table of Contents Fintech App
Theory
7
Please, play the video first! 225
Prepare your practice files 227
3 4
Design Manual Outro
5 6
Introduction Introduction
Hello there!
Adrian here. I am one of the designers behind this eBook. I just wanted
to personally thank you for purchasing “the UI’s Professional Design
Manual”!
Thank you so much for getting yourself a copy; now I’ll let on my
secret design process :)
This e-book is inspired by my own experiences, struggles, and
overwhelming confusion I’ve been through at the beginning of my app
design journey, to running a design subscription agency and then
landing a job as a product design lead in one of the fastest-growing
product design agencies in London (shoutout to Solace!), as well as
getting myself to the point of living a very comfortable life at the
comfort of my own desk with only my laptop (and my wife) by my side.
The last part is not easily replicable, though, so I can’t promise you’ll
find yourself a wife (or husband) after reading this e-book . You will,
however, become more valuable to design agencies and clients alike,
knowing to properly design an entire app from start to finish using the
best iOS design principles.
We’re really flattered to see you here and we are forever grateful for all
Let’s give you a proper introduction first. your continuous support. Without you, we wouldn’t have been able to
write this e-book and it still feels surreal to think that we’ve built such
an amazing community in just 8 months! Thank you so much for being
a part of it. ️
7 8
Introduction Introduction
Why did we write this ebook?
9 10
Introduction Introduction
11 12
Introduction Introduction
If enough people are interested in the UX, we'll probably write a new
book to explain the UX process in much more detail. But for now, we’ll
go through most UX stages, and to keep things simple, we're mainly
focusing on the design part. Otherwise, this e-book would be 800
pages long (which it will, after the 2nd update ), and I feel you'd
easily get lost in the process.
All the screens we're going to be thoroughly analyzing will be named
so that you can locate them quickly in your practice file and follow
along. I suggest you fire up your Figma and design in parallel with me.
I'll tell you how to set everything up when it's time, so don't worry
about it for now.
A quick encouragement for my designer newbies
13 14
Who is this ebook for? Who is this ebook for?
Who is this ebook for?
Who is this for?
15 16
Who is this ebook for? Who is this ebook for?
17 18
Resources list Resources list
Resources list
21 22
iOS design principles iOS design principles
Imagine Coca-Cola being blue or Facebook being red. Feels weird,
right? Color is an amazingly powerful tool for brand-building,
storytelling, and conveying the right emotions.
2. Decide on the number of colors you’re going to use. It’s best to
How to pair colors have one primary, one secondary, and if you really need, one tertiary
As designers, we realize how difficult it can be to choose the color with two neutrals - dark and light.
appropriate colors and color combinations for our designs.
Here are the main guidelines for choosing your color schemes:
1. Find your primary color – App designers use different methods to
pick the best color palette for their apps. The most used methods are
the analogous method and the monochromatic method of color
choice. Some do it by intuition or use color tools available on the web.
One of the most popular tools you can use to create your color palette
manually is Adobe Colors. It’s a bit more complicated and if you’re a
beginner I wouldn’t worry about it for now. We’ll cover this later.
experiencewelcome.com
67 68
iOS design principles iOS design principles
Layout guides and safe areas
1x 2x 3x status bar
safe area
(10 x 10 px) (20 x 20 px) (30 x 30 px) (44 px tall)
margin
(16 px)
home indicator
(34 px tall)
87 88
iOS design principles iOS design principles
Touch targets Thumb zone
44 px
44 px
91 92
iOS design principles iOS design principles
101 102
Auto-layout Auto-layout
Practice auto layout with Figma
135 136
Fintech UI Kit Fintech UI Kit
155 156
UX Research UX Research
Ability to connect to external bank account
The visualization of dat
Expense tracking and ability to generate report
Bank/Credit card integratio
Top-notch securit
A currency converte
Payment reminder
Easy top-ups
175 176
UX process overview UX process overview
193 194
Practice files Practice files
Fintech practice files
9:41
Order a card
Debit card
231 232
Onboarding - the theory Onboarding - the theory
Our onboarding experience - Walkthroughs
259 260
Sign up- the theory Sign up- the theory
Error state and messages Login page
office@com !
i Error. Field validation failed.
office@com !
i Please enter a valid email address
281 282
Legal informaton - the theory Legal informaton - the theory
UX Copy
Enable notifications Push notifications
Get instant payment
notifications!
359 360
Cards - the structure Cards - the structure
Card name
Full legal name (including middle)
8 px
8 px Your virtual card is ready
24 px
56 px
8 px
16 px
451 452
Money transfer - the structure Money transfer - the structure
Transfer money - structure
iOS segmented picker
24px
36px Standard transfer Own transfer
80px
56px Label container and segmented picker
16px
Reminder: If you ever need to change the settings of your controls,
look at the right property panel. This is where all your component’s
variable properties are.
563 564
Design hand-off Design hand-off
22. The design hand-off
Design hand-off
603 604
What’s next? What’s next?
615 616
What’s next? What’s next?
619 620
