CourseFlix

Design Mobile Apps: UI, UX & Prototyping in Adobe XD & PS

14h 51m 9s
English
Paid

Do you want to design outstanding mobile apps? Create impressive prototypes that look and feel like the real deal without writing a single line of code? This course offers a comprehensive masterclass in mobile app design, guiding you step-by-step from start to finish. Learn to utilize powerful tools such as Photoshop, Adobe XD, and Zeplin. With experience teaching over 220,000 students on Udemy, I bring you expert instruction to elevate your skills!

What You'll Learn

This course covers Material Design, exploring principles of color, spacing, and typography, alongside invaluable tips and tricks. Discover how to source design elements and expand your toolkit with skills that are highly sought after in today's job market. With this knowledge, you will be able to create beautiful apps and interactive prototypes, setting you on a path to advance your career.

Key Learning Outcomes

  • Master the art of designing stunning mobile apps.

  • Create engaging interactive prototypes without any prior experience.

  • Leverage Photoshop for effective mobile app design.

  • Understand and apply the principles of Material Design.

  • Learn Adobe XD from the ground up.

  • Prepare comprehensive files for developers using Zeplin.

  • Accurately size elements across all phone types and dimensions.

  • Implement typography best practices for mobile design.

  • Discover resources for icons, custom graphics, photos, and more.

