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

Что такое стиль гранж

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

Стиль гранж в веб-дизайне также появился как альтернатива стилю web 2.0 - простому, яркому и легкому направлению. Пример сайта в стиле гранж:

Гранж в дизайне сайтов - это не то направление, где все выглядит неопрятно, «уродливо» и элементы наслаиваются друг на друга. В веб-дизайне данный стиль проявляется в различных текстурах, иллюстрациях и общей атмосфере «бунтарства». Гранж чем-то похож на стиль ретро, о котором мы говорили в этой статье. Однако, есть некоторые особенности, которые присущи только направлению гранж. Разберемся, чем стиль отличается от остальных направлений и приведем примеры макетов.

Особенности стиля гранж в веб-дизайне

Гранж - это своеобразный протест четкости форм, простоте и легкости, яркости. Поэтому на первый взгляд такие сайты представляют собой «тяжелые» веб-страницы с легкой небрежностью и потертостью временем. Рассмотрим основные особенности данного стиля.

Палитра цветов

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

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

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

Текстуры и паттерны

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

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

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

Типографика

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

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

Элементы

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

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

Также могут использоваться различные иллюстрации в данном стиле. Например:

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

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

1. Мешают восприятию контента. Пользователь отвлекается на рассматривание дизайна блоков и просто может не прочитать нужную информацию.
2. Нарушают композицию и структуру, что также сказывается на восприятии контента.
3. Макет страницы выглядит «тяжелым» и несовременным.

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

Эффекты

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

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

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

Атмосфера

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

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

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

Юзабилити для сайта в стиле гранж

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

1. Качество изображений и количество эффектов

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

2. Типографика

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

3. Количество декоративных элементов и эффектов

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

4. Уместность

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

Гранж и отдельные элементы в дизайне

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

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

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

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

Также элементы гранж могут использоваться на сайтах в виде эффектов и основной концепции. Например:

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

Также можно увидеть атмосферу гранжа в таких, казалось бы, минималистичных сайтах:

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

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

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