Android App UI Design with Adobe Photoshop & Material Design

Name: Android App UI Design with Adobe Photoshop & Material Design
Rating: 4.6 (96 reviews)

Learn how to design awesome Android App UI using Photoshop while following Google Material Design Guidelines

Highest Rated

Created byMuhammad Ahsan Pervaiz

Last updated 1/2020

English

What you'll learn

Ins and Outs of Android App Design
Master Google Material Design Sizes and Specifications of Design
Understanding Google Material Design Colors
Theme your Android Apps with your own Colors
Export all your assets using Photoshop and 9 Patch tools
Handoff your designs to developers using Zeplin
What is DP, SP and how to convert them to Pixels?
How Google Material Shadows & Elevations work?
Design Sleek Android Apps using Photoshop
Understand Pro Level Android App Design Process and Workflow
Learn What's New in Google Material Design 2.0

Course content

6 sections • 55 lectures • 5h 44m total length

Introduction to the Course2:27
Introduction to what this Android Design course will cover and who is this course for. If you are a beginner in Photoshop, take my other courses as this is not for novices in Photoshop
What is Screen Resolution and Screen Density?7:20
A lot of people get confused by Screen Resolution and Screen Density of Smart Devices. In this lesson you will learn the difference between the two and install a Free App to measure the screen resolution and density of your own Device
What is DP (Device Independent Pixels) and how its different from PX?4:14
So what is DP (Device Independent Pixel) and how Material Design uses it for different sizing of its design elements. Also how the DPs will translate into Photoshop pixel sizes
DP to PX conversion Online Tools4:11
Free online tools to convert DP to PX and convert Pixels to DPs
What are Android Density Buckets?5:00
Learn about the 5 Density Buckets Android Material Design is using and learn why do we need to create multiple graphical assets for support all the Android Device Density Buckets
Online Tools for Screen Resolution, Density and Device Sizes2:09
Online tool by Google to see the resolution, device sizes in inches and pixels along with Density of all the common smart devices we use
What are SP type sizes in Google Material Design?4:46
SP or Scale-able pixels are typography units used by Google Material Design to size text in Android Apps. Learn all about SP and how to get the accurate sizes in Photoshop
How DP works and calculated in Adobe Photoshop?13:22
A little exercise on how to convert DP unit to Pixels in Photoshop. Once you understand the relationship of Pixels and Dp, you can design any Android App with ease
Material Concepts Quiz
Section 1→ Links to Tools and Resources0:04
Links to online tools and resources to study further
Design your Introduction Screen using Photohop Android Template

UI Regions of Android Apps10:05
Learn about all the User Interface regions of Android Apps and what are their names and locations as it will help you design better
How Material Design works (Base of Material Design)?3:15
What is the science behind Material Design and how this whole Material Design actually works with Shadows and Elevations
What are Material Shadows?9:39
Learn about different Material Shadows and their uses in Android App Design
Google Material 8-point Grid in Photoshop6:35
Learn how to setup 8-point Grid system in Android Material Design and how you can set it up using Adobe Photoshop
Metrics and Vertical Spacings in Google Material Design7:18
What is the vertical rhythm of Google Material Design and how different vertical spacing and metrics work in Google Material Design?
Buttons and Icon Sizes in Material Design7:13
What are the standard button and icon sizes a designer must use in Android App Design. Learn the principles of Material Design
Types and Specs of Tabs in Android App Design8:38
Different Tabs of Material Design, their sizes, specs and when to use them. Learn all that in this lesson
App Bar in Android Material Design3:25
What are the different App bar types and what are their heights and widths in DPs and when to use them. Learn all that in this lesson
Sizes and Types of Lists in Android App Design5:11
Learn what are the different types of lists in Material Design and what are their sizes and when to use them
Single Line Lists
Two lines Lists
Three Lines Lists
Specs and usage of Bottom Navigation Bar8:09
We also have Bottom fixed Navigation in Android Apps so in this lesson, you will learn what are the specs, sizes and when to use that in your design
Side Nav Drawer in Material Design2:05
SideNav or Navigation Drawer are used most often in Material Design and Android Apps. Learn about the sizes, specs and elevation of Nav Drawer in this lesson
Android Type Scale in Photoshop9:16
How Type scale of Material design works in Photoshop. Learn how to convert SP sizes into Photoshop's pixels
Section 2 → Link to tool and Resources0:04
Links and Tools used in this section

How to build a superb Color Scheme in Material Design 2.0?8:13
If you can theme your Android Material App accurately, you have done 50% of the design work. So learn all the ins and outs of color scheme of your Android App and how many colors you actually need
Online Color Scheme tools for Material Colors6:45
Few online tools that can help you build or test your color schemes and a little about accessibility issues
Section 3 → Links and Resources for Material Colors0:01
Links and resources to online tools and study material

