5a09bb7710318d0a

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

Дизайн в стиле гранж

Nirvana, Pearl Jam, Stone Temple Pilots – эпоха гранжа в 90-е подарила нам не мало отличной музыки, а также примеры прекрасного «грязного» дизайна. Как постмодернизм был реакцией на функционализм модернизма, приглушенный гранж стал реакцией на красочность постмодернизма.

sozdanie-logotipa-v-stile (11)

Это должно было стать более точным и реалистичным изображением реальной жизни с ее грязными пятнами, смазанными изображениями, обрывистыми и грязными текстурами. Один из ассов дизайна в стиле гранж – Дэвид Карсон, экспериментировал с выразительной типографикой, бэкграундами и текстурами.

grunge1.jpg

Пока в Рунете только набирают силу всевозможные социальные сети с их «вебдавнольным» имиджем, на западе семимильными шагами возвращается ретро и, вместе с ним, ничем не приукрашенная реальность повседневности. Ведь на самом деле в реальной жизни (читай в природе) нет таких идеальных геометрических форм, ровных градиентов, точно выверенных теней и бликов как в стиле web 2.0. Поэтому многие дизайнеры стараются оформить свои сайты и блоги в виде непринужденной и даже немного нарочитой небрежности, зачастую придавая им вид неких «потертых временем» объектов. Как старая и много раз читанная книга.

grunge2.jpg

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

grunge3.jpg

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

Гранж

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

grungeclear.jpg

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

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

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

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

атмосфера с стиле гранж

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

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

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

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

4

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

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

5

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

Хипстерский дизайн сайта: особенности стиля

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

  • Цветовая гамма и особая текстура. Гранжевый фон для сайта предусматривает использование характерных текстур: старая бумага, потертые джинсы, грязные стены и пр. Цветовая гамма представлена приглушенными «грязными» оттенками – серый, болотно-зеленый, коричневый, черный, бордовый, песочный, темно-оранжевый.
  • Элементы страницы. Гранж сайты часто украшаются деталями: скрепки, кнопки, стикеры, снимки полароидного фотоаппарата. Присутствуют элементы городской архитектуры, пейзажи.
  • Шрифты. Хипстерский сайт пестрит неопрятными, замысловатыми шрифтами. Они могут быть дополнены элементами потертости, шероховатости, текстурности. Как вариант это может быть написанный от руки текст.

Стиль Гранж в вебе

Какому типу сайтов подходит гранж?

Гранж сайты – это сайты, ориентированные на молодежь, как целевую аудиторию. Это могут быть сайты, посвященные музыке, творчеству. Яркий пример – сайт театра Буша (www.bushtheatre.co.uk). Фон каждой страницы – текстурный, в оформлении использованы приглушенные гранжевые оттенки. Контент иллюстрирован городскими пейзажами. Стиль гранж подходит и для сайтов, посвященных путешествиям, блогов, сайтов по продвижению услуг.

Хорошо выглядят в этом стиле портфолио: например, презентация работ веб-дизайнера-фрилансера www.alitabatabaei.com. Цветовая гамма – оттенки серого, бежевого и черный. Для шапки и футера использована текстура, шрифты на сайте с эффектом потертости.

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

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

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

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

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

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

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

уместность стиля гранж

Подборка дизайнов в стиле Гранж (Хипстерский)

