The power of visioning

Официальные руководства материального дизайна

Официальное руководство — главный и лучший источник информации о материальном дизайне. Оно прекрасно структурировано и проиллюстрировано. Для каждого пункта подобраны очень наглядные примеры, как положительные так и негативные (dos and donts). Сайт, кстати, сделан с привлечением агентства Хьюдж. Вот некоторые примеры:

Для разработчиков Андроид-приложений есть отдельный сайт с официальными руководствами и уроками.

Для разработчиков на Angular.js есть официальный порт стилей.

Для полного понимания, конечно, нужно посмотреть шоурил, так как основная суть материального дизайна раскрывается в динамике:

Using the icons in HTML

It’s easy to incorporate icons into your web page. Here’s a small example:


This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

This feature is supported in most modern browsers on both desktop and mobile devices.

Browser Version supporting ligatures
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Opera 15
Apple MobileSafari iOS 4.2
Android Browser 3.0

For browsers that do not support ligatures, fall back to specifying the icons using numeric character references like the example below:

Find both the icon names and codepoints on the material icons library by selecting any icon and opening the icon font panel. A codepoints index is also available on our git repository which shows the complete set of names and character codes.

Plan for the future

A brand isn’t built in a day, during a single press cycle, or with the launch of a new website. A brand is built over time, over the thousands and thousands of interactions you have with your customers. Some of those interactions are big, like our  to focus on life science investments, while others are as small as a thank-you note, or a thoughtfully prepared cup of coffee.

After a few weeks of intense work further refining the GV brand, we decided on a quiet launch. No big press announcement, no fanfare, but instead a simple, low-key gathering around my dining room table on a Sunday night. Why? A new brand is not big news to our audience. While the launch was a huge deal for us, we also understand that startups, founders, and everyone else have a thousand other important things to focus on. What matters most is that their unique brands are represented with integrity and style.

Office Hours

Material ComponentsWant to learn how to take advantage of Material Theming? Have questions about creating integrating Material Components (MDC) into your product? Come chat with cross-platform experts on Material Design for help on Android, iOS, Flutter, and more.

MDC for AndroidTuesday, May 7: 3:00—4:00 PM • Section 6Wednesday, May 8: 2:30—3:30 PM • Section 2Thursday, May 9: 12:30—1:30 PM • Section 2

MDC for Web, iOS, FlutterTuesday, May 7: 2:00—3:00 PM • Section 3Wednesday, May 8: 2:30—3:30 PM • Section 3Thursday, May 9: 10:30—11:30 AM • Section 5

Next Billion UsersThere are several ways to make your products more accessible to users in emerging markets and those with disabilities: Start by studying insights from the Next Billion Users team, and move on to reevaluating voice integration, color usage, and privacy settings. Pick up new techniques at the NBU office hours, where designers and researchers will be on hand to review apps and answer questions about accessibility.  

Tuesday, May 7: 4:00—5:00 PM • Section 6Wednesday, May 8: 10:30—11:30 AM • Section 6Wednesday, May 8: 11:30 AM—12:30 PM • Section 1

Stickers aren’t emojis

While they’re similarly embedded in messaging apps, stickers communicate in a way that’s different from emoticons, text, photos, or GIFs. They’re detailed illustrations and animations of characters caught in a distinct moment of feeling. Stickers are surprisingly complex, containing layers of meaning and abstraction that must be immediately understood.

Alice Moloney: We tried to take the learnings from basic forms of illustration and start from there. For example, pedestrian signage has to communicate immediately and there’s no room for error. Also how illustration is used for personalization and self expression. Patches on your jacket, badges, physical stickers covering your pencil case.

Domitille Collardey: It’s all about a moment. If you see a face on the screen, you tend to relate to it more than words. You want to look at the animation and get it right away. It’s a snapshot, not an action unraveling with a punchline.

Emily Meinhardt: If you have a sticker on your phone, it’s showing what you feel. It’s showing your core emotions and what you’re doing. Stickers are in your hand, they’re the size of your thumb. They’re designed to be for you.

Alice: Photographic evidence is truth. Illustration is subjective. It will always withhold some element of truth that forces the viewer to fill in the gaps. If you can create an image that sticks with someone and they inject meaning into it, you’ve done something amazing.