Download UI kits and Assets before starting design3:13
Before starting any Design, you need all the necessary assets like Icons, UI Kits and necessary files. Download them in this lesson
Using XXHDPI template in Photohsop for your Android App Design9:43
In this lesson, we will use XXHPI template to design our whole exercise and the reason why I selected 3X to start with in Photoshop
Design Signup Screen Part 17:36
Design the Signup Screen using Photoshop
Design Signup Screen Part 212:35
Design the Signup Screen using Photoshop
Design Signup Screen Part 310:32
Design the Signup Screen using Photoshop
Design Login Screen for Android Medical App10:18
Design Login Screen of your Medical Android App for Doctors
Dashboard Tabbar Design for Android App10:28
Design the Tab bar of your Android App in this lesson
Dashboard Top Content Area Design8:38
Designing the dashboard top content area
Dashboard Card Design top section10:45
Designing the Info Card for our Android App
Dashboard Card Design bottom section4:03
Designing the Info Card for our Android App
Activities Screen Design using Lists of Material Design13:01
Designing the activities screen of your Android App in Photoshop
Sync Files Screen Design8:24
Design Sync Files Screen of your Android App
Side Nav Drawer Design using Material Design Specs11:29
Design the SideNav (Drawer) of your Android App
Create 3 Screen Messaging SMS App using Google Material Design

Using Zeplin to HandOff your Design to Developer13:34
Handoff your Android App Design to your Developers using Zeplin and generate a coded style guide and text styles for your developers
What are 9-patch images and how to generate them?5:55
Learn what are 9 patch tools and how to use one to create 9 patch images for your Android Developers
What is the science behind 9-patch graphical assets?9:04
Deep dive into 9 patch tool and learn how these 9 patch graphics actually work
Using Photoshop Export As panel to export all Density Bucket assets4:32
Learn how to use Photoshop to Export multiple assets for 1x, 1.5x, 2x, 3x and 4X using Export As feature of Photoshop. So you will extract multiple images for mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi using Photoshop
Section 5 → Links and Resources 9 patch assets0:01
Links to tools for creating 9 patch images

What's New in Material 2.010:55
Learn what is new in Google Material 2.0. What they have included more? What are the new things in Material Design 2.0
New Design Options, new shapes and a lot more3:40
Design limitations and new Shapes allowed in Material Design 2.0
Spacing Grid in Material 2.02:38
Revision of Spacing and Grid in Material Design
Button Types, emphasis levels and button states in Material Design 2.03:14
How Material Design uses emphasis in Button Design and what are different types and states of Buttons
List items in Material 2.03:25
Lets revise the new Material Lists
Bottom and Top App Bar4:45
A new pattern called Bottom App bar has been introduced in Material 2.0. Learn all about it here
Material Tabs 2.02:35
A revision in the Tabs specs of Material Design
Material Cards Specs in 2.05:27
Material Card Specification and interactions. Expanding and collapsing cards and much more in this lesson
Type System Material 2.03:35
A new look to Material Typography system in Material Design 2.0
Section 6 → Links to resources in depth Material 2.00:03
Links to Material 2.0 more in depth study links
What to do NEXT?0:37
What to do next after finishing this course
BONUS LECTURE1:43
Discount coupons to take the next courses

Requirements

Knowledge of using Photoshop
Photohsop CC2018

Description

Designing sleek Android Apps using Google Material Design system is no joke. You need to know all the sizes, spacing and metrics for Designing seamless Android App User Interfaces. Also your Designed Android App User interfaces must be easily translated into coded Android Apps

So this course will uncover the mysteries of Designing Android Apps using Material Design in Adobe Photoshop. You will learn

How to convert DPs and SP Material Design units to Pixels (PX)
Which template size to start with?
What are Density Buckets and how do we design for all the different Android Phone Resolutions?
How to theme your App using Google Material Colors?
Understand all the Specs and Sizes and Typographic Grids of Material Design
What's new and possible with Material Design 2.0?
Design a real world actual App using Photoshop art boards
Extract all your assets using Photoshop
Hand-off your Android Designs to your Developers using Zeplin
What are 9-patch PNG assets and how to generate them?
Generate Coded Style Guides for your Android Developers
Design 6 Android App Screens UI of a Medical App using Photoshop

So you will deep dive into Google Material Design using Adobe Photoshop and Handoff your designs using Zeplin to give your Developer coded Style Guides

So lets start learning together

Who this course is for:

Graphic Designer
Android App Developer
Mobile App Designer
UI Designer
Web Designer
App Developers

Android App UI Design with Adobe Photoshop & Material Design

What you'll learn

Explore related topics

Course content

Understanding Google Material Design concepts9 lectures • 44min

Material Design Specs, Sizes and Metrics13 lectures • 1hr 21min

Mastering Material Color Schemes and how to build one3 lectures • 15min

Design Android App using Adobe Photoshop (Exercise)13 lectures • 2hr 1min

Exporting Assets and Design HandOff5 lectures • 33min

What's New in Google Material 2.0?12 lectures • 43min

Requirements

Description

Who this course is for: