Flat Design – An Introduction
- 814 shares
- 3 years ago
Material Design is an Android-oriented design language created by Google, supporting onscreen touch experiences via cue-rich features and natural motions that mimic real-world objects. Designers optimize users’ experience with 3D effects, realistic lighting and animation features in immersive, platform-consistent GUIs.
Material Design emerged as Google’s brainchild in mid-2014, codenamed “Quantum Paper” and representing a fresh “ink-and-pen” approach. With Material Design, the goal is to deliver high-quality output consistently across platforms, giving users control over clearly indicated, pleasant-looking components that behave like real-world objects. Unlike the portrayal of culture-relevant items (e.g., wastebaskets) in skeuomorphism, with Material Design designers apply basic, natural laws from the physical world, principally concerning lighting and motion. The idea is that by mimicking the physical world, we reduce users’ cognitive loads through careful attention to layout, visual language and pattern library, maximizing predictability and eliminating ambiguity. Material Design’s “card” concept serves as a system for layering elements and animations; it also permits a more personalized experience (e.g., showing followers on Twitter).
“Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”
— Matias Duarte, VP of Material Design at Google
It’s vital for Material Design to meet users’ expectations of how components should behave. For instance, onscreen objects are more credible if they follow the laws of gravity.
Three simple elements – one instant message
To apply Material Design effectively, you need to understand these principles:
The metaphor of material
You take the concept of tactile reality, and you:
Design to offer users attributes they find familiar as affordances. Immediately recognizable real-world features such as buttons should instantly let users see what to do. Surfaces and seams/edges must complement these by offering hints. Use realistic light/shadowing to divide the design space and reveal moving parts.
Use an adaptive design – ensure hierarchy, colors, icons and spatial proportions are consistent across all devices through adaptive version selection.
Bold, graphic and well-chosen elements add meaning and are pleasing to the eye
Make designs bold so users notice hierarchy instantly and can focus and draw appropriate meanings. Excellent color and whitespace use, strong imagery and large typography across the screen help users become immersed in the experience.
Design to prompt users to act, and show functionality by emphasizing icons and surfaces as cues.
Make messages with motion
Put users in control by showing changes resulting directly from their actions.
Make animations play out in a single environment/stage, in continuous flowing movements.
Ensure responses are clear, but subtle: no jerky/unpredictable movements.
It's critical to combine bold, deliberate design choices with subtlety regarding their natural reactions to user input. For example, if the user drops a selected item into a group of objects, the latter should move aside, accommodating it. In Material Design we try not to let objects do magical things, such as vanish or move on their own. Instead, we translate the familiarity of the limited, physical world onto screens that have unlimited potential. YouTube’s infinite scrolling exemplifies this.
Using contrasting surface fills to depict elevation
In May 2018, Google released a revised version to remedy a major problem – the original guidelines were restrictive, emphasizing function over style. Because apps created in line with these looked alike, many app makers disliked Material Design. Google had to balance Material Design’s consistency with the capacity for differentiation – to grant designers the flexibility to adapt it to brand needs. Version 2 features not only new guidelines but also a tool suite (including new icon packs and a Material Theme editor) you can use to customize your designs. Therefore, you can fine-tune aesthetics to suit your organization’s brand presence while you build on the foundation of timeless natural laws.
2DP outlined icons for maximum readability wherever you apply them
See how Material Design fits into UX design.
Learn how to create interfaces that mimic real-world objects.
A detailed piece on standing out with Material Design.
An enlightening do’s-and-don’ts guide to Material Design.
Here’s the entire UX literature on Material Design by the Interaction Design Foundation, collated in one place:
Take a deep dive into Material Design with our course User Experience: The Beginner’s Guide .
If you’ve heard the term user experience design and been overwhelmed by all the jargon, then you’re not alone. In fact, most practicing UX designers struggle to explain what they do!
“[User experience] is used by people to say, ‘I’m a user experience designer, I design websites,’ or ‘I design apps.’ […] and they think the experience is that simple device, the website, or the app, or who knows what. No! It’s everything — it’s the way you experience the world, it’s the way you experience your life, it’s the way you experience the service. Or, yeah, an app or a computer system. But it’s a system that’s everything.”
— Don Norman, pioneer and inventor of the term “user experience,” in an interview with NNGroup
As indicated by Don Norman, User Experience is an umbrella term that covers several areas. When you work with user experience, it’s crucial to understand what those areas are so that you know how best to apply the tools available to you.
In this course, you will gain an introduction to the breadth of UX design and understand why it matters. You’ll also learn the roles and responsibilities of a UX designer, how to confidently talk about UX and practical methods that you can apply to your work immediately.
You will learn to identify the overlaps and differences between different fields and adapt your existing skills to UX design. Once you understand the lay of the land, you’ll be able to chart your journey into a career in UX design. You’ll hear from practicing UX designers from within the IxDF community — people who come from diverse backgrounds, have taught themselves design, learned on the job, and are enjoying successful careers.
If you are new to the Interaction Design Foundation, this course is a great place to start because it brings together materials from many of our other courses. This provides you with both an excellent introduction to user experience and a preview of the courses we have to offer to help you develop your future career. After each lesson, we will introduce you to the courses you can take if a specific topic has caught your attention. That way, you’ll find it easy to continue your learning journey.
In the first lesson, you’ll learn what user experience design is and what a UX designer does. You’ll also learn about the importance of portfolios and what hiring managers look for in them.
In the second lesson, you’ll learn how to think like a UX designer. This lesson also introduces you to the very first exercise for you to dip your toes into the cool waters of user experience.
In the third and the fourth lessons, you’ll learn about the most common UX design tools and methods. You’ll also practice each of the methods through tailor-made exercises that walk you through the different stages of the design process.
In the final lesson, you’ll step outside the classroom and into the real world. You’ll understand the role of a UX designer within an organization and what it takes to overcome common challenges at the workplace. You’ll also learn how to leverage your existing skills to successfully transition to and thrive in a new career in UX.
You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are:
Alan Dix, Director of the Computational Foundry at Swansea University, author of Statistics for HCI: Making Sense of Quantitative Data
Ann Blandford, Professor of Human-Computer Interaction at University College London
Frank Spillers, Service Designer, Founder and CEO of Experience Dynamics
Laura Klein, Product Management Expert, Principal at Users Know, Author of Build Better Products and UX for Lean Startups
Michal Malewicz, Designer and Creative Director / CEO of Hype4 Mobile
Mike Rohde, Experience and Interface Designer, Author of The Sketchnote Handbook: The Illustrated Guide to Visual Note Taking
Szymon Adamiak, Software Engineer and Co-founder of Hype4 Mobile
William Hudson, User Experience Strategist and Founder of Syntagm
Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can start applying what you learn in your everyday practice.
You’ll find a series of exercises that will help you get hands-on experience with the methods you learn. Whether you’re a newcomer to design considering a career switch, an experienced practitioner looking to brush up on the basics, or work closely with designers and are curious to know what your colleagues are up to, you will benefit from the learning materials and practical exercises in this course.
You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.
You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, LinkedIn profile or website.
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.