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

Важные элементы для успешного ретро-дизайна

Ретро-дизайн черпает свое вдохновение из 50-х и 60-х годов. Данный стиль давно уже стал неотъемлемой частью дизайна и современных технологий.

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

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

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

Использование цветов

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

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

Типография

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

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

Эмблемы и логотипы

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

Honey Script

Grand Hotel

Lavanderia

Deftone Stylus

Текстуры

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

Границы

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

Формы и иллюстрации

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

Источник

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

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

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

Перед тем как началось стремительное развитие технологий, дизайн включал в себя оформление журналов и газет, программ на телевидении, полиграфических материалов. Несмотря на то, что приемы, которые использовались в это время, считаются устаревшими, дизайнеры до сих пор применяют их в новых сферах дизайна, в частности, в вебе. Ретро-стилем считается стилистика 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 создает дизайн сайтов в различных стилях — от традиционной классики до современного стиля хай-тек. Ретро-стиль — не исключение. Мы поможем предпринимателям подобрать подходящее направление в веб-дизайне для эффектного представления продукта в интернете и сделаем сайт максимально привлекательным и удобным для пользователей. Больше примеров наших работ в различных стилях можно посмотреть в разделе «Портфолио».

Источник