Графический дизайн в стиле гранж Hip Hop Graffiti, Yves Saint Laurent, Stefan Sagmeister, Foto Portrait, Graphisches Design, Logo Design, Plakat Design, Poster Design, Poster Layout hipster-web-design1 Modern Hipster, Hipster Design, Vintage Hipster, Modern Retro, Retro Vintage, Post Modern, Hipster Style, Vintage Theme, Vintage Prints

 Hipster Design, Vintage Hipster, Graphic Design Tutorials, Hipster Fashion, School Design, Vintage Shops, Design Elements, Screen Printing, Cool StyleGraphic Assets on Behance баннер instagram инстаграм photoshop уроки фотошоп дизайн tutorial оформление инстаграм banner фотошоп как сделать баннер баннер для инстаграм веб дизайн рекламный баннер instagram маркетинг instagram video tutorial instagram banner продвижение в инстаграм уроки фотошопа instagram banner facebook как создать баннер веб-дизайн удаленная работа бизнес в интернете banner ecommerce social media banner фото эффекты how to design poster in photoshop instagram banner Poster Layout, Dm Poster, Poster Series, Graphisches Design, Game Design, Layout Design, Design Ideas, Instagram Design, Instagram Grid

 Social Media Template, Social Media Design, Corel Draw Design, Identity Branding, Corporate Identity, Identity Design, Brochure Design, Visual Identity, Bag Mockupwarning : Editting skill needed, Before you edit the template you must have PhotoShop. This creative and modern Template is 100% available in PSD editable. Features Easy to edit templates with fully customizable text, & images Create beautiful mockups for Desktop, Tablet & Mobile Pixel-perfect Image Guides - updated for 2019 Meticulously organized & labeled layers High-Resolution PSD files Size 1080 x 1920 Instagram Feed Layout, Story Instagram, Instagram Design, Instagram Story Template, 2015 Quotes, Year Quotes, Quotes Quotes, Social Media Design, Social Media Template

Красивая цветовая схема, интересный шрифт в заголовках Site Web Design, Graphisches Design, Website Design Layout, Graphic Design Layouts, Website Design Inspiration, Graphic Design Posters, Graphic Design Inspiration, Book Design, Layout DesignРабота Солтана Шохрадова, ученика 8 потока Осознанного Графдизайна (granich.ru) #granich #graphicdesign Typography Poster Design, Graphic Design Posters, Graphic Design Inspiration, Illustrator Tutorial, Photoshop Illustrator, Site Portfolio, Layout Design, Logo Design, Design Kaos

De Young Museum | Visual Identity (fictional) on Behance Type Posters, Graphic Design Posters, Graphic Design Illustration, Graphic Design Inspiration, Daily Inspiration, Graphisches Design, Game Design, Book Design, Layout Design Graphic Design Layouts, Graphic Design Posters, Ux Design, Game Design, Book Design, Layout Design, Graphic Design Illustration, Brochure Design, 2020 Design

Looking for feedback on my poster designs. Swipe left to view one by one.: graphic_design Sports Graphic Design, Graphic Design Trends, Graphic Design Layouts, Graphic Design Tutorials, Graphic Design Posters, Poster Designs, Minimalist Poster Design, Creative Poster Design, Creative Posters Design Art, Web Design, Graphic Design Posters, Vintage Posters, Photo Wall, Movie Posters, Inspiration, Wallpaper, Abstract

How much do you know about #posterdesign? If the answer is Графический дизайн в стиле гранж Photography Illustration, Illustration Art, Illustrations, Graphic Design Posters, Graphic Design Inspiration, Ad Design, Layout Design, Gcse Art Sketchbook, Minimal Photography

Comp 13 Web Design, Game Design, Layout Design, Design Trends, Instagram Grid, Instagram Design, Blog Instagram, Graphic Design Posters, Graphic Design Inspiration Sports Advertising, Instagram Advertising, Sports Marketing, Advertising Design, Advertising Ideas, Marketing Ideas, Sports Graphic Design, Graphic Design Posters, Graphic Design Inspiration

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

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

первоначальный вид стиля гранж

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

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

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

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

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

элементы гранж на сайте

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

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

стиль гранж на сайте

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

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

Грандж в визуальном дизайне

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

Стиль грандж - концепция стиля 3 (700x559, 179Kb)Стиль грандж - концепция стиля 6 (700x525, 106Kb)

Стиль грандж - концепция стиля 9 (501x700, 433Kb)Стиль грандж - концепция стиля 7 (700x438, 124Kb)

Подводя итог, можно выделить неряшливость, депрессивность, раскованность и многоплановость, как общую концепцию стиля. Стиль грандж не терпит притворств и использовать его стоит лишь там где оно того стоит!

Оцените статью
Marry Cherry
Стиль гранж в дизайне сайта: особенности и специфика стиля
День рождения в стиле мудьтфильма «Свинка Пеппа» — как оформить фотозону?