background preloader

Guidelines

Facebook Twitter

Google I/0 2014 : Material Design, une interface totalement revue et unifiée. Lors de la keynote inaugurale de la conférence Google I/O 2014, le père d’Android a dévoilé le design d’Android L, la prochaine version du système d’exploitation maison à travers material design. Material Design met l’accent sur l’unification de l’interface entre les différents types d’appareils : smartphones, tablettes, montres connectées et tous les autres services et appareils de Google comme Chrome ou les Chromebook. Surtout, le design d’Android est complètement revu avec du flat et de la couleur. Google a rapidement montré à quoi ressemblera Android L et s’est surtout attardé sur l’unification des interfaces de tous les produits Google grâce à Material Design.

Il y a quelques jours, l’information était encore à l’état de rumeur mais Google vient d’officialiser la stratégie : un design unique et homogène pour l’ensemble des services de l’entreprise. Cela va d’Android à Chrome en passant par Gmail mais également Chrome OS. Android - What is the difference between "flat style" and "material design"? - Graphic Design Stack Exchange.

Material design is unrelated to flat design in its principles. Material design is skeuomorphic in that it is an attempt to make web design more realistic in how it portrays elements, using layers and animation in a way that makes sense outside of the browser. Visually flat design and material design are similar at the moment, but material design can be applied to designers other than flat-like ones.

It follows 3 principles Material is the metaphor Be bold, graphic, intentional Provide meaning with motion Layering in material design is done through moving elements forward or back along the z axis, to and from the user, and adding realistic shadows to add more meaning. Google designers made paper models to figure out layering and shadows for their material design. There are a other design guidelines covering spacing, color, usability, and more detail about positioning and animation which you can check out in Google's webpage about the subject.

Sticker sheets & icons - Resources - Google design guidelines. Static.lukew.com/TouchGestureGuide.pdf. Touch Gesture Reference Guide. The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces. The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures (below). Download Touch Gesture Reference GuideTouch Gesture Cards For wireframes and mock-ups:Visuals only (PDF)Visuals only (EPS)Visuals only (OmniGraffle Stencil)Visuals only (Visio Stencils)How to Guide (Visio) Touch Resources Touch Target Sizes: outlines recommended touch target sizes from Apple, Microsoft, Nokia, and academic research.

Touch Gesture Diagrams: listing of touch gesture diagrams that illustrate how users can interact with multitouch interfaces. Platform Support How popular software platforms support core touch gestures. iOS Human Interface Guidelines: App Icon. Every app needs a beautiful, memorable app icon that attracts people in the App Store and stands out on their Home screen. iOS can use versions of the app icon in Game Center, search results, Settings, and to represent app-created documents. For the best results, enlist the help of a professional graphic designer. An experienced graphic designer can help you develop an overall visual style for your app and apply that style to all the icons and images in it. Use universal imagery that people will easily recognize. In general, avoid focusing on a secondary or obscure aspect of an element. Embrace simplicity. Create an abstract interpretation of your app’s main idea.

If you want to portray real substances, do it accurately. Make sure the app icon looks good on a variety of backgrounds. Avoid transparency. Don’t use iOS interface elements in your artwork. Don’t use replicas of Apple hardware products in your artwork. Don’t reuse iOS app icons in your interface. Spotlight and Settings Icons. Traduction. Traduction.