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

Потрясающе простая и понятная статья!

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

Очень удобно и легко читабельно!

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

google_flat_icons9

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

google_flat_icons20

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

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

google_flat_icons15

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

google_flat_icons19

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

google_flat_icons18

Подробнее:

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

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

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

google_flat_icons1

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

google_flat_icons2

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

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

google_flat_icons4

google_flat_icons3

Фронтальная визуализация

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

google_flat_icons5

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

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

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

google_flat_icons6

Точные цвета и цветовые оттенки

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

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

google_flat_icons7

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

Пример цветовых комбинаций

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

google_flat_icons10

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

google_flat_icons11

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

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

google_flat_icons12

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

Шрифт, используемый Google: Open Sans Semi Bold
google_flat_icons14

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

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

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

google_flat_icons17

 

 

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

Читайте также:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *