Free sample (60+ pages) 200+ 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.

Design Theory (iOS + Android) | Fintech UI Kit | UX/UI Design Templates | Style Sheet | Design System | Figma Practice Files
Table of Contents

Prepare your practice files 379

3 4
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

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

status bar

1x 2x 3x
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
Material Foundation Material Foundation

high DPI screen low DPI screen

Material Design Low-density screen dp High-density screen dp

93 94
Material Foundation Material Foundation

119 120
 Alan, Jeffery

Recent project updates

Android native elements Android native elements
Helen, Adam, Amanda

Grace, Christian

Lori, Susan

Lauren, Alan, Susan Mail Chat Rooms Meet

Andy, Christian
Compose

Mail Chat Rooms Meet

Mail Chat Rooms Meet

139 140
Android vs iOS Android vs iOS

175 176
Design Tokens Design Tokens

To use design tokens, you need two things - Figma and a plugin called
“Figma Tokens.”

They compromise all of the styles available in a design system.

They define the main purpose for using a specific style for
typography, buttons, shapes, etc., in their respective context.

These haven’t been released yet and exist only in the theoretical
+ +
space. They represent the values and elements that build a
specific component, such as containers, labels, icons, and states.

199 200
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
Standard transfer Own transfer
36px

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