The aim of this tutorial series is to let you familiarize yourself with Google’s Material Design principles and use it successfully in your next Xpage application. First, I give a brief introduction about the main concepts of Material Design (MD). Then, we will create a self-containing Domino Notes template that will have all necessary scripts, style sheets, font files and icons. I am pretty sure there are people out there who do not have the luxury to link to the latest and greatest resources on the internet.
After building the template, we will go through each individual components (button, cards, grid structure etc.) that make up MD and create custom controls that will help you use them easily in your applications. I hope you will find this series useful in your work.
What is Material Design?
Google launched Material Design at the Google I/O 2014 keynote speech. Since then, designers embraced the concept and created mobile apps and websites by the thousands. According to I/O 2015, 40% of the 200 thousand apps available in Google Play had been “materialized” by July 2015. So why does Material Design attract so many designers and developers? It is not a framework like Bootstrap or Foundation. It is a more like a visual language, a concept and guidelines to design your apps and webpages that comply with Material Design principles.
The material environment is a 3 dimensional space, in which every sheet of material has x,y and z dimensions with a 1 dp thickness. Lighting and drop shadows are used for layering. Material can have various shapes and sizes but they all have a uniform thickness; they cast shadows depicting the relative elevation between material elements. Instead of trying to explain their properties in words, I created a slideshow with pictures and videos that will hopefully do a much better job then words :
- Material elements are flat physical objects with well-defined 3-dimensional properties with 1 dp thickness.
- Elevation of a material is depicted by lighting and shadows.
- Material can be created and destroyed spontaneously and contain any types of contents; they can move, transform and change shape, however they cannot bend or pass through any other material.
Elevation and shadows
Objects in material design behave similarly to real-life objects. They interact with each other, can be stacked or connected to one another. They cast shadows and reflect light. All material objects have a default resting elevation regardless of size and upon user input, they usually change elevation. These elevation definitions are consistent across applications or web pages. When a user interact with the elements, they respond with dynamic elevation offsets. These elevation changes are consistently implemented in an app or website. For example, all elements that lift on press have the same amount of elevation change relative to their resting state. Since material cannot pass through other material, components need to move or be removed before they cause interference. A FAB (floating action button) usually disappear or move off-screen before a user picks a card up.A good example of default component elevations are shown in the figure below:
All material elements are 1 dp thick. The main application card (not shown) is positioned at 2 dp height. The black application bar is 2dp higher than the main application, the yellow Floating Action Button (mostly referred to as FAB) is at 6 dp height. The slide-out nav drawer occupies the highest elevation at 16 dp casting a very deep shadow.
Shadows provide important visual cues about the depth and directional movement of objects and whether the distance between surfaces is increasing or decreasing. The following picture is a good reference for the most common component shadows:
It’s very important how objects are organized in an app or webpage. They can move independently of each other or be constrained by objects higher in the hierarchy. All objects are in parent-child relationships. Each object has one parent and an object can have many children. Object placement and interaction is determined by their place in the parent-child hierarchy. Children have minimal elevation separation form their parent. Siblings cards in a collection move together, but the FAB remains in place because its parent is not being scrolled.
Siblings slide together
FAB remains in place
In material design animation is not just eye candy. Motion describes spatial relationships, functionality, and intention with fluidity. When animations start, stop or change direction abruptly, they look jarring and unnatural. Changes in animation (acceleration, slowing down) should be smooth. In MD “ease in” and “ease out” transitions are used for these effects. Not all objects move the same way. Smaller “lighter” objects may move quicker, and larger objects may have longer transitions. Using curved motion and avoiding linear paths are highly recommended. The best way to illustrate these animations by showing good and bad examples of moving objects:
User interaction with a “materialized” app or webpage elevates a simple information-delivery service to an experience that communicates with multiple visual and tactile responses.
Surface reaction radiates from the point of contact.
Material elements lift up on touch.
Radial action is the visual ripple of ink spreading outward from the point of input.
Smooth motion between transitions both inform and delight the user. A well-designed transition helps users to focus their attention. Transitioning elements should behave in a coordinated manner. The paths elements travel along should make sense and be orderly. Keep these rules when designing transitions:
- Avoid linear paths.
- Have the elements travel in a coordinated fashion during the transition
- Avoid conflicting movements or overlapping paths.
- Choreograph the movements of the elements,so they trace along a visually pleasing path.
- Reinforce elements relationships with consistent incoming and outgoing motions.
DO: Overlapping motion directs user attention.
DON’T: Timing elements at the same moment provides no sense of importance.
Focus user attention with coordinated motion.
I hope this post gave justice to the principles of MD. It is very far from complete. This post is only a teaser to show what MD is capable of. If you need more information and details, please go to the Google design website and read the complete guidelines of MD.
I have not even touched upon style (typography, icons, color schemes), responsive layout and components (card, button lists etc.). I plan to introduce these “details” in the context of an XPage application, how we can utilize them mostly using custom controls.
In the next episode of Material Design, we will collect all necessary scripts, style sheets, fonts and icons in a special folder structure and create our Notes database template using Material Design Lite.
If you have any suggestions, please leave a comment. This is my very first blog post and I would appreciate feedback and advice.