Содержание
особенности направления и оригинальные примеры
Необычный стиль ретро даже сейчас используется в веб-дизайне. Классический вариант в виде отдельных стилизованных блоков, иллюстраций из старых журналов, и современный, в виде рукописных шрифтов, приглушенных цветовых оттенков и фотографий с фильтрами под старину. В этой статье мы расскажем, в каком виде ретро-стиль присутствует в дизайне, рассмотрим его основные принципы и приведем примеры сайтов.
Что понимают под ретро-стилем в веб-дизайне
Перед тем как началось стремительное развитие технологий, дизайн включал в себя оформление журналов и газет, программ на телевидении, полиграфических материалов. Несмотря на то, что приемы, которые использовались в это время, считаются устаревшими, дизайнеры до сих пор применяют их в новых сферах дизайна, в частности, в вебе. Ретро-стилем считается стилистика 20-х — 80-х годов и подразделяется на несколько направлений:
- 20-е — 30-е годы.
Эра женской эмансипации и революционного настроя. В моде черные и пурпурные цвета, джаз, аэропланы и кинематограф; - послевоенные 40-е — 50-е годы. Наступает мода на классику, спокойные и безмятежные иллюстрации в духе new look стиля. Также набирает популярность пин-ап — направление в иллюстрации и фотографии, которое характеризуется яркими цветовыми оттенками, обычно изображаются красивые женщины в броских нарядах;
- 60-е — 70-е годы. Время Мэрилин Монро, Бриджит Бардо и Софи Лорен. В моде яркие принты, красный, розовый и синий цвета, легкость и непринужденность;
- 80-е годы. Время перестройки. Яркие цвета, геометрические формы, узоры и тотальное использование иконографики.
Эра женской эмансипации и революционного настроя. В моде черные и пурпурные цвета, джаз, аэропланы и кинематограф;
Как говорится, все новое — это хорошо забытое старое. Ретро стиль дизайнеры используют в вебе, чтобы создать особую атмосферу тех годов, создать креативный дизайн и отличиться от конкурентов, подчеркнуть особенности продукта. Рассмотрим основные принципы стиля, его отличия от других направлений в веб-дизайне.
Принципы ретро-стиля
Принцип 1. Приглушенные цвета
В XX веке в типографиях не было такого высококачественного оборудования как сейчас. Поэтому полиграфия, которая печаталась в те годы, имела тусклые, как будто приглушенные цвета. В веб-дизайне тоже используется этот принцип и на все оттенки накладывают фильтры, чтобы цвета казались «старыми».
На примере используются почти пастельные цветовые оттенки. Кажется, будто дизайн немного «потертый», что возвращает нас в атмосферу тех годов, когда еще не было качественной печати и яркости цвета в полиграфии.
Такого эффекта можно добиться, применяя различные фильтры по типу «сепии», добавляя различные эффекты, например, потертости или царапины, или выставляя низкий уровень непрозрачности. Эффект от таких приемов — восприятие пользователем сайта как нечто устаревшего, но вместе с тем, обладающего особым шармом.
Принцип 2. Иллюстрации
Один из самых ярких и отличающих ретро стиль от других направлений в дизайне принципов — использование тематических иллюстраций.
Благодаря картинкам можно легко отделить ретро стиль — настолько атмосферными они выглядят.
Иллюстрации в ретро стиле отличаются следующими характеристиками:
- Цвет. Соблюдая первый принцип, оттенки в иллюстрациях обычно «состаренные», приглушенные.
- Действие или предметы. Обычно на иллюстрациях изображают людей или предметы тех времен. Это может быть старая техника, например, старинный фотоаппарат, или ретро-автомобиль. Или картинка девушек в модных в то время платьев.
- Отсутствие фона. Большинство ретро иллюстраций, используемых в веб-дизайне, вставляются в макет без фона и выделяются на странице. Так создается дополнительный эффект объема, который раньше был в моде. Хотя, плоские иллюстрации тоже используются в ретро стиле.
Пример использования иллюстраций на сайте в стиле ретро:
На примере дизайнеры используют фото-иллюстрацию старинного трамвая, на фоне видно фотографию с наложенным эффектом сепией.
Интересно также использование различных маленьких картинок — стилизованного ключа, замочной скважины.
Такие картинки положительно влияют на восприятие контента пользователями. Иллюстрации погружают нас в атмосферу прошлого, при этом дизайн выглядит стильно и не перегружено. К тому же, такой подход не часто увидишь в современном вебе, поэтому с помощью стиля можно выделиться среди конкурентов и повысить узнаваемость бренда.
Однако, в современном веб-дизайне используют и фотографии, сделанные уже на качественную современную технику. Дизайнеры сочетают современность и ретро-вензели и получают интересные результаты. Например, на сайте одного отеля используются как тематические рисованные иллюстрации, так и профессиональные фотографии:
Главный экран сайта
Одна из страниц, посвященных описанию номеров
Однако, такие фотографии тоже передают атмосферу прошлого столетия: интерьеры в ретро стиле как нельзя лучше дополняют концепцию сайта.
Принцип 3. Геометрические формы
Мода на геометрические формы, плоские конструкции и использование разделителей пришла в дизайн примерно в 80-е годы. Сейчас такой подход применяют и в веб-дизайне: разбивают страницу на несколько секторов, используют иллюстрации в виде треугольников и другой геометрии.
Принцип 4. Иконки, значки, логотипы
Возвращаясь ко 2 принципу, связанному с иллюстрацией, нельзя не отметить еще одну отличительную черту — использование в ретро-стиле различных иконок, значков, узоров и вензелей.
На примере видно, что дизайнеры используют различные иконки и иллюстрации в винтажном стиле. Приглушенные цвета, создание объема с помощью теней, рисованные иллюстрации и серый «газетный» фон создают неповторимую атмосферу и стильный дизайн.
Принцип 5. Уникальная типографика
Еще одна отличительная черта ретро-стиля — уникальная типографика. Раньше шрифтам уделяли особое внимание: как правило люди читали газеты и другую полиграфию, поэтому типографика имела огромное значение.
В моде преобладали необычные шрифты, с помощью которых можно было не только привлечь внимание читателей, но и украсить макет.
Такая типографика перешла и в веб-дизайн. Ретро-стиль в основном характеризуется различными рукописными шрифтами или шрифтами в стиле леттеринг (подробнее об этом направлении в типографике мы писали в этой статье). Также надписи украшали различными паттернами:
Такая типографика выделяется, обращает внимание на текст и его содержимое. Шрифты ретро стиля часто используются в заголовках, чтобы привлечь внимание пользователей. Обычно применяют шрифты с засечками, часто все буквы — заглавные.
Яркая типографика пришла к нам из различных постеров, которые были модны в то время. Используя шрифты тех времен, а также рукописные шрифты, мы приближаем пользователей к атмосфере прошлого, когда люди еще читали газеты, рассматривали афиши на улицах и не сидели в интернете.
Принцип 6. Паттерны и текстуры
Также особенностью ретро-стиля является использование паттернов и текстур в дизайне.
Это может быть имитация дерева или бумаги, газетной статьи, книжных страниц и других натуральных материалов. Например:
Принцип 7. Выделяющиеся блоки
Долгое время в веб-дизайне была мода на объемные блоки, которые выделялись на основном фоне страницы. Такой прием присущ и ретро стилю.
На примере представлен такой подход. Основная контентная часть не распределена по всей ширине экрана, как распространено сегодня, а располагается отдельным выделенным блоком. Этот большой блок объемный, создается ощущение что фон страницы — это поверхность, а на поверхности лежит газета с информацией и иллюстрациями. Такой прием потихоньку уходит в прошлое, так как сейчас в моде расположение элементов на всю ширину, благодаря возможностям верстки, но иногда еще можно встретить такие элементы на сайтах.
Принцип 8. Тематичность
Одна из главных особенностей ретро стиля — тематичность ресурса. Обычные интернет-магазины или компании с услугами могут просто использовать плоский дизайн или минимализм — стили, которые подходят большинству сайтов.
Больше об этих направлениях в веб-дизайне можно прочитать здесь (плоский дизайн) и здесь (минимализм). В случае с ретро дизайном, сайты обычно обладают узконаправленной тематикой, которая подчеркивает дух прошлого, или оформлены в стиле ретро для повышения узнаваемости бренда. Во втором случае фирменный стиль тесно связан с винтажной тематикой, для повышения доверия пользователей.
Принцип 9. Отдельные элементы
Не всегда ретро стиль используется по всему сайту. Иногда дизайнеры вставляют такие элементы, чтобы придать странице немного винтажности. Один из ярких примеров такого приема — всемирная газета The New York Times, которая уже давно представляет собой информационный ресурс в интернете, но не теряет своей атмосферы:
Дизайнеры постарались максимально перенести структуру газеты в интернет-ресурс. Расположение блоков, подпись «Today’s Paper», сегодняшнее число в левом углу и винтажный логотип напоминает читателю старую и привычную газету, погружает нас в атмосферу того времени, когда все новости узнавали из утренней почты.
Кроме структуры можно перенести на сайт и просто дизайн продукта:
Сайт представляет товары в винтажном стиле, используя интересные шрифты, приглушенные цвета. Несмотря на то, что на странице используются современные плоские формы, сам продукт создает атмосферу «крафтовой» старины.
Особенности юзабилити для стиля ретро
Используя такие креативные решения, дизайнерам важно не забывать про юзабилити. Обилие иллюстраций, неординарная типографика, безусловно, создают определенную атмосферу и шарм. Однако, дизайнерам необходимо следить, не мешает ли множество декоративных элементов восприятию пользователей.
Что следует учитывать при проектировании макета сайта в ретро стиле:
- Тематику сайта. Возможно, ретро стиль совсем не подходит компании и пользователь будет в явном недоумении от оформления. Особенно это касается тех компаний, которые предоставляют услуги в сфере digital. Пользователи ожидают от таких организаций в первую очередь современный дизайн и легкий интерфейс, а не явное обилие декоративных элементов, вензеля и изображения раритетной техники.
- Особенности навигации. Если дизайнер решает использовать ретро стиль в качестве основы дизайна, нужно продумать навигацию так, чтобы элементы не выбивались из концепции. Скорее это будут традиционные навигационные элементы — горизонтальное меню, вертикальный скроллинг. Хотя, некоторые дизайнеры «модернизируют» ретро стиль и используют недавно вошедшее в моду меню-гамбургер.
- Особенности анимации. Как правило, ретро стиль не подразумевает сложные анимационные эффекты и переходы между экранами. Иногда дизайнеры прибегают к динамическим эффектам, но стараются также их стилизовывать под ретро — это могут быть виджеты с часами, интересные решения для переходов и прочее.
- Призывы к действию. Яркие иллюстрации, множество иконок могут отвлекать внимание пользователя от основных элементов призыва к действию — кнопок, веб-форм. Поэтому дизайнерам стоит учитывать расположение этих элементов относительно ярких деталей в дизайне и продумать, как можно привлечь внимание пользователя.
В целом, ретро-стиль для сайта — одно из свежих креативных решений в веб-дизайне. Он встречается не так часто, как популярный плоский дизайн или минимализм. Поэтому сайт в винтажном стиле может выделить компанию среди конкурентов и повысить уровень ее узнаваемости. При этом важно помнить, что стиль ретро нужно использовать только для подходящих тематик и помнить о юзабилити веб-страниц.
Студия дизайна IDBI создает дизайн сайтов в различных стилях — от традиционной классики до современного стиля хай-тек. Ретро-стиль — не исключение. Мы поможем предпринимателям подобрать подходящее направление в веб-дизайне для эффектного представления продукта в интернете и сделаем сайт максимально привлекательным и удобным для пользователей. Больше примеров наших работ в различных стилях можно посмотреть в разделе «Портфолио».
17 вдохновляющих примеров веб-дизайна в стиле ретро
Автор Макс Сухарев на 04.11.2011 в Обзоры сайтов · 0 Комментариев
Здравствуйте, дорогие читатели моего блога о дизайне maxsuharev.
ru. Ретро и Винтаж элементы в веб-дизайне становятся все более и более популярными. Мне нравится очень много примеров из старинных веб-дизайнов. Я не могу нарадоваться на все ретро-дизайны, которые производятся ежедневно. Я искренне радуюсь за всех, кто способен создавать столь ностальгические и милые произведения искусства в современном мире, особенно в мире веб-дизайна. Использование «ретро» стиля подразумевает, использование тех изображений, шрифтов и иконок, которые были популярны не менее 15 или 20 лет назад. Есть много элементов, которые используются в винтажном и ретро-дизайне. Например, старые типографии стили, старые плакаты, фильмы, рукописный шрифт, старые упаковки и многое другое. Мне нравятся высокие заголовки, старые шрифты и тонкие границы. Естественно, такой дизайн подойдет не каждому сайту. Представляю подборку из 17 примеров ретро веб-дизайна и, надеюсь, вам они понравятся так же, как и мне.
Не существует правильного или неправильного способа для создания дизайна в стиле Ретро/Vintage. Как вы увидите ниже, в этом направлении существуют разные стили и возможности. Больше примеров вы найдете в статье «Дизайн ретро сайта».
http://atticuspetdesign.com/http://bellstrike.com/
http://bloominteriordesign.com.au/
http://cabedge.com/
http://www.henry-realestate.com/
http://kitchensinkstudios.com/
http://www.lawebshop.ca/
http://www.minnesdiner.com/
http://www.pointlesscorp.com/
http://sundaybestdesigns.com/
http://www.allstarlanes.co.uk/
http://urbanoff.com/
http://www.whatkatiedoes.net/
http://www.kultika.de/http://www.prahba.com/
Если вам нравится какой-нибудь веб-сайт в подобном ретро стиле, который вас вдохновляет, и который не был продемонстрирован, не стесняйтесь поделиться своими примерами Винтаж/ретро веб-дизайна.
Может быть ваш сайт имеет особенность ретро-дизайна? Пишите в комментариях ниже 🙂
Автор статьи: Макс Сухарев
Основатель проекта maxsuharev.ru. Совладелец других интернет-изданий. MS в социальных сетях: Vkontakte Facebook Google+.
Теги: retro web design, дизайн в стиле ретро, ретро дизайн, Сайты в стиле ретро, сайты красивые
Назад
Койот в метро, слон на споте, горилла в постеле. Что еще? Дикие животные в городских местах от Микель Uribetxeberria
Вперед
Miharu Mitsunaga – дизайнер, который соединила мир точками
32 лучших примера и шаблона веб-сайтов в стиле ретро и винтаж в 2020 году стиль, плоский стиль, минималистичный стиль, стиль брутализм.
Стиль ретро и винтажный дизайн, как одна из основных тенденций дизайна веб-сайтов в 2020 году, с каждым днем набирает популярность благодаря своей необычной, загадочной, ностальгической визуальной привлекательности.
Вы ищете идеи дизайна веб-сайта в стиле ретро, чтобы улучшить свой следующий проект?
Если вы ищете идеи дизайна веб-сайта в стиле ретро, чтобы улучшить свой следующий проект, не ищите дальше! Mockplus выбрал 32 лучших и самых привлекательных веб-сайта и шаблона в стиле ретро и винтаж, чтобы вдохновить вас.
Почему сайты в стиле ретро так популярны?
Под «ретро» и «винтажем» мы подразумеваем веб-сайты, которые используют старые изображения, шрифты, цвета, макеты и типографику. Некоторые также включают в себя другие элементы, такие как старинные телевизоры, радиоустройства, неон, старые плакаты и так далее. Этот стиль стал очень популярным благодаря своей способности вызывать в воображении целый ряд различных чувств и способов обращения к посетителям сайта.
Большинство веб-дизайнеров могут использовать эти элементы, чтобы быстро привлечь внимание пользователя и использовать возможность представить продукты, рекламу и другое содержимое страницы в захватывающей форме, которая побуждает пользователей нажимать кнопки CTA, превращая посещения в продажи.
У пользователей веб-сайтов ретро-стиль вызывает в воображении воспоминания о прошлом, помогая создать стабильные эмоциональные отношения с сайтом — еще один путь к повышению коэффициента конверсии!
Короче говоря, стиль ретро стал одним из наиболее широко используемых подходов, с помощью которых дизайнеры пытаются создавать уникальные веб-сайты.
Как создать ретро сайт?
Спроектировать и создать с нуля веб-сайт с настоящим ретро-стилем непросто. Итак, во-первых, следуйте нашим трем основным советам, чтобы упростить весь процесс:
1). Ищите существующую ностальгическую сеть, чтобы получить вдохновение
«Делайте то, что делают другие ретро-сайты» — это первый совет, которому вы должны следовать. Когда вы все еще ищете свои первоначальные идеи, существующие веб-сайты могут многому вас научить, например, как вставлять винтажные изображения; как использовать старые цвета, шрифты и границы; как использовать классические фоновые текстуры, значки и значки; и так далее.
Они также могут сказать вам, какие винтажные элементы в наши дни более популярны.
Итак, прежде чем приступить к разработке собственного веб-сайта в стиле ретро, поищите в Интернете несколько существующих креативных и ностальгических веб-сайтов. Вы обязательно найдете много вдохновения.
2). Скачайте и используйте винтажные шаблоны веб-дизайна
Если у вас и вашей команды нет времени разрабатывать все с нуля, потратьте немного времени на выбор винтажного шаблона веб-дизайна. Вы можете попробовать множество отличных веб-сайтов с шаблонами, таких как Template.net, Themeforest.net, Colorlib и Awwwards.
3). Никогда не забывайте о веб-прототипировании и тестировании
Процесс создания любого веб-сайта часто разбивается на несколько этапов, включая мозговой штурм, прототипирование, совместную работу, передачу разработчикам и разработку. На разных этапах требуются разные инструменты, чтобы весь процесс работал хорошо.
Этап прототипирования является важным шагом в разработке любого веб-сайта.
Это помогает дизайнерам визуализировать свои идеи и воплощать их в жизнь, чтобы они могли полностью протестировать все детали, прежде чем перейти к этапу разработки. Вам нужен хороший инструмент для веб-прототипирования, который позволит вам создавать прототипы, тестировать и повторять ваши дизайнерские идеи, прежде чем застрять в разработке.
Чтобы сэкономить ваше время и усилия, Mockplus отобрал 32 лучших веб-сайта и шаблона в стиле ретро и винтаж. Креативность, демонстрируемая в них, не может не вдохновлять вас. И, в качестве бонуса, большинство шаблонов можно скачать.
Лучшие примеры сайтов в стиле ретро и винтаж макеты. Это отличный пример того, как создавать веб-сайты в уникальном газетном стиле.
2. Momand Popcorn
Веб-сайт в стиле ретро или винтаж не нуждается в элементах старого стиля на каждой странице. Фактически, в последние годы стала популярной новая тенденция ретро-дизайна — современный ретро-стиль дизайна веб-сайта. Он побуждает дизайнеров использовать ретро-изображения, шрифты, иллюстрации и другие элементы для украшения своих современных веб-сайтов.
Современный веб-сайт с винтажными элементами может показаться противоречивым и даже смешным. Но посмотрите, эффект может быть интересным, придавая сайтам свежий и привлекательный вид.
Momand Popcorn — один из таких отличительных современных веб-сайтов в стиле ретро, на котором продается более 50 вкусов восхитительного попкорна. Иллюстрации, значки и значки в старом стиле создают очень интересный и захватывающий пользовательский опыт.
3. Тур по хлопковому маслу
Тур по хлопковому маслу — это официальный веб-сайт Cottonseed Oil, торговой марки американского растительного масла для жарки без содержания трансжиров. Его старомодные шерстяные фоновые текстуры, новостные открытки, автомобили, фотографии и значки подчеркивают винтажную тему свежим и творческим образом.
4. 100 лет Magneti Marelli
Веб-сайт 100 лет Magneti Marelli предлагает посетителям 12 глав, рассказывающих историю Magneti Marelli; есть режимы чтения и аудио.
Он тщательно сочетает ретро-изображения, анимацию и голосовое повествование, чтобы создать полностью захватывающий пользовательский опыт. Это еще один отличный пример того, как создать современный веб-сайт в стиле ретро.
5. Thunder Fuel
Thunder Fuel — интересный игровой веб-сайт от студии дизайна, которая занимается созданием замечательных игр, анимации и веб-сайтов с использованием Adobe Flash и других технологий. Ретро-цвета, кнопки, тексты, шрифты, рисунки и даже естественные царапины помогают создать очень старую и привлекательную атмосферу. Игровой пользовательский опыт также выделяет его из толпы.
6. The New York Moon
The New York Moon — это интернет-радиостанция, которая использует старые шрифты и изображения старых радиоустройств. Элементы ретро помогают создать ощущение прошлого и действительно привлекают внимание пользователя.
7. Harvard Film Archive
Использование черно-белых тем и изображений — один из самых простых способов создать ностальгическую атмосферу на вашем веб-сайте.
Гарвардский киноархив, пример редизайна веб-сайта Гарвардского киноархива, широко использует черно-белую цветовую схему.
Большое количество черно-белых изображений старых фильмов воссоздает атмосферу ушедшей эпохи кинематографа, позволяя пользователю погрузиться в истории прошлого.
8. First Frame
First Frame — еще один веб-сайт в стиле ретро, использующий черно-белую тему. В отличие от Гарвардского киноархива, в котором есть много черно-белых изображений, создающих прекрасную атмосферу ретро-фильмов, этот сайт использует черно-белые видео для привлечения пользователей. Прекрасные видеопереходы, анимация и полноэкранный дизайн создают поразительные впечатления.
9. Sprocket House
Sprocket House — дизайн-студия, предоставляющая услуги графического дизайна, рекламы и разработки веб-сайтов. На веб-сайте его портфолио есть уникальный баннер, похожий на почтовую доску. Сломанные грязные открытки, выцветшие тексты и желтые изображения создают настоящую атмосферу старины.
10. Timeless Business
Примером Timeless Business является сайт, предназначенный для службы аренды ретро-автобусов. Он демонстрирует серию ретро-автобусов на своей целевой странице, чтобы дать пользователям ощущение ретро.
11. The Legendary Sun Studio
The Legendary Sun Studio — это официальный веб-сайт Sun Studio, места рождения рок-н-ролла и дома для «Квартета на миллион долларов». Его цель — «распространить историю и культуру Мемфиса с помощью музыки, которая сделала Мемфис известным». Стиль ретро-дизайна со старыми изображениями героев, цветовыми схемами и логотипами идеально подходит для темы и целей сайта.
12. Kul Ticka
Kul Ticka — еще один замечательный веб-сайт с типичным стилем открытки. Помимо желтых изображений и открыток, здесь есть старые телефоны, книги и красивые женщины 70-х и 80-х годов, чтобы произвести впечатление на пользователя.
13. Советское Такси
Советское Такси — это веб-сайт, который сдает в аренду ретро-автомобили и другие ретро-автомобили из старого СССР.
Страница наполнена изображениями и элементами ретро-автомобилей и другими объектами, напоминающими об эпохе.
Захватывающие взаимодействия, переходы и эффекты наведения вместе с богатой микроанимацией помогают воплотить в жизнь стиль ретро-дизайна и создать интересный, но захватывающий пользовательский интерфейс.
14. Кокта
Cockta — один из самых популярных безалкогольных газированных напитков в Словении. Его официальный сайт — еще один отличный пример современного сайта в стиле ретро. Яркая цветовая гамма производит привлекательное и живое впечатление, идеально подходящее для молодой целевой аудитории.
Однако заголовки в старом стиле, фоновые изображения и кнопки не просто создают визуальную привлекательность в стиле ретро, они делают сайт более надежным.
15. Коллетт Динниган
Коллетт Динниган — культовый австралийский модельер, и это веб-сайт ее портфолио. Помимо отличительного рукописного стиля, легкие штрихи, цветовые схемы и старомодные, но элегантные шрифты делают его еще одним хорошим примером того, как максимально использовать стиль ретро-дизайна.
Интерактивную целевую страницу также стоит проверить, если вы ищете вдохновение для создания уникальной целевой страницы.
16. Американские отходы
American Scraps — известный промышленный склад, который превращает артефакты из американской истории в комиксы. Его официальный сайт использует иллюстрации в стиле ретро, черно-белые изображения и старомодные объекты и видео для привлечения пользователей.
17. Эрик Бернакки
Эрик Бернакки — это веб-сайт-портфолио, который дает вам ощущение, что вы играете в игру 80-х или 90-х годов, просматривая информацию. Сварливые кошачьи боты, странные синтезаторы, генераторы мемов, статуи для вандализма, головоломные личностные тесты, пасхальные яйца также делают его другим и привлекательным.
18. Theremix
Theremix — это прогрессивный веб-сайт, созданный в честь 100-летия терменвокса. Он использует модный стиль иллюстрации, чтобы представить старомодные образцы терменвокса и некоторые истории, связанные с ним.
Это дает пользователю интересный и захватывающий опыт.
19. Dunderville
Dunderville — бренд креативного дизайна в кино и анимации. Его официальный веб-сайт портфолио, кажется, прямо из прошлого, разработан с очень интригующим макетом старой книги и стилем дизайна. Все эти черно-белые иллюстрации наводят на мысли об этих иллюстрациях из очень старых исторических книг.
20. ASPA PLZ
ASPA PLZ — это игра в стиле ретро, которая, кажется, пришла прямо из 80-х или 90-х годов. Зубчатые штрихи шрифта, музыка в старом стиле, иллюстрации и радиокнопки возвращают вас в эпоху яппи и наплечников.
21. Альманах дизайна СССР
Как следует из названия, Альманах дизайна СССР демонстрирует некоторые из замечательных дизайнерских работ, созданных в Советском Союзе. Дизайнер веб-сайта принял стиль ретро-дизайна для представления контента сайта.
22. Музей газовой промышленности
Музей газовой промышленности — это виртуальный веб-сайт, подробно рассказывающий об истории угля и газа.
На веб-сайте используются изображения старых машин и других объектов, связанных с угольной и газовой промышленностью, чтобы заинтересовать пользователей и сделать рассказываемые истории более интригующими.
23. Basement Studio
Basement Studio — это студия дизайна цифровых продуктов, у которой есть веб-сайт с очень захватывающим портфолио. Помимо черно-белой цветовой схемы, он также использует множество ретро-эффектов и элементов для привлечения пользователей, таких как классический эффект смягчения.
24. Web Expert
Web Expert — это персональный веб-сайт в винтажном стиле. Полые ретро-шрифты, старые изображения и вертикальное меню навигации дают пользователям потрясающий опыт.
25. Rooki Design
Rooki Design — онлайн-журнал для студентов-дизайнеров, оформленный в стиле ретро. Внешний вид и ощущение в старом стиле являются продуктом ретро-текстуры фона, иллюстраций, шрифтов и цветов.
Лучшие шаблоны сайтов в стиле ретро и винтаж
26.
Zach Dev
Zach Dev — веб-сайт с портфолио разработчиков, выполненный в старом компьютерном стиле. Дизайнер вдохновляется киберпанком и паровой волной.
Загрузить
27. Адаптивный ретро-шаблон веб-сайта Hipster
Hipster — это адаптивный ретро-шаблон веб-сайта, который предоставляет пользователям четыре темы, 30 шаблонов фона, 2 стиля макета страницы и многое другое.
Скачать
28. Винтажный шаблон сайта Retrolie
Vintage Retrolie Website Template — это шаблон веб-сайта в стиле ретро, который сочетается с более чем 150 готовыми современными макетами. Пользователям подходит для создания веб-сайта в стиле ретро в новостях и СМИ, электронном журнале, бизнесе, путешествиях, образе жизни, электронной коммерции или что-то в этом роде.
Скачать
29. Одностраничный ретро-шаблон веб-сайта
Одностраничный ретро-шаблон веб-сайта — это адаптивный ретро-шаблон. Его домашняя страница полностью настраиваема и предоставляет пользователям богатый выбор цветов, ползунков и галерей.
Скачать
30. Шаблон приложения веб-сайта Caelus
Шаблон приложения веб-сайта Caelus разработан в 2 великолепных стилях с 4 красивыми комбинациями шрифтов, которые отлично работают на многих устройствах, таких как iPhone, iPad и настольные компьютеры. Ползунок телефона на правой стороне действительно крут.
Загрузить
31. Винтажный веб-шаблон VintWood
Винтажный веб-шаблон VintWood — это адаптивный веб-шаблон HTML5 с 7 контактными формами, огромными вариантами компоновки и настраиваемыми темами винтажного дизайна.
Загрузить
32. Веб-шаблон Vintage Muse
Веб-шаблон Vintage Muse — это многоцелевой веб-шаблон в стиле ретро, который поможет вам с легкостью создавать красивые веб-сайты корпораций, агентств и портфолио. Карусель изображений героев очень привлекательна и эффективно создает ощущение ретро.
Download
Wrap Up
Это все лучшие примеры и шаблоны веб-сайтов в стиле ретро и винтаж.
Мы уверены, что они дадут вам массу вдохновения и позволят с легкостью создать свой собственный винтажный или ретро-сайт.
20 лучших ретро-сайтов для исключительного вдохновения в дизайне 2022
Раскройте свой творческий потенциал и улучшите свои навыки веб-дизайна, просматривая эту коллекцию ретро-сайтов. Независимо от того, работаете ли вы с портфолио, веб-сайтами фотостудий, дизайнерами, электронной коммерцией или туристическими компаниями, ретро-дизайн поможет вам создать потрясающий веб-дизайн.
Ретро стиль сайтов набирает популярность среди дизайнеров. Добавляя современный стиль в дизайн, веб-сайты, оформленные в стиле ретро или винтаж, создают хорошее впечатление. Различные веб-сайты, которые заимствуют дизайн из прошлого, выглядят образцово. Сочетание элементов прошлого и современности дает творческий, красивый и запоминающийся дизайн. Кроме того, они даже выглядят современно и новаторски благодаря своим функциональным возможностям. Конечно, эти ретро-темы тоже вне времени! Если вы планируете внедрить его в свои будущие проекты, вы можете проверить эти удивительные, веселые и интерактивные ретро-сайты, которые мы выбрали.
Эти веб-сайты признаны Awwwards лучшими ретро-сайтами. Между тем, цифровой рынок может предложить вашему бренду гораздо больше в отношении ретро-веб-дизайна.
Взгляните на эти креативные, забавные винтажные модели с оттенком современности, которые помогут раскрыть ваш творческий потенциал. Ваш веб-сайт должен наилучшим образом представлять вас по всему миру. Следовательно, вы всегда должны прилагать все усилия, чтобы выделить их! Итак, если вы ищете идеи для графического дизайна, вам не следует пропускать эти замечательные ретро-сайты.
Caava Design
Эффективность цифрового маркетинга для успеха большинства брендов не вызывает сомнений. Точно так же веб-сайты в ретро-стиле по-прежнему являются мощным средством продвижения бренда. Caava Design — творческая компания из Сан-Диего, специализирующаяся на пекинском бренде, интерактивности и упаковке. Веб-элементы, хотя и выглядят ретро или винтажно, имеют стильный и профессиональный дизайн. Кроме того, на этом веб-сайте также используются менее насыщенные ретро-цвета, что создает ощущение старого винтажа.
Есть фантастические и заметные функции, которые могут помочь другим брендам сиять, такие как эффект параллакса, классное меню вне холста, слайдер и многое другое. Раздел услуг выделяется кругами, а также демонстрирует приятный эффект наведения. Что еще?
Предварительный просмотр
Виртуальный музей газа
Эффективно расширяйте свой рынок с помощью веб-сайта в стиле ретро, достаточно креативного для представления вашего бренда. Вот прекрасный набор ретро-сайтов, которые мотивируют и внушают благоговейный трепет. Виртуальный музей газа — это веб-сайт, на котором можно узнать об истории, настоящем и будущем газа и природного газа. Он адресован людям, интересующимся газовой отраслью, энтузиастам техники или технологий. Сайт демонстрирует стиль ретро не только в веб-элементах, но и в изображениях товаров. Веб-дизайн потрясающий и отлично подходит для цветов, используемых на этом веб-сайте, типографики и простого эффекта перехода. Он также использует ползунки, липкий заголовок, меню вне холста и интеграцию с видео.
Превью
Подвал
Стиль ретро не теряет своей популярности даже в современной жизни. Вот список ретро-сайтов, которые предоставят множество стилей, которые вы можете изучить. Basement — это цифровая студия, которая строит будущее по одному проекту за раз. Этот ретро-сайт имеет простой, но всеобъемлющий дизайн на главной странице. Он использует черно-белые цвета для всех веб-элементов и отличается простым дизайном. В частности, в главном заголовке отображается название бренда, его деятельность и геометрические фигуры. Логотипы клиентов хорошо расположены, чтобы повысить доверие к бренду, поэтому они выглядят привлекательно. Другие интересные функции включают меню вне холста, значки социальных сетей, приятный эффект наведения и многое другое.
Preview
Blast Galaxy Store
Ретро-сайты модны и креативны. Вот почему это стало популярной идеей веб-дизайна среди дизайнеров. В этой коллекции вы найдете потрясающее вдохновение, чтобы повлиять на ваш проект.
Blast Galaxy Store — это сайт в стиле ретро с простым, красивым и уникальным дизайном. Пиксельная типографика, которую он использует, является полной копией старого стиля. Главный заголовок содержит название бренда, поиск, меню и корзину. На этой веб-странице продукты представлены в виде сеток с четкими кнопками призыва к действию. Кроме того, эти продукты имеют простой, но привлекательный дизайн.
Preview
Resp
Все больше и больше брендов используют возможности ретро-сайтов для распространения информации. Эти веб-сайты будут полезны, если вы захотите рассмотреть их для своего проекта. Resp — умный помощник в кинотеатрах и трекер потокового ТВ-шоу с дизайном в стиле ретро. Домашняя страница действительно потрясающая, с пиксельными значками, логотипом и типографикой. Он использует полноэкранный режим для отображения веб-компонентов, включая симпатичные крошечные значки, четкий призыв к действию, поиск, приятный эффект наведения и многое другое! Белая типографика также потрясающе сияет на черном фоне.
Preview
Harvard Film Archive
Если вам довелось работать с ретро-сайтами, лучше обратить внимание на другие бренды, которые органично интегрировали его в свой веб-сайт. Вот креативный список ретро-сайтов для вдохновения. Гарвардский киноархив — это синематека и киноархив, предназначенный для сохранения и публичной демонстрации фильма. Соответственно, ретро-стиль в сочетании с современными веб-элементами заставит сайт сиять. Этот веб-сайт демонстрирует винтажный стиль своих изображений, типографики и макета, но делает их современными благодаря интеграции анимации GSAP. Изображения имеют стиль гранж, выделенный с помощью плавного ползунка. Чтобы предложить простую в использовании навигацию, он использует липкое боковое меню.
Preview
Rooki
Несмотря на передовые и современные веб-технологии, дизайн в стиле ретро никогда не терял своего смысла. Таким образом, рассмотрение этого для вашего бизнеса не является пустой тратой времени.
Rooki — молодой независимый дизайнер и директор, который воплощает на своем веб-сайте великолепие ретро или винтажного дизайна. Сайт отображает текстуры в стиле гранж и использует ретро-фон. В главном заголовке отображается название бренда, штрих-код, меню и гранжевое изображение избранного интервью. В частности, другие страницы сайта имеют похожее качество дизайна, но изобретательны. Он включает в себя интервью, статьи, ресурсы, студентов и многое другое!
Предварительный просмотр
Three59
Интернет может многое предложить для создания сайтов в стиле ретро. Ретро-цвета — отличный способ придать вашему сайту винтажный вид. Вот Three59, один из замечательных примеров этого списка в винтажном или ретро стиле. Это полноценный поставщик рекламных и медиа-услуг, базирующийся в Dubai Production City, Объединенные Арабские Эмираты. Дизайн домашней страницы выглядит просто с полноэкранным макетом. Слайдер красиво демонстрирует продукты по одному и даже демонстрирует плавную и гладкую анимацию через GSAP.
Кроме того, звук улучшает дизайн, красивый логотип и меню вне холста. Он также интегрирует значки социальных сетей, чтобы повысить органическую видимость бренда.
Preview
Park West Event
Просто выберите один стиль ретро-дизайна, который вы хотите внедрить в свой дизайн, чтобы вызвать ностальгию по бренду, который вы предпочитаете. Затем добавьте современный штрих к своему дизайну, чтобы он выглядел великолепно. Вот классный список ретро-сайтов, на которые стоит потратить время. Park West — концертная площадка, расположенная в Чикаго, штат Иллинойс. Этот театр был открыт в 1916 году как водевиль и кинотеатр братьями Ашер. В частности, он может вместить до 1000 гостей. С желанием придать сайту винтажный вид, цвета, типографика и текстуры в стиле гранж выполнены в стиле ретро. Кроме того, приятный эффект наведения также очаровывает дизайн и простую анимацию.
Предварительный просмотр
Thompson Stenning
Узнайте больше о том, насколько прекрасны ретро-стили для встраивания в ваши проекты веб-дизайна.
На этих замечательных ретро-сайтах вы можете найти различные бренды, которые выделяются таким подходом. Веб-сайт Томпсона Стеннинга — отличный пример винтажного дизайна с легким оттенком современности. Заголовок героя имеет простой, но увлекательный дизайн. Он просто великолепно выглядит с фоном в стиле ретро, жирным заголовком и тонкой анимацией. Кроме того, анимация при прокрутке также добавляет эстетической привлекательности дизайну. Это еще не все, логотипы клиентов, которых они обслуживали, также потрясающие в монохромном режиме.
Предварительный просмотр
Советское такси
Создайте свой веб-сайт в стиле ретро, используя эту потрясающую коллекцию. Советское Такси — это величественный и потрясающий веб-сайт, в который вы можете погрузиться. Советское Такси предоставляет в аренду ретроавтомобили и эстетику из СССР. Домашняя страница имеет полноэкранный макет с фоновыми изображениями в стиле гранж. Добавляя слайдер в дизайн, содержимое выделяется стилем.
Кроме того, аудиоконтент также выполнен в стиле ретро или винтаж. Точно так же на главной странице представлены значки социальных сетей, логотип для брендинга, меню и многое другое.
Предварительный просмотр
Дом для побега
Ретро-дизайн — это весело, динамично и потрясающе, особенно если вы добавите немного творчества и расширенных функций. С этими ретро-сайтами у вас будет множество идей веб-дизайна, которые однозначно побудят вас создать свой проект. Getaway House — это гостиничный бренд, который строит красивые крошечные домики в лесу и призывает мир отключиться от технологий и воссоединиться с природой. Этот веб-сайт имеет причудливый дизайн с комплексными элементами веб-дизайна. В нем представлены различные ретро-изображения на сцене героя с помощью слайдера с четкими призывами к действию, привлекательными лозунгами и формой бронирования. Кроме того, винтажные значки, типографика и изображения идеально демонстрируют потрясающий дизайн.
Другие примечательные функции включают липкий заголовок, аккордеон, ленту Instagram и многое другое.
Предварительный просмотр
Десятки
Посетите эти замечательные ретро-сайты, которые послужат прекрасным источником вдохновения. Tens — независимая компания подкласса, которая гордится тем, что видит вещи по-другому. Этот веб-сайт электронной коммерции имеет простой, но привлекательный дизайн на главной странице. Заголовок героя имеет макет с разделенным экраном, где изображение, слоган и CTA хорошо организованы. Помимо винтажных цветов, изображения также выглядят в стиле ретро. Рекомендуемые продукты выглядят превосходно, а отзывы клиентов в слайдере визуально привлекательны. Другие замечательные функции включают липкий заголовок, ленту Instagram, значки линий, интеграцию видео и многое другое.
Preview
Hypergiant
Вот подборка ретро-сайтов, которые могут заинтересовать бренды, желающие интегрировать ретро-дизайн в свои проекты.
Hypergiant — поставщик искусственного интеллекта для списка Fortune 500. Веб-сайт оформлен в игривых цветах, а ретрофутуристическая атмосфера намекает на то время, когда мы чувствовали, что будущее не за горами. В частности, винтажное фоновое изображение и простая типографика очень напоминают ретро-дизайн. Кроме того, границы веб-элементов также добавляют креативности общему дизайну — от кнопок, услуг, списка сокращенных услуг, списка клиентов и многого другого. Кроме того, значки социальных сетей, отображаемые внизу, а также липкий заголовок и меню вне холста впечатляют.
Предварительный просмотр
Пивоварня Martens
Эта коллекция ретро-сайтов демонстрирует различные ретро-стили, но они великолепны. Итак, просмотрите этот список и получите мотивацию. Пивоварня Martens — гордый и амбициозный семейный бизнес, который уже восемь поколений находится на вершине бельгийской пивоваренной промышленности. Благодаря высококачественным продуктам, которые они предлагают, их веб-сайт демонстрирует аналогичное качество дизайна.
Используя анимацию GSAP, веб-элементы демонстрируют классную и утонченную анимацию. Презентация продуктов плавная и интуитивно понятная с использованием слайдера. Он также имеет липкую боковую панель, поэтому меню всегда видно. Другие прекрасные функции включают Google Maps, эффект плавного перехода и многое другое!
Preview
Global Welsh
Винтажные стили неподвластны времени и выглядят еще более великолепно, если их дополнить современными элементами. Взгляните на эти ретро-сайты, которые вдохновят вас на следующий веб-проект. Global Welsh — это растущее глобальное сообщество людей, которым нравится Уэльс. Он стремится создавать новые связи, возможности и идеи, чтобы принести пользу будущему Уэльса. Заголовок включает в себя отличную видеоподборку в винтажном стиле с кнопкой призыва к действию и заголовком. В заголовке логотип в значительной степени представляет бренд и значки социальных сетей. Поскольку он использует липкий заголовок, меню всегда под рукой, чтобы легко перемещаться по сайту.
Preview
The Best Reason
Этот веб-сайт в стиле ретро — еще одно прекрасное вдохновение, которым стоит дорожить, если вы планируете использовать его для своего бизнеса. The Best Reason — это сюрреалистичный винтажный дизайн, в котором представлены 8 различных причин, по которым стоит выбрать Domaine Glinavos. Примечательно, что домашняя страница представляет собой красивую интеграцию видео в полноэкранном режиме с аудио и призывом к действию. Каждая из 8 причин доверять бренду представлена профессионально и имеет потрясающие страницы, которые пользователи могут легко изучить. В своем винтажном цвете сайт выглядит превосходно и даже демонстрирует крутой переходный эффект.
Preview
Наши истории в STEM
Вот еще один винтажный или ретро-сайт, который может вдохновить другие бренды. У наших историй в STEM есть красивая целевая страница, которая продвигает кампанию Kickstarter «Наши истории в стебле».
Это книга, посвященная канадским женщинам, которые меняют STEM сегодня, чтобы вдохновлять профессионалов STEM завтра. Заголовок героя приветствует аудиторию красочными винтажными значками с названием бренда, призывом к действию и меню. Видеоинтеграция готова дать четкое представление о том, что она делает для полноценного представления бренда.
Что еще? Этот веб-сайт электронной коммерции использует карточный дизайн для красивого отображения продуктов. Он также использует слайдер, чтобы продемонстрировать больше своего удивительного продукта.
Preview
Arts District Craft and Kitchen
Получите больше идей ретро-дизайна при создании своего веб-сайта с помощью этой коллекции веб-сайтов в стиле ретро. Arts District Craft and Kitchen стремится предоставить сообществу все самое лучшее благодаря вкусной и аппетитной еде. Он имеет очень приятный оттенок ретро-дизайна в сочетании с современными веб-элементами. Примечательно, что этот веб-сайт делает возможной плавную анимацию, поскольку он интегрирует GSAP.
Домашняя страница довольно впечатляющая, аппетитная и винтажная. Заголовок героя имеет старую типографику с винтажным изображением и логотипом. В шапке есть меню, социальные иконки, логотип и контактный номер. Этот дизайн одностраничного веб-сайта может вдохновить другие бренды, которые хотят иметь ретро-дизайн веб-сайта.
Предварительный просмотр
Smash Mallow
Smash Mallow — это торговая марка, предлагающая улучшенный зефир, хрустящие рисовые лакомства и жевательные конфеты, приготовленные из органического тростникового сахара, без глютена и вкусных ингредиентов, не содержащих ГМО. Будучи частью этих ретро-сайтов, Smash Mallow имеет красивый винтажный дизайн, который может мотивировать коллег-предпринимателей или бренды. Он готов вывести бренд на новый уровень. Дизайн домашней страницы демонстрирует винтажный дизайн с приятной тонкой анимацией. Помимо того винтажного цвета, который он использует, рисованные элементы и гранжевые изображения хорошо представляют ретро-дизайн.