Проект 18+, лендинг с геймификацией и взлётно-посадочная страница. Топ 10 сайтов Молнии за 2023 год

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

Привет, это Молния. За 2023 мы стали студией №1, создающей сайты на Тильде в России, по версии Рейтинга Рунета, получили две награды за один из проектов на крупных digital-премиях и запустили 110 сайтов.

Уже второй год подряд мы устраиваем голосовалку среди сотрудников, какие проекты им запомнились в 2023. Участвовали все: от руководителей отделов до нашего эйчара. И вот делимся результатом в виде подборки 10 топовых сайтов от студии.

В этом году мы сделали лендинг для первого масштабного ивента в России, посвящённого порноиндустрии и секс-просвету — фестиваля Eroticon. Как Comic-Con, только для взрослых.

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

На первый экран поместили нецензурный оффер. Мат здесь — отсылка к табу и запретам, которыми окутаны темы 18+. По всему сайту использовали развязный ToV с обращением на «ты» и море юмора, чтобы поддержать развлекательный вайб феста.

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

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

После сдачи за 1,5 месяца сайт показал довольно хорошие результаты — пользователю требуется 3,5 минуты для совершения целевого действия, когда сам сайт пролистывается за 1,1 минуты. А это значит, что тематические отсылки в заголовках и описаниях помогают удерживать посетителей на сайте и увеличивают глубину скролла.

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

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

Идею по геймификации тоже предложил копирайтер. Поколение Z обожает проходить забавные тесты из разряда «Кто ты из Смешариков». Они делятся результатами в сторис, отправляют коллегам в рабочие чаты. Мы сделали аналогичный опросник со стикерами за прохождение, который поможет пользователям запомнить новых персонажей и станет стимулом расшарить сайт.

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

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

По итогу лендинг полюбился не только заказчику и его ЦА, но и жюри двух крупных digital-премий. На конкурсе «Рейтинг Рунета-2023» он получил серебро в номинации «Лучший сайт на конструкторе», а на Tagline Awards 2023 в аналогичной категории — бронзу.

2 года назад мы уже делали сайт для Breaking Trends. Получился яркий и трендовый для своего времени лендинг. Но со временем он перестал попадать в позиционирование компании. Почему это произошло, подробно рассказали в отдельной статье.

Клиент вернулся за редизайном с новым фирстилем и радикальным запросом: уйти от яркости и коллажей в минимализм и монохром. Плюс перенести фокус внимания с ярких картинок на текст.

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

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

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

Чтобы минимализм не выглядел скучно, добавили визуалу динамики. Сделали трендовую и драйвовую анимацию, которая стимулирует скроллить дальше. Интерактив на сайте — всегда про ощущения, про впечатления. Элементы айдентики «текут» по лендингу, а контент аккуратно подлетает. Это создаёт ощущение лёгкости бренда.

Так у нас снова получился трендовый сайт с нестандартными решениями, прямо как пару лет назад. Но теперь он соответствует духу 2023 года, что подтверждает недавнее попадание лендинга в подборку #madeontilda .

Изначально у заказчицы было 2 сайта для бренда: один — имиджевый, с рассказом про Woodled, а другой — интернет-магазин со светильниками. И она зашла к нам на переработку второго, хотела немного доработать его структуру и обновить визуал.

Но на созвоне мы предложили внести не косметические, а радикальные изменения: выйти за пределы только интернет-магазина, и добавить страницы с рассказом о самом бренде, о коллекции светильников. Чтобы сделать сайт информативным для клиента, который ещё не знаком с Woodled. И заказчица нас поддержала.

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

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

Фон страницы не чисто-белый, а бледный беж. Светильники изготавливаются из дерева, и такая гамма — ненавязчивая ассоциация с материалом. Лёгкая анимация добавляет динамики сайту, так его не скучно скролить. При этом она минималистичная, как и сам сайт. Поэтому не отвлекает внимание от фотоконтента, который является основой страницы.

