Сделали новый сайт, который заменил два старых. Кейс: многостраничник для Woodled

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

Привет! На связи Молния — веб-студия, которая создаёт креативные сайты на Тильде. С запросом на редизайн клиенты приходят, когда старый лендинг или многостраничник перестаёт закрывать растущие потребности бизнеса. Либо когда оформление требуется осовременить. Уже рассказывали в другой статье, как «освежили» сайт для digital-агентства Breaking Trends.

Теперь за переработкой сайта к нам обратился бренд дизайнерских светильников Woodled, который производит свою продукцию из натуральных материалов. Бизнес рос, а вместе с ним появлялись новые лендинги под разные цели и блоки с дополнительной информацией, которые клиентка самостоятельно пыталась подогнать под исходный дизайн. Но не всё получалось, поэтому старые разрозненные страницы «приобрели вид Франкенштейна». Тогда заказчица решила обратиться в Молнию, чтобы мы навели порядок на сайте.

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

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

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

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

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

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

Главная

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

Следом разместили блок с наградами, которые получил Woodled. Эта информация предшествует блоку о компании, где описаны её преимущества. Здесь придерживаемся такой логики повествования: «эти награды получил наш бренд и вот за что».

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

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

Доставка и возврат

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

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

Каталог

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

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

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

Контакты

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

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

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

У нас был запрос на «люксовую обёртку» для интернет-магазина. Этого добились благодаря минимализму и изящным шрифтам. Такой приём уже стал трендом среди брендов премиального сегмента. Но по-настоящему особенным сайт сделал качественный и эстетичный фотоконтент с отсылкой к модным фотографиям из журналов.

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

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

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

На блоке «О нас» общая картина кажется слегка хаотичной из-за того, что изображения разместили в разной плоскости — горизонтальной и вертикальной.

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

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

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

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

Мы создавали сайт осенью 2023 года и смогли предугадать в нём 2 тренда дизайна — минимализм и натуральность материалов и фактур, которые оказались на волне в 2024 году по версии Jukebox. Это агентство, которое занимается брендированием, а среди его клиентов числятся Google и WordPress.

Мы объединили на многостраничнике минимализм и имитацию натуральных материалов — получился «экоминимал стайл», который сейчас находится на пике популярности. Трендовость — одна из причин, почему сайты попадают в подборку #madeontilda: галерею лучших работ на Тильде. И интернет-магазин для Woodled тоже оказался в ней.

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

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

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

На странице также используем только видео– и фотоконтент клиентки. Никаких стоковых фото. Дизайн для GoGrow сохранил преемственность Woodled и отличается только добавлением иллюстраций и японских отсылок. Цвет фона также не совпадает с другими страницами, но немного «шумный» зелёный здесь тоже мягкий, пастельный, как и бежевый на главной.

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

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

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

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

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

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

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

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

Другие кейсы Молнии можно найти в портфолио на сайте: flashfamily.ru.
А в нашем Telegram-канале мы анонсим новые статьи. Подписывайтесь, чтобы не пропускать лонгриды о веб-дизайне и наших проектах.