Гайд по направлениям и стилям в веб-дизайне

Зачастую заказчики теряются в многообразии решений по дизайну сайтов или вовсе не в курсе, какие стили бывают, банально не могут подобрать примеры или объяснить, какой по итогу им нужен сайт. Задача UI-дизайнера — рассказать, показать на примерах или самостоятельно решить, с каким стилем работать по конкретному проекту. Для новичков это непросто, к тому же начинающие дизайнеры не сильно разбираются в куче стилистик, не говоря уже о каком-нибудь заказчике — владельце автосервиса.

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

Нет четкой единой классификации стилей. В разных источниках можно встретить варианты или подборки ТОП-10. Это связано с тем, что ниша достаточно молодая, активно растет. В UI‑дизайне появляется 20−30 трендов в год, из которых 15−20 так же быстро улетучиваются, отчего любая стилистика понемногу видоизменяется, пока сама не преобразуется в отдельное движение.

Рассмотрим основные стили в оформлении сайтов с точки зрения нашей студии:

• Классический;
• Минимализм;
• Рисованный;
• Метро (карточный);
• Полигональный;
• Флэт (плоский);
• Брутализм;
• Фестивальный (промо);
• Гранж;
• Ретро;
• Organic & Natural.

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

Простые нейтральные цветовые решения, аккуратная типографика. Шрифты простые, распространенные, размеры заголовков близки к стандарту, нет кричащих вычурных решений с необычным размером или размещением текста.

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

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

Стильный, аккуратный, эффектный. Основная отличительная черта минимализма — большое количество свободного пространства, отсутствие лишних деталей. Акцент на контент и фотографии. Сетка чаще всего используется модульная. За счет воздушности и грамотно расставленных акцентов можно управлять взглядом пользователя, вести его в нужном направлении.

Нередко минимализм называют швейцарским стилем в веб-дизайне, а типографику — швейцарской типографикой или швейцарской вёрсткой текста. Основные идеи были заложены в Швейцарии на основе философии школы Баухаус — «Форма следует за функцией». Ясные читабельные шрифты, простые, понятные иллюстрации помогают быстро доносить информацию и создавать сайты в премиальном бизнес стиле.

Хочется крикнуть «мы делаем ставку именно на этот стиль» =). И да, дизайнеры: вас, вероятно, задолбали уже статьями на тему минимализма, но сорри, без него никак. Тем более это главный стиль для нашего агентства)

Современный минимализм это не пустота и простота. Мы не о скуке тут вещаем! Часто, услышав минимализм, заказчики представляют белую комнату, с белым полом, белыми стенами, белым столом, стулом, и дешманским белым шкафом за 2000 рублей. Такая аля neo‑келья. Но это дикое заблуждение, минимализм не про дешман и отсутствие всего и вся.

Оригинальный, эксклюзивный. Сайты в данном стиле выглядят, как будто только нарисованы. Они интересные, необычные, запоминающиеся.

Часто у новичков при просмотре рисованного или близкого к нему эскизного стиля в веб дизайне возникает одна и та же реакция — вау, хочу, как сделать. Вся фишка кроется в использовании иллюстраций, нарисованных художником или иллюстратором. То есть для создания рисованного сайта, нужен не только UI‑дизайнер, но и художник. Соответственно стоимость таких проектов значительно выше, а сроки — дольше.

Рисованные сайты могут быть как простыми, строгими, аккуратными, так и супер‑яркими, запутанными, вовлекающими: как лабиринт, приглашающий задержаться, чтобы рассмотреть каждую деталь.

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

Шрифты в данном стиле часто также рукописные, либо простые, аккуратные, классические, преимущественно гротески (без засечек).

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

Упорядоченный, простой, удобный. В основу стиля метро (карточного стиля) заложен принцип построения структуры сайта с использованием секций (карточек), в которых расположен весь основной контент.

Данный стиль применяется для удобства пользователя при восприятии большого количества контента. Условно, как аккуратно оформленная газета, при просмотре которой каждый читатель находит нужную ему карточку, среди кучи других карточек. Самый простой способ представить метро-стиль, вспомнить меню Windows 8 с квадратными плитками папок, приложений и новостей в одном флаконе.

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

Цветовые решения могут быть разнообразны, вплоть до кучи разных цветов в оформлении одной страницы. Главное здесь не переборщить и подобрать хорошо сочетаемые комбинации цветовых схем. В основном используется тетрада (4 цвета).

