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

14h 51m 9s
English
Paid

Course description

Do you want to design outstanding apps? Impressive prototypes that look like the real deal but without any coding? This course is a masterclass – a comprehensive approach to mobile app designing. I’ll teach you everything you need to know, from A to Z. We’ll use Photoshop, Adobe XD, Zeplin. I've taught over 220.000 students on Udemy and I'm a best-selling instructor!

Read more about the course

You’ll learn about Material Design, the principles of color, spacing, and typography, tips and tricks, how to get design resources, and much much more. Get a life skill that’s high in demand in today’s job market, all for the price of a fancy coffee. Create beautiful apps, interactive prototypes, and supercharge your career.

You'll learn to:

  • Design beautiful mobile apps;

  • Create interactive prototypes without any previous knowledge;

  • Use Photoshop for mobile app design;

  • The principles of Material Design;

  • Learn Adobe XD from scratch;

  • Prepare all the files for developers through a special program called Zeplin;

  • How to size elements correctly on ALL phone types and sizes;

  • Typography best practices;

  • Where to get design resources like icons, custom graphics, photos, and more;

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

User Experience Design Essentials - Adobe XD UI UX Design

User Experience Design Essentials - Adobe XD UI UX Design

Sources: udemy
Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry...
12 hours 46 minutes 57 seconds
Create a Personal Portfolio using Angular 2 & Behance

Create a Personal Portfolio using Angular 2 & Behance

Sources: coursetro
The project you're going to learn how to build is based on a personal portfolio site, powered by Angular 2 which grabs projects in real-time with the Behance API. First, we st...
2 hours 8 minutes 10 seconds
Using Vue 2 to Create Beautiful SEO-Ready Websites

Using Vue 2 to Create Beautiful SEO-Ready Websites

Sources: coursetro
In this course, I'm going to show you how to create a beautiful, SEO-Friendly website while using Vue. You will be able to create modern websites with seamless page transitions ...
1 hour 48 minutes 11 seconds
Adobe XD Crash Course

Adobe XD Crash Course

Sources: leveluptutorials
In this series, we are going to dive into the user interface design tool, Adobe XD. In this series, we are going to dive into the user interface design tool, Adobe XD.
3 hours 11 minutes 58 seconds
Building awesome Color Schemes for your UI Design Projects

Building awesome Color Schemes for your UI Design Projects

Sources: udemy
Colors are used to display and convey information. If you look at the Color Scheme of any Dashboard Design for Graphs, colors are there to create meaning and sense in the data i...
4 hours 26 minutes 11 seconds