Стиль графического дизайна гранж

Стиль гранж в веб-дизайне: особенности и принципы стиля

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

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

Элементы

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

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

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

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

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

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

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

Эффекты

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

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

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

Атмосфера

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Креативные стили гранж и ретро в современном веб-дизайне

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

Особенности стиля гранж

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

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

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

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

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

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

Перерождение ретро стиля

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

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

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

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

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

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

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

Источник