Ultimate App Design

The Complete Guide to Designing Apps in Photoshop & Adobe XD! Create interactive prototypes WITHOUT any coding!

Last updated 2022-01-10 | 4.7

- Create beautiful apps in Photoshop & Adobe XD
- Create interactive prototypes that make the app look like it's coded
- Design according to the Material Design principles

What you'll learn

Create beautiful apps in Photoshop & Adobe XD
Create interactive prototypes that make the app look like it's coded
Design according to the Material Design principles
Increase your speed through tips
tricks
and special techniques

* Requirements

* Minimal Photoshop knowledge - know the hotkeys
* tools
* and you've used it at least 30 days combined in the last 6 months
* Patience & commitment - the journey will be difficult at times!

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!

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;

FAQ:


  1. Will I learn how to code them? Kotlin, Java, Swift, Android Studio, Xcode, Eclipse?

    No, that's not covered. However, I do teach you how to talk to developers and prepare everything. You won't have to slice or manually export your assets. I'll show you all my secrets as the CEO of my own Mobile App Design company, founded in 2013.


  2. What Photoshop version do I need to have?

    Any CC version will do. CS6 is not good enough, but you can get a free 7 day trial from Adobe's website. More than enough time to watch this course.


  3. Is this course for everybody?

    I don't assume you have any experience regarding mobile apps. You do need basic Photoshop skills. This is explained in detail in the lecture called "Requirements and your expectations". In short, if you're not a complete beginner in terms of Photoshop, you'll be fine.


  4. What will we design?

    We have a few projects, but there's a flagship app that's as real as they get. Over 70 screens in the final prototype - beautiful, sleek, interactive, modern. All the cutting edge techniques and best practices are used.

Final, personal note: I can honestly say there isn't anything like this anywhere out on the market. Believe me, I've looked long and hard. The course is PACKED full of knowledge I would have loved to have at the beginning of my career as a mobile app designer. I believe it's going to help a lot of people get a fantastic life skill. By far, this is the best course I've ever created. I hope you'll feel the same way.

Who this course is for:

  • Anybody that wants a dependable life skill that can bring a solid income
  • Designers who want to know more about Material Design, creating apps, and interactive prototypes
  • Anyone who wants to launch their own mobile apps
  • Developers who want to expand their skill set
  • Photoshop users that are looking for an alternative tool - Adobe XD

Course content

15 sections • 151 lectures

Requirements and your expectations Preview 09:05

Join Our Photoshop Community and Download all Resources Preview 02:24

Photoshop vs Adobe Experience Design vs Sketch Preview 05:44

Don’t design any mobile app without this! Preview 05:22

Activity: Design your first app layout – Part 1 Preview 07:00

Activity: Design your first app layout – Part 2 Preview 07:23

How much money can you earn as an app designer? Preview 03:07

Preview your designs on your phone Preview 04:05

Optional - Computer requirements Preview 08:31

Discover the differences between Android and iOS apps Preview 04:32

Introduction Preview 03:19

Set up Photoshop for app designing Preview 04:46

Best settings for an Android project in Photoshop Preview 05:33

Must-know artboard features in Photoshop Preview 06:59

10 Tips to efficiently work with vectors in Photoshop Preview 11:22

Best tips for layer alignment Preview 08:16

Learn to efficiently select layers in artboards Preview 07:54

Exercise: Layer selection and repositioning Preview 02:04

Solve the previous exercise Preview 05:47

Best typography tips for app designing Preview 10:16

Learn how to actually use smart objects Preview 07:50

Introduction to Material Design Preview 03:53

Android interface components overview Preview 06:37

Learn to design the action bar Preview 06:38

The simple guide to sizing components in pixels Preview 05:19

Sizes in pixels & action bar showcase Preview 07:50

Everything you need to know about tabs Preview 08:02

Displaying content in cards Preview 05:47

Beautiful and effective buttons on Android Preview 06:55

Text Fields Preview 05:21

FREE size guide for Android components Preview 00:00

Introduction to this section Preview 04:08

Understanding the brief and the client's wishes Preview 06:55

Analyze the app’s competitors – Part 1 Preview 07:40

Analyze the app’s competitors – Part 2 Preview 07:47

Layout for the location (1) and listing (2) screens Preview 07:21

Layout for the restaurant details (3) screen Preview 06:11

How to make great design choices Preview 06:45

Design concepts for the location screen (1) Preview 08:12

Design concepts for the restaurant listing (2) Preview 08:44

Restaurant listing alternatives (2) Preview 09:50

Final restaurant listing variations (2) Preview 06:40

Design concepts for the restaurant details (3) screen Preview 09:42

Choosing the best typeface Preview 08:06

Define and refine our app’s style Preview 08:57

Finishing touches screen 1 Preview 07:04

Finishing touches on screens 2 and 3 Preview 05:00

Section overview Preview 02:05

