801.796.BROS (2767)

Material Design 801 x 351

With mobile devices and touch screens being a big part of our daily lives, we want these devices and their applications to be intuitive and easy to use. The design of user interfaces ought to give us cues as to how to interact with them, and they ought to respond to our actions in the way we’re expecting. After all, form follows function.

To that end, Google created a design language called “Material Design“, focused on creating a consistent look and feel from flat design elements. Their objective was to create something that emulated using actual paper, but with the constraints of the physical world removed. But that’s not to say that it’s utter chaos in there. For instance, if you quickly swipe upwards on a touch screen and lift your finger off the screen, the contents of that page will scroll downwards at a fast speed, gradually slowing to a stop. If, while the scroll is coasting, you put your finger back down on the screen, it will come to a stop.

Material design also makes use of shadows and relative height to differentiate separate elements. The idea is that, to the viewer, the screen seems to have a 3-dimensional interface, with the X and Y axes on the plane of the screen and a Z-axis pointing at the viewer, perpendicular to the screen. By strategically altering sizes of elements and their shadows, you can create the illusion that some objects are floating above others.

We’ve been trying to integrate these principles into some of our Lectora templates.

Take our Vibe template.

Screen Shot 2016-06-15 at 2.14.08 PM

In the demo, you’ll see that as the course starts, each of the elements (text boxes, buttons, cutout characters, etc.) slide into view from the outside edges, making an abrupt stop at their resting positions. Now think: When you quickly hit the brakes on your car, does it just immediately assume a stationary position like a Road Runner cartoon? Or does it show a little resistance to the change in movement, rebounding and wiggling a little at the impact of the stop? Definitely the second one. Paying close attention to the cutout characters, you’ll notice that they behave in that fashion as they slow to a halt where you see them in the above screen capture.

Screen Shot 2016-06-15 at 2.13.48 PM

Another small design detail: Notice how the option buttons appear to float slightly above the backdrop as if they are on a higher plane than other elements. It’s a little touch that communicates to the user that this is a button that can be pushed.

Our File Folder template is another good example of layering elements.

Screen Shot 2016-06-15 at 2.42.35 PM

In the close-up below, you can see four distinct layers stacked on top of one another. Even though we have several flat layers vying for space, we can clearly see where they aren in relation to one another, height-wise thanks to the varying sharpness of their shadows.


Screen Shot 2016-06-15 at 2.42.42 PM

Check out our Lectora template library for more creative templates like the ones featured above.

For more information on Material Design, view Google’s official style guide.

Pin It on Pinterest