article:
Website: TrueCanvas - Responsive HTML5 Template (PSD)
article:
Elements Design & Mobile: Android Modern Design 2014 (Sketch, AI, SVG)

Other: Google Material Design - Desktops, Tablets and Mobiles

Advertisement

Google is continuing to get better and better at design. - Google's Design Principles

Material Design - a material metaphor is the unifying theory of a ratiolized space and a system of motion. - Material Design

Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies. We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is Material Design.





A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts. - Material is the metaphor


Other: Google Material Design - Desktops, Tablets and Mobiles


The foundational elements of print-based design - typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye; they create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience. An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.  - Bold, graphic, intentional


Responsive guidelines


  • Respect Human Constants.
  • Larger Screen ≠  Larger cognitive capacity.
  • Line lengths should be digestible.
  • Account for angular distance.
  • Pull the furniture off the walls: allow whitespace, and don't restrict yourself to anchored toolbars.

Other: Google Material Design - Desktops, Tablets and Mobiles


UI Regions and Guidance



Mobile: This structure includes a permanent app bar and floating action button. An optional bottom bar can be added for additional functionality or action overflow. Side nav menus that users can access as needed overlay all other structural elements. - Material is the metaphor

Other: Google Material Design - Desktops, Tablets and Mobiles


Tablet: This structure shows a permanent app bar with floating action button. The app bar absorbs elements from tablet and mobile bottom bars. An optional bottom bar can be added for additional functionality or action overflow. A left navigation menu that users can can access as needed overlays all other structural elements. A right nav menu can be accessed temporarily or pinned for permanent display. - Material is the metaphor

Other: Google Material Design - Desktops, Tablets and Mobiles


Desktop: This structure contains a permanent app bar with floating action button. The app bar absorbs elements from tablet and mobile bottom bars. Where possible, the window controls are absorbed into the app bar. Side navigation menus can be accessed temporarily or pinned for permanent display. Side nav menus as well as the content canvas can have their own secondary toolbars for tabs, palettes, or secondary actions. - Material is the metaphor

Other: Google Material Design - Desktops, Tablets and Mobiles


System Icons




The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes. - Material is the metaphor


Other: Google Material Design - Desktops, Tablets and Mobiles


For product icons, Google likes them to be "highly simplified, exaggerated and caricatured in nature so that they are appropriate for use at small sizes."

And more ... Google Material Design

Advertisement
Tags: google, material design, mobile, table, desktop, layout, icons, elements design, style, components, patterns, usability, resources, design

Leave a Comment

No Comment

© Creative3x Ltd.