Что такое стиль?
Стиль – это визуальное отражение конкретного образа с помощью специальных приемов, которые соответствует определённому стилю.
Существуют 10 основных стилей в веб-дизайне:
1️⃣ Скевоморфизм
В основе скевоморфизма лежит реалистичное представление объектов. Данный стиль ещё можно назвать реализмом.
Когда появились первые компьютеры, скевоморфизм был очень важен – потому что он позволял пользователям максимально просто и легко перейти в цифровой мир. Тогда цифровой мир отрисовали так, чтобы он был максимально похож на реальный.
Характерные особенности:
- в скевоморфной графике показан объем предметов: свет, тени, блики и текстуры.
- основная работа в этом стиле строится на графике, коллажировании и обработке изображений.
- используются реалистичные объекты. Например, когда мы на сайте вместо обычных линейных иконок используем реальные изображения.
2️⃣ Неоморфизм
Прозвали его так от смешения слов «новый» и «скевоморфизм». Суть этого тренда заключается в том, что внутренние и внешние тени объекта создают иллюзию более мягких форм, и объект словно выпирает из фона, а не парит над ним как это было раньше. Его главное преимущество в уникальности. Данный стиль освежает взгляд и дает посмотреть что-то новое.
Однако недостатков у этого стиля гораздо больше. Неоморфизм – нестандартное решение с проблемами по части удобства, интуитивности и свободы действий. Из-за того, что элементы управления выглядят одинаково, т.к. контрастность достигается только с помощью теней, интерфэйс превращается в «угадайку», т.к. из-за таких теней непонятно какой элемент кликабельный, а какой является частью фона.
Характерные особенности:
- «выпуклость»
Это является основной характерностью, по которой сразу можно отличить данный стиль. Именно объем придаёт фигуре точность и уникальность этого стиля. Как раз в основе этого стиля лежат объемные фигуры без чётких контуров: очертания создаются благодаря мягким теням. Такой эффект объема делает элементы дизайна слегка приближенными к реальным.
3️⃣ Flat-дизайн
Данный стиль означает плоский дизайн. Плоским этот стиль называется потому что все элементы не выглядят объемными.
Компания Microsoft выпустила новую систему в минималистичном стиле в противовес скевоморфизму Apple, в котором преобладали реалистичные эффекты.
В плоском дизайне отсутствуют такие стилистический элементы как: падающие тени, текстура, градиенты, зато уделено внимание игре шрифтов, цветов, иконкам. Используются более простые, минималистичные визуальные решения. В его основе – чистые, лаконичные, схематичные изображения без лишней детализации.
Характерные особенности:
- Отсутствие объема
В плоском дизайне исключается использование элементов, придающих глубину и объемность объекта: тени, градиент, блики, текстуры, рефлексы, анимация. При изображении объекта отображаются лишь его контуры.
- Минимализм
Плоский дизайн сосредоточен на удобстве восприятия информации и юзабилити. Поэтому здесь также работа идёт на исключение лишнего и придания больше воздуха элементам.
- Игра цветов
Flat-дизайн содержит несколько основных цветов, которые исключают использование плавных переходов и градиентов, но могут быть яркими и контрастными по отношению друг к другу. Нередко используется белый фон, один главный цвет для элементов (часто приглушённый) и различные цветовые акценты.
- Простые шрифты
В основном в плоском дизайне используются шрифты без засечек для лучшего восприятия пользователем. Так тексты стало удобно читать, больше внимания стало уделяться содержанию и расположению на сайте.
- Двумерная графика (2D)
Используются двумерные иллюстрации, которые подчёркивает простоту элементов, создают единый стиль всего сайта и придают оригинальность ресурсу.
4️⃣ Material design
Material design — это стиль, созданный командой разработчиков Google в 2014-м году. Это не какое-то спонтанно появившееся веянье в дизайне, а фирменный продукт Google, в котором описаны чёткие принципы и правила по его использованию. Материальный дизайн находится где-то между плоским дизайном и скевоморфизмом.
Пользователи жаловались, что объекты, которые выглядят как статичные на самом деле оказывались кликабельными. Поэтому Material design пытается вернуть обратно элементы скевоморфизма, но в сильно упрощенном виде. Иначе говоря, Material design можно назвать улучшенной версией плоского дизайна с элементами скевоморфизма – анимациями, тенями и слоями.
Идея стиля заключается в метафоре: интерфейс – это слой бумаги. Цель: эти слои расположены на разной высоте и отбрасывают тень не друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
Характерные особенности:
- Глубина
Используются тени для объектов. Тени работают так, что элементы «лежат» вплотную друг на друге, а не висят воздухе.
- Яркие цвета
В полиграфии от правильного использования цвета зависит восприятие материала читателями. Также и в цифровом пространстве. При использовании Material design стандартная цветовая палитра состоит из основного, акцентного и дополнительного цветов.
- Яркая и насыщенная графика
Используются насыщенные цветами картинки, которые размещаются без рамок, иллюстрации (как в полиграфии).
- Иконки
Используются иконки в стиле Material design — плоские иконки с тенью.
- Осмысленная анимация
В реальном мире предметы не возникают из ниоткуда – такое бывает только в кино. Необходимо в ответ на все действия пользователя плавно изменять существующий интерфейс, чтобы все переходы были логичными и очевидными – что используется для достижения эффекта реализма.
- Крупные шрифты без засечек
Ещё один принцип из мира полиграфии, который хорошо уживается в Material design, и это контрастная типографика – действительно заметный контраст между размерами шрифта заголовка и наборного текста.
5️⃣ Минимализм
Стиль, который всегда будет актуален. Минималистичный дизайн сайта снижает шум и позволяет сконцентрироваться на главных элементах. Пользователи быстро находит нужную информацию, легко составляют представление о продукте. Основная идея минимализма — в простоте и отсутствии лишнего.
Характерные особенности:
- Негативное пространство
Очень много свободного пространства между объектами. Минимализм текста, изображения, понятный интерфейс – то, что необходимо пользователю для навигации, понимания сайта.
- Отсутствие объема
Не используются тени, градиенты, наложение объектов, трёхмерные эффекты. Все здесь должно быть плоским, чтобы избавиться от лишних деталей.
- Натуральные цвета
Используются чистые, натуральные цвета (бежевые, белые, чёрные, хаки и т.д.), отсутствуют яркие, неоновые цвета. Часто это монохромная палитра (один цвет).
- Чистая типографика
Контент на первом месте в минимализме.
- Качественные изображения
Они являются важными элементами минимализма. С помощью изображения создается контакт с пользователем и атмосфера.
- Минимализм образующих элементов
Здесь не должно пестрить какими-то разными элементами, а если они есть, то их минимум.
6️⃣ Ретро
Этот стиль веб-дизайна пришел к нам с запада. В переводе с латинского «retro» означает «назад», «возвращение к прошлому». Данный стиль передает винтаж, что-то старинное и подходит к определённым тематикам, где это и требуется передать. Данный стиль сочетает в себе скевоморфизм, так как для придания чего-то винтажного и старинного используются объекты из реального мира. Такой стиль отлично выделяется и запоминается среди других, привычных сайтов.
Характерные особенности:
- Приглушенные цвета
В те времена не было оборудования, которое смогло бы качественно передавать цвет полиграфии. И поэтому такой прием с приглушенными цветами часто используется в этом стиле. Для фона применяют бежевый и светло-серый цвета.
- Применение текстур
Стиль в ретро дизайне отличается наличием винтажных текстур: старая бумага, грубая ткань, дерево и другие текстуры, которые подчёркивают сам стиль.
- Тематичность
Такой стиль можно применить не в каждой теме, потому что здесь играет роль атмосферы, ощущения, которые необходимо передать.
- Объекты из реального мира
Для него характерны винтажные элементы, вырезки из открыток и фотографий, использование клипартов, текстуры фонов, газетные шрифты, цветные линии, ленты и прочие элементы.
- Геометрические формы
Разные геометрические формы, плоские конструкции, использование разделителей – границы, рамки, линии. Используются прямоугольники, круги, треугольники и другие фигуры, для акцентирования внимания.
- Тематические иллюстрации
Обычно на иллюстрации изображают людей или предметы тех времён. Это может быть старая техника, например старинный фотоаппарат или ретро-автомобиль.
- Уникальная типографика
Здесь используются рукописные шрифты и шрифты в стиле леттеринг. Также применяют шрифты с засечками, часто все буквы заглавные. Также часто применяется типографика с эффектами тиснения, объема, тени, контура.
7️⃣ Гранж
Данный стиль в классическом понимании похож на ретро и также показывает себя с помощью визуальных элементов. Гранж в дизайне сайтов – это брутальный и креативный стиль, который отличается урбанистическими и текстурными фонами, «грязными» оттенками в классическом понимании стиля, сейчас же это могут быть и яркие неоновые цвета.
Данный стиль уходит от красоты, каких-то деталей, от всего того, что делает объект привлекательным. Это стиль, который намеренно пытается выглядеть грубым, случайным или лишенном украшений, декора. Легко узнать этот стиль под нарочито небрежным и неряшливым текстурам фона, по хаотичному расположению элементов, «грязным» цветам.
Характерные особенности:
- Разная цветовая гамма
В классическом гранже цвета отличаются приглушенностью и своеобразной матовостью. Сейчас же гранж может быть очень разным: часто можно увидеть монохром или акценты на ярких и неоновых цветах, а также цвета хаки, приглушенный бордо, оранжевый.
- Применение текстуры
На гранжевом фоне сайта часто применяются текстуры: старая бумага, потёртые джинсы, грязные стены, истрепленные от старости куски бумаги или шероховатости, потертости или блеклые текстуры.
- Особые шрифты
С изломами, неправильными линиями, допустимо смешение шрифтов и шрифта, будто написаного от руки. Они могут быть дополнены элементами потертости, шероховатости, текстурности.
Гранж сайта – это стиль сайта, ориентированный на молодёжь, как целевую аудиторию. Стиль гранж должен оставлять у посетителя ощущение легкой небрежности, свободы, приятного беспорядка. Поэтому уместно применять веб-дизайн в стиле гранж для сайтов, в которых ЦА – молодёжь, подростки или те, кто немного «бунтари» в душе.
8️⃣ Иллюстрированный стиль
Данный стиль называют рисованной, иллюстрированный или эскизный. На таком сайте нет фотографий, здесь используются иллюстрации. Основой этого стиля является уникальная графика, которая рисуется вручную, на бумаге, а уже после переносится в цифровой формат.
Характерные особенности:
- Графика
Она и является отличительной особенностью. Она может быть выполнена в виде рисунка от руки, переведённое потом в цифровой вид, векторных или 3D иллюстраций, что делает данный стиль очень похожим на flat-дизайн.
- Разные цвета
Большой разброс цветовой гаммы: могут быть как яркие оттенки, так и постельные цвета, в зависимости от тематики.
9️⃣ Поп-Арт
Стиль поп-арт появился в пятидесятых годах прошлого века. Он яркий, молодёжный. Главной чертой стиля поп-арт стали образы продуктов питания и потребления, также невероятно яркие цвета, специфические шрифты, паттерны и художественные приемы.
Характерные особенности:
- Яркие, кислотные цвета
Это одна из самых характерных особенностей поп-арта. Поп-арт не ограничивает в цветовом выборе, но всё-таки чаще используемыми являются красный, жёлтый и ярко синий.
- Коллажирование и принты.
Композиционные решения в поп-арте всегда динамичные и неординарные. А главными героями обычно становятся известные фигуры (политики, актрисы и певицы, например Мерлин Монро). Принтами выступают узоры из точек, аппликации, содержащие еду, фрукты, бабочек, кока-колу и другие символы того времени.
- Нестандартная графика
Поп-арт поддерживает экспрессивные сочетания нескольких различных образов в одном полотне. Это могут быть образы, основанные на комиксах, ярких наклейках, портретов людей и персонажей из мультиков.
- Надписи как на плакатах или из комиксов
В дизайне стиля поп-арт можно встретить надписи, которые задизайнены будто для рекламного плаката - короткие фразы, слоганы, девизы, диалоги, звукоподражание и стикеры с аббревиатурами. Часто они ещё и похожи на диалоги или мысли из комиксов.
🔟 Швейцарский стиль
Данный стиль ещё называет типографическим. В основе швейцарского стиля – форма следует за функцией. Для него характерно отсутствие декоративных элементов, стремление к объективности и чёткой коммуникации. Главными особенностями считается простота, структурированность и упорядочность.
Характерные особенности:
- Свободное пространство
Очень много свободного пространства между объектами, что позволяет акцентировать внимание на главном. Меньшее количество элементов.
- Модульные сетки
Это основной инструмент, который организует информацию внутри макетов. Такие макеты, благодаря их простоте и чёткой структуре позволяют читателю быстрее воспринимать информацию.
- Акцент на шрифтах без засечек
При выборе шрифтов дизайнеры начали использовать гротески (Futura, Helvetica). Отказались от шрифтов с засечками. Поэтому в одном макете допускается минимум шрифтов – один или два.
- Асимметрия в расстановке блоков
Здесь нет симметрии, все абсолютно симметрично, чтобы выделить наиболее важные объекты, сделать акценты, подчеркнуть идею простоты и функциональности.
Веб-дизайн — это всегда взгляд в будущее. Благодаря взаимосвязи с технологиями, цифровая сфера каждый год может демонстрировать что-то новое в анимации, пользовательских интерфейсах и глубине погружения. Однако придумать что-то кардинально новое достаточно сложная задача, поэтому все новые тренды в веб-дизайне это зачастую лишь коллаборации из существующих стилей.
В следующей своей статье я расскажу о трендах в веб-дизайне 2022 года, поделюсь своим мнением о том, что сейчас наиболее популярно, а что использовать уже не актуально.
