My company has told me to design an app for them with Material Design Guidelines & I don't know from where to start.

Thing I want to know :

Note : Others ( The things I don't know, so please tell me what I am missing here)

1) What Screen size? (The screen size which will suit all android devices).

2) What Screen Resolution?

3) Icon,Font & other sizes.

4) Space Guidelines between button & texts.

5) Guidelines for Drawers,Navigation bar, and others.

Thank You

  • 1
    This question is too broad and shows 0 effort. I'm voting to close it as such Aug 27 '16 at 13:34
  • I don't find this broad, This is Basics. Aug 27 '16 at 13:36
  • If it Basics, then start by reading material.google.com . At a glance, this answers all of your questions.
    – Jongware
    Aug 27 '16 at 16:00
  • 1
    Well, here we want one question, served with all informations needed to get answerable. You asked six or more question here, that is indeed too broad. Please rephrase this question to one!
    – Mensch
    Aug 27 '16 at 17:50
  • so you mean for every question I have to create a new thread? Aug 29 '16 at 6:08

The entirety of the Material Design are available from Google directly. I will give a brief overview of some of the specification that answers your questions directly. However, I thoroughly recommend you take the time to fully read the documentation if you're designing an application for commercial purposes.

Material Design's Responsive UI Layout

The graphic is given in the Material Design spec. To summarise, layouts under 600dp wide may fill the screen with a single level of content hierarchy. Layouts over 600dp wide may place two levers of content hierarchy on the screen (both summary and detail content).

Layouts over 1600dp wide may let the layout grow until it hits max width. At this point, the grid may do one of the following:

  • Become center aligned with increased margins
  • Remain left aligned while the right margin grows
  • Continue to grow while revealing additional content

Roboto is the standard typefaces on Android, whereas Noto is the standard typeface for all languages on Chrome and is used on Android for languages not covered by Roboto.

App Bar: Title style, Medium 20sp

Buttons: Medium 14sp, all caps

Subheading: Regular 16sp (device), 15sp (desktop)

Body 1: Regular 14sp (device), 13sp (desktop)

Text contrast ratios: Minimum: 4.5:1 | Preferred: 7:1

  • should I make the app in 1920 x 1080 or 1280 x 720 px, Which size should I use so it can use for all devices Aug 29 '16 at 5:59
  • The Material Design spec sports a Responsive UI. The application should respond to the size of the device - there is no one size fits all. What device(s)/platform(s) are you developing for?
    – user75078
    Aug 29 '16 at 21:43
  • I am designing for IOS & Android, Sep 1 '16 at 13:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.