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

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

woodled.ru

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

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

Погрузились в задачу

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

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

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

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

Проработали структуру

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

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

Главная

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

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

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

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

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

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

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

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

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

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

Каталог

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

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

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

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

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

Контакты

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

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

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

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

Сделали минималистичный сайт с акцентом на фотоконтент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавили к интернет-магазину дополнительную страницу для новой линейки

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

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

woodled.ru/gogrow

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

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

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

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

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

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

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

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

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

Закончили рассказ о кейсе, но не сотрудничество с брендом

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

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

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

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

3131
22 комментария

Картинка наглядно показывает: хорошие светильники, надо брать ;)

6
Ответить

Аж ослепило как хорошо светят

3
Ответить

Весь кейс на этом и построен

1
Ответить

Обожаю дерево напросвет

2
Ответить

люблю минимализм, сайт красивый

2
Ответить

Всё круто, но мне почему-то запала в душу посадочная по фито-светильникам https://woodled.ru/gogrow на этом сайте. Как-то прям визуальные решения и ненавязчивые иллюстрации создают особую атмосферу лендинга...
Молния, это же тоже ваш проект?

1
Ответить

Тоже наш) В статье есть описание как мы разработали эту страницу.

1
Ответить