Модный приговор

Material Design — дизайн программного обеспечения и приложений операционной системы Android от компании Google, впервые представленный на конференции Google I/O в 2014 году. Идея дизайна заключается в создании приложений, которые открываются и сворачиваются как физические (то есть материальные) карточки. Как и все физические объекты, они должны отбрасывать тень и иметь некоторую инерционность. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно (рис. 1).

Рис. 1. Основные элементы Material Design

Вообще, эффект тени позволяет визуально расположить все элементы на разной высоте, то есть получается некоторая совокупность слоев (рис. 2).

Не менее значима концепция плавающей кнопки (Floating Action Button), отражающей главное действие во фрагменте или активности. Например, в Gmail данный виджет позволяет создать новое письмо. Плавающей эта кнопка названа потому, что ее положение не фиксировано (да, не только правый нижний угол) и может меняться. Причем это изменение должно быть плавно и осмысленно анимировано, то есть, например, при скроллинге компонента ListView или переключении фрагмента FAB кнопка может «уезжать» за экран или «растворяться».

Рис. 2. Слои? Слои!

Формат журнальной статьи не позволяет описать все нюансы Material Design (в пересчете на бумажный формат ты нафигачил целых полторы статьи :). — Прим. ред.), тем более что не все из них можно реализовать библиотеками совместимости в преLollipop версиях Андроида. Наиболее тяжело в этом плане дела обстоят с анимацией. Например, у нас не получится увидеть Ripple-эффект (расходящиеся круги при нажатии на кнопку), так как данная анимация реализуется аппаратно и недоступна для старых устройств. Разумеется, это решается сторонними библиотеками, но об этом мы поговорим в следующий раз.

Ознакомиться с гайдами по Material Design можно (даже нужно!) на официальном сайте Google, а по адресу доступен перевод на русский язык.

Color correct

Color is one of the most important elements of your brand identity. Just think of the blue in Facebook or the black and white theme in UBER. If you’ve developed a strong color story for your brand, stick with it. There is nothing more disorienting to a user then suddenly feeling like he or she has entered a different product space in the UI. Material Design provides a simple, smart approach to building harmonious color stories, regardless of whether you use the palette or apply your own color story to the system. The key is the way in which color is applied to the UI.

The Material Design palette, for example, starts with the primary 500s and scales from light to dark, offering a variety of carefully chosen values. The 500s are perfect for describing the dominant theme for your brand and are great for large areas of color, like backgrounds and status bars. From there, you can choose a supporting value, scaling up to a 700 for system bars, for example, or down to a 300 for secondary information. Accent colors are brighter and more saturated. They encourage user interaction by popping off the screen and contrasting with the rest of the palette. They are perfect for fabs, buttons, switches, and sliders.

Анимация в Material Design

В отличие от Apple, у которых анимация несет преимущественно эстетическую функцию, Google делает ставку на UX и функциональность. В их рекомендациях анимации уделено гораздо больше внимания, а на конференциях то и дело им посвящаются доклады.

Основная идея анимации в Material Design — сделать пользовательский интерфейс выразительным и простым в использовании. Для этого она должна отвечать трем принципам.


Анимация показывает пространственные и иерархические связи между элементами: какие действия доступны пользователю и что произойдет, если он выполнит одно из них.

Анимация фокусирует внимание на том, что важно, и не отвлекает от основного действия

Анимация выражает характер, индивидуальность и стиль каждого продукта.

Таким образом, с помощью анимации можно:

Показать пользователю, как элементы связаны друг с другом.

Показать, как выполнять разные действия.

3. Сделать вау-эффект

Добавить привлекательности, чтобы пользователь снова захотел взаимодействовать с продуктом.

И это только верхушка айсберга. Google действительно заставил мир пересмотреть отношение к анимации и сделал ее полноценной частью UX-дизайна. Можно искать недостатки в рекомендациях Material Design, но, думаем, не стоит совсем игнорировать значение анимации сегодня.

А вот забавное замечание об одном из положений Material Design — о том, что все предметы, выходящие из экрана, должны ускоряться

Ведущий разработчик Джон Шлеммер считает, что неважно, где именно они остановятся

