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!
Design Mobile Apps: UI, UX & Prototyping in Adobe XD & PS
14h 51m 9s
English
Paid
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;
About the Author: udemy
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.
Watch Online 148 lessons
0:00
/ #1: Requirements and your expectations
All Course Lessons (148)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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