Шрифты простые, универсальные, без засечек. Главный принцип — доступность и удобство чтения. Сетка на таких сайтах преимущественно модульная.

Стиль метро используют для интернет-магазинов, корпоративных сайтов, сайтов-визиток, портфолио, блогов в разных видах деятельности. Хорошие примеры — сайты Microsoft и Xbox:

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

Полигональный стиль основывается на упрощении и виртуализации реалистичных объектов с помощью полигонов — сложных фигур, треугольников, другой геометрии (​​3D-геометрия, стереометрия, ломаные линии). При этом иллюстрации и художественные приёмы также представлены с помощью полигонов. С одной стороны может показаться странным, но даже при отсутствии детализации картинки легко улавливается авторская задумка.

Строго говоря, в сайтах, чтоб прям весь макет был в полигональном стиле, — это крайняя редкость. Так как, даже с точки зрения CSS кода, разработка таких решений — супер трудоемкий процесс. В основном полигональность используется в отрисовке логотипов, элементов фирменного стиля, паттернов для фона, элементов дизайна и т. п. Такие сайты и приложения зачастую яркие, футуристические, отражают динамичность бренда. За счёт контрастности между полигональной фигурой и фоном, а также слоистым расположении элементов дизайна достигается эффект глубины и объёма на сайте.

Понятный, простой, аккуратный. Стиль Флэт, или плоский дизайн, можно охарактеризовать как упрощенный дизайн с доступными пользовательскими решениями. Основной принцип — ничего лишнего, схожий со стилем минимализм.

Для данного стиля характерны простые двумерные иллюстрации, отсутствие объема, текстур, градиента, 3D-эффектов, сложных теней, других эффектов. Вряд ли вы найдёте детализированный сайт в стиле флэт, потому что это уже будет что-то не то =). Часто используется только один акцентный цвет, неяркий, приглушенный и несколько дополняющих фоновых.

Типографика в данном направлении простая, понятная, аккуратная. Это простые гротески (шрифты без засечек) и классические общепринятые размеры в оформлении заголовков и основного текста.

Сетка также простая — модульная либо 2−3 колонки.

Существует также ответвление из флэта — стиль веб дизайна flat modern. Его отличие от обычного плоского в том, что данный стиль допускает больше «нарушений» правил. Например, на сайтах с Flat Modern может использоваться крупная нестандартная типографика, более сложная сетка, сложно анимированные иллюстрации, но главный принцип плоскости сохраняется. Это некий переход или микс минимализма, флэта с «нотками» брутализма.

Плоский дизайн подходит для любых ниш бизнеса. Это корпоративные сайты, сайты крупных компаний, портфолио, визитки, интернет-магазины. Большую популярность стиль набрал в UI‑дизайне десктопных интерфейсов и мобильных приложений.

Характерные особенности стиля brutal в вебе — яркий, креативный, спорный. Нестандартный вид сайтов в стиле брутализм вызывает неоднозначные эмоции у пользователей. Он либо нравится, либо вызывает отвращение и неприятие. Тем не менее стиль довольно популярен, особенно у молодого поколения. Он однозначно привлекает внимание. Компании, решившиеся на данный шаг, смелые и открыто заявляют о себе, не боясь критики и осуждения.

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

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

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

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

У брутализма есть как плюсы, так и минусы.
К плюсам можно отнести простой подход при создании дизайна — не нужно много времени тратить на составление ТЗ, проработку структуры, сетки и логики.

Из минусов — впечатление пользователя. Не всем заходит смелый и неоднозначный дизайн в данном стиле. Существует риск испортить впечатление и потерять пользователя.

Поэтому из-за специфического оформления у стиля брутализм в веб дизайне мало сфер для применения, скорее это дизайн ради дизайна. Может использоваться на торговых площадках, форумах, креативных энциклопедиях, узконаправленных портфолио или нестандартных, креативных фестивалях.

Яркий, сочный, запоминающийся. Фестивальный стиль или стиль промо в веб дизайне характерен для рекламы события, товара, бренда, фестивалей, маркетинговых creative- и event-агентств.