«В руководстве по материальному дизайну Google, похоже, думают, что вы должны только ускоряться при выходе из экрана», — Паскаль Д’Сильва. Источник

Благодаря Material Design анимация сегодня — не просто эффектное дополнение дизайна, а полноценная его часть. Если вы все делаете правильно, движение оживляет ваш интерфейс и заставляет пользователей любить интерфейс. Научиться создавать крутые анимации можно на курсе «Анимация интерфейсов».

Курс «Анимация интерфейсов»

Вы сможете самостоятельно создавать любую анимацию в интерфейсах и эффективно доносить концепцию проектов до клиентов. Мы начнем с анимации простейших элементов, таких как иконки, и дойдем до создания полноценных кейсов и шоурилов.

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Go deep & move with meaning

In Material Design, we advocate looking at the UI in three dimensions because it provides a clear system for rationalizing information on the screen. It also helps users intuitively understand how to interact with a product. Designing for an x, y, and z space (three dimensions) can be intimidating at first, but considering how information moves early on in the process will give you room to fully flesh out unique interaction patterns and ensure optimal usability. Interaction patterns should also be considered a strong part of your brand identity. Users learn to associate motions and gestures with your brand—they become inextricable to the experience of your product, for example: “swiping right” meaning yes and “swiping left” meaning no.

Designing with purpose

By re-orienting the conventional AI  paradigm from finding ways to make the machine smarter, to exploring ways to augment human capability, we can unlock far greater potential in machine learning. It can become a tool for unprecedented exploration and innovation; a tool to help us seek out patterns in ourselves and the world around us. As human-centered practitioners, we have a tremendous opportunity to shape a more humanist and inclusive world in concert with AI, and it starts by remembering our roots: finding and addressing real human needs, upholding human values, and designing for augmentation, not automation.

The role of AI shouldn’t be to find the needle in the haystack for us, but to show us how much hay it can clear so we can better see the needle ourselves.

Accessibility improvements

A lot of accessibility improvements have made their way into MDC components. This mostly comprises better support for TalkBack in the form of helpful content descriptions, focusability, and the order in which the various “parts” of a component are described to a screen reader user. For example, now reads its hint, input, and helper or error text in the correct order.

What’s next for MDC?

We’ve heard your feedback about the cadence of MDC releases and the rate of response to issues. We’re committed to shipping more regularly and incorporating your important contributions. The next feature release of MDC — — is well underway with multiple alpha releases out at the time of writing. Exciting new updates include and components. As always, we encourage you to file bug reports and feature requests on GitHub. Also be sure to check out our Android example apps and Build a Material Theme.

CoordinatorLayout, Toolbar и все-все-все

Начнем с весьма эффектного компонента — CoordinatorLayout, позволяющего связывать (координировать) виджеты, помещенные в него (по сути, CoordinatorLayout является продвинутым FrameLayout). Чтобы было понятно, на рис. 3 приведено исходное состояние фрагмента приложения. Стоит только начать перелистывать список, как размер заголовка плавно вернется к традиционному размеру (уменьшится), освобождая место для полезной информации (рис. 4). И это все, что называется, прямо из коробки, без всяких костылей.

Рис. 3. Было Рис. 4. Стало

Разметка фрагмента приведена ниже (несмотря на размер, код достаточно тривиален):

Видно, что у CoordinatorLayout два дочерних элемента: AppBarLayout и контейнер FrameLayout. Последний может содержать любые прокручиваемые элементы интерфейса: например, RecyclerView или ListView. В приведенном на рис. 3 приложении в этом контейнере находятся RecyclerView и кнопка (FAB). Теперь AppBarLayout и FrameLayout будут зависеть друг от друга при скроллинге, но только в том случае, если у последнего указать специальный флаг , который инициирует передачу прикосновений в AppBarLayout.

Идеологически AppBarLayout в чем-то напоминает вертикальный LinearLayout, элементы которого могут вести себя по-разному (в зависимости от флагов) при прокручивании содержимого. В приведенном примере используется виджет CollapsingToolbarLayout, являющийся удобной оберткой для компонента Toolbar. Собственно, CollapsingToolbarLayout специально спроектирован для использования внутри AppBarLayout. Размер самого AppBarLayout в развернутом виде определяется параметром layout_height, и в листинге он равен 192dp.