Section introduction Preview 01:30

What do you want to be? A designer or a problem-solver? Preview 06:53

Discover the one thing that ruins all your designs Preview 04:34

UI Icons in Android apps Preview 07:16

Hands-on icons: Create a dashboard panel Preview 09:49

Android Icons: Case studies Preview 06:24

A guide for app design inspiration Preview 08:03

Target audience and the app’s story Preview 04:27

Create a mood board Preview 06:14

Discover what makes an app beautiful Preview 05:40

Android color fundamentals Preview 07:15

How to use color appropriately Preview 03:39

The principle of color contrast Preview 05:38

The best color schemes from top apps Preview 08:17

Tools for awesome color schemes Preview 03:18

How to implement a color scheme Preview 06:11

Android typography fundamentals Preview 06:52

7 rules for Android legibility Preview 04:52

Guide for perfect font sizing in Android apps Preview 05:43

Typography: what the biggest apps are doing Preview 06:18

How to make lots of text look great Preview 07:21

How to pair fonts correctly Preview 06:09

iOS apps – Overview Preview 04:35

1x, 2x, 3x, PPI, notch?! iOS artboard size guide Preview 10:16

App design comparison: iOS vs Android Preview 04:27

My take on the official UI Kit Preview 03:29

iOS status bar (with/wo Notch) Preview 02:49

iOS Navigation bar Preview 05:01

iOS Tab bar Preview 05:44

iOS Text Fields Preview 04:21

iOS Controls Preview 04:01

Running Android apps on Mac OS Preview 08:58

The official iOS typeface – should you use it? Preview 06:40

iOS conclusions Preview 01:31

Section introduction Preview 01:35

Preparing the PSD for 20+ screens Preview 08:50

Login and registration screens – version 1 Preview 10:15

Login and registration screens iteration Preview 06:50

Design the right menu Preview 09:43

Design the left menu Preview 07:09

Creating card-based layouts for Addresses and Payments Preview 07:05

Add a payment method – Design a credit card Preview 08:00

Design the Reviews screens Preview 08:20

Create the restaurant’s address and user profile screens Preview 05:25

Making the order history screen & success page Preview 04:40

Create the order details screen Preview 09:45

An overview of our progress Preview 01:47

Introduction to Adobe XD (Experience Design) Preview 08:53

Learning XD and setting your expectations Preview 04:02

An overview of XD’s interface Preview 05:37

Getting around in Adobe XD Preview 03:52

Selecting layers in XD Preview 06:11

Shape fundamentals in Adobe XD Preview 08:44

Editing shapes in Adobe XD Preview 05:52

Text fundamentals in XD Preview 04:04

Grid and smart guides Preview 03:29

Pen tool Preview 03:56

Working with photos and masks Preview 03:43

Adobe XD tips & quirks Preview 08:20

Optional - Disable Adobe XD's Recording Message on Windows Preview 01:49

From Photoshop to XD Preview 05:52

Create real-life mockups in just a few clicks Preview 05:04

Lightning speed with the Assets panel Preview 06:07

Linked symbols Preview 04:45

Preview and device preview Preview 04:32

Prototyping overview and sharing your design Preview 05:03

Create interactive prototypes Preview 05:18

Prototyping tips and tricks Preview 07:56

Make your app prototype seem real Preview 04:19

The incredible auto-animate and drag Preview 03:36

The Libraries panel Preview 02:45

Introduction to Zeplin Preview 04:30

What the coder gets out of Zeplin Preview 07:52

From Photoshop to Zeplin to Android Developers Preview 07:08

Anything is possible in Android! Make clients & coders love you Preview 10:58

Design specs through XD Preview 04:41

Exporting from XD Preview 03:12

The best way to work with coders in Zeplin Preview 02:50

Introduction Preview 01:20

Import and fix the PSD in Adobe XD Preview 06:08

Setting up the prototype Preview 03:52

Prototyping the login and register screens Preview 04:24

Dealing with the City dropdown Preview 03:55

Creating the map interaction Preview 08:24

Finishing the initial screen interactions Preview 04:18

Analyzing our progress Preview 04:38

Recover password and create an account Preview 09:29

Recreate the restaurant listing in Adobe XD Preview 03:50

Creating a search bar Preview 04:30

Connecting the left menu Preview 05:18

Connecting the filters Preview 03:09

Creating an animated tab system for the dish listing Preview 09:14

Creating the app’s routes – difficult! Preview 07:32

Continuing route 1: user registers at the beginning Preview 05:57

Route 2: user registers during checkout Preview 06:30

Route 3: user already has an account Preview 07:40

Restaurant information and reviews Preview 02:57

Fine-tuning and project analysis Preview 03:28

Preparing to export to Zeplin Preview 08:11

Export to Zeplin Preview 05:33

Do this before you start freelancing Preview 03:21

Final Thoughts & What's Next Preview 04:32

Final quiz