Гранж стиль веб дизайн

Блог о дизайне и веб-мастеринге
Полезные ресурсы для разработчиков и дизайнеров
Статьи о движке WordPress и сервисе Twitter

Лучшие статьи категории «Веб-сайты»

Подписка

• Статьи (500+)
• Twitter (2350+)
• Google Plus (150+)
• E-mail подписка
• Реклама
• О блоге и команде

22 октября 2011

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

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

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

Что такое гранж?

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

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

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

Примеры сайтов

Ниже мы собрали коллекцию из 20 превосходных примеров гранжа в дизайне. Надеемся вы найдете в них вдохновение.

Источник

СТИЛЬ ГРАНЖ

Стиль гранж в веб-дизайне

Гранж (от англ. Grunge — нечто отвратительное, неприятное, отталкивающее)

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

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

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

Добавьте немного реалистичных деталей соответствующих выбранной тематике (колесо, ботинок на высокой подошве, ключи от машины), рваные края, неровности, шероховатости, несколько клякс и рукописный шрифт. И если чувство вкуса, стиля и меры Вас не подведет, то получится отличный сайт в стиле гранж.

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

Коллектив студии веб-дизайна solla.site рад предложить Вам разработку сайта в стиле гранж или любом другом в зависимости от потребностей Вашего бизнеса. Так же мы предлагаем продвижение в поисковых системах, техническое обслуживание и поддержку Вашего сайта.

Стиль гранж в одежде

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

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

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

Внешний вид сторонников нового стиля совмещал в себе черты хиппи (этнические мотивы) и панка ( вытянувшиеся свитера и рваные джинсы, одежда secondhand, грубые армейские ботинки).

Гранж — самое провокационное и дерзкое направление современной моды.

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

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

«Маргинальный шик»

Благодаря своему протесту против высокой моды Марк Джейкобс стал одним из ведущих дизайнеров в США и Европе. Модные журналы заполнились фотографиями моделей в рваных колготках, одетых как бомжи под заголовками «маргинальный шик».

Как создать образ в стиле гранж?

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

Стиль гранж в интерьере

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

Французский стиль гранж.

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

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

Основные черты стиля гранж.

НАТУРАЛЬНЫЕ МАТЕРИАЛЫ

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

СВЕТ, ПРОСТРАНСТВО, ПРОСТОТА

УЮТНЫЕ И СОСТАРЕННЫЕ ВЕЩИ

Елена Лебедева, графический дизайнер solla.site, преподаватель компьютерной графики

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник