Design Mobile Apps in Adobe XD - Android & iOS - UI/UX

The Complete Course to Designing Apps in Adobe XD! Create interactive prototypes WITHOUT any coding!

4.61 (1064 reviews)
Udemy
platform
English
language
Web Design
category
7,511
students
14 hours
content
Sep 2023
last update
$99.99
regular price

What you will learn

Create beautiful apps in 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

Description

Learn to design outstanding mobile 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 Adobe XD. I've taught over 250.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 Adobe XD 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?

    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.


  2. 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.

Content

Getting Started

Requirements and your expectations
Join Our Photoshop Community and Download all Resources
Photoshop vs Adobe Experience Design vs Sketch
Don’t design any mobile app without this!
Activity: Design your first app layout – Part 1
Activity: Design your first app layout – Part 2
How much money can you earn as an app designer?
Preview your designs on your phone
Optional - Computer requirements
Discover the differences between Android and iOS apps

Best Photoshop Techniques for App Designing

Introduction
Set up Photoshop for app designing
Best settings for an Android project in Photoshop
Must-know artboard features in Photoshop
10 Tips to efficiently work with vectors in Photoshop
Best tips for layer alignment
Learn to efficiently select layers in artboards
Exercise: Layer selection and repositioning
Solve the previous exercise
Best typography tips for app designing
Learn how to actually use smart objects

Material Design and Essential Android Components

Introduction to Material Design
Android interface components overview
Learn to design the action bar
The simple guide to sizing components in pixels
Sizes in pixels & action bar showcase
Everything you need to know about tabs
Displaying content in cards
Beautiful and effective buttons on Android
Text Fields
FREE size guide for Android components

Food Delivery App

Introduction to this section
Understanding the brief and the client's wishes
Analyze the app’s competitors – Part 1
Analyze the app’s competitors – Part 2
Layout for the location (1) and listing (2) screens
Layout for the restaurant details (3) screen
How to make great design choices
Design concepts for the location screen (1)
Design concepts for the restaurant listing (2)
Restaurant listing alternatives (2)
Final restaurant listing variations (2)
Design concepts for the restaurant details (3) screen
Choosing the best typeface
Define and refine our app’s style
Finishing touches screen 1
Finishing touches on screens 2 and 3
Section overview

Android Icons & Design Principles

Section introduction
What do you want to be? A designer or a problem-solver?
Discover the one thing that ruins all your designs
UI Icons in Android apps
Hands-on icons: Create a dashboard panel
Android Icons: Case studies
A guide for app design inspiration
Target audience and the app’s story
Create a mood board
Discover what makes an app beautiful

The Principles of Color in Android Apps

Android color fundamentals
How to use color appropriately
The principle of color contrast
The best color schemes from top apps
Tools for awesome color schemes
How to implement a color scheme

Typography in Android Apps

Android typography fundamentals
7 rules for Android legibility
Guide for perfect font sizing in Android apps
Typography: what the biggest apps are doing
How to make lots of text look great
How to pair fonts correctly

Designing iOS Apps

iOS apps – Overview
1x, 2x, 3x, PPI, notch?! iOS artboard size guide
App design comparison: iOS vs Android
My take on the official UI Kit
iOS status bar (with/wo Notch)
iOS Navigation bar
iOS Tab bar
iOS Text Fields
iOS Controls
Running Android apps on Mac OS
The official iOS typeface – should you use it?
iOS conclusions

Food Delivery App - Part 2

Section introduction
Preparing the PSD for 20+ screens
Login and registration screens – version 1
Login and registration screens iteration
Design the right menu
Design the left menu
Creating card-based layouts for Addresses and Payments
Add a payment method – Design a credit card
Design the Reviews screens
Create the restaurant’s address and user profile screens
Making the order history screen & success page
Create the order details screen
An overview of our progress

Introduction to Adobe XD

Introduction to Adobe XD (Experience Design)
Learning XD and setting your expectations
An overview of XD’s interface
Getting around in Adobe XD
Selecting layers in XD
Shape fundamentals in Adobe XD
Editing shapes in Adobe XD
Text fundamentals in XD
Grid and smart guides
Pen tool
Working with photos and masks
Adobe XD tips & quirks

Supercharge your work in Adobe XD

Optional - Disable Adobe XD's Recording Message on Windows
From Photoshop to XD
Create real-life mockups in just a few clicks
Lightning speed with the Assets panel
Linked symbols
Preview and device preview
Prototyping overview and sharing your design
Create interactive prototypes
Prototyping tips and tricks
Make your app prototype seem real
The incredible auto-animate and drag
The Libraries panel

How to Work with Mobile App Developers

Introduction to Zeplin
What the coder gets out of Zeplin
From Photoshop to Zeplin to Android Developers
Anything is possible in Android! Make clients & coders love you
Design specs through XD
Exporting from XD
The best way to work with coders in Zeplin

Designing & Prototyping in Adobe XD

Introduction
Import and fix the PSD in Adobe XD
Setting up the prototype
Prototyping the login and register screens
Dealing with the City dropdown
Creating the map interaction
Finishing the initial screen interactions
Analyzing our progress
Recover password and create an account
Recreate the restaurant listing in Adobe XD
Creating a search bar

Advanced Techniques in Adobe XD

