Дизайн сайтов: основные направления и характерные черты

Можно выделить четыре основных направления веб-дизайна: веб 2.0, скевоморфизм, минимализм, плоский (flat) дизайн. Также существуют стили, основанные на определенном тренде, например использовании иллюстраций, ретро, гранж оформлении.

Стиль Веб 2.0

Устаревший, но все еще распространенный стиль.

Основные черты веб 2.0:

  1. 2-3 колонки информации, центральное расположение контента.
  2. Четкое выделение верхней и нижней секции — шапки и подвала сайта.
  3. Облако тегов.
  4. Ленточная подача информации.
  5. Наличие главной панели навигации .
  6. Яркие цвета, закругленные углы, отражения, градиенты.

веб 2.0

Минималистский стиль

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

Основные черты минимализма:

  1. Минимум декоративных элементов и опций. Удаляется все, без чего сайт может функционировать.
  2. Количество цветов  в оформлении ограничено, как правило не больше трех.  Часто используется черный и серый.
  3. Важное значение приобретает типографика: подбор шрифтов, их сочетание и размер. Зачастую — это основное украшение сайта.
  4. Большое количество свободного пространства на сайте.
  5. Часто в качестве фона и элемента переднего плана используется большое фото.

мини

Chama Inc

минимализм

Vudumedia

минималстиль

Плоский дизайн (flat)

Близок к минимализму. В основе лежит двумерный стиль.

Основные черты flat дизайна:

  1. Максимальная простота, исключение любых украшательств.
  2. Плоский дизайн, отсутствие объема, теней, градиента.
  3. Яркие цвета.
  4. Акцент на типографике.

SpellTower

плоский

Yep

плоский дизайн

Стиль Метро

Разновидность плоского дизайна, яркий и выразительный стиль.  Позиционируется как быстрый, открытый, ориентированный на содержание.

Основные черты:

  1. Четкий, хорошо читаемый шрифт.
  2. Использование блоков информации в виде цветных плиток.
  3. Остроугольные плоские элементы.

Theverge

метро

Etch

метро стиль

Иллюстрационный стиль

Иллюстрации могут быть абсолютно любые: плоские изображения в стиле flat, рисунки от руки, акварель. Часто соседствует с минимализмом и плоским дизайном.

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

Noiretrenoir

иллюстрационный стиль

Mujkaktus

иллюстрации

Themartist

иллюстрация

Скевоморфизм

Это стиль, для которого характерно подражание реальным предметам и текстурам при оформлении сайта.

Основные черты скевоморфизма:

  1. Натуральные цвета.
  2. Элементы дизайна с текстурой кожи, ткани, дерева, бумаги.
  3. Тисненые буквы, печати, штампы.
  4. Объемные, трехмерные элементы.

текстура

Стиль гранж

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

Характерные черты стиля гранж:

  1. Эффекты состаренности, небрежности, наличие пятен, разводов, рваных краев, царапин.
  2. Текстурный фон (старая штукатурка, кирпич, дерево).
  3. Использование элементов городской, промышленной архитектуры и пейзажей.
  4. Приглушенные, грязные цвета . Часто используются черный, коричневый, бежевый, серый, темно синий.
  5. Шрифт неровный, с заломами и шероховатостями.

Sycfuk

стиль гранж

Bristolarchiverecords

гранж стиль

Ретро стиль

Позволяет окунуться в прошлое, создает особое настроение, подчеркивает статус. Часто используется на сайтах ресторанов и фотостудий. Характерная особенность — использование узнаваемых предметов, символов  и стилистики 20 — 80-х годов 20 века.

Характерные черты ретро стиля:

  1. Крупная типографика,  жирные, рукописные шрифты плакатного типа.
  2. Использование текстур.
  3. Большое количество украшений — узоров, рамочек, двойные, тройные линии.

Имеет общие черты со стилем гранж — приглушенные, выцветшие цвета, состаренные текстуры.

Targetscope

ретро стиль

Garynock

гранж

С основными направлениями, пожалуй все.  Обращайте внимание на детали оформления сайтов и определить их стиль не составит большого труда. А в каком стиле выполнен Ваш сайт?