Дизайн в стиле гранж
Nirvana, Pearl Jam, Stone Temple Pilots – эпоха гранжа в 90-е подарила нам не мало отличной музыки, а также примеры прекрасного «грязного» дизайна. Как постмодернизм был реакцией на функционализм модернизма, приглушенный гранж стал реакцией на красочность постмодернизма.
Это должно было стать более точным и реалистичным изображением реальной жизни с ее грязными пятнами, смазанными изображениями, обрывистыми и грязными текстурами. Один из ассов дизайна в стиле гранж – Дэвид Карсон, экспериментировал с выразительной типографикой, бэкграундами и текстурами.
Пока в Рунете только набирают силу всевозможные социальные сети с их «вебдавнольным» имиджем, на западе семимильными шагами возвращается ретро и, вместе с ним, ничем не приукрашенная реальность повседневности. Ведь на самом деле в реальной жизни (читай в природе) нет таких идеальных геометрических форм, ровных градиентов, точно выверенных теней и бликов как в стиле web 2.0. Поэтому многие дизайнеры стараются оформить свои сайты и блоги в виде непринужденной и даже немного нарочитой небрежности, зачастую придавая им вид неких «потертых временем» объектов. Как старая и много раз читанная книга.
В гранжевом дизайне вовсю используются такие элементы как рваные изображения, кусочки бумаги, скрепки, грязные пятна, кляксы, потертые иконки, нарисованные «от руки» картинки. Грязные текстуры, часто используются в качестве фоновых изображений для навигации меню, фотографий и в общей планировке.
Однако гранж-стиль вовсе не означает, что должно быть именно грязно. Можно набросать на макет кучу мусора, но она не станет ничем другим как кучкой мусора. Во всем должна быть гармония. К тому же нет особых причин захламлять страницу кляксами и изображениями ржавых канализационных люков, чтобы придать ей реалистичный вид в урбанистическом стиле.
Вместе с тем, дизайн в стиле гранж может содержать и яркие цвета, однако они должны быть более реалистичным. Темные оттенки зеленого и синего можно считать вполне обычными. Во всяком случае, они не должны акцентировать на себе внимание, а служить неким «уравнителем» для чисто гранжевых элементов. То есть, вводить элемент порядка.
Если сравнивать подобные сайты с оффлайновыми реалиями, то сразу же вспоминается такое очень распространенное в творческой среде определение, как «творческий беспорядок». Своеобразный «островок» автора, где он творит посреди кучи книг, бумаг, тюбиков с красками, кистей, пепельниц, мольбертов, пишущих машинок, рулонов бумаги, холстов, и еще тысячи и одной мелочи. Заходишь в комнату такого человека и сразу понимаешь — это натура творческая.
Особенности стиля гранж
Стиль гранж появился как альтернатива гламурной красоте и идеализированных представлений об одежде, музыке и жизни в целом. Гранж — бунтарский стиль, который говорит о том, что все может быть индивидуальным, не соответствующим стандартам красоты. Именно гранж так понравился рокерам, которые также бунтовали против стандартов. Все это воплотилось сначала в одежде и музыке, а потом постепенно перешло в другие сферы.
В веб-дизайне гранж также играет определенную роль. Тренд появился в то время, когда популярным стилем было также стандартизированное направление web 2.0, которое отличается простотой и легкостью. Гранж внес индивидуальности в веб-дизайн, показал, что разработчики могут использовать креативные решения, которые также будут нравиться пользователям.
Гранж — это направление, где можно подойти к созданию макета творчески, не ограничивая себя стандартной структурой или композицией. Именно поэтому стиль подходит бунтарям, творческим людям, музыкантам и художникам, путешественникам.
Современные тенденции веб-дизайна в гранж особо не меняют установившиеся привычки, однако появились и новые аспекты, благодаря которым всем знакомый эпатажный стиль приобретает совершенно иные формы и перевоплощается в востребованный, креативный вид отображения графических элементов. Визуальные детали немного трансформируются, приобретая тем самым форму потертости, что уже не так пугает или отталкивает пользователя. Гранж помогает сделать сайт более органичным, менее привычным и обыденным, при этом слегка хаотичным, что свойственно современному юзеру.
К основным элементам стиля относят различного типа рваные или визуально грязные изображения, истрепанные от старости куски бумаги или шероховатые, потертые или блеклые текстуры — все это используется в качестве основного фона, на котором отображается контент сайта. Однако стоит отметить, что даже в таком хаотичном и беспорядочном стиле не следует путать понятия «минимализм» и «пустота», «замусоренность» и «гранж», поскольку чрезмерное применение элементов гранж приведет к захламлению, безликости и неинформативности площадки. Следует рассмотреть типичные особенности составляющих, которые относятся к эпатажному и забавному стилю гранж:
Насыщенная цветовая палитра Все цветовые гаммы, применяемые в оформлении сайта по стилю гранж, отличаются приглушенностью и своеобразной матовостью. К распространенным оттенкам относят коричневый, серый, бежевый, черный, однако следует исключить контрастные и насыщенные цвета.
Впечатляющие и реалистичные детали Гранж выступает в качестве креативного и необычного стиля, о чем свидетельствует использование любых проявлений hand-made. К их числу относят обрывки бумаги, кляксы, стикеры, пятна, полароидные снимки или явно потертые иконки.
Узоры и яркие текстуры В данном случае речь идет о широком поле для экспериментов, поскольку веб-дизайнер может применять любые визуальные элементы, начиная от изображения строительной арматуры и заканчивая разорванными в клочья джинсами или сожженной в пепел бумагой. Важным аспектом выступает уместность и гармоничное соединение с контентом.
Специальные шрифты Стиль шрифта гранж отличается также креативным внешним видом, поскольку характеризуется не только потертостями, но и сколами, шероховатостями или заломами. Он может включать в себя неправильные или неровные линии. Более того, достаточно популярны рукописные шрифты.
Хипстерский дизайн сайта: особенности стиля
Стиль сайта гранж открывает горизонт возможностей для проявления индивидуальности, выделения среди множества похожих между собой опрятных и классических сайтов. Этот стиль имеет следующие особенности:
- Цветовая гамма и особая текстура. Гранжевый фон для сайта предусматривает использование характерных текстур: старая бумага, потертые джинсы, грязные стены и пр. Цветовая гамма представлена приглушенными «грязными» оттенками – серый, болотно-зеленый, коричневый, черный, бордовый, песочный, темно-оранжевый.
- Элементы страницы. Гранж сайты часто украшаются деталями: скрепки, кнопки, стикеры, снимки полароидного фотоаппарата. Присутствуют элементы городской архитектуры, пейзажи.
- Шрифты. Хипстерский сайт пестрит неопрятными, замысловатыми шрифтами. Они могут быть дополнены элементами потертости, шероховатости, текстурности. Как вариант это может быть написанный от руки текст.
Какому типу сайтов подходит гранж?
Гранж сайты – это сайты, ориентированные на молодежь, как целевую аудиторию. Это могут быть сайты, посвященные музыке, творчеству. Яркий пример – сайт театра Буша (www.bushtheatre.co.uk). Фон каждой страницы – текстурный, в оформлении использованы приглушенные гранжевые оттенки. Контент иллюстрирован городскими пейзажами. Стиль гранж подходит и для сайтов, посвященных путешествиям, блогов, сайтов по продвижению услуг.
Хорошо выглядят в этом стиле портфолио: например, презентация работ веб-дизайнера-фрилансера www.alitabatabaei.com. Цветовая гамма – оттенки серого, бежевого и черный. Для шапки и футера использована текстура, шрифты на сайте с эффектом потертости.
Гранжевый дизайн можно применять к оформлению коммерческих сайтов, которые имеют отношение к данному стилю. Например, для интернет-магазинов с одеждой и аксессуарами в стиле гранж, яркий пример – магазин Sycfuk (sycfuk.com). Идентификаторы хипстерского стиля здесь – текстурное оформление шапки сайта, характерный шрифт с потертостями, общая цветовая гамма. Точно не стоит использовать гранж для оформления новостных порталов, корпоративных сайтов. В этих случаях лучше подойдут другие виды дизайна сайтов.
Юзабилити для сайта в стиле гранж
Несмотря на то, что стиль гранж в основном считается творческим направлением, дизайнерам не стоит забывать о юзабилити на сайте. Даже если креативные решения нравятся пользователям, клиентам также должно быть удобно пользоваться ресурсам и легко воспринимать информацию. Что нужно учитывать при создании дизайна сайта в стиле гранж.
Так как гранж воспринимается как альтернатива стандартам, иногда дизайнеры используют некачественные изображения. Однако, это не совсем правильная практика. Из-за того, что фото и иллюстрации на сайтах низкого разрешения или на них наложено слишком много эффектов, макет «удешевляется» в глазах пользователей. Сайт не вызывает доверия и клиенты могут уйти к конкурентам с более простым, но качественным контентом.
Несмотря на то, что в стиле гранж могут использоваться креативные решения в типографике, нужно не забывать о содержании контента. Если пользователь не сможет прочитать текст из-за «потертого» шрифта, дизайн сам по себе теряет ценность, так как главная цель дизайнера — правильно презентовать компанию и повысить уровень конверсии ресурса.
Безусловно, декоративные элементы, оригинальные блоки и различные эффекты украшают сайт. Однако, много декоративных деталей может ухудшить восприятие пользователя. Поэтому нужно использовать элементы и эффекты в меру, не мешать пользователю воспринимать контент и не отвлекать его от целевых действий.
Стиль гранж подходит далеко не всем ресурсам. Так как главное в стиле — передача атмосферы, не все сайты подходят под данное направление. Дух авантюризма, индивидуальность, бунтарство — все это может быть неуместным на информационных сайтах, на ресурсах серьезных компаний. Также такой стиль напоминает ретро, а значит, не уместен в дизайне веб-страниц, связанных с современными технологиями. В основном направление используется в дизайне музыкальных сайтов и других творческих порталов, тревел-агентств, а также дизайне компаний, у которых основная целевая аудитория — мужчины. Например, барбершопов, магазинов военной одежды и прочее.
Подборка дизайнов в стиле Гранж (Хипстерский)
Гранж и отдельные элементы в дизайне
В современном веб-дизайне гранж претерпевает некоторые изменения. Теперь данный стиль практически не используется в своем первозданном виде, как это было раньше, как, например, вот здесь:
Сейчас современные дизайнеры стараются совмещать различные стили и брать из них только самое лучшее. Например, используют эффекты и атмосферу стиля гранж и современные формы, качественные яркие изображения и типографику:
Такой подход нравится пользователям: темные тона и субкультурные мотивы уходят и заменяются привычными красивыми пейзажами, но все же остаются потертости и царапины, которые придают макету дух авантюризма и ностальгии.
Кроме того, в современном дизайне все больше используются текстуры и паттерны. Больше об этом явлении мы писали здесь.
Также элементы гранж могут использоваться на сайтах в виде эффектов и основной концепции. Например:
Это сайт музыканта, выполненный в стиле гранж. Здесь присутствуют темные тона, текстурные изображения на фоне. Однако, мы видим, что есть и элементы из современных стилей — сама организация контента, кнопки и переключатели, типографика.
Также можно увидеть атмосферу гранжа в таких, казалось бы, минималистичных сайтах:
Однако, здесь мы видим ту же текстурность, палитру цветов, тематические изображения, необычную типографику и декоративные детали. На этом примере гранж отлично слился с минимализмом и представляет собой единую концепцию, сочетающую в себе креативность и юзабилити.
Стиль гранж подходит не для всех ресурсов. При выборе стиля дизайнер должен понять, что он хочет сказать пользователям, какую атмосферу на сайте он хочет создать. Приключения, авантюризм, оригинальность, индивидуальность и творчество — вот основной посыл, который несет стиль гранж.
Грандж в визуальном дизайне
В графическом дизайне и дизайне интерьеров грандж характеризуется легкой небрежностью состаренностью. Цветовая палитра состоит из матовых, приглушенных тонов бежевого, черного, коричневого и серого цветов. Предпочтительные текстуры и узоры — это царапины, пятна, кляксы, прожженные дыры, следы от стикеров, обрывки бумаги, битое стекло. Шрифты стиля грнадж должны выглядеть так, будто вы их рисовали «от руки». В стиле грандж часто используются трафареты и печати. Он используется в основном для дизайна имиджевых клубов и кафе, журналов и сайтов альтернативной и экстремальной тематики.
Подводя итог, можно выделить неряшливость, депрессивность, раскованность и многоплановость, как общую концепцию стиля. Стиль грандж не терпит притворств и использовать его стоит лишь там где оно того стоит!