Master Android App Design in Photoshop using Google Material Design Guide

Ahsan Idrisi, UI UX Visual Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
50 Videos (5h 35m)
    • Whats inside Android App Design Class

      2:27
    • What Is Screen Resolution and Density

      7:20
    • Relation of DP and PX

      4:14
    • Dp and Px Online conversion Tools

      4:11
    • Density Buckets

      5:00
    • Online tool for Screen Resolution, Device size & Density

      2:09
    • What are SP type sizes in Android Material Design

      4:46
    • How does Dp work In Photoshop?

      13:22
    • Project → Photoshop Material Design

      5:09
    • UI Regions Of Android Material Design

      10:05
    • How Material Design Works?

      3:15
    • Material Shadows

      9:39
    • 8 Point Grid In Photoshop for Android App Design

      6:35
    • Metrics and Vertical Spacing in Material Design

      7:18
    • Buttons & Icons sizes and Specs in Android App Design

      7:13
    • Material Tabs

      8:38
    • Android AppBar Sizes and Specs in Material Design

      3:25
    • Lists Specs in Material Design

      5:11
    • Bottom Nav Bar in Android Material Design

      8:09
    • Side Nav or Drawer usage and Specs

      2:05
    • Android Type Sizes Scales For Photoshop

      9:16
    • Master Color Scheme In Material Design

      8:13
    • Online Google Material Color Tools

      6:45
    • Download UI Design Assets and UI Kits

      3:13
    • XXHdpi Template For Photoshop

      9:43
    • Signup Screen Part 1 → Design Android Medical App

      7:36
    • Signup Screen Part 2→ Design Android Medical App

      12:35
    • Signup Part 3 → Design Android Medical App

      10:32
    • Login Screen → Design Android Medical App

      10:18
    • Dashboard Tabbar → Design Android Medical App

      10:28
    • Dashboard Top Content → Design Android Medical App

      8:38
    • Dashboard Card Top → Design Android Medical App

      4:03
    • Dashboard Card Bottom → Design Android Medical App

      4:03
    • Activities Screen → Design Android Medical App

      13:01
    • Sync Files Screen → Design Android Medical App

      8:24
    • Sidenav Drawer → Design Android Medical App

      11:29
    • Final Project for Students → Design Android Messaging SMS App

      3:10
    • Handoff your Android App Design with Zeplin

      13:34
    • What is 9 patch asset?

      5:55
    • More about 9 Patch graphical assets for Android Apps

      9:04
    • Extracting assets using Photoshop Export As panel

      4:32
    • What's New Material 2.0?

      10:55
    • New Options to Design for in Material Design 2.0

      3:40
    • Spacing Grid In Material 2.0

      2:38
    • Buttons Types & States in Material 2.0

      3:14
    • List Items in Material 2.0

      3:25
    • Bottom and Top AppBar in Material 2.0

      4:45
    • Material Tabs 2.0

      2:35
    • Material Card Design Specs

      5:27
    • Typescale New Looks in Material Design 2.0

      3:35

About This Class

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 experiences. So how do you Design which your Developers can actually turn in coded Apps.

c98ebd2b

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
  • Handoff 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 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

3 of 3 students recommendSee All

great experience

50

Students

1

Project

Ahsan Idrisi

UI UX Visual Designer

I started my Freelancing Career just 8 years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 1 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have...

See full profile