iPad + Tablet, WEB

2016: Google Material Design

No matter do you or don’t you like Google and what would Google do next you have to keep the eye on it, just in case…

Google: “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. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.”

Goals

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

Principles

materialdesign_principles_metaphorMaterial is the metaphor

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 and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

materialdesign_principles_bold Bold, graphic, intentional

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 immerse the user in the experience.

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

materialdesign_principles_motion Motion provides meaning

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

 

Read More…

 

Advertisements

About Zoran Opalic

Professional in design and publishing industry. Conceptualize and orchestrate designs and redesigns that effectively reinforce and build brand images. Proven ability to drive record-high campaign in increasing publication sales and execute successful product launches...

Discussion

No comments yet.

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

Aston Martin DB10

Production will be strictly limited to 10 of the bespoke sports cars, developed and built by the designers, engineers and highly skilled craftspeople at Aston Martin’s Gaydon headquarters.

Architect Oscar Niemeyer

"My work is not about form follows function, but form follows beauty or, even better, form follows feminine."

BACK to BASICS: Portraits

Portraits of people are one of the first elements of the photography used in newspapers.

Typography: x-heigh

In typography, x-heigh refers to the heigh of lower case letters without upper or lower parts when compared to capital letters...

Designer George Lois

“I always knew I was the most talented kid in the school, ” says George Lois of his time at Music and Art. “I was lucky to be exposed to the city’s best art education"...

BODY COPY

Newspaper typefaces require a higher legibility then typefaces used for other printed products. Newspaper are printed on a paper of lesser quality under high speed.

How to redesign 1

Good redesign is driven by a deep understanding of the editorial mission of the publication.

Headline on photographs

The eternal dilemma! Dilemma of all editors on the planet Earth – to put or not put the headline or any kind of type in the photo.

Design Facts

Three elements that will greatly help you to understand how readers are observing you.

Typeface: NY Times Magazine

Sunday Magazine is an expansive family of fonts for information in tiny spaces and headlines at large sizes.

Infographics

When, why and whether to use infographic. The basic fact is that infographic refresh the publication, and it contributes to originality of your product.

A well-designed publication

Everything that a well-designed publication must have...

Archives

Categories

%d bloggers like this: