Week 6 — Flat 2.0 and Material Design
This week I redesigned Search Results screen according to Elevation & Shadows section of the Google Material Design guidelines. I also created material design icon and practiced another animation technique to illustrate layer splitting.
Redesign
I think there were many things that was told about Flat 2.0 design — so in the shortcut: the main advantage of Flat 2.0 is better usability. Flat design has no visual cue that something is clickable so Flat 2.0 adds z-dimension by using shadows to make this more clear:
Shadow Elevation
Material design (Google’s realization of Flat 2.0 design) uses the principle called Elevation for making shadows. The shadow behavior is the same as in the real world — when you move the object closer to the surface the shadow is sharper and the elevation is lower, when you move the object farther from the surface, the shadow gets more blurry and the elevation is higher.
This animation illustrates the principle nicely:
So I evaluated the UI of the Search Result Screen according to Google Material Design Elevation & Shadows guidelines. There are four main UI parts — application bar, search, card and floating button.
So the elevation is (from bottom to top):
Card, Search— 2
Application Bar — 4
Floating Button — 6
Some of the GUI has more states — for example card. It can be in the resting state — when it just lays down on the surface, and the pressed state — the elevation of the card rises and it looks like it moves closer to you:
Hesitation 1 And Dealing With It
I was quite hesitating about what should happen with the floating action button when the card underneath is pressed because it has the same elevation as the resting floating button then. Only thing I found in guidelines was:
On a component level, components can move or be removed before they cause interference. For example, a floating action button (FAB) can disappear or move off-screen before a user picks up a card.
So I supposed I should let the view map button disappear when I pick up one of the cards:
Maybe it makes sense because when I pick up one card I suppose that I want to make some action with this card and not with the floating action button. But if you have any other ideas how to deal with this please leave me a comment below the article.
Hesitation 2 And Dealing With It
I was not quite sure about the elevation of search, but according to guidelines :
Elevation is measured in distance from the top of one surface to the top of another.
So I elevated the Search to 2 but the position at z-dimension matches the position of the Floating Action Button:
Icon
I also wanted to create some Material Design Icon for the application. Google design guidelines give you a brief summarization of the settings but not the exact tutorial how to do it.
So I searched some tutorials on the web and found this one:
The main skills you will gain by creating of the icon are:
- Creation of long shadow — it’s just about working with Gradient Tool.
- Creation of the lighting and shadowing effect — it’s about working with the Positioning, Pathfinder, Drop Shadow Effect and Layer Transparency.
- Finally adding source of the light effect — again, it’s about working with Gradient Tool.
So if you want to practice your illustrator skills I recommend creation of your own Material Design Icon.
Animation
The next thing I learned while studying Google Material Design was 3D Layer Split Animation. I wanted to illustrate the layering of objects in the design so I searched some tutorials and found this one:
So I went to After Effects and start with animating. Few new things I learned from last time (for you interested view my previous article about animations).
- Null Object, Parent Layer and Camera — null object is the once the camera rotates around. It is placed in the middle of the artboard and it is set to parent so the camera position is dependant on the position of this object.
- 3D Layers Creation — when you set an object to 3D it gets some more properties like Rotation X and Y and Z dimension, so you can simulate real 3D dimension and the movement of the object in it.
So that’s all for this week. See you in next:)