Флаг определяет поведение компонента при прокручивании. Если не указать scroll, AppBarLayout останется на месте, а контент уплывет (забавный эффект). Второй флаг, , определяет, как именно будет прокручиваться Toolbar и остальной контент. К сожалению, описывать на словах отличие флагов друг от друга бесполезно, поэтому отсылаю тебя по адресу, где наглядно (с анимацией) расписаны все варианты. Как говорится, лучше один раз увидеть…

Параметр задает цвет фона, в который переходит фоновое изображение при свертывании CollapsingToolbarLayout. Внимательный читатель заметит, что на рис. 4 Toolbar вовсе не окрашен в какой-либо цвет, а немного затененное изображение осталось на месте. Чтобы получить такой эффект, нужно указать константу .

Наконец, виджеты, непосредственно определяющие внешний вид фрагмента (активности), — Toolbar («гамбургер», заголовок, кнопки меню) и ImageView (фон) завернуты в CollapsingToolbarLayout. Флаг у ImageView обеспечивает плавное затенение фонового изображения при сворачивании Toolbar’a. По опыту использования могу сказать, что «параллакс» работает не на всех устройствах.

Все вышесказанное может показаться сложным и неочевидным, но огромный плюс данного подхода в том, что вся логика совместной работы виджетов определена в файле разметки, а не в коде. Кстати, о последнем:

Вот, собственно, и весь код! SetSupportActionBar переключает ActionBar на Toolbar с сохранением почти всех свойств и методов первого. В частности, устанавливается заголовок с помощью setTitle. Полное описание виджета Toolbar доступно на официальном сайте Android Developers.

Далее находим ImageView фона и с помощью сторонней библиотеки Picasso устанавливаем соответствующее изображение. Обычно я не склонен к критике Google, но тут не могу удержаться. Неужели за столько времени существования Android нельзя было написать нормальную стандартную библиотеку для загрузки изображений? Чтобы метод setImageResource не вызывал Out of Memory для изображений в нормальном разрешении? Гайдлайны призывают делать яркие и стильные приложения со множеством графики, а такая вещь, как загрузка картинки, реализована спустя рукава. Нет, конечно, можно использовать BitmapFactory, придумывать кеширование, но это решение так и просится в отдельную библиотеку, что, собственно, сделано и в Picasso, и в UniversalImageLoader. Одним словом, непонятно…

Differentiating Your Brand Within the Material Design Framework

In 2016, device users understand how to navigate through an application and an operating system. They do not need every application to provide the same, easily-learned experience. In fact, they may subconsciously move away from brands that are boring.

To keep your website or mobile application feeling fresh and visually inviting, try using these guidelines:

  1. Pick and choose concepts: Nothing says you need to follow the material design guidelines verbatim. Find the usability elements that make sense on modern devices and blend those design concepts with a unique interface experience that breaks the mold. Make sure each user-facing page reflects your brand.
  2. Change up colors and fonts: Instead of using the design framework’s color palette and typography set, add some creativity to the mix with something other websites are not using. Create something that looks fresh and reflects your brand. Your content must appear readable and engaging, but that does not mean users expect the same experience from every brand.
  3. Do not ignore functionality in favor of form: A common pitfall of interaction design is choosing form over functionality, meaning, some designers are using the material design aesthetic guidelines and ignoring the usability recommendations. They want to provide the appearance of a modern website without actually changing a user experience to match the visual impression. In the world of digital design, if a website looks like a user-friendly page, it should act like a like a user-friendly page, too.
  4. Trust your design experience: Google often paves the way for cutting-edge UX and UI, so it is always good to use their design as a point of reference. However, you are the one who knows best your user demographics and your brand. Trust that knowledge to guide your overall design approach. For example, material design sometimes uses flat buttons to streamline the page, but this can lead to confusion regarding interactivity. Leave potentially confusing elements and busy animations off if you think it would interfere with usability.
  5. Get to the heart of material design: Well-rounded designers explore the merits of any major design trend. The next time you review material design philosophy, strip away all of the superfluous details. At its core, it is about blending the real world and digital world in a seamless interface. Take the essential ideas, but make your own rules for the elements that qualify as “clean” and “simple.”
  6. Go to competitor sites: Do your sites look similar, or do the elements contrast enough to create a different brand experience? You want to include information that matches the level of detail your competitor provides, but the overall look and feel of the site should not appear twin-like.
  7. Find a valid reason: Only use material design elements if you can provide a reason for doing so. Do you really need to add depth or use an FAB (floating action button)? If the addition would not enhance a user’s experience with the interface, move on to a static or flat element that supports your user’s needs.
  8. Keep investing in your own learning: Go to seminars, take classes, and keep reading about broader UI and UX concepts instead of relying on material design to carry you professionally. While a wildly popular philosophy, material design as we know it will eventually evolve, so it is essential that you do not fall behind in terms of the core philosophy – that of creating a great user experience. Create your own distinctive design signature that works responsively without feeling too confined.
  9. Listen to user feedback: Unless you are constantly in the end-user environment, you may not always notice the little inconsistencies that negatively affect the user experience. Your users, on the other hand, can provide important insights into what works and what does not. If something is not appearing as intended, the application designer will face the fallout. Ask for and listen to real user experiences as you go to make sure that you are serving your target demographic.
  10. Embrace material design if it makes sense: While differentiating your style as a designer is important, material design offers a lot in terms of simplicity and usability. If you like the familiarity of the language, use it to give an otherwise complex design the pared-down functionality needed for the website or application to serve its primary purpose.

