За кулисами новой дизайн системы
Работая в сфере разработки программного обеспечения и дизайна, мы сталкиваемся с необходимостью использовать одноразовые решения. Иногда мы работаем в течение ограниченного времени, а иногда мы просто еще не договорились о пути вперед. Эти одноразовые решения не являются по своей природе плохими, но если они не будут построены на прочном фундаменте, мы в конце концов окажемся с накопленными техническими и дизайнерскими долгами. Визуальный язык похож на другие языки. Как известно, возникают непонимания, если язык не является доступным и понятным каждому, кто его использует. Дизайн, в последнее время, стал системой, которая позволяет создавать продукты при помощи изменений и дублирования. От Понтонных цветов до винтов Philips, мы можем наблюдать, как эта система позволяет нам управлять хаосом и создавать лучшие продукты. Цифровые продукты являются более обширным полем деятельности для внедрения подобных систем, но в данный момент этому не уделяется должного внимания. Унифицированная дизайн система является основой для увеличения качества и скорости. Качество растет за счет общего опыта, который понятен нашим пользователям, а скорость растет благодаря общему языку, с которым мы работаем.
Зачем нам нужны дизайн системы
Компания Airbnb пережила много взлетов за последние годы. В данный момент наш департамент дизайна выполняет десятки функций и состоит из разных команд. Стало очевидно, что нам необходимо найти более системный подход чтобы правильно объединять наши усилия на пути к общей цели. Мы выявили эти проблемы внутри компании, однако, я уверен, что эти симптомы присущи всей индустрии разработки софта.
Слишком мало ограничений
Дизайн софта имеет очень мало ограничений в сравнении с другими разделами дизайна. Это позволяет использовать многие решения для любой задачи, но также приводит к разобщенным UX. Владельцам продукта и дизайнерам необходимо разработать общие ограничения и следовать им.
Множество дизайнеров и заинтересованных лиц
Программное обеспечение разрабатывается разными командами (иногда очень большими). Сложность создания общего и связного опыта увеличивается в разы потому, что в процессе задействовано много разных специалистов
Через время, становится не важно, насколько согласована небольшая команда потому, что разные люди будут привносить свои решения и стили, что приведет к различиям подходов
Разнообразие платформ
Нам необходимо, чтобы продукт корректно работал на различных платформах и устройствах. Очень часто приходится сталкиваться с ситуацией, в которой возникает необходимость повторять проделанную работу на всех платформах.
Программное обеспечение во времени
Еще одна уникальная особенность софта в том, что он не устаревает и не заменяется как обычный продукт пользователя. Код и дизайн, созданные годами ранее, до сих пор применяются в разных местах, даже после того, как векторы компании и ее продукта были кардинально изменены. Следовательно, это требует постоянной поддержки и модернизации.
Полиграфический дизайн
Все объекты, расположенные на поверхности материального дизайна, наносятся «цифровыми чернилами». Этими объектами являются изображения, тест, пиктограммы. Расположение этих объектов происходит по принципу полиграфического дизайна.
Изящная типографика
Типографика имеет важное значение в полиграфическом дизайне. Она задает структуру контента и влияет на образование стиля определенного бренда
Типографика образует структуру элементов, которые имеют свой размер, шрифт, иерархию С их помощью мы визуально понимаем, какие элементы более значимы и почему одни из них являются ключевыми, а другие — второстепенными.
Контрастная типографика
Еще одним важным принципом полиграфии является контраст типографики
Несложно заметить, что крупный заголовок и темный шрифт означают нечто важное и основное, а более мелкий текст и светлый тон означают второстепенную информацию. Контраст позволяет выделять главные тезисы, придавая общую эстетичность контенту
Модульная сетка и направляющие
Если в экранном дизайне применяются базовые сетки, то в полиграфическом дизайне — модульные сетки. Для Material Design используют сетку с шагом 8dp.
Отличительной чертой размещения контента в Материальном дизайне считается размещение основных направляющих. Благодаря им, создаются отступы от границ экрана, влияющие на структуру содержания страницы и управление взглядом пользователя. В результате, в центре экрана мы видим основной текст, а дополнительные элементы размещены за его пределами, у границ.
Примеры SMART-целей для работы
Вот несколько примеров профессиональных SMART-целей для работы, которые помогут вам продвинуться в успешной карьере.
7 — Найти работу мечты
Пример слабой цели: Я найду лучшую работу.
Пример SMART-цели:
Конкретная: Я собираюсь стать специалистом по поисковой оптимизации (SEO) в ведущей компании, предоставляющей программное обеспечение как услугу (SaaS), такой как Shopify или Oberlo, и работать удаленно.
Измеримо: В течение двух месяцев я подам заявки минимум на 8 вакансий.
Достижимо: Я работал SEO-специалистом в течение двух лет в офисе бухгалтерской фирмы, и я хорошо справляюсь со своей работой.
Актуально: Я хочу сотрудничать с интересными людьми, вносить свой вклад во что-то инновационное и присоединиться к компании, в которой есть место для моего роста.
Кроме того, я хочу путешествовать в течение длительного времени в качестве цифрового кочевника.
Сроки: Я подам заявки на 8 подходящих вакансий в течение двух месяцев, подавая по 1 заявке в неделю.
Что получилось:
Я найду работу своей мечты, работая в SaaS-компании, такой как Shopify или Oberlo, и буду долго путешествовать в качестве цифрового кочевника. Для достижения этой цели я буду подавать по 1 заявлению в неделю в течение двух месяцев, подавая в общей сложности 8 заявлений.
8 — Заработать повышение
Пример слабой цели: Я хочу добиться повышения по службе.
Пример SMART-цели:
Конкретная: Я собираюсь добиться повышения и стать старшим SEO-специалистом.
Измеримая: Я пройду необходимое обучение и подам заявление. Я также возьмусь за дополнительный рабочий проект, чтобы продемонстрировать свою готовность нести большую ответственность.
Достижимо: Я работаю SEO-специалистом уже 3 года, и моя работа принесла значительные результаты. Кроме того, в конце этого квартала моя компания планирует принять на работу еще одного старшего SEO-специалиста.
Актуально: Я хочу продолжать учиться и бросать себе вызов по мере продвижения по карьерной лестнице.
Сроки: Я возьмусь за 1 дополнительный рабочий проект в течение следующих 2 недель, пройду необходимое обучение в течение 6 недель и подам заявление в течение 8 недель.
Что получилось:
Я собираюсь получить повышение и стать старшим SEO-специалистом в своей компании. Для этого я возьмусь за дополнительный рабочий проект в течение 2 недель, пройду необходимое обучение в течение 6 недель и подам заявление в течение 8 недель.
Примеры целеполагания — для офиса
Разбираем максимально подробно, надеюсь информация пригодится начинающим руководителям. В силу неопытности могут совершить некоторые ошибки в управлении, которым посвящена отдельная статья.
Ну а теперь, пример из бизнеса: я была свидетелем постановки «размытой» цели.
Цель: В секторе улучшить дисциплину. Никакой конкретики.
В данном случае напрашивается вопрос: «Что не так с сотрудниками, и все ли виноваты?». Разбираемся. Всего 4 человека.
Из них – одна девушка, Оля, постоянно опаздывает.
Другой сотрудник, Коля, часто ходит на перекуры, отчего качество работы значительно ниже, чем у остальных. Два оставшихся сотрудника работают без замечаний. В таком случае, будет 2 задачи для двух сотрудников поставлены по технологии. И общая задача «улучшить дисциплину» будет выполнена.
Пример 4
Оле научиться не опаздывать, и приходить за 5 минут до начала рабочего дня, до 20 числа.
А уже эту задачу, Оля может разбить на составляющие:
- Ложиться на 15 минут раньше с сегодняшнего вечера;
- Ставить будильник на 15 минут раньше, чем обычно, начиная с сегодня.
- Подготовить и проверить школьный портфель у сына с вечера, а не с утра, как обычно, начиная с текущего вечера.
И прочие моменты. Главное, оцифровать: Не просто пораньше лечь, а на 15 минут. Цифры дисциплинируют человека.
Пример 5
Коле сократить перекуры до 2 раз; не больше 10 минут, начиная с завтрашнего рабочего дня (1 – до обеда и 1 после). Но это еще лояльный начальник попался. Кто-то может и вообще запретить))
Таким образом, уже здесь всё ясно – цель поставлена по СМАРТ: адресно, по времени, конкретно, и выполнимо.
Но если вдруг, все достало, и не знаете, как найти цель, то может Вам пригодится эта статья…
Сетка
MDL использует 12-ти колоночную сетку для настольных компьютеров, 8-ми колоночную сетку для планшетов (до 800px) и 4-х колоночную для экранов мобильных устройств (до 500px). Сделать контейнер сеткой можно, добавив класс .mdl-grid:
По умолчанию контейнер для колонок сетки занимает всю ширину экрана. Если вас это не устраивает, ограничьте ширину через стили. К примеру, в демо к этой статье реализованы оба варианта, как полноэкранная сетка, так и центрированный блок:
Такого результата можно добиться, если обернуть каждую секцию в разные .mdl-grid, а отдельной секции добавить пользовательский класс с max-width: 960px.
HTML
CSS
Если вы хотите избавиться от внешних отступов margin между колонками сетки, в MDL есть класс, который необходимо добавить к контейнеру колонок — .mdl-grid—no-spacing:
Вы получите что-то типа:
Далее необходимо создать колонки внутри элемента .mdl-grid. Сделать это можно, добавив div с классом .mdl-cell. Ниже код, в котором созданы три колонки:
Если вас не устраивают размеры колонок по умолчанию, то добавьте класс .mdl-cell—{number}-col с значениями от 1 до 12. Код для двухколоночной сетки.
В MDL есть классы, позволяющие прятать колонки на отдельных размерах экранов:
- mdl-cell—hide-desktop прячет колонки на экранах настольных компьютеров (больше 840px)
- mdl-cell—hide-tablet прячет колонки на экранах планшетов (больше 480px)
- mdl-cell—hide-phone прячет колонки на экранах мобильных устройств (меньше 480px)
Чтобы увидеть данную функцию в действии, посмотрите на раздел Welcome в демо на экранах различных размеров. И вы заметите, что на маленьких экранах декоративные розовые точки исчезают:
Примеры удачного и неудачного визуального контента в Instagram
Теперь рассмотрим на примерах, что такое хороший и не очень визуальный контент для брендов.
Один из моих любимых профилей @2moodstore:
Тут не просто посыл «купите нашу одежду». Тут создано целое комьюнити девушек и женщин со схожим мировоззрением. Им нравятся похожая одежда, стиль, шутки (о, это отдельная часть этого профиля, они выбирают лучшие видео на разную тематику).
В роли моделей часто выступают создательницы бренда. Их образ пленил инстаграм-аудиторию: они уже создали свои символы, которые считываются клиентами за считанные секунды.
Весь контент профиля — олицетворение мироощущения этих двух девушек: лёгкость, стиль, утончённость, радость, счастье, улыбка. Своими фотографиями «в реальном мире», а не скопированными с обложек журналов, они визуализируют желаемый образ для клиентов. Который те потом покупают.
Вот очень хороший пример грамотного визуального контента. Формат «переодевания» максимально захватил вкладку «Интересное» в Инстаграме. И бренд 2moodstore активно его поддерживает. Этот контент помогает пользователям не только рассмотреть саму вещь, но и понять, как она дополнит их гардероб.
«Живые» фотографии — основа контента этого бренда. Для них характерна максимальная простота кадра и приближенность к реалиям жизни. Никто из нас, надевая купленную вещь, не видит себя в специально выставленном свете, с макияжем и укладкой, как на фотосессии. Мы не выглядим как модели — и это ключевой момент в таком типе съёмки. Смотря на фотографию, мы можем представить себя в этой одежде, что редко удаётся с фотографиями в жанре «лукбук».
Это был удачный пример. Теперь рассмотрим кейс, как НЕ надо вести Инстаграм.
Вот пример профиля, контент которого оставляет желать лучшего:
Расскажу о частых ошибках на примере этого профиля.
Лента выглядит как каталог. Это самая глобальная ошибка, так как для этого существует сайт. Чтобы в ленте было много фотографий вашей продукции, необязательно делать все фотографии одинаковыми или максимально похожими друг на друга. Иначе получается аккаунт, как в примере. Все фото слипаются, глазу не за что зацепиться. В итоге нам неинтересно, и мы уходим искать дальше.
Непривлекательные снимки. Фотографии должны быть качественными, иначе их не захотят рассматривать и лайкать, а значит будет меньше запросов на покупку.
Фразы «уникальная продукция» и «экотовары». Ассоциации с подобными утверждениями абсолютно не возникают при просмотре этой ленты. Тип контента подобран неправильно, начиная от ограниченности жанров съёмки и заканчивая отсутствием уникального дизайна.
Вот пример дизайна ленты, который соответствует понятиям «эко» и «уникальность»:
Тут используются earthy colors (землистые) текстуры дерева в предметной съёмке, есть интересный дизайн, присутствуют необычные снимки.
Отличие Material Design от Flat Design
Flat Design — это концепция «плоского» дизайна, при котором все элементы управления (иконки, кнопки, меню) лишены тени и визуального объема. Объекты выглядят нереалистичными, зато ничто не отвлекает пользователя от решения его задачи.
Главное меню Windows 8 — яркий пример плоского дизайна интерфейсов. Источник
Скевоморфизм — концепция, которая конкурировала с плоским дизайном и в основе которой лежит максимальная реалистичность изображений (иконок, кнопок, фоновых рисунков). Графика наглядно демонстрирует объем предметов, их тени и текстуры
Скевоморфизм был популярен на заре использования смартфонов: он привлекал внимание, выглядел эстетично и дорого
Пример скевоморфизма — скриншот рабочего стола iPhone с iOS 6. Источник
Material Design — это новый взгляд на упрощение интерфейсов
С одной стороны, все объекты по-прежнему просты и визуально приятны, как и в плоском дизайне, с другой — чуть более реалистичны, но детали в их оформлении не притягивают к себе излишнее внимание
Пример материального дизайна иконки почтового сервиса. Нет гиперреализма, но сохранены мягкие тени и простые формы. UX/UI-дизайнер с нуля до ПРО
профессия
UX/UI-дизайнер с нуля до ПРО
Делайте мир удобнее. Создавайте продуманные интерфейсы сайтов и приложений без навыков программирования. IT-компании ждут вас.
научиться
Роль анимации в Material Design
Все приложения, находящиеся в продуктах корпорации Google, как и программные обеспечения, отвечающие за их корректную работу, должны следовать определенному стандарту. За это действие и отвечает Material Design.
Разработчики компании считают, что приложения и ПО должны иметь сходство с чем-то и некое скрытое сравнение с живым предметом из реального мира. В качестве образца взяли простую бумагу и чернила. Тут же возникла связь с реальной жизнью: глубина и осязательные ощущения стали до боли знакомыми.
При разработке Material Design компания Google поставила во главу угла взаимодействие пользователей с системой и технические характеристики деталей. В конечном счете интерфейс стал еще проще и ярче.
Анимация — главный элемент системы. Упор делается на следующие моменты:
Союз девайса и пользователя. Благодаря анимации становится понятно, что за чем идет. Человек сможет понять, что произойдет при нажатии на конкретную деталь.
Концентрация внимания. Двигающиеся картинки и значки фокусируют взгляд только на одном действии
Человек не рассеивает свое внимание, отвлекаясь на посторонние вещи, и совершает операции осознанно.
Выразительность. В анимированных составляющих девайса отчетливо видно, что каждое изобретение компании Google хорошо по-своему.
Обучение
Не нужно обладать высоким IQ, чтобы управлять, например, компьютером или смартфоном.
Привлекательность. Встречают, как правило, по одежке, а провожают по качественной начинке, удобству пользования и надежности. Даже если убрать все три последние составляющие, то ничего страшного вначале не произойдет, так как анимация уже делает свое дело. Человек в первую очередь обращает внимание на форму девайса, его внешний вид и красивую (именно такую!) начинку. Он заинтересовывается тем или иным продуктом, берет его в руки и начинает взаимодействовать с ним.
Material Design добился того, что многие бренды поменяли свое мировоззрение насчет дизайнерских решений и начали создавать свои девайсы по такому же принципу. Анимация теперь стала главной частью интерфейса, чего не скажешь о том, что было несколько лет назад. Цель по упрощению пользования техникой была достигнута. Этот метод вскоре набрал популярность и указал путь для эволюции мирового дизайна.
Материальный дизайн от Android — это словосочетание часто встречается на просторах интернета, но, к сожалению, многие понимают под ним просто набор графических надстроек Google, не более. На самом деле это достаточно строгая рекомендация, которая призвана сделать ваше приложение понятным и простым для освоения пользователя.
Руководство простирается от общего введения до использования конкретных инструментов. Основы и первые шаги разработчика сопровождаются картинками и видео: сразу видно, что над этим мануалом в Google работали достаточно усердно.
С точки зрения полезности представленного контента также можно высказаться только в положительном ключе: каждое свойство инструмента, каждое действие снабжено текстовым и графическим описанием, также ссылками на руководство по разработке. Поэтому даже без наличия конкретных указаний к действию, создать серьёзное приложение Material Design сможет и новичок, и готовый специалист.
Адаптивный дизайн
Заключительным ключевым аспектом Материального дизайна является концепция адаптивного дизайна. Это означает варианты применения других трех аспектов на различных экранах устройств (телефон, ПК, телевизор и т.д.).
От общего к частному
Самый популярный метод — сжатие объема информации вместе со сжатием самого экрана. На телевизоре можно разместить много контента. На телефоне сначала размещается список, при нажатии на который можно раскрыть детальную информацию.
Отступы
На больших экранах контент размещается с помощью блоков. Они заполняют собой свободное пространство и могут растягиваться по ширине. Растяжение происходит с учетом удобочитаемости содержимого. На оставшейся части экрана создаются отступы, на которых можно расположить плавающие кнопки или плашки.
Направляющие
Отступы задаются благодаря направляющим. Ширина отступов для смартфонов, планшетов, компьютеров и телевизоров будет абсолютно разной. Так, для планшета она составляет 80 dp, а для экрана смартфона — всего 72 dp.
Размеры
Все элементы интерфейса должны иметь кратные пропорции. Размеры экранов планшетов и смартфонов отличаются друг от друга, но приложения с использованием элементов с кратными параметрами адаптируются к любым размерам устройств.
Блоки
Модульная сетка, состоящая из блоков, помогает задать визуальный ритм для оптимального принятия решения.
Тулбар (Toolbar)
Action bar
— один из главных составляющих интерфейса. В нем размещают кнопки действий и заголовки. В Андроид L экшен бар стал привлекательным и функциональным блоком управления. Этого удалось достичь благодаря тому, что в Тулбар можно поместить формы, плавающие кнопки, выдвижную навигацию с удобным управлением.
- Не стоит использовать navigation drawer для простых инструментов. Применять навигацию рекомендуется только для многочисленных задач в приложении.
- Будьте смелее с тулбарами.
- Размещайте плавающую кнопку в наиболее оптимальном месте. Не делайте привязку строго к нижнему углу.
- Отрабатывайте элементы интерфейса как под вертикальный, так и под горизонтальный экран устройства.
Material как метафора
Разработчикам компании Google удалось соединить хороший привлекательный дизайн с инновациями современных технологий и науки.
Материализм в цифровой сфере используют не впервые. Так, Apple недавно использовала в дизайне интерфейсов философию скевоморфизма (имитации восприятия визуальных объектов из окружающего нас материального мира).
Хорошим его примером является приложение «Newsstand». Здесь визуализировались привычные нам объекты: газеты, журналы, которые стоят на полках. Перелистывая эти журналы мы имитируем реальное перелистывание обычной книги из повседневной жизни. Таким образом, в «цифру» продублирована традиционная реальная жизнь.
Развитие цифрового дизайна
Подавляющее большинство пользователей ежедневно взаимодействует с цифровой средой. Они уже не требуют точного сходства виртуальных объектов с реальным миром. Чем скорее к этому моменту привыкнут все пользователи, тем скорее digital design сможет начать активно шагать вперед.
Опираясь на это, Материальный дизайн уже не так сильно подвергается влиянию скевоморфизма. Теперь это лишь новая ступень в эволюции виртуальных объектов.
Наглядность как фундаментальная основа
Поверхности и грани различных элементов управления в Материальном дизайне создают подсказки в ориентировании, управлении интерфейсом, подобно действиям в реальной жизни.
Тактильные характеристики объектов помогают отличать ключевые объекты от дополнительных, определять взаимосвязь между ними.
Основы Material design также включают в себя принципы печатного дизайна. Акценты расставляются не только для эстетики, но и для создания особой структуры, иерархии, создания простой системы управления.
В основе визуальной составляющей Материального дизайна лежат: насыщенные цвета, четкие края, крупная типографика и большие отступы между различными элементами.
Осмысленная динамика
Главное внимание фокусируется на поведении (действиях) пользователя. Его взаимодействие с дизайном происходит на базе накопленного пользовательского опыта, и никак не иначе
Примеры сайтов в стиле Material Design
Как только в интернете появился релиз концепции, в сети появилось множество представителей Материального дизайна.
Сайты, взятые для примеров, созданы в точном соответствии с основными принципами Материального дизайна. Они просты и понятны, содержат в себе плавающие кнопки, тени, яркие цвета и визуальные эффекты, плавную навигацию. Все это в совокупности помогает получить прекрасный пользовательский опыт.
Краткая история подхода
До 2011 года корпорация Google просто выпускала продукты, не пытаясь создавать единую концепцию интерфейса для различных устройств. Та же почта могла выглядеть совершенно по-разному на смартфонах, обычных мобильниках и десктопных версиях. Один и тот же продукт выглядел по-иному: разные шрифты, оттенки фона, выпадающие списки меню и важные иконки не перекликались между собой.
2011 — год первых изменений. Разработчики постарались привести к общему знаменателю хотя бы часть интерфейса, для чего был создан проект Project Kennedy. Он предназначался для десктопных версий.
Логотипы известных сервисов Google в едином стиле в проекте Project Kennedy. Источник UX/UI-дизайнер с нуля до ПРО
профессия
UX/UI-дизайнер с нуля до ПРО
Для тех, кто хочет попасть в IT без навыков программирования
пройти курс
Одновременно существовал и проект Holo, который должен был заменить непривлекательный дизайн интерфейсов на системе Android. Визуал стал значительно лучше, но Holo и Kennedy все еще отличались друг от друга. Команде Google это надоело, и парни решили, наконец, собраться вместе и договориться о единой концепции дизайна интерфейсов приложений. В результате в 2014 году на конференции I/O Google представил свою дизайн-систему, которую и назвали Material Design. Она объединила в себе рекомендации для разработчиков и гайдлайны для дизайнеров, которые задают определенные рамки, но при этом не ограничивают в принятии решений.
Пример цветовой системы для приложения, сайта или сервиса из по Material Design
