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