Обучайся бесплатно с WAYUP Premiere сегодня вечером

Все мы знаем аксиому: «все новое – хорошо забытое старое». То же самое можно сказать и о конструкциях, тенденциях веб-дизайна и дизайнерского направления в целом. Одновременно с тем, как меняется окружающая нас жизнь, социум, взгляды, положение дел в политике и экономике (ух, и даже они), мода тоже меняется. И многие старые стили возвращаются. Но возвращаются не в своем оригинальном виде, а претерпевая изменения под влиянием времени, в котором они приходят.

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

Впрочем, не останется без внимания и классический стиль ретро.

Влияние стиля ретро на интернет

Современный стиль ретро произошел от стилей 1950 – 1980-х годов XX века. Зачастую можно увидеть намеки на них в тех или иных проектах. Некоторые веб-мастера называют такое веяние «слиянием ботаники и технологии» и образованием своеобразной новой культуры.

Но что действительно хорошо в ретро стиле или даже в отдельных элементах его проявления – это ностальгия, чувственность, воспоминания. И они способны создавать очень устойчивую связь между дизайном сайта и посетителями, влиять на восприятие контента, на подачу материала, рекламу, побуждать нажимать кнопки, смотреть на товары и прочее, и прочее. Посетителям же подсознательно приходит мысль: «я помню это», «я помню, нечто похожее было, когда я…» и так далее.

  

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

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

Ретро-проектирование привносит нотку романтизма в веб-дизайн. Большинство из нас часто думают о том: «как хорошо когда-то было, и трава была зеленее, и солнце ярче светлило».. Мы чувствуем, что жизнь была гораздо проще, менее напряженной и расслабленной, когда ходили в школу и колледжи/ВУЗы. Это, вероятно, тот момент, когда ретро-дизайн оказывает на нас сильное влияние. Он вновь возвращает нас к этим сладким и памятным дням, когда наша жизнь была более спокойной.

 

Особенности современного ретро

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

  • Технологические темы с использованием образов компьютеров старой школы. Это сейчас они плоские, тонкие и изящные. Вспомните, какими большими и громоздкими они были раньше.  Об этом и речь.
  • Музыкальные темы с ленточными проигрывателями или с вертушками под пластинки. Помните такие?
  • Чистые абстрактные иллюстрации с изображением людей, но не лиц в отдельности.
  • Яркие цветные линии, завитки, ленты и прочие элементы.
  • Геометрические формы с толстыми штрихами.
  • Плоские элементы от форм до линейных иконок. Современный ретро не использует много дополнительных украшательств, он, скорее, напоминает плоский дизайн и минимализм.
  • Пиксельные иллюстрации, которые отражают графику ранних видеоигр.
  • Неоновый стиль в элементах, что имитируют собой свет и подсветку.
  • Линейный стиль для элементов пользовательского интерфейса. Без украшений и многообразия цветовой палитры.
  • Простые анимации, без слишком быстрого движения. Такие анимации даже порой кажутся «в лагах», словно бы кусочки плавности движений были вырезаны.
  • Разнообразие шрифтов: с засечками, угловатые, крупных размеров, сочетания жирности и наклонности. Иными словами все те стили, что использовались в кино, видеоиграх, телевидении тех лет.
  • Богатые цветовые палитры с большим количеством «счастливых» оттенков. Это желтые, апельсиновые, красные, салатовые, зеленые. Не яркие, слегка приглушенные.

И вот некоторые, наиболее яркие вариации проектов, созданных в ретро-стиле. Это writesketchand, colonelsanders, Трамвай Желаний (жилой комплекс, между прочим), LOCUS SOLUS, Effektiv, Caava Design, Sweez, Belle Epoque, Vacheron Constantin - Florilège.

Детализация ретро-стилей для веб-дизайна

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

 

Но как мы сказали выше, существуют ключевые элементы, которые используются в классическом ретро стиле и современном ретро. Обратим на них особое внимание.

Формы. Простые и разного размера, но обладающие яркими цветными фонами. Такие элементы привлекают внимание и позволяют адаптировать пространство страницы для разделения и создания акцентов на контенте.

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

 

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

  

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

 

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

 

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

И вот еще немного примеров того, о чем мы только что говорили. Важные детали ретро в современном исполнении: HOUSE AT KHLEBNY, projectsunday, bilan-trends2016, dada-data, thesmokehaus, threecent, gleneagles, burleymanor, plugnickel, whitefrontier.

 

За и против

Является ли ретро-стиль, будь то классический или современный, подходящим для вашего конкретного проекта? Чтобы ответить на этот вопрос, давайте посмотрим на преимущества и недостатки его.

Плюсы ретро стилей

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

Минусы стиля ретро

  • Ретро как стиль, неважно где он используется, в веб-дизайне, кино или телевидении – стиль «не для всех». Некоторые пользователи интернета попросту не поймут его.
  • Он также и очень автономный стиль, поэтому смешивать его с элементами иных направлений не всегда хорошо. Выглядит такое неказисто.
  • При неумелом использовании или малой фантазии сочетания цвета, форм, конструкций со шрифтами может сыграть плохую шутку, и вы только «убьете» время на работу, но хорошего дизайна так и не получится. Иными словами: стиль легкий визуально, но сложный при работе.
  • Многие современные ретро стили не используют такие элементы, как видео и фотографии в большом объеме. Да, на примерах выше такие вариации найдутся, но их мало. Да, и если образы используются, то в единичном числе. Попросту потому, что для ретро-стиля такое несвойственно.
  • Сочетания цветов могут вызывать проблемы удобочитаемости. То есть, если в полиграфии сочетания могут хорошо выглядеть, то на сайте при таком же сочетании вкупе с цветом шрифта может получиться настоящая аляповатость.

Выводы

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

Использование ретро-элементов в веб-дизайне – попытка вернуть воспоминания о прошлом. Когда веб-мастер намеренно создает «старинный» дизайн и смешивает его с новыми и современными услугами, технологиями – получается истинное ретро. Занятно, но старые методы проектирования технологически совместимы с современным проектированием.  Хотя есть элементы, которые стоит обходить стороной. Повсеместное Flash, большие радужные шрифты, счетчики посетителей  – устарело, и использование этого не придаст ретро-атмосферности. В то же время стоит обращать внимание на детали, что популярны и сейчас, но представлять их в ретро варианте. Фотографии переводить в черно-белые, сочетать шрифты и фон, аналогично плакатам и картинам  тех лет и многое иное.

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

Как вам материал?