Стиль гранж в веб-дизайне: особенности и принципы стиля
В нашем блоге мы продолжаем рассказывать о различных стилях в веб-дизайне, и в этой статье поговорим о стиле гранж. Это направление не так популярно в дизайне сайтов, но часто встречается в отдельных элементах на страницах. Несмотря на то, что сейчас в тренде - чистота, минимализм и плоские элементы, стиль гранж также используется на ресурсах с определенной атмосферой, поэтому проигнорировать данное направление не получится. Разберемся, что из себя представляет данный стиль, рассмотрим основные особенности и воплощения стиля гранж в современном веб-дизайне.
Что такое стиль гранж
С английского «гранж» переводится как «неопрятный», «отталкивающий». Это направление относится не только к вебу, но и ко всему дизайну в целом. Стиль возник в 80-е годы как протест гламуру, неестественной красоте. Сначала данное направление появилось в музыке, одновременно с панком, а затем перешло в остальные сферы.
Стиль гранж в веб-дизайне также появился как альтернатива стилю web 2.0 - простому, яркому и легкому направлению. Пример сайта в стиле гранж:
Гранж в дизайне сайтов - это не то направление, где все выглядит неопрятно, «уродливо» и элементы наслаиваются друг на друга. В веб-дизайне данный стиль проявляется в различных текстурах, иллюстрациях и общей атмосфере «бунтарства». Гранж чем-то похож на стиль ретро, о котором мы говорили в этой статье. Однако, есть некоторые особенности, которые присущи только направлению гранж. Разберемся, чем стиль отличается от остальных направлений и приведем примеры макетов.
Особенности стиля гранж в веб-дизайне
Гранж - это своеобразный протест четкости форм, простоте и легкости, яркости. Поэтому на первый взгляд такие сайты представляют собой «тяжелые» веб-страницы с легкой небрежностью и потертостью временем. Рассмотрим основные особенности данного стиля.
Палитра цветов
В отличие от ярких иллюстраций ретро, стиль гранж характеризуется темной и серой палитрой цветов. Это могут быть коричневые цвета, различные наложенные темные эффекты на фото.
Палитра цветов накладывает свой отпечаток на саму атмосферу сайта. Обычно это какие-то «мужские» проекты, где нет места бантикам и легким формам. Цветовые оттенки часто приглушенные и матовые, не используются пастельные тона. Болотно-зеленый, серый, коричневый, черный, бордовый, песочный и оранжевый - основная цветовая палитра стиля гранж.
Безусловно, бывают и исключения. Однако, сам стиль подразумевает неряшливость, потертость, поэтому такие цвета как нельзя лучше отражают саму атмосферу стиля.
Текстуры и паттерны
Вместе с темными и серыми цветами применяются различные текстуры и паттерны. Дерево, старая бумага, шумы и потертости - основные эффекты, которые используются в качестве фона для сайта. Часто применяется имитация природных материалов. Например:
Здесь в качестве фона используется текстура, напоминающая мраморную плиту. Черные разводы на серо-белом цвете создают ту атмосферу, которая присуща стилю гранж - макет немного грязноват, но в то же время есть ощущение серьезного бренда.
Также сами изображения могут обрабатываться в этом стиле - дизайнеры добавляют фотографиям потертости, царапины, шумы.
Типографика
Стилю гранж присуща также необычная типографика. Дизайнеры отходят от стандартных шрифтов и придумывают собственные, отличающиеся от обычных приемов. Также на надписи могут накладывать различные эффекты:
Типографика - одна из особенностей стиля, которая помогает дизайнерам выразить себя. Дизайнеры создают собственные шрифты, в том числе 3D типографику и «рукописные» шрифты, которые имитируют человеческий почерк. Также в типографике гранж используют различные эффекты: размытия, потертости, или наоборот заостренные буквы. Типографика гранж - обычно крупные надписи, хаотично размещенные на макете. Однако, даже в таком творческом направлении дизайнеры не забывают о юзабилити и для большой контентной части используют стандартные шрифты для лучшей читабельности текста.
Элементы
Еще одна особенность стиля гранж - использование различных декоративных деталей. Это могут быть различные значки и эмблемы, скрепки, листы бумаги и прочие украшения макета, которые передают дух бунтарства. Также могут использоваться кляксы, брызги. Иногда стиль гранж называют «хипстерским» именно из-за этой особенности.
На примере показан типичный макет в стиле гранж: темные тона и изображения, использование текстур, необычная типографика с эффектами. Также есть на макете декоративные детали: сама контентная часть располагается на объемном блоке, который имитирует лист старой бумаги, есть элементы в виде небольших стикеров, закрепляющиеся скрепками.
Также могут использоваться различные иллюстрации в данном стиле. Например:
Текстурность, тематические иллюстрации, сама концепция сайта подходит стилю гранж и в то же время сочетается с современными веб-формами и плоскими решениями.
Такой подход не так популярен в современном веб-дизайне. Это происходит потому, что сейчас дизайнеры стараются следовать принципам юзабилити и не использовать лишние элементы для украшения, так как такие детали:
- Мешают восприятию контента. Пользователь отвлекается на рассматривание дизайна блоков и просто может не прочитать нужную информацию.
- Нарушают композицию и структуру, что также сказывается на восприятии контента.
- Макет страницы выглядит «тяжелым» и несовременным.
Однако, в некоторых случаях дизайнеры все же возвращаются к прежним трендам и создают макеты с украшениями, декоративными деталями и дополнительными элементами. Как правило, это происходит при создании дизайна ресурсов, которые также пропагандируют творческий подход.
Эффекты
Эффекты могут использоваться не только при обработке изображений, но и в расположении самих блоков на сайте. Потертости, царапины, небрежность - основные детали стиля, которые также применяются в структуре и композиции макета.
На этом примере мы видим текстурный фон, дополнительные детали в виде различных рисованных значков. Также при переходе с главного экрана используется эффект потертости, который и создает особую атмосферу - горные походы, путешествия и приключения, отрешенность от остального мира. Наложенный эффект дымки на фото также добавляет оригинальности и таинственности.
Такие эффекты в основном нужны для определенной цели - создание атмосферы на сайте. Это также является особенностью данного стиля.
Атмосфера
Стиль гранж появился как альтернатива гламурной красоте и идеализированных представлений об одежде, музыке и жизни в целом. Гранж - бунтарский стиль, который говорит о том, что все может быть индивидуальным, не соответствующим стандартам красоты. Именно гранж так понравился рокерам, которые также бунтовали против стандартов. Все это воплотилось сначала в одежде и музыке, а потом постепенно перешло в другие сферы.
В веб-дизайне гранж также играет определенную роль. Тренд появился в то время, когда популярным стилем было также стандартизированное направление web 2.0, которое отличается простотой и легкостью. Гранж внес индивидуальности в веб-дизайн, показал, что разработчики могут использовать креативные решения, которые также будут нравиться пользователям.
Гранж - это направление, где можно подойти к созданию макета творчески, не ограничивая себя стандартной структурой или композицией. Именно поэтому стиль подходит бунтарям, творческим людям, музыкантам и художникам, путешественникам.
Юзабилити для сайта в стиле гранж
Несмотря на то, что стиль гранж в основном считается творческим направлением, дизайнерам не стоит забывать о юзабилити на сайте. Даже если креативные решения нравятся пользователям, клиентам также должно быть удобно пользоваться ресурсам и легко воспринимать информацию. Что нужно учитывать при создании дизайна сайта в стиле гранж.
1. Качество изображений и количество эффектов
Так как гранж воспринимается как альтернатива стандартам, иногда дизайнеры используют некачественные изображения. Однако, это не совсем правильная практика. Из-за того, что фото и иллюстрации на сайтах низкого разрешения или на них наложено слишком много эффектов, макет «удешевляется» в глазах пользователей. Сайт не вызывает доверия и клиенты могут уйти к конкурентам с более простым, но качественным контентом.
2. Типографика
Несмотря на то, что в стиле гранж могут использоваться креативные решения в типографике, нужно не забывать о содержании контента. Если пользователь не сможет прочитать текст из-за «потертого» шрифта, дизайн сам по себе теряет ценность, так как главная цель дизайнера - правильно презентовать компанию и повысить уровень конверсии ресурса.
3. Количество декоративных элементов и эффектов
Безусловно, декоративные элементы, оригинальные блоки и различные эффекты украшают сайт. Однако, много декоративных деталей может ухудшить восприятие пользователя. Поэтому нужно использовать элементы и эффекты в меру, не мешать пользователю воспринимать контент и не отвлекать его от целевых действий.
4. Уместность
Стиль гранж подходит далеко не всем ресурсам. Так как главное в стиле - передача атмосферы, не все сайты подходят под данное направление. Дух авантюризма, индивидуальность, бунтарство - все это может быть неуместным на информационных сайтах, на ресурсах серьезных компаний. Также такой стиль напоминает ретро, а значит, не уместен в дизайне веб-страниц, связанных с современными технологиями. В основном направление используется в дизайне музыкальных сайтов и других творческих порталов, тревел-агентств, а также дизайне компаний, у которых основная целевая аудитория - мужчины. Например, барбершопов, магазинов военной одежды и прочее.
Гранж и отдельные элементы в дизайне
В современном веб-дизайне гранж претерпевает некоторые изменения. Теперь данный стиль практически не используется в своем первозданном виде, как это было раньше, как, например, вот здесь:
Сейчас современные дизайнеры стараются совмещать различные стили и брать из них только самое лучшее. Например, используют эффекты и атмосферу стиля гранж и современные формы, качественные яркие изображения и типографику:
Такой подход нравится пользователям: темные тона и субкультурные мотивы уходят и заменяются привычными красивыми пейзажами, но все же остаются потертости и царапины, которые придают макету дух авантюризма и ностальгии.
Кроме того, в современном дизайне все больше используются текстуры и паттерны. Больше об этом явлении мы писали здесь.
Также элементы гранж могут использоваться на сайтах в виде эффектов и основной концепции. Например:
Это сайт музыканта, выполненный в стиле гранж. Здесь присутствуют темные тона, текстурные изображения на фоне. Однако, мы видим, что есть и элементы из современных стилей - сама организация контента, кнопки и переключатели, типографика.
Также можно увидеть атмосферу гранжа в таких, казалось бы, минималистичных сайтах:
Однако, здесь мы видим ту же текстурность, палитру цветов, тематические изображения, необычную типографику и декоративные детали. На этом примере гранж отлично слился с минимализмом и представляет собой единую концепцию, сочетающую в себе креативность и юзабилити.
Стиль гранж подходит не для всех ресурсов. При выборе стиля дизайнер должен понять, что он хочет сказать пользователям, какую атмосферу на сайте он хочет создать. Приключения, авантюризм, оригинальность, индивидуальность и творчество - вот основной посыл, который несет стиль гранж.
Студия дизайна IDBI занимается созданием дизайна сайтов в различных стилях и направлениях. Это может быть как минималистичный дизайн для интернет-магазина, построенный на всех принципах юзабилити, так и стиль гранж для барбершопа или веб-страницы для поездок в горы. При выборе направления мы учитываем специфику ресурса, технические возможности сайта, а также его назначение. Наша главная цель - помочь клиентам поднять уровень конверсии сайта, а пользователям ресурса - найти нужный товар и быстро заказать услугу. С нашими работами можно ознакомиться в разделе «Портфолио».
