Ретро дизайн фирменного стиля

Как вдохнуть креатива в дизайн с помощью ретро

Как вдохнуть креатива в дизайн с помощью ретро

Уходим в Ретро: как вдохнуть креатива в дизайн с помощью ретро

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

Содержание статьи:

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

Берите ручку и бумагу – мы собираемся окунуться в прошлое. Давайте взглянем на 150-летнюю историю графического дизайна, начиная с 1850-го года и заканчивая 2000, и посмотрим, чем можно вдохновиться при разработке фирменного стиля.

01. Викторианский стиль (1850—1900)

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

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

Заказать фирменный стиль в Викторианской манере:

• Изрисуйте страницу – каждый ее сантиметр, — но сохраняйте симметрию
• Экспериментируйте с леттерингом и сложными тиснениями
• Добавьте тени, очертания и любые искусные украшательства
• Совместите текст и изображение в одно произведение искусства

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

02. Движение искусств и ремесел (1870—1910)

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

Создание логотипа в стиле Движения искусств и ремесел:

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

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

03. Ар-Нуво (1880—1910)

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

Создание логотипа в стиле Ар-Нуво:

• Подчеркивайте линейные и абстрактные формы, плоский дизайн привнесен японской традицией
• Используйте извилистые и плавные линии и формы, которые трансформируются, перемещаются и тают
• Дизайн должен выражать изображаемый субъект
• Изображайте женские лица

Обложка этой книги древних сказок Японии вдохновлена влиянием японского дизайна, который был популярен в эпоху Ар-Нуво. Буквы «C» и «J» в названии преображены природными узорами; чувство, словно цветы вырастают из нижней части книги; а стрекоза – популярный символ течения – пролетает в правом верхнем углу.

04. Дадаизм (1910—1920)

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

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

Создание логотипа в стиле Дадаизма:

• Экспериментируйте со шрифтами, версткой и пустым пространством
• Нарушайте все правила и следуйте беспорядку
• Делайте коллажи из картинок, билетов, газет и любых других печатных материалов
• Спекулируйте смыслами и значениями, комбинируя несочетаемые изображения и тексты

05. Авангард (1920-1930)

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

Заказать фирменный стиль в манере Авангарда:

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

Обложка этого CD-диска явно отсылает нас к работе русских конструктивистов в своей красно-черно-белой палитре. Ярко выраженные линии очерчивают квадрат, а черно-белые элементы сливаются в фотомонтаже.

06. Ар-Деко (1920—1930)

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

Создание логотипа в стиле Ар-Деко:

• Придерживайтесь прямых и лучеобразных геометрических линий
• Стилизуйте абстрактные линии для плоских 2D изображений, словно замерших на месте
• Вдохновляйтесь небоскребами, машинами, транспортом и веком джаза
• Создавайте сияющие, блестящие, глянцевые поверхности

07. Интернациональный стиль (1950—1960)

Задумывались ли вы когда-нибудь, откуда растут ноги у Helvetica (шрифты без засечек)? Теперь вы знаете. После потрясений Второй мировой войны интернациональный (или швейцарский) стиль стремился к простоте, минимализму и точности. В 50-х и 60-х годах швейцарские дизайнеры продвинули модернистские идеалы Аванграда еще дальше, экспериментируя с типографикой и фотомонтажом. Они не чувствовали необходимости в самовыражении. Стиль стал воплощением мантры «форма следует за функцией» — дизайнеры создали универсальный, анонимный, объективный графический язык.

Заказать фирменный стиль в манере Интернационального стиля:

• Используйте строгую типографику, такую, как шрифты Helvetica
• Включайте фотографии вместо иллюстраций и рисунков
• Привнесите в свой дизайн больше свободного пространства
• Структурируйте ассиметрию

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

08. Средневековый модерн (1950—1960)

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

Заказать фирменный стиль в манере Средневекового модерна:

• Используйте яркие, эмоциональные цвета
• Оставьте много пространства
• Вставляйте веселые и экспрессивные иллюстрации
• Создавайте живые и причудливые композиции

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

09. Психоделика (1960—1970)

Психоделическое движение произросло из-за распространения галлюциногенных наркотиков в 60-х и 7-х годах. Когда послевоенное поколение достигло совершеннолетия в те годы, они подвергли материалистические и консервативные ценности Америки под большое сомнение, в результате чего революционное движение молодежи ознаменовало восстания и время экспериментов. Музыкальные фестивали и концерты, неотъемлемой частью которых были наркотики, — характерные атрибуты социального ландшафта. Графический дизайн визуально выражал это ощущение «выключения из реальности» с помощью насышенных цветов, закрученных линий и форм (что схоже с Ар-Нуво) и едва читабельных шрифтов.

Создание логотипа в стиле Психоделики:

• Выбирайте яркие и контрастные цветовые оттенки
• Не оставляйте ни единого нетронутого места
• Вставляйте лица
• Создавайте иллюзию движения из четких извилистых линий

Этот постер – фантастическое произведение искусства, отсылающее нас к психоделическому дизайну и рекламирующее концертный тур рок-группы The Black Keys. На нем нет ни сантиметра, который остался бы нетронутым, масса линий и форм движутся и перетекают друг в друга.

