Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>3 окт 2023</li>

3 <li>0</li>

4 </ul>Подборка каталогов, которые собирают примеры самых запоминающихся и качественных лендингов.

5 Иллюстрация: Полина Честнова для Skillbox Media

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

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

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

9 Отличительная особенность<a>One Page Love</a> - фильтры по используемым в лендинге шрифтам, инструменту (Readymag, Webflow, Framer, Wix, Shopify, WordPress, Elementor, SquareSpace, Carrd) и даже составу работающей над лендингом команды.

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

11 Скриншот: сайт<a>One Page Love</a>/ Skillbox MediaСкриншот: сайт<a>One Page Love</a>/ Skillbox MediaСуперминималистичный одностраничник студии Howell из подборки на One Page LoveСкриншот: сайт<a>One Page Love</a>/ Skillbox Media<a>Godly</a>собирает скорее промосайты, а не только лендинги. Почти у всей подборки из тысячи сайтов насыщенная анимация и интересные механики взаимодействия.

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

13 Скриншот: сайт<a>Godly</a>/ Skillbox MediaНа странице каждого сайта, помимо ссылки и записи видео, есть подробное описание технологий, которые были использованы при его создании: шрифты, фреймворки, платформы, языки программирования, подключённые библиотеки, даже маркетинговые инструменты и аналитика.

14 Скриншот: сайт<a>Godly</a>/ Skillbox MediaПоиск по каталогу расположен на главной странице и по кнопке Directory.

15 Скриншот: сайт<a>Godly</a>/ Skillbox MediaЛендинг компании, производящей гостевые домики, из каталога GodlyСкриншот: сайт<a>Samara</a>/ Skillbox Media<a>Landingfolio</a> - представитель семьи проектов, которые собирают также подборки компонентов для Webflow, Figma, Tailwind и прочие. Подборки обновляются несколько раз в неделю.

16 Каталог представляет собой простой поиск по названию, устройству (desktop/mobile) и цвету. Помимо каталога главных страниц, доступны подборки по логину, регистрации, страницам ошибок, цен и описаний. После регистрации открывается дополнительная фильтрация по типу лендинга: SaaS, Product, Business, Marketing, Design Tools, Software, Technology, Mobile App, Freelance, Users, AI, Crypto. Если выбрать фильтрацию по девайсу, превью в каталоге автоматически отобразят, как выглядят лендинги в адаптиве.

17 В разделе Component Library размещены подборки по модулям и блокам.

18 Скриншот: сайт<a>Landingfolio</a>/ Skillbox MediaЛендинг финансового инструмента из каталога LandingfolioСкриншот: сайт<a>Fold</a>/ Skillbox Media<a>Landing Love</a> - ламповый каталог, в котором можно найти не только лендинги, но и небольшие сайты с крутой типографикой, анимацией и креативными механиками взаимодействий.

19 Поскольку Landing Love специализируется на подборках крутых анимаций, то на странице лендинга, помимо ссылки, размещена видеозапись скролла и базового взаимодействия. Ниже размещены скрины отдельных блоков.

20 Скриншот: сайт<a>Landing Love</a>/ Skillbox MediaЛендинг с анимированными иллюстрациями Adidas Arena из подборки Landing LoveИзображение: Adidas /<a>Landing Love</a><a>Awesome Marketing Websites</a> - небольшой каталог лендингов и сайтов. Он нацелен скорее на анализ продающих механик, нежели на визуал и анимации.

21 Скриншот: сайт<a>Awesome Marketing Websites</a>/ Skillbox MediaВ меню можно найти отдельные каталоги страниц (посадочная страница, о нас, кейс, вакансии, контакты, стоимость и прочее) и блоков (преимущества, CTA, формы, отзывы, калькулятор и так далее).

22 Скриншот: сайт<a>Awesome Marketing Websites</a>/ Skillbox MediaПример оформления раздела с тарифными планами из подборки Awesome Marketing WebsitesИзображение:<a>Awesome Marketing Websites</a><a>Lapa Ninja</a> - проект, в библиотеке которого находится около шести тысяч лендингов. Доступен поиск по категориям SaaS, portfolio, beauty, NFT.

23 Также на сайте есть подборки бесплатных иллюстраций, иконок, UI-китов, мокапов и шаблонов страниц в форматах Figma, Webflow, HTML/CSS, Photoshop, Adobe XD, Adobe Illustrator и прочих.

24 Скриншот: сайт<a>Lapa Ninja</a>/ Skillbox MediaПример оформления карточек товаров из каталога Lapa NinjaИзображение:<a>Lapa Ninja</a><a>Awwwards</a> - всемирно известный каталог с лучшими сайтами мира. Каждый сайт оценивается членами жюри и простыми пользователями по нескольким<a>критериям</a>: дизайн - 40%, юзабилити - 30%, креатив - 20%, контент - 10%. В подборку можно попасть, отправив заявку через кнопку Submit Website.

25 Для поиска по лендингам и промосайтам в фильтре Popular можно выбрать категорию Promotional. После регистрации сайты и отдельные блоки можно добавлять в избранное и создавать свои подборки.

26 Скриншот: сайт<a>Awwwards</a>/ Skillbox MediaНа странице сайта указаны автор проекта, используемые шрифты, цвета, технологии и категории сайта.

27 Скриншот: сайт<a>Awwwards</a>/ Skillbox MediaУ некоторых сайтов есть подробное разбиение по модулям и блокам, которые можно сохранить к себе в подборку.

28 Скриншот: сайт<a>Awwwards</a>/ Skillbox MediaНа Awwwards все проекты описаны тегами достаточно подробно. Например, в строке поиска можно задать Condensed, и в выдаче появятся все сайты, в дизайне которых используются зауженные шрифтыИзображение:<a>Awwward</a>s<a>Курс с трудоустройством: "Профессия Веб-дизайнер" Узнать о курсе</a>