Загружаем

Нажмите для поиска

Маркетинг

Принципы «плоского» либо flat дизайна иконок от Гугл

Поделиться

google_flat_icons16

Продолжаем говорить о новеньком ярчайшем тренде в дизайне: о «flat» дизайне.

Сейчас мы разглядим подходы к созданию иконок в стиле «flat» от компании, стоявшей у истоков данного тренда.

Stikup afterpost context

Принципы сотворения flat иконок, описанные в данной статье не стоит принимать как настоящие законы «плоского» дизайна, но из подхода, применяемого Гугл при разработке flat icons, можно почерпнуть несколько , по моему воззрению, принципиальных мыслях.

Базисные требования к визуализации

  • Запоминающийся дизайн, по которому совершенно точно можно выяснить продукт: иконка играет роль логотипа продукта
  • По нраву: обыкновенные, миролюбивые, современные
  • Наибольшее упрощение и сохранение только главных форм и очертаний иконок

Иконки для программных товаров:

google_flat_icons1

Иконки пользовательского интерфейса:

google_flat_icons2

Серьезное следование геометрическим формам

База плоского дизайна иконок Гугл — правильные геометрические формы. Начинать дизайн хоть какой иконки следует с отрисовки точно сверенных форм.

google_flat_icons4

google_flat_icons3

Передная визуализация

Изображение иконки должно находится в 2D плоскости, а не в 3D пространстве.

google_flat_icons5

Прямые четкие тени

В «плоском» дизайне иконок принципиальное значение отдается визуализации теней:

  • Не употребляются мягенькие, падающие тени.
  • Не употребляются градиенты.
  • Не употребляются изогнутые тени, также теневые эффекты с внедрением бликов и имитации стеклянной поверхности.
  • Только прямые строгие тени, падающие точно под углом в 45 градусов

google_flat_icons6

Четкие цвета и цветовые цвета

Цвет — база хоть какого flat дизайна. Гугл предлагает последующую гамму цветовых решений для иконок собственных программ:

  • Главные цвета: голубий, красноватый, желтоватый, зеленоватый, сероватый, белоснежный
  • Без сероватого цвета не обходится ни один элемент flat-дизайна
  • Гугл предлагает 11 цветов сероватого для дизайна иконок
  • Каждый цвет имеет 3 колера: незапятнанный цвет, цвет + 40% белоснежного, цвет + 60% белоснежного

google_flat_icons7

Цветовые палитры «плоского» дизайна (с четким описанием применяемых цветов) можно поглядеть в конце статьи.

Пример цветовых композиций

Пример цветовых композиций в 2 цвета: цвета не числятся отдельным цветом

google_flat_icons10

Пример цветовых композиций в 3 цвета:

google_flat_icons11

Точно в пиксель

Любая иконка должна быть нарисована точно по пиксельной сетке.

google_flat_icons12

Подход к шрифтам

Шрифт, применяемый Гугл: Open Sans Semi Bold google_flat_icons14

Для малеханьких размеров иконок употребляется сверенный по пикселям шрифт: google_flat_icons13

Правила скалирования иконок

Иконка «мини» формата не является полной копией иконки обыденного размера: в мини — иконках исчезает часть линий для получения чистоты изображения.

google_flat_icons17

Единый подход к размеру иконок

Не глядя на то, что иконки могут быть разной формы и различного размера, они все вписываются в единый формат:

google_flat_icons15

  • для иконок продукта: 128px:128px (размер границ квадрата), 96px:96px (размер иконки)

google_flat_icons19

  • для иконок пользовательского интерфейса: 21px:21px (размер границ квадрата), 19px:19px (размер иконки)

google_flat_icons18

Таблица размеров программных иконок от Гугл:

google_flat_icons20

 

Четкое описание цветовых решений «плоского» дизайна

Цветовые решения для программных иконок: google_flat_icons8

Цветовые решения для иллюстраций и инфографики: google_flat_icons9

24 хороших примера иконок и иллюстраций «Flat» дизайна от Гугл

Flat design Gallery from Google google_flat_ex2 google_flat_ex3 google_flat_ex4 google_flat_ex5 google_flat_ex6 google_flat_ex8 google_flat_ex7 google_flat_ex9 google_flat_ex10 google_flat_ex11 google_flat_ex12 google_flat_ex13 google_flat_ex14 google_flat_ex15 google_flat_ex16 google_flat_ex17 google_flat_ex18 google_flat_ex19 google_flat_ex21 google_flat_ex20 google_flat_ex22 google_flat_ex23 google_flat_ex24

Источник: http://www.behance.net/

Stikup afterpost context
Tags:
Александр Стихарев

Создатель клуба COSTPER, cоздатель сервиса аналитики в социальных сетях STIK.PRO. Руководитель отдела маркетинга в клинике Медиэстетик.

  • 1

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

Мы отправляем дайджест с новыми статьями и информацию о мероприятиях.