About the Author: udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 148 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 148 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Requirements and your expectations
All Course Lessons (148)
#Lesson TitleDurationAccess
1
Requirements and your expectations Demo
09:10
2
Join Our Photoshop Community and Download all Resources
02:26
3
Photoshop vs Adobe Experience Design vs Sketch
05:48
4
Don’t design any mobile app without this!
05:25
5
Activity: Design your first app layout – Part 1
07:04
6
Activity: Design your first app layout – Part 2
07:27
7
How much money can you earn as an app designer?
03:10
8
Preview your designs on your phone
04:07
9
Optional - Computer requirements
08:36
10
Discover the differences between Android and iOS apps
04:35
11
Introduction
03:22
12
Set up Photoshop for app designing
04:49
13
Best settings for an Android project in Photoshop
05:37
14
Must-know artboard features in Photoshop
07:03
15
10 Tips to efficiently work with vectors in Photoshop
11:28
16
Best tips for layer alignment
08:21
17
Learn to efficiently select layers in artboards
07:59
18
Exercise: Layer selection and repositioning
02:05
19
Solve the previous exercise
05:50
20
Best typography tips for app designing
10:22
21
Learn how to actually use smart objects
07:54
22
Introduction to Material Design
03:55
23
Android interface components overview
06:41
24
Learn to design the action bar
06:42
25
The simple guide to sizing components in pixels
05:22
26
Sizes in pixels & action bar showcase
07:54
27
Everything you need to know about tabs
08:07
28
Displaying content in cards
05:51
29
Beautiful and effective buttons on Android
06:59
30
Text Fields
05:24
31
Introduction to this section
04:11
32
Understanding the brief and the client's wishes
06:59
33
Analyze the app’s competitors – Part 1
07:44
34
Analyze the app’s competitors – Part 2
07:51
35
Layout for the location (1) and listing (2) screens
07:25
36
Layout for the restaurant details (3) screen
06:15
37
How to make great design choices
06:49
38
Design concepts for the location screen (1)
08:16
39
Design concepts for the restaurant listing (2)
08:49
40
Restaurant listing alternatives (2)
09:55
41
Final restaurant listing variations (2)
06:44
42
Design concepts for the restaurant details (3) screen
09:47
43
Choosing the best typeface
08:10
44
Define and refine our app’s style
09:02
45
Finishing touches screen 1
07:09
46
Finishing touches on screens 2 and 3
05:03
47
Section overview
02:07
48
Section introduction
01:32
49
What do you want to be? A designer or a problem-solver?
06:57
50
Discover the one thing that ruins all your designs
04:37
51
UI Icons in Android apps
07:21
52
Hands-on icons: Create a dashboard panel
09:54
53
Android Icons: Case studies
06:28
54
A guide for app design inspiration
08:07
55
Target audience and the app’s story
04:30
56
Create a mood board
06:18
57
Discover what makes an app beautiful
05:44
58
Android color fundamentals
07:19
59
How to use color appropriately
03:42
60
The principle of color contrast
05:42
61
The best color schemes from top apps
08:22
62
Tools for awesome color schemes
03:21
63
How to implement a color scheme
06:15
64
Android typography fundamentals
06:56
65
7 rules for Android legibility
04:55
66
Guide for perfect font sizing in Android apps
05:46
67
Typography: what the biggest apps are doing
06:22
68
How to make lots of text look great
07:25
69
How to pair fonts correctly
06:12
70
iOS apps – Overview
04:38
71
1x, 2x, 3x, PPI, notch?! iOS artboard size guide
10:21
72
App design comparison: iOS vs Android
04:29
73
My take on the official UI Kit
03:31
74
iOS status bar (with/wo Notch)
02:51
75
iOS Navigation bar
05:04
76
iOS Tab bar
05:48
77
iOS Text Fields
04:24
78
iOS Controls
04:04
79
Running Android apps on Mac OS
09:03
80
The official iOS typeface – should you use it?
06:44
81
iOS conclusions
01:32
82
Section introduction
01:36
83
Preparing the PSD for 20+ screens
08:54
84
Login and registration screens – version 1
10:20
85
Login and registration screens iteration
06:54
86
Design the right menu
09:49
87
Design the left menu
07:13
88
Creating card-based layouts for Addresses and Payments
07:09
89
Add a payment method – Design a credit card
08:04
90
Design the Reviews screens
08:25
91
Create the restaurant’s address and user profile screens
05:29
92
Making the order history screen & success page
04:43
93
Create the order details screen
09:51
94
An overview of our progress
01:49
95
Introduction to Adobe XD (Experience Design)
08:58
96
Learning XD and setting your expectations
04:05
97
An overview of XD’s interface
05:40
98
Getting around in Adobe XD
03:55
99
Selecting layers in XD
06:15
100
Shape fundamentals in Adobe XD
08:49
101
Editing shapes in Adobe XD
05:56
102
Text fundamentals in XD
04:07
103
Grid and smart guides
03:32
104
Pen tool
03:58
105
Working with photos and masks
03:46
106
Adobe XD tips & quirks
08:25
107
Optional - Disable Adobe XD's Recording Message on Windows
01:50
108
From Photoshop to XD
05:56
109
Create real-life mockups in just a few clicks
05:07
110
Lightning speed with the Assets panel
06:11
111
Linked symbols
04:48
112
Preview and device preview
04:35
113
Prototyping overview and sharing your design
05:06
114
Create interactive prototypes
05:21
115
Prototyping tips and tricks
08:00
116
Make your app prototype seem real
04:21
117
The incredible auto-animate and drag
03:38
118
The Libraries panel
02:48
119
Introduction to Zeplin
04:33
120
What the coder gets out of Zeplin
07:57
121
From Photoshop to Zeplin to Android Developers
07:12
122
Anything is possible in Android! Make clients & coders love you
11:04
123
Design specs through XD
04:44
124
Exporting from XD
03:15
125
The best way to work with coders in Zeplin
02:52
126
Introduction
01:21
127
Import and fix the PSD in Adobe XD
06:12
128
Setting up the prototype
03:55
129
Prototyping the login and register screens
04:27
130
Dealing with the City dropdown
03:58
131
Creating the map interaction
08:29
132
Finishing the initial screen interactions
04:20
133
Analyzing our progress
04:41
134
Recover password and create an account
09:34
135
Recreate the restaurant listing in Adobe XD
03:53
136
Creating a search bar
04:33
137
Connecting the left menu
05:21
138
Connecting the filters
03:11
139
Creating an animated tab system for the dish listing
09:19
140
Creating the app’s routes – difficult!
07:37
141
Continuing route 1: user registers at the beginning
06:01
142
Route 2: user registers during checkout
06:33
143
Route 3: user already has an account
07:44
144
Restaurant information and reviews
02:59
145
Fine-tuning and project analysis
03:31
146
Preparing to export to Zeplin
08:16
147
Export to Zeplin
05:36
148
Final Thoughts & What's Next
04:35
Unlock unlimited learning

Get instant access to all 147 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription