My first thought when I watched Matias Duarte present Google’s “Material Design” system was: “Cool! Animated Colorforms!”
Colorforms achieved mass popularity as a creativity toy. The original Colorforms kit included geometrically shaped pieces of slightly adhesive vinyl and laminated boards. The pieces and boards were all solid colors: red, green, blue, yellow, black, or white. You could arrange or layer the pieces to depict almost anything.
Like Colorforms, Google’s “Material Design” system relies on solid colors and geometric shapes as core elements. A solid color rectangle contains navigation text and icons. A solid color circle, known as the FAB (“floating action button”), provides one-tap access to an action. Three solid color squares or circles, arranged in a vertical stack, reveal more options when selected.
Unlike Colorforms, Material Design adds motion in the form of uniquely digital actions:
- Documents move: Open Google Drive, select and drag a document onto a folder, then release. The document “moves” out of view and into the folder.
- Lists scroll with inertia: Slide your finger up the screen while viewing your Document list; document titles scroll by, subtly slowing to a stop after you remove your finger from the screen.
- Options appear: Tap a three-line menu — or a three-square stack — and options appear.
Material Design suggests that objects can appear, disappear, or resize, but they do so in a predictable manner.
These changes affect not only how Google Drive looks, but also how it works. The following tips may help you better understand the Drive, Docs, Sheets, and Slides apps following the mid-2014 Material Design update.
1. Edit with the Docs, Sheets, or Slides app
To edit on a mobile device, open an app. Install Google’s Docs, Sheets, and Slides app to edit the respective Google documents on your mobile devices.
To edit on the web, open your browser to create or edit:
The files listed will include your native Google files, plus any Microsoft files that can be edited by the corresponding Google app (Figure A).
Edit Docs, Sheets, and Slides with apps for each on mobile and in the browser.
2. Manage folders (and non-Google files) with Google Drive
If you want to work with folders, you’ll need to use Google Drive. The Google Docs, Sheets, and Slides landing pages and mobile apps show files, not folders.
Google Drive is for folders, the apps are for editing (Figure B). For example, the Google Docs app shows only Google Docs and Word documents. To access text files (with a .txt extension), use Google Drive.
Manage folders using Google Drive. The Docs, Sheets, and Slides landing pages and apps don’t display folders.
3. Tap (or click) to navigate
In the browser, Google Drive and the various app “landing pages” are much more touch-friendly (Figure C). If you have a touch screen, navigation items and documents are easy to tap. Fewer options are immediately visible, but some functions are much easier to access. For example, in Google Docs, select the big blue circle with a plus in it (in the lower right) to create a new Google Doc.
Material Design supports simpler, touch-friendly navigation.
A few browser navigation elements may not be immediately apparent:
- From the new Docs, Sheets, or Slides “landing pages,” click (or tap) on the Google name logo in the upper left to return to Google Drive.
- Tap anywhere to the left of the document list in the navigation bar to access additional menu options, such as Settings and “Help & Feedback.”
- In the new Google Drive, select “New” to upload files or folders.
4. Document details: “more actions”
The “more actions” menu allows access to some previously visible options. The “more actions” menu looks like three circles stacked above each other (Figure D). In the browser, select a document, then choose “More actions” to rename or “star” a document.
In the mobile Docs, Sheets, and Slides apps, tap the “more actions” menu next to a document to rename or access “Details.” Choosing “Details” in the mobile apps opens the Drive app, where you can “star” or move your document, or obtain a link to it (Figure D).
Three stacked circles (or squares) offer access to “More actions.”
Some features remain possible only on the desktop. For example, to “add” a document to multiple folders from Google Drive in your browser, select the document (click on the name of the document to highlight it), then press [Shift]+[Z]. This brings up the “Add to folder” menu. Repeat this to add a file to multiple folders. Desktop keyboard commands provide access to some power-user features.
5. Search to filter, scroll to find
The apps (Docs, Sheets, and Slides) now display items sorted by name (or title), last modified, last opened by me, and last edited by me.
Search remains the simplest way to find a document. Within the mobile Docs, Sheets, and Slide apps, enter text in the search box, then scroll to find your document. The same process works in your browser.
Google Drive offers additional filtering features (Figure E). On mobile devices, tap the three squares in the upper right, then choose “Filter by” to narrow your results to a particular type of document. In laptop (or desktop) browsers, go to drive.google.com, then select the small triangle to the left of the search “magnifying glass” icon to access additional “Search options.”
Filter and sort when searching for files on Google Drive.
A more mobile model
Material Design isn’t just about a new look. It’s a visual design language built for a tactile world. It’s a “touch first” system. Material Design lets us tap, talk, and search on our phones, or click, type, and file on our laptops — and it does all of that with bold, clean design.
As I said: animated Colorforms. Paul Rand* would be proud.
*Paul Rand was one of the most noted American graphic designers in the twentieth century. He designed logos for UPS, IBM, and Steve Jobs’ Next, in addition to the Colorforms logo.
What do you think of Material Design? If you design web or Android apps, will the system affect your app’s design? Share your thoughts in the discussion thread below.