News and Announcements

Material Launches Dark Theme GuidelinesDark theme is here. Discover best practices for contrast ratios, legibility, and color usage when designing and building low-luminance UIs with the new Material Design dark theme guidance. To learn more about creating your own dark theme, tune in to the “How to Design a Dark Theme Using Material” session.

New Sound Design Standards from Material DesignSound is integral to a product’s user experience. Learn why with Google’s first-ever public guidelines for designing product sounds. The standards cover everything from sound theory, to tactical advice you can implement in your product right away. Find out more by jumping in to the Material Sound guidelines, or watching the “Sound Design and Sonic Brand” talk. You’ll learn what distinguishes a “hero sound” from a “brand sound,” get a lesson on timbre and melodic motif, and leave with the tools to design a harmonious sound palette.

Designing Human-Centered AI ProductsAnnouncing new tools for designers working with AI: Material Design launches patterns and principles for building apps with the ML Kit API, and PAIR announces their People + AI Guidebook. Over 100 Googlers collaborated on the #pairguidebook, which starts with advice on when to use AI (and when to skip it), advises on data collection and feedback mechanisms, and ends with an indispensable glossary of terms. 

Get help

With our full-time design and marketing teams at GV, we’ve helped dozens of companies through branding and naming projects. The chance to apply that expertise to our own brand was undeniably exciting, and I was hopeful we could design everything in house. But Daniel Burka, our visual design expert, was quick to point out that finding outside help would give us the perspective and bandwidth to produce something truly great.

It shouldn’t have come as a surprise because this is the exact advice we give to startups: If you want a world-class brand, gather a diverse team with deep talent. We also often advise companies to hire a design agency with brand experience. By shifting my vantage to think about the project more objectively, I knew Daniel was right, and I immediately thought of asking Google’s Material Design team for help.

We collaborate with the Material Design team periodically, and we were impressed by two of their most recent projects: the launch of Google’s new logo, and the development of the Material Design system. Once they signed on as our diverse experts, the real work could begin.

Stickers must balance the universal and the unique

Like icons, stickers have to appeal to people across cultures and locations. But unlike simpler symbols, they must also express unique human moments. Complex character development allows stickers to split the difference between being too hyper-specific and overly generic. The challenge is complicated further by Allo’s reach in countries with different cultural touch points and lived experiences.

Emily: Love is universal. Laughter is universal. The way you make it specific is the art. The example I always like to use is this: ‘LOL’ is something that’s often said in a chat. But Batman wouldn’t say ‘LOL.’ That’s not how he laughs. Character development is actually a tool to say something in a unique and original way.

Alice: One sticker set is not going to tick every box and appeal to every single type of person. We art direct around 15 sticker sets at a time, and we’re always aware of whether they contain that core level of emotion and a variety of phrases that will appeal to a lot of people.

С этим читают