Connecting the left menu
Connecting the filters
Creating an animated tab system for the dish listing
Creating the app’s routes – difficult!
Continuing route 1: user registers at the beginning
Route 2: user registers during checkout
Route 3: user already has an account
Restaurant information and reviews
Fine-tuning and project analysis
Preparing to export to Zeplin
Export to Zeplin

Final Thoughts from Chris

Final Thoughts & What's Next

Screenshots

Design Mobile Apps in Adobe XD - Android & iOS - UI/UX - Screenshot_01Design Mobile Apps in Adobe XD - Android & iOS - UI/UX - Screenshot_02Design Mobile Apps in Adobe XD - Android & iOS - UI/UX - Screenshot_03Design Mobile Apps in Adobe XD - Android & iOS - UI/UX - Screenshot_04

Reviews

Usaama
October 15, 2023
I wanna become full mobile developer so this course will help me to design apps that I need to develop
Paulo
September 6, 2023
This course is totally complete and helpfull. A lot of informations and design materials that we can use and share into our carreers. Thank you so much!
Mark
July 5, 2023
This course it too Android heavy for my needs. There is only one section on iOS, everything else is geared toward Android, even though iOS is in the course title. Also, I bought this course because I knew Chris from his Figma courses but here he only teaches the first and last sections. Some unidentified/unseen character reads all the other scripts. I am asking for a refund.
Krishna
March 12, 2023
This course is helping me to learn a lot on app designing but it would be more interesting to learn if it consist more practicals
Nataliya
October 23, 2022
I like clear explanations on the way, explanations of the thought process, what actually is needed and asked from newbiew in the portfolio (per all videos I have checked on Youtube) to show the thought process behind decisions. I am in the beginning of the course; so far clear and methodical. I would underline methodical, because a lot of material I saw for example on Adobe Challenges leave a feeling of frustration and not completed lessons.
Pashupati
April 24, 2022
This course is pretty outdated, the principles which are told for android and IOS app design are not in trend now, I would not recommend this course if you want to enter app design in 2022
Dave
January 24, 2022
I have 2 major problems with this course. Firstly, critically, if you, like me, want to design iOS apps, then this isn't the course for you. It's Android-focussed with just an hour in the middle dedicated to iOS. while the presenter will assure you that there are many common principles, he does also call out that you shouldn't try to learn Android and iOS design at the same time because they are, in several key ways, very different. Secondly, Christian doesn't present this course himself. He calls out in the introduction that he didn't want to distract anyone with his accent, so he got a British voice talent to read his scripts. Everyone has an accent, and we live in an online, global world full of people who speak in different ways. With no offence to Mark, for this type of course it's a mistake to use any other voice but the authors. It adds an extra degree of separation between instructor and pupil, which stacks on top of the remote-learning concept to leave you feeling completely removed from the expert who should be presenting the course. I found the voice to be a major distraction throughout the first 3 hours of the course that I worked through, sounding just forced-enthusiastic when you know he doesn’t truly understand what he’s reading. All that said, while I'm not going to finish this course unless I want to design Android Apps, the early sections have a lot of great Photoshop refreshers and techniques for workflows, so I'll use it as a resource library if I need to look something up.
Cautious
October 19, 2021
Amazing i always learn things online courses since i started designing but it's my first time having a great teacher
Thư
September 5, 2021
Many thanks to Mr. Chris Barin for the absolutely amazing course you have done on UDEMY. I am so grateful for all of your hard work. Here is my project, If you have time , let check how it works after your course. :) thanks again!! https://www.behance.net/gallery/127524195/Yummy-Food-App-UI-design
Ernest
August 26, 2021
The course itself is well prepared and OK for beginners who know basics of Photoshop and decided on switching to XD and UI design. However, you should look for any other course focused fully on Adobe XD. Learning UI design in Photoshop is painful and there are reasons to leave it. I took it to check my existing knowledge and transfer it to XD. I was a bit disappointed. I gave the course a second try after long break but maybe my expectations were too high.
Shivam
July 4, 2021
You have the finest way to explain the things, and make them crystal clear. I have never thought, app designing can be so fun to learn. Thanks man for this wonderful course.
Roopini
June 17, 2021
Thank you very much Cristian Doru Barin, Design thinking, using tools, creating prototype and project handout to developers learnt all these, once again thank you from bottom of my heart
Pritam
May 30, 2021
This is a gem of a course. People who want to know how to design mobile apps should definitely take up this course. This will take you to zero to mid level skills, You will be easily able to design your own apps or do it for your clients. I loved this course
Rolands
February 27, 2021
As I have already learned other Chris courses about designing there was no big problems to start App design course it was harder to remember all these new sizes and components that App designing has. Most interesting part for me was Prototyping. I have never done it before. But i can say that at the end i was starting to think how to conect all things by myself. This thing truly took me. Thank you Chris for this course. :)
Roshan
February 5, 2021
Everything was covered in great detail, and if you do all the projects and manage to keep up with Chris's pace then you'll definitely be able to design great looking apps by the end of this course.

Charts

Price

Design Mobile Apps in Adobe XD - Android & iOS - UI/UX - Price chart

Rating

Design Mobile Apps in Adobe XD - Android & iOS - UI/UX - Ratings chart

Enrollment distribution

Design Mobile Apps in Adobe XD - Android & iOS - UI/UX - Distribution chart

Related Topics

2030286
udemy ID
11/16/2018
course created date
7/15/2019
course indexed date
Bot
course submited by