Результат настолько понравился заказчице, что она снова пришла к нам, когда в линейке появился новый продукт GoGrow — светильники для ухода за растениями. На этот раз за страницей с лёгким редизайном для уже имеющегося сайта.

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

На первом блоке, как и на главной странице, мы идём через массивный фотоконтент, который привлекает к себе внимание. При этом за счёт анимации он смотрится легко и непринуждённо.

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

Заказчик пришёл к нам с достаточно нишевым запросом — сделать не продающий сайт, а лёгкую и весёлую «книжку с рецептами». ЦА лендинга — люди, которые купят смесь для выпечки Astri и просто захотят что-нибудь приготовить. Попадать на страницу они будут через qr-код на пачке, а не через поиск или рекламу.

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

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

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

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

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

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

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

В качестве вишенки на торте сделали акцент на портфолио, ведь оно приводит клиентов. Сделали блок объёмным, привлекающим внимание. Добавили активную анимацию, встроили рубрикатор, разделяющий проекты на частные и коммерческие.

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

Заказчик пришёл с запросом отстроиться от конкурентов, которые продают «изделия из металла». Цель сайта для CALDO — показать, что радиаторы могут быть произведением искусства, последним штрихом для идеального интерьера.

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

Для фона выбрали дымчато-белый цвет, текст — тоже не чисто чёрный, а немного приглушённый. Это передаёт мягкость, комфорт. А акценты на деталях и важной информации расставили фирменным красным.

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

Задачей «под звёздочкой» было разместить все товары так, чтобы они не занимали много места на сайте, а пользователю было удобно выбирать и сравнивать позиции. Поэтому на главной мы сделали рубрикатор с линейками товаров.

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

Ребята из Break and Speak пришли к нам за лендингом для записи на онлайн-кружок по английскому языку. Важной задачей было показать, что это не «душные уроки по инглишу», а занятия, на которых ученик «ломает барьер и speak fluently».

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

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

Клубу требовалось онлайн-расписание для учеников, мы долго перебирали разные варианты и остановились на Яндекс.Календаре. В нём быстро и просто редактируются уроки.

И, поскольку в разговорном клубе может что-то меняться, ребята попросили нас обучить их редактированию стандартных блоков. Проджект-менеджер записал подробные видеоуроки и отпустил Break and Speak в свободное плавание.

Заказчик пришёл с запросом на сайт, который придётся по душе сразу двум ЦА: детям 7–17 лет и их родителям. Технологичность, забота и творческий вайб — ценности, которые требовалось подсветить через визуал.

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

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

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

Так сайт цепляет и «будущих айтишников», и их родителей. Первых — за счёт 3D-графики и стилёвых цветов. Вторых — за счёт уютного вайба, который создают мягкие формы и милые иллюстрации.

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

Они летят чётко по направлению из Китая в разные точки России. Это не только заставляет пользователей залипнуть из-за плавного движения, но и решает главный запрос заказчика — понятно обозначить «маршрут» поставок.

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

Нестандартный подход к сервиснику «завирусил» проект в интернете. Лендинг не только попал в подборку #madeontilda , но и привёл к нам в соцсети дизайнеров с запросом сделать туториал на анимацию самолётов.

Так прошёл наш 2023. Было много проектов, требующих нестандартного подхода и активных брейнштормов. А ещё мы 23 раза привлекли к работе иллюстраторов, чтобы разработать полностью уникальный 2D- и 3D-визуал для заказчика.

В результате 16 сайтов Молнии попали в галерею #madeontilda , а Naitori стал призёром Tagline Awards 2023 и конкурса «Рейтинг Рунета-2023». Когда над проектом работает целая команда, а дизайн — это не просто красивые картинки, получаются решения, которые нравятся всем: от клиентов и их ЦА до жюри премий и наших бролллег.

Хотите увидеть свой сайт в подборке лучших за 2024? В Молнии сейчас действует скидка 10% при оплате разработки в декабре и старте работ в январе. Оставьте заявку, и, возможно, ваш проект взорвёт топ следующего года!