Using material design in the redeveloped design documentation

 

Google material design check list

This material check list from android-developers Google will be my secondary source for information when it comes to the material design aspect of design documentation rather than diving into the mass of documentation when in the middle of fast prototyping having a reference sheet included in the design documentation will be much faster. While Googles own guidelines are in depth and incredibly accurate I have found that when prototyping and quickly coming up with ideas you need something which is slimmer and more light weight to quickly work from in regards to the design.

I am planning on taking the check list and turning into s set of steps which will be integrated into the design documentation as part of the overall creation phase. This will include a method and way of creating material design cards allowing people quick reference to screen sizes and the other hurdles to allow people to throw together a paper and card design in a few minutes without even needing to sketch out the designs in the first place.

The Check list

Tangible Surfaces

UIs consist of surfaces (pieces of “digital paper”) arranged at varying elevations, casting shadows on surfaces behind them.

Signature element: Shadows are used to communicate which surfaces are in front of others, helping focus attention and establish hierarchy.

Shadows and surfaces are used in a consistent and structured way. Each shadow indicates a new surface. Surfaces are created thoughtfully and carefully.

There are generally between 2 and 10 surfaces on the screen at once; avoid too much layering/nesting of surfaces.

Scrollable content either scrolls to the edges of the screen or behind another surface that casts a shadow over the content’s surface. Never clip an element against an invisible edge—elements don’t just scroll off into nowhere. Put another way, you rarely scroll the ink on a surface; you scroll the surface itself.

Surfaces have simple, single-color backgrounds.

A Bold, Print-Like Aesthetic

The “digital ink” you draw on those pieces of digital paper is informed by classic print design, with an emphasis on bold use of colour and type, contextual imagery, and structured whitespace.

Signature element: Apps use a primary colour and an accent colour to colour surface backgrounds and key UI widgets such as text fields and checkboxes. The accent colour contrasts very well with the primary colour (for example an app can use a dark blue primary colour and a neon pink accent colour). The accent colour is high-contrast and is used to call attention to key UI elements, like a circular floating action button, selected tab strips, or form fields.

Signature element: On Android 5.0, the status bar is coloured to match the app’s primary colour, or the current screen’s content. For full-bleed imagery, the status bar can be translucent.

Icons, photos/images, text, and other foreground elements are coloured “ink” on their surfaces. They don’t have shadows and don’t use gradients.

Colours extracted from images can be used to colour adjacent UI elements or surfaces.

Signature element: Icons in the app follow the system icon guidelines, and standard icons use the material design icon set.

Photos are generally immersive and full-bleed. For example, for detail screens, run edge-to-edge and can even appear behind the app bar or status bar.

Signature element: Where appropriate, elements like body text, thumbnails, app bar titles, etc. are aligned to 3 key lines. On phones, those key lines are 16dp and 72dp from the left edge and 16dp from the right edge of the screen. On tablets those values are 24dp and 80dp.

UI elements are aligned to and sized according to an 8dp baseline grid. For example, app bars are 56dp tall on phones and 64dp tall on tablets. Padding and margins can take on values like 8dp, 16dp, 24dp, etc. More precise text positioning uses a 4dp grid.

Authentic Motion

Motion helps communicate what’s happening in the UI, providing visual continuity across app contexts and states. Motion also adds delight using smaller-scale transitions. Motion isn’t employed simply for motion’s sake.

In general, UI and content elements don’t just appear or disappear—they animate into place, either together as a unit, or individually.

Signature element: When touching an item to see its details, there’s a “hero” transition that moves and scales the item between its position in the browsing screen and its position in the detail screen.

Signature element: Ripple effects originating from where you touched the screen are used to show touch feedback on an item.

Signature element: UI elements can appear using a circular “reveal” animation.

Signature element: Animations are used in more subtle, delightful ways, such as to convey the transition between icon states or text states. For example, a “+” icon can morph into an “x” symbol, or an outlined heart icon can be filled using a paint-bucket fill effect.

Animations and transitions are fast—generally under 300ms.

Crossfades are often replaced by translate/slide transitions: vertical slides for descendant navigation and horizontal slides for lateral navigation. For slide transitions, prefer quick acceleration and gentle ease-in deceleration over simple linear moves. See the material design spec on motion for more.

Adaptive Design (and UI Patterns)

Tangible surfaces, bold graphic design, and meaningful motion work together to bring a consistent experience across any screen, be it phones, tablets, laptops, desktops, TVs, wearables, or even cars. Additionally, the key UI patterns below help establish a consistent character for the app across devices.

The app uses responsive design best practices to ensure screens lay themselves out appropriately on any screen size, in any orientation. See the Tablet App Quality Checklist for a list of ways to optimize for tablets, and this blog post for high-level tablet optimization tips.

In material design, detail screens are often presented as popups that appear using “hero” transitions

In multi-pane layouts, the app can use multiple toolbars to place actions contextually next to their related content.

Signature element: Where appropriate, the app promotes the key action on a screen using a circular floating action button (FAB). The FAB is a circular surface, so it casts a shadow. It is coloured with a bright, accent colour. It performs a primary action such as send, compose, create, add, or search. It floats in front of other surfaces, and is normally at an 8dp elevation. It frequently appears at the bottom right of the screen, or centered on an edge where two surfaces meet (a seam or a step).

App bar

Signature element: The app uses a standard Android app bar. The app bar doesn’t have an app icon. Colour and typography are used for branding instead. The app bar casts a shadow (or has a shadow cast on it by a surface below and behind it). The app bar normally has a 4dp elevation.

The app bar might be for example 2 or 3 times taller than the standard height; on scroll, the app bar can smoothly collapse into its normal height.

The app bar might be completely transparent in some cases, with the text and actions overlaying an image behind it. For example, see the Google Play Newsstand app.

App bar titles align to the 2nd Keyline

Where appropriate, upon scrolling down, the app bar can scroll off the screen, leaving more vertical space for content. Upon scrolling back up, the app bar should be shown again.

Tabs

Signature element: Tabs follow the newer material design interactions and styling. There are no vertical separators between tabs. If the app uses top-level tabs, tabs are visually a part of the app bar; tabs are a part of the app bar’s surface.

Tabs should support a swipe gesture for moving between them.

Selected tabs are indicated by a foreground colour change and/or a small strip below the tab text (or icon) coloured with an accent colour. The tab strip should smoothly slide as you swipe between tabs.

Navigation drawer

Signature element: If the app uses a navigation drawer, it follows the newer material design interactions and styling. The drawer appears in front of the app bar. It also appears semi-transparent behind the status bar.

Signature element: The leftmost icon in the app bar is a navigation drawer indicator; the app icon is not visible in the app bar. Optionally, on earlier versions of the platform, if the app has a drawer, the top-left icon can remain the app icon and narrower drawer indicator, as in Android 4.0.

The drawer is a standard width: No wider than 320dp on phones and 400dp on tablets, but no narrower than the screen width minus the standard toolbar height (360dp – 56dp = 304dp on the Nexus 5)

Item heights in the drawer follow the baseline grid: 48dp tall rows, 8dp above list sections and 8dp above and below dividers.

Text and icons should follow the key lines discussed above.

The checklist is in-depth and useful but will need to slimmed down in order to fit with the overall theme of rapid prototyping, this will be done by pinpointing the key elements for the design document and working them into the overall design phase. It will also be an integral part of what I plan create in the design cards, a readymade and easy to use system which will allow ultrafast prototyping with realistic sizes and forms and ratios so a cleaner and clearer vision of the apps final style can be quickly formed by the users.

Advertisements
Using material design in the redeveloped design documentation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s