10. Постмодернизм (1970—1980)

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

Заказать фирменный стиль в манере Постмодернизма:

• Комбинируйте столько ярких цветов, сколько возможно
• Играйте, оставьте серьезность, думайте о форме, а не содержании
• Фотомонтаж – для фана и эстетики, а не для смысла
• Ориентируйте дизайн на поп-аудиторию

Как написал журналист на портале itsnicethat.com, «способность узнать знаменитость по его частям – на самом деле то единственное, что отличает человека от жука-навозника»

11. Гранж (1990-е)

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

Заказать фирменный стиль в манере Гранжа:

• Используйте приглушенную и тускловатую цветовую палитру
• Экспериментируйте с размытыми и искаженными образами
• Применяйте грязные текстуры и элементы типа пятен или слез
• Добавляйте рукописные элементы и обрывистые шрифты

Ваша очередь

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

Понравилась наша статья, поделитесь с друзьями!

Источник

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

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

Что понимают под ретро-стилем в веб-дизайне

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

• 20-е — 30-е годы. Эра женской эмансипации и революционного настроя. В моде черные и пурпурные цвета, джаз, аэропланы и кинематограф;
• послевоенные 40-е — 50-е годы. Наступает мода на классику, спокойные и безмятежные иллюстрации в духе new look стиля. Также набирает популярность пин-ап — направление в иллюстрации и фотографии, которое характеризуется яркими цветовыми оттенками, обычно изображаются красивые женщины в броских нарядах;
• 60-е — 70-е годы. Время Мэрилин Монро, Бриджит Бардо и Софи Лорен. В моде яркие принты, красный, розовый и синий цвета, легкость и непринужденность;
• 80-е годы. Время перестройки. Яркие цвета, геометрические формы, узоры и тотальное использование иконографики.

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

Принципы ретро-стиля

Принцип 1. Приглушенные цвета

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

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

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

Принцип 2. Иллюстрации

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

Иллюстрации в ретро стиле отличаются следующими характеристиками:

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

Пример использования иллюстраций на сайте в стиле ретро:

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

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

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

Главный экран сайта

Одна из страниц, посвященных описанию номеров

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

Принцип 3. Геометрические формы

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

Принцип 4. Иконки, значки, логотипы

Возвращаясь ко 2 принципу, связанному с иллюстрацией, нельзя не отметить еще одну отличительную черту — использование в ретро-стиле различных иконок, значков, узоров и вензелей.

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

Принцип 5. Уникальная типографика

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

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

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

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

Принцип 6. Паттерны и текстуры

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

Принцип 7. Выделяющиеся блоки

Долгое время в веб-дизайне была мода на объемные блоки, которые выделялись на основном фоне страницы. Такой прием присущ и ретро стилю.

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

Принцип 8. Тематичность

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

Принцип 9. Отдельные элементы

Не всегда ретро стиль используется по всему сайту. Иногда дизайнеры вставляют такие элементы, чтобы придать странице немного винтажности. Один из ярких примеров такого приема — всемирная газета The New York Times, которая уже давно представляет собой информационный ресурс в интернете, но не теряет своей атмосферы:

Дизайнеры постарались максимально перенести структуру газеты в интернет-ресурс. Расположение блоков, подпись «Today’s Paper», сегодняшнее число в левом углу и винтажный логотип напоминает читателю старую и привычную газету, погружает нас в атмосферу того времени, когда все новости узнавали из утренней почты.

Кроме структуры можно перенести на сайт и просто дизайн продукта:

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

Особенности юзабилити для стиля ретро

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

Что следует учитывать при проектировании макета сайта в ретро стиле:

1. Тематику сайта. Возможно, ретро стиль совсем не подходит компании и пользователь будет в явном недоумении от оформления. Особенно это касается тех компаний, которые предоставляют услуги в сфере digital. Пользователи ожидают от таких организаций в первую очередь современный дизайн и легкий интерфейс, а не явное обилие декоративных элементов, вензеля и изображения раритетной техники.
2. Особенности навигации. Если дизайнер решает использовать ретро стиль в качестве основы дизайна, нужно продумать навигацию так, чтобы элементы не выбивались из концепции. Скорее это будут традиционные навигационные элементы — горизонтальное меню, вертикальный скроллинг. Хотя, некоторые дизайнеры «модернизируют» ретро стиль и используют недавно вошедшее в моду меню-гамбургер.
3. Особенности анимации. Как правило, ретро стиль не подразумевает сложные анимационные эффекты и переходы между экранами. Иногда дизайнеры прибегают к динамическим эффектам, но стараются также их стилизовывать под ретро — это могут быть виджеты с часами, интересные решения для переходов и прочее.
4. Призывы к действию. Яркие иллюстрации, множество иконок могут отвлекать внимание пользователя от основных элементов призыва к действию — кнопок, веб-форм. Поэтому дизайнерам стоит учитывать расположение этих элементов относительно ярких деталей в дизайне и продумать, как можно привлечь внимание пользователя.

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

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

Источник