Важный критерий — зрелищность. Необходимо выделиться, запомниться, впечатлить, создать вау-эффект. Преимущественно, фестивальные сайты создаются в виде лендингов / одностраничных сайтов, так как это: сложно, долго, очень дорого, как на этапе дизайна, так и на этапе разработки; для подобных проектов нужны senjor-дизайнеры и фронтендеры. Поэтому в 90% случаев это чисто презентационные рекламные страницы. Говоря прямо, промо-стиль в веб-дизайне нужен, чтобы показать понты =)

В стиле промо весь акцент на товаре, бренде. Текста минимум, максимум анимаций, визуализаций. Важна форма подачи, описание отодвигается на второй план. Часто в оформлении используется графика, сложные 3D-эффекты, моушн, видео. Нет четких правил оформления в данном стиле, чем эффектней и креативней, тем лучше. Нередко это как раз и есть микс «брутализма с адекватизмом» из предыдущего пункта.

В цветовых решениях на первом месте — красочность. Сочные контрастные цвета, триада или тетрада, возможны кислотные цвета, всеразличные свечения, зачастую темный фон для усиления насыщенности — всё это о промо-стилистике.

Текст играет второстепенную роль, в основном используются заголовки, слоганы, призывы, точечные тезисы. Тут также есть где развернуться, и допустимы самые нестандартные решения в оформлении. Заголовки могут быть огромными, а могут — классических размеров, это аккуратные гротески или вычурные декоративные (акцидентные) шрифты. К слову антиква (с засечками) крайне редко встречается в промо сайтах, скорее если используется декоративный шрифт, это будет что-то рукописное, как лого Coca-Cola.

Сетка также служит зрелищности и может быть как максимально простой, так и сложной иерархической, с наложениями, неоднородностью размеров объектов и прочим.

Фестивальный стиль сайтов используется в самых разнообразных нишах. Его главная цель — реклама. Это могут быть видеостудии, агентства разработчиков, фестивали, галереи, бренды, товары, личности, маркетинговые, креативные, event-агентства и другие.

Экстравагантный, брутальный, креативный.

Сайты в стиле гранж можно охарактеризовать как бунтарские. Стиль смелый и небрежный. В переводе с английского гранж — отталкивающий, неприятный.

Отличительные особенности данного направления — темные, грязные цвета и текстуры, неряшливое расположение элементов, сложная сетка или вовсе нарушенные правила построения композиции.

Цвета, используемые в стиле Гранж — коричневый, серый, черный, болотно-зеленый, темно‑оранжевый. Часто можно встретить в оформлении различные текстуры, паттерны (например, клетка тетради), трещины, потертости. Кроме этого, в оформлении часто используются различные мелкие детали — значки, эмблемы.

Шрифтовые решения такие же смелые, дерзкие, как и сам стиль — крупные размеры текстов, рукописные или нестандартные шрифты, 3D-эффекты.

Стиль гранж настолько специфичен, что использовать его нужно с умом и там, где это уместно. Бизнес, а главное его аудитория должны быть смелыми, эпатажными, готовыми к данному стилю. Это может быть рок-группа, брутальный бар, барбер-шоп, интернет-магазин соответствующей направленности, сайт фестиваля, молодая смелая компания-бунтарь.

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

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

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

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

Типографике присущи шрифты с засечками, брусковые шрифты, как отсылка ко временам печатной машинки, рукописные шрифты, леттеринг.

Одним из схожих c ретро является стиль нуар (noir) — в веб дизайне часто можно встретить портфолио актеров или фотографов с отсылкой к криминальному кинематографу 1940-х — 1950-х годов. Это направление характерно обилием темных тонов, крупных планов, чёрно-бело-красной палитрой.

В ретро стиле обычно оформляют сайты компаний соответствующей тематики — винтажные магазины и выставки, ретро автомобили, а также портфолио фотографов, дизайнеров, артистов.

Свежий, легкий, эстетичный. Данный стиль все больше набирает популярность. Все вокруг говорят об экологии, стремятся сократить потребление пластика, других вредных продуктов, и перейти на натуральный состав. Это прослеживается везде: в одежде, еде, электроэнергии, быту. Сайты не исключение.

Экостиль имеет ряд особенностей, отличительные черты данного направления — использование в веб дизайне натуральных материалов и текстур. Это дерево, растительные мотивы, природные цвета и оттенки. Всё внимание на оформление. Структура и логика отходят на второй план.

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

Типографика аккуратная и незаметная. Классические гротески, скромные, женственные декоративные шрифты.

В оформлении используются декоративные элементы: листики, линии, цветы, животные, птицы.

Сетка простая и логически понятная. Обычно колоночная или блочная.

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

Стиль дизайна сайтов, пришедший из интерьерки. Сайты в стиле хайтек как правило подходят производственным, IT компаниям, разработчикам, очевидно интерьерщикам или ремонтникам. Хайтек стиль в веб дизайне может использовать принципы брутализма, минимализма, флэта или флэт-модерна, но отличительными особенностями стилистики являются:

• Шрифты: в стиле хай-тек как правило с одинаковой толщиной линий, зачастую имеют некоторую «рубленность», передают ощущение электронности.

• Цвета: холодная черно-бело-серая палитра, редко содержит дополнительные тона. Стиль дизайна hi-tech — это про материалы — металлы, сталь, напыления, соответственно на сайте цвет, а также текстуры подбираются по похожему принципу.

• Текстуры: в хайтеке нередко встречаются текстуры на фонах, например, чертежи, черный мрамор или плитка встроенные в темный фон.

Дизайн сайта в стиле hi-tech преимущественно передаёт ощущение технологически развитой компании, инновационных технологий.

Веб сайты в стиле конструктивизм — одно из реально сложных направлений для новичков. Принцип конструктивизма пришёл из полиграфии, ещё до того, как начал использоваться в архитектуре. Сайты в конструктивизме чем-то напоминают коллажирование или аппликацию, когда в одной композиции встречается много простых геометрических объектов, отсутствуют рисованные иллюстрации, используется акцентный необычный шрифт. Также характерной чертой конструктивизма является цветовая палитра — черный, белый, красный, серый. Если помните плакаты из СССР с призывом «Товарищ!», то вот оно чем-то похоже. Основная фишка — это геометрия, её предельность.

Стиль модерн в веб дизайне во многом напоминает минимализм — ничего лишнего, «лучший дизайн — отсутствие дизайна». Но модернизму свойственны 2 отличительные черты, которые не прослеживаются в минимализме:

• чёткая геометрия,
• идеальная симметрия.

Минимализм предполагает разнообразие форм, фактур, размеров, а асимметричная сетка помогает сделать проекты в этом стиле интереснее. В то время как модерн имеет жёсткие нерушимые каноны:

Веб сайтам в стиле постмодернизм свойственны:

• фрагментация — картинки, разделённые на части, оборванные предложения, не предназначенные для чтения, а использующиеся в качестве фоновых декоративных элементов,
• слоистость — многослойные визуальные решения, так называемый коллажный подход, явное ощущение объёма,
• неадекватная проекту типографика — шрифт Comic Sans на сайте серьёзной транснациональной корпорации и т. п.

Все эти черты помогают сделать дизайн сайта креативным, и при должном навыке дизайнера — аккуратным:

Стиль авангард в веб дизайне — чаще всего это дизайн ради дизайна. Этот стиль был создан в противовес привычным дизайн решениям, характерным для сайтов бизнес тематики. Авангард исходит из утверждения, что проблема веб-дизайна заключается не в ограниченности технологий, а в ограниченности нашего воображения. Мы стали слишком послушны визуальному соответствию, экономической жизнеспособности (упарыванию в конверсию) и предполагаемым ожиданиям пользователей. Все сайты стали на одно лицо.

Особенность стиля авангард — выразительные, творческие визуальные эффекты:

Сайты, да и вообще любые интерфейсы в стиле скевоморфизм — устаревшие проекты, которые используют реализм в максимальном его выражении. То есть за основу дизайна берутся реальные изображения кнопок, каких-нибудь дискет, используются тени, свет, текстуры для передачи объёма. Всё это обусловлено первым переходом в digital, чтобы самому недалекому человеку было понятно, куда тыкать. То есть скевоморфизм — это стиль сайтов нулевых годов, попытка объяснить что-то в дизайне через уже знакомые образы. Сейчас объемные реалистичные изображения функциональных элементов уже не используются, приемниками скевоморфизма стали классика и флэт-дизайн, поэтому встретить сайт в реализме — как найти грааль =) Если вы пользовались старыми Iphone или Ipad, то вполне можете помнить приложение MyBook, которое долгое время выглядело как книжный шкаф, это и есть скевоморфизм: