Material Design: Environment, Layout [Note]

in #steempress6 years ago (edited)

This post serves as a note from what I've learnt from the material.io:


  • Defualt elevation could be useful in creating a reasonable sense of depth in multiple layers like dialog, top bar, floating button and etc.

chrome_2018-11-30_22-40-28.png


  • Breakpoint system sums up a great reference of columns amount and gutter size for various screen size.

  • Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout. Smaller components, such as iconography and typography, can align to a 4dp grid. Use any number that is dividable by 4dp in spacing would be a good idea.

  • Increment is a block with same height and width. To create a consistent sense in overall design, try to use the increment as building blocks to form the size of element like cards, bars, dialog and etc.

  • Again, for the sake of consistency in layout, use a consistent aspect ratio on elements like images, surfaces, and screen size.

  • Density is good to apply in list, tablesm and long forms which allow users to manage more items at the same time. However, focused task like dropdown menu, picker, and alerts and dialogs are not suitable for increased density.

  • Higher density, wider margins and gutters. Vice versa.

  • Touch targets should be at least 48 x 48 dp, with at least 8dp of space between each target. Lower than 48 dp there will not as user-friendly for the touch target's accessibility.

  • Click targets should be at least 24 x 24 dp, with at least 8dp of space between each target.

Posted from my blog with SteemPress : https://fr3eze.vornix.blog/material-design-environment-layout-note/


Sort:  

Hi @fr3eze!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 4.060 which ranks you at #3405 across all Steem accounts.
Your rank has dropped 1 places in the last three days (old rank 3404).

In our last Algorithmic Curation Round, consisting of 253 contributions, your post is ranked at #226.

Evaluation of your UA score:
  • Some people are already following you, keep going!
  • The readers like your work!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server

Coin Marketplace

STEEM 0.17
TRX 0.17
JST 0.030
BTC 70638.27
ETH 2565.44
USDT 1.00
SBD 2.57