Android App UI Design with Adobe Photoshop & Material Design
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
Material Design Specs, Sizes and Metrics
-
1
Introduction to the CourseIntroduction 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
-
2
What is Screen Resolution and Screen Density?
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
-
3
What is DP (Device Independent Pixels) and how its different from PX?
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
-
4
DP to PX conversion Online Tools
Free online tools to convert DP to PX and convert Pixels to DPs
-
5
What are Android Density Buckets?
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
-
6
Online Tools for Screen Resolution, Density and Device Sizes
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
-
7
What are SP type sizes in Google Material Design?
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
-
8
How DP works and calculated in Adobe Photoshop?
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
-
9
Material Concepts QuizLets see how much you have got the concepts of Material Design
-
10
Section 1→ Links to Tools and ResourcesLinks to online tools and resources to study further
-
11
Design your Introduction Screen using Photohop Android Template
Mastering Material Color Schemes and how to build one
-
12
UI Regions of Android Apps
Learn about all the User Interface regions of Android Apps and what are their names and locations as it will help you design better
-
13
How Material Design works (Base of Material Design)?
What is the science behind Material Design and how this whole Material Design actually works with Shadows and Elevations
-
14
What are Material Shadows?
Learn about different Material Shadows and their uses in Android App Design
-
15
Google Material 8-point Grid in Photoshop
Learn how to setup 8-point Grid system in Android Material Design and how you can set it up using Adobe Photoshop
-
16
Metrics and Vertical Spacings in Google Material Design
What is the vertical rhythm of Google Material Design and how different vertical spacing and metrics work in Google Material Design?
-
17
Buttons and Icon Sizes in Material Design
What are the standard button and icon sizes a designer must use in Android App Design. Learn the principles of Material Design
-
18
Types and Specs of Tabs in Android App Design
Different Tabs of Material Design, their sizes, specs and when to use them. Learn all that in this lesson
-
19
App Bar in Android Material Design
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
-
20
Sizes and Types of Lists in Android App Design
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
-
21
Specs and usage of Bottom Navigation Bar
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
-
22
Side Nav Drawer in Material Design
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
-
23
Android Type Scale in Photoshop
How Type scale of Material design works in Photoshop. Learn how to convert SP sizes into Photoshop's pixels
-
24
Section 2 → Link to tool and Resources
Links and Tools used in this section
Design Android App using Adobe Photoshop (Exercise)
-
25
How to build a superb Color Scheme in Material Design 2.0?
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
-
26
Online Color Scheme tools for Material Colors
Few online tools that can help you build or test your color schemes and a little about accessibility issues
-
27
Section 3 → Links and Resources for Material Colors
Links and resources to online tools and study material
Exporting Assets and Design HandOff
-
28
Download UI kits and Assets before starting design
Before starting any Design, you need all the necessary assets like Icons, UI Kits and necessary files. Download them in this lesson
-
29
Using XXHDPI template in Photohsop for your Android App Design
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
-
30
Design Signup Screen Part 1
Design the Signup Screen using Photoshop
-
31
Design Signup Screen Part 2
Design the Signup Screen using Photoshop
-
32
Design Signup Screen Part 3
Design the Signup Screen using Photoshop
-
33
Design Login Screen for Android Medical App
Design Login Screen of your Medical Android App for Doctors
-
34
Dashboard Tabbar Design for Android App
Design the Tab bar of your Android App in this lesson
-
35
Dashboard Top Content Area Design
Designing the dashboard top content area
-
36
Dashboard Card Design top section
Designing the Info Card for our Android App
-
37
Dashboard Card Design bottom section
Designing the Info Card for our Android App
-
38
Activities Screen Design using Lists of Material Design
Designing the activities screen of your Android App in Photoshop
-
39
Sync Files Screen Design
Design Sync Files Screen of your Android App
-
40
Side Nav Drawer Design using Material Design Specs
Design the SideNav (Drawer) of your Android App
-
41
Create 3 Screen Messaging SMS App using Google Material Design
What's New in Google Material 2.0?
-
42
Using Zeplin to HandOff your Design to Developer
Handoff your Android App Design to your Developers using Zeplin and generate a coded style guide and text styles for your developers
-
43
What are 9-patch images and how to generate them?
Learn what are 9 patch tools and how to use one to create 9 patch images for your Android Developers
-
44
What is the science behind 9-patch graphical assets?
Deep dive into 9 patch tool and learn how these 9 patch graphics actually work
-
45
Using Photoshop Export As panel to export all Density Bucket assets
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
-
46
Section 5 → Links and Resources 9 patch assets
Links to tools for creating 9 patch images
