Material Design
Surfaces, Bold Graphic design, Meaningful motion and Adaptive design
Profiles:
LinkedIn: https://www.linkedin.com/in/nikitha-gullapalli/
GitHub: https://github.com/nikitha2/EXAMPLE_MaterialDesign.git
Introduction
App contains of materials that have shape, size, color, text. While designing an app we need to take care of shape and arrangement, color, typography, Iconography.
Material design are guidelines provided by google to make our process of designing an app easy, user friendly and familiar to users. They base their guidelines on Gestalt Principles. These principles talk from experience on what designs guidelines users are more comfortable with. All these material designs are placed on surfaces.
Surfaces represent tangible materials like paper. They are sheets of digital paper. They adapt the basic principles from paper like- surfaces are opaque, they can be placed at different elevation and cannot pass through on another.
Surfaces width is fixed= 1pd. their height ,width and elevation can be changed. Elevation helps us place different surfaces at different levels and scroll them behind or above another surface. For different properties of surfaces look at the documentation.
We can identify surfaces at different levels by the shadow they cast. Surfaces with lower elevation cast smaller and sharper shadow than the surfaces with higher elevation. Lets looks at how we can use these surfaces to design something beautiful and intuitive to the user.
Bold Graphic design:
Gestalt Principles:
1. Law of past experience: When we say notepad we are reminded of a notebook with lines. To make apps as intuitive as possible initial guidelines suggested that apps imitate real world items so that users can relate, but as apps became prominent users got used to notepads without lines so the guidelines updated. Basically law of past experience takes into consideration past experience of the users and what they can relate with and use this information to provide guidelines to developers when designing an app.
2. Law of Proximity: In the image below all the views in 1 are in closer proximity than another set of 1. So this shows proximity and arrangement of the views makes it intuitive for user to understand what views are grouped together making it easier to read.
3. Law of similarity: All the 2’s are are similar and one below the other. This makes it a list of items 2. Thus making it intuitive to users. Material design guidelines provided guidelines keeping these 3 principles in mind.
Shape and arrangement : Grids and Keylines
Lets talk about specifics on laying things on the screen. Material design uses an 8dp grid to align components. Text aligns to a 4dp baseline grid. As seen in the below image text sizes are a multiple of 4dp and images and other items have sizes multiple of 8dp.
So things like image, icon sizes, spacing, margin and padding are all multiples of 8dp. Text is multiples of 4dp. These grids helps us apply laws of grouping and keep our UI’s organized, balanced and in harmony with rest of the OS. There are material design templates and stencils that uses these grid. They can be found here.
Keylines are used to vertically or horizontally align objects in the UI. Astatically they bring an order in the UI and make it much easy to scan the screen and take in the information. Material design specs suggest some common keylines to use in material design like 16dp margins from left and right and auxiliary content like icons/ avatars. 72dp from left for primary content. If we do not have auxiliary content, then primary content will have to be at 16dp from the left. It is always a good idea to look at the documentation.
Color Palette
Just like how shape and arrangement can tell us a lot, we can also infer a lot of information from an items color and appearance. Color can tell us if we should stop or go, battery is full or low, etc. It can be used to get attention or provide hierarchy in structure. Material design encourages app developers to embrace bold purposeful use of color not just for aesthetics, but to make the app easier to use. Material pallet has a set of secondary and primary colors that can be used across devices. Note that these colors are a good hand pick starting point, they can be changed if your app designs demands.
Material design color pallet suggests to have one primary, one accent color and lighter & darker shades of primary color to theme the app. Like you can see lighter shades are lower numbers and darker shades are higher numbers. These numbers are for reference purposes.
There are some tools online that can help find complimentary primary and accent colors. find the resource here.
Typography
After shape, arrangement (space) and color next important design spec is the type. Type refers to the text we write in our app including headlines, body, sub-title, etc. Text in an app depends on density of the screen and user preferred text size like small, medium or large. Thus “sp ”(scale independent pixel) is the unit of text for mobile development. Material design provides some types to make the text in the apps more uniform. Roboto is one such type. You can find more about it here.
User preferred text size is the text size users prefer and can change in the phone settings. E.g. older people might need bigger text size to read.
Font characteristic are different characteristics font have like serif, size, etc.
Font weight and style: A font family or family of families can have different variety of fonts. Roboto actually has 4 distinct font families- roboto, condensed, slab, mono. Within each family each font has different weight starting from thin-100 to most thick-1000. Each of these font weights have 2 styles- normal and italic
Styling a text in android can be done with android:fontFamily and android:textStyle tags. While android:fontFamily allows you to choose the font family and weight, android:textStyle lets to choose the style and change weight if needed. It is advisable to choose weight using font family to avoid confusion. Note that condensed font are condensed and can fit more text, but it might look too crowded.
Choosing a font: how font looks can set the tone for your app. eg. fonts with round edges might look too informal or fonts with sharp edges formal. So we need to be mindful when selecting a font. Also we need to select a font that looks good and sharp in all screen resolutions.
Click here for some google fonts for your app. Apply the font using the tutorial here
Iconography:
Images should convey information or personalize the experience. Use of imagery will strongly reflect and reinforce your branding (brand can either be bold and dynamic, playful and informal, etc.). The form of imagery we can use falls somewhere in the spectrum form photography to iconography. The one we pick depends on the app needs. However all of them create an immersive experience.
Photography is great when it is very specific to the content. Make sure you have high pixel images for better experience.
Illustrations are best to communicate the abstract concepts or metaphors without getting hung up with specifications like in photographs. when creating illustrations aim for clarity instead of being overly decorative. Have a focal point and a message you are tying to communicate. Stay consistent.
Iconography provides clear way finding. Its goal is to explain the meaning and get out of the way. They should be easy to identify and interpret in the UI. For this reason it is advices to use material design icons so that users are already aware of them.
Images can be added to image view. ScaleType determines how your image fits the view. find how different ScaleType effects your image here.
Circular avatar: When showing avatars i.e., images related to a person it is general practice to show them as circle. We can use either RoundedBitmapDrawable or Picasso or Glide libraries to achieve this.
Aspect Ratio: The code below shows how to set the height of an image always 2/3rd the width of the image. So doesn't matter the screen size, the image always has an aspect ratio of 3:2.
Make text visible on dynamic background image: Background protection is important in cases when we want to place text on images, mainly when the background image changes dynamically we do not know the color or darkness of the color. In such cases out text/icon might not be visible with few background images.
In such cases we can use a scrim. A transparent layer between the image and the text to help provide contest and legibility. We use tune the size and ampacity values to have minimum impact on the image.
To implement the scrim we can use the below code which is 30% opaque black at the bottom and completely transparent in the center and top.
Then we can use frame layout to stack our views. image- scrim view- text
References:
Surfaces:
https://material.io/design/environment/surfaces.html#material-environment
Creating Paper Transformations: https://youtu.be/25RCKUtqvYE
Transforming paper: https://youtu.be/iYN5mM0JN9M
Responding to Scroll Events: https://youtu.be/holemZocbOU
Making Scrollable Dynamic Surfaces: https://youtu.be/yOgonzeOYys
Parallax scrolling: https://en.wikipedia.org/wiki/Parallax_scrolling
Bold Graphic design:
Gestalt Principles: https://youtu.be/xOjN7ifAa_g
Grids and Keylines: https://youtu.be/ESJuU2gp-P8
Colors:
Intro: https://youtu.be/06_BIV7cMK8
https://youtu.be/AqmO-1vMnpU
Documentation: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Typography:
Introduction: https://youtu.be/3UuxtljrBKU
Scale Independent Pixels: https://youtu.be/DwdpKtlkiHQ
Books to read: Thinking with Type by Ellen Lupton
Just My Type: A Book About Fonts by Simon Garfield
Iconography:
https://material.io/design/iconography/product-icons.html#design-principles
using imagery:https://youtu.be/uOX6-HTy3sU
material design icons: http://materialdesignicons.com/
ImageView.ScaleType:https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
RoundedBitmapDrawable :https://developer.android.com/reference/android/support/v4/graphics/drawable/RoundedBitmapDrawable.html
E.g:https://github.com/udacity/ud862-samples/tree/master/ImmersiveImages
