Flat дизайн шрифт


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

google_flat_icons16

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

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

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

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

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

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

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

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

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

google_flat_icons15

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

google_flat_icons19

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

google_flat_icons18

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

google_flat_icons20


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

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

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

24 отличных примера иконок и иллюстраций «Flat» дизайна от Google

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/

comments powered by Disqus
Источник: http://powerbranding.ru/design/google-flat-design/



Рекомендуем посмотреть ещё:


Закрыть ... [X]

10 принципов «плоского дизайна» Школа веб-дизайна
Белый френч с ярким дизайномШить модное пальтоДекор для детского дня рождения 1 годДизайн в полиграфическом производствеДвухуровневые потолки дизайн для всех


Flat дизайн шрифт Flat дизайн шрифт Flat дизайн шрифт Flat дизайн шрифт Flat дизайн шрифт Flat дизайн шрифт Flat дизайн шрифт Flat дизайн шрифт Flat дизайн шрифт