CF

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 the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What is Design Mobile Apps: UI, UX & Prototyping in Adobe XD & PS about?
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…
Who teaches this course?
It is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 148 lessons with a total runtime of 14 hours 51 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/design-mobile-apps-ui-ux-prototyping-in-adobe-xd-ps. The page hosts every lesson with the integrated video player; no download is required.