Большой сайт, который нужно было обновлять поэтапно
FortRocks — один из тех проектов, где работа над сайтом требует глубокого погружения в совершенно новую для тебя сферу бизнеса. Компания занимается проектированием, производством и реализацией премиальной мебели на заказ. У нее собственное производство, шоурум, большой ассортимент и множество реализованных интерьерных проектов.
Когда я начала работу над сайтом, у FortRocks уже был большой действующий сайт на Tilda, но его оформление заметно отставало от уровня продукции. Задача была постепенно преобразовать сайт, сделать его более премиальным и при этом сохранить существующую структуру. В результате работа оказалась гораздо масштабнее обычного редизайна отдельных страниц.
Почему FortRocks понадобился новый дизайн
Компания обратилась с запросом на актуализацию информации и обновление визуального оформления сайта. За время его существования в бизнесе произошли существенные изменения. FortRocks переехала, открыла новый шоурум, расширила ассортимент и перечень услуг. При этом на сайте накопилось много устаревшей информации, а некоторые направления были представлены недостаточно подробно.
Прежний дизайн выглядел довольно строго. Преобладала черно-белая гамма, кнопки имели острые углы, а страницы не отличались большим количеством индивидуальной графики.
Мне особенно не хватало крупных красивых изображений, подробных визуальных обзоров и интересных композиций. Для компании, которая производит премиальную мебель, это существенный недостаток. Покупателю необходимо увидеть качество материалов, рассмотреть изделия и понять, насколько тщательно проработаны интерьерные решения. Поэтому хотелось сделать страницы гораздо более выразительными.
Почему работа началась с отдельных разделов
FortRocks — большой сайт с объемным каталогом, реализованными проектами и информационными материалами. Полностью переделать его за один этап означало бы серьезные расходы. Клиент не был готов сразу финансировать разработку новой версии целиком, поэтому с клиентом договорились о поэтапном редизайне.
Сначала договорились обновить наиболее важные коммерческие направления. Для компании приоритетом были услуги и категории мебели с высокой маржинальностью, на которые направлялась контекстная реклама. Поэтому первым стал раздел кухонь. С точки зрения бизнеса решение вполне обоснованное: сначала улучшить те страницы, которые непосредственно участвуют в привлечении потенциальных заказчиков. Но как разработчик я воспринимала проект несколько иначе.
Сейчас я бы начала с главной страницы
Мне всегда хочется видеть сайт целиком. Даже если работа идет поэтапно, важно заранее понимать, какой будет общая визуальная система. И если бы я начинала аналогичный проект сейчас, то в первую очередь предложила бы обновить главную страницу.
Затем переработала бы основные страницы разделов каталога, чтобы задать единый стиль оформления. И только после этого переходила бы к многочисленным внутренним страницам, проектам и статьям. Так новый дизайн распространялся бы по сайту более последовательно.
В FortRocks порядок был другим, потому что заказчику было важно быстрее получить обновленные коммерческие страницы. В результате новые разделы сейчас заметно отличаются от оставшейся части сайта. Это временная особенность поэтапного редизайна, но она хорошо показывает, насколько важен порядок работ.
Как искали новую стилистику
В начале сотрудничества клиент показал два сайта, которые ему нравились: Silver HOME и Giulia Novars. Это помогло определить желаемый уровень оформления. Предстояло уйти от прежней строгой черно-белой подачи в сторону более теплой, дорогой, бутиковой эстетики. В оформлении появились золотисто-бронзовые акценты, изменились кнопки, появились скругления и были переработаны композиции многих блоков.
Но особенно много времени ушло на графику. Для премиальной мебели красивые изображения имеют огромное значение. Важно показать фактуру дерева, камня и других материалов, декоративные элементы, качество поверхностей и то, как мебель выглядит в готовом интерьере. Поэтому на страницах использованы крупные фотографии, индивидуальные иллюстрации, интерьерные композиции, тизеры и баннеры. Многие изображения дополнительно обрабатывались и стилизовались. На старте графику и сборку новых страниц в Tilda также помогал вести приглашенный дизайнер: подробнее об этом ниже.
Например, для некоторых фоновых блоков готовились варианты интерьеров с вечерним освещением. Такие композиции помогали сделать оформление более атмосферным. В общей сложности пришлось подготовить очень большое количество графических элементов, от небольших иконок до сложных полноэкранных изображений. Именно эта работа во многом определила характер новых страниц.
Первый большой этап — кухни
Работа началась со сводной страницы раздела «Кухни». Нужно было представить ассортимент, раскрыть возможности компании, показать преимущества собственного производства и организовать удобные способы обращения.
Затем работа перешла к внутренним страницам отдельных моделей. И здесь стало понятно, насколько масштабной будет работа. Каждое изделие имеет свои особенности: материалы, конфигурацию, декоративные решения, характеристики. Для страницы нужно было подобрать фотографии, подготовить описания, продумать последовательность блоков и оформить информацию так, чтобы человеку было интересно ее изучать. На страницах использованы крупные изображения, слайд-шоу, технические характеристики, формы и индивидуальная графика.
Мне хотелось создать страницы, на которых посетитель сможет подробно познакомиться с изделием, рассмотреть детали и получить представление о возможностях индивидуального изготовления. Посмотреть раздел: fortrocks.ru/kukhni.
Стеновые панели: другая продукция, та же дизайн-система
После кухонь началось обновление раздела стеновых панелей. Для него тоже появились общая страница и многочисленные внутренние страницы изделий. Здесь требовалось немного иначе выстраивать подачу. Стеновые панели тесно связаны с архитектурой и общей композицией помещения. Поэтому важно показывать их в интерьере, уделять внимание сочетанию материалов, освещению и декоративным деталям.
К этому моменту уже появились готовые решения, которые можно было использовать повторно. Работа стала двигаться быстрее, а новые страницы сохраняли общую стилистику.
Раздел реализованных проектов
Отдельно хочу выделить страницы реализованных интерьеров. Мне кажется, это одна из самых интересных частей сайта FortRocks. Компания участвует в оформлении квартир и загородных домов, проектирует и изготавливает мебель для отдельных помещений или комплексной меблировки. И каждый такой проект представляет собой отдельную историю.
Для оформления страниц собирались фотографии, визуализации, информация о материалах, выполненных работах и дизайнерах. Иногда речь шла о целой квартире или доме, иногда — об отдельных помещениях. Мне хотелось, чтобы посетитель мог последовательно рассматривать интерьер, оценивать детали и видеть реальный результат работы компании. Поэтому много внимания уходило на композиции, слайд-шоу и обработку изображений.
Такие страницы особенно важны для компании, работающей с индивидуальными дорогостоящими заказами. Они демонстрируют реальные возможности производителя и помогают потенциальному покупателю лучше представить результат будущего проекта.
Новый дизайн блога
Еще одним направлением стал раздел статей. Переработаны общая страница блога и оформление отдельных публикаций. Для премиальной мебели информационные материалы имеют большое значение. Покупатели изучают технологии, материалы, дизайнерские решения и особенности индивидуального производства.
Причем делают это часто задолго до момента, когда готовы оставить заявку. Поэтому мне хотелось, чтобы статьи были удобными для чтения и хорошо оформленными. Внимание уделялось типографике, композиции страниц и использованию изображений. В результате блог стал органичнее сочетаться с новыми коммерческими разделами.
Огромный объем работы с контентом
Одна из самых трудоемких частей FortRocks — подготовка исходных материалов. Я давно заметила, что при разработке большого сайта эта работа может занимать не меньше времени, чем сама верстка. И здесь неважно, насколько ответственный и заинтересованный заказчик. У компании есть собственные производственные процессы, сотрудники, клиенты, текущие проекты и множество других задач. Поэтому ожидать, что она предоставит весь контент в виде аккуратно подписанных, обработанных и разложенных по будущим страницам файлов, было бы наивно.
В FortRocks в работу передавали большие архивы профессиональных фотографий, видеообзоров, интерьерных визуализаций, технических характеристик и сведений о дизайнерах. Информации было действительно много. Но ее приходилось разбирать, систематизировать, проверять и иногда дополнять самостоятельно.
Почему одна фотография может потребовать столько работы
Типичная ситуация: заказчик передает ссылку на папку с фотографиями. Внутри — десятки файлов с техническими названиями, фотографии из разных съемок и оригиналы огромного размера. Не всегда сразу понятно, что относится к конкретному изделию.
Иногда приходится дополнительно уточнять детали, искать другие ракурсы или разбираться, какая версия изображения подходит для публикации. После этого фотографию нужно обработать, при необходимости скорректировать композицию и оптимизировать. А если речь идет о большой подборке, все эти действия повторяются десятки раз.
Еще один вопрос — передача файлов. Объемные архивы, размещенные в облачных хранилищах, не всегда удобно скачивать большими пакетами. Такие технические моменты могут серьезно замедлять работу. Но я воспринимаю их как нормальную часть большого проекта.
Фото, видео и дополнительная графика
В FortRocks подготовка не ограничивалась фотографиями. Для многих страниц создавались дополнительные композиции, фоны, тизеры и иллюстрации. Из отдельных изображений собирались слайд-шоу.
Видеообзоры размещались на видеохостингах и встраивались в страницы Tilda. Некоторые фотографии стилизовались: появлялись варианты с другим освещением. Мне нравится работать с визуальными материалами, но это действительно трудоемкий процесс, особенно когда нужно выдерживать единый стиль на десятках страниц.
Zero Block и модификации стандартных блоков
Технически проект оказался довольно насыщенным. В проекте много Zero Block, поскольку для премиального оформления часто требовались сложные индивидуальные композиции. Но при этом я старалась по возможности использовать и стандартные блоки Tilda. Если нужный результат можно получить модификацией готового блока, это обычно удобнее для дальнейшего сопровождения.
Поэтому в проекте применялись Zero Block, CSS, JavaScript и различные способы адаптации стандартных элементов. В результате удалось сочетать индивидуальный дизайн с возможностями самой платформы.
Квизы, которые выглядят как часть премиального сайта
На новых страницах появилось много форм и квизов. С их помощью посетители могут уточнить интересующие параметры мебели, выбрать решения и обратиться за расчетом стоимости. При этом большинство квизов реализовано на стандартных блоках Tilda. Но их оформление существенно отличается от базового. Для квизов была подготовлена индивидуальная графика, а визуальная подача переработана, чтобы они соответствовали общей стилистике FortRocks.
Для меня это хороший пример того, как много может дать работа с деталями. Функциональная основа остается стандартной, а пользователь видит цельный и индивидуально оформленный интерфейс. Конечно, такая работа требует времени. Но результат заметно влияет на общее впечатление от страниц.
Почему я подключила дизайнера
На начальном этапе объем задач оказался настолько большим, что понадобились дополнительные руки. Я пригласила дизайнера, с которым уже работала раньше. Он помогал готовить графические материалы и собирать новые страницы и блоки непосредственно в Tilda. Это позволило параллельно выполнять разные части проекта и быстрее продвигаться по крупным разделам.
Со временем накопилась собственная библиотека блоков и элементов оформления. Появились готовые решения для типовых страниц, форм, графических композиций и отдельных интерфейсных элементов. Теперь многое можно использовать повторно. Для нового раздела уже не нужно каждый раз придумывать оформление с самого начала. Достаточно адаптировать существующие компоненты под конкретный контент.
Сейчас с текущими доработками я справляюсь самостоятельно. Мне нравится, когда большой проект постепенно приобретает собственную систему элементов, которая упрощает дальнейшую работу.
О сотрудничестве с командой FortRocks
FortRocks оказалась очень приятным заказчиком. Компания открыта к общению, обсуждению идей и совместному поиску решений. Для взаимодействия со мной выделили менеджера, который помогает собирать материалы, уточнять информацию и согласовывать страницы. Для такого проекта это действительно важно. Нужно постоянно разбираться в особенностях продукции, материалах, технологиях и отдельных реализованных интерьерах.
Конечно, не всегда все идет равномерно. Возникают технические сложности, задержки с материалами, меняются коммерческие приоритеты. Но в этом сотрудничестве есть взаимное понимание, благодаря которому рабочие вопросы удается решать спокойно.
Сейчас проект временно находится на паузе. Экономическая ситуация заставляет компании внимательнее относиться к расходам, поэтому продолжение редизайна следующих разделов пока отложено. Я заканчиваю небольшие текущие доработки и ожидаю, когда заказчик будет готов двигаться дальше. Мне очень хотелось бы со временем обновить главную страницу и привести весь сайт к единой стилистике.
Что изменилось после публикации новых страниц
Самое приятное — видеть реальные изменения в поведении посетителей. По статистике сайта, люди стали проводить на обновленных страницах значительно больше времени. Если раньше многие пользователи открывали страницу и почти сразу уходили, то теперь они подробнее изучают продукцию. Смотрят фотографии, читают статьи, взаимодействуют с формами, проходят квизы.
Количество обращений с обновленных разделов тоже ощутимо выросло. Это важный результат, хотя я не хочу превращать его в громкое заявление о росте продаж без соответствующих данных. Для объективной оценки нужно учитывать источники трафика, рекламную активность и другие обстоятельства.
Но сама динамика показывает, что посетители стали активнее взаимодействовать с сайтом. И клиенту новый дизайн нравится. Для меня это подтверждение, что выбранное направление оформления оказалось верным.
Чему меня научила работа с дорогой мебелью
FortRocks стал для меня первым проектом с настолько длительным циклом принятия решения о покупке. Здесь человек может выбирать производителя месяцами. Он изучает материалы, сравнивает предложения, консультируется с дизайнером, посещает шоурумы, уточняет стоимость и условия изготовления. Особенно когда речь идет о комплексной меблировке квартиры или загородного дома. Такое решение требует времени.
И поэтому сайт должен давать посетителю возможность спокойно знакомиться с компанией и продукцией. Подробные страницы изделий, качественные фотографии, реализованные проекты и информационные статьи становятся важными частями этого процесса. Но здесь есть нюанс, который я особенно остро почувствовала.
Даже хороший сайт не гарантирует быстрой продажи
Заказчик, естественно, оценивает эффективность сотрудничества прежде всего по продажам. Я это понимаю. Но в случае дорогостоящей индивидуальной мебели между посещением сайта и заключением договора может пройти много времени. И на итоговое решение влияет огромное количество факторов. Человек может сравнивать несколько компаний, обсуждать проект с семьей, менять комплектацию, откладывать покупку или пересматривать бюджет.
Дизайн сайта не способен управлять всеми этими обстоятельствами. Как разработчик я могу повлиять на качество представления продукции, удобство интерфейса, содержание страниц и способы обращения. Если посетители стали проводить на сайте больше времени, изучать материалы и активнее отправлять заявки, это уже значимый результат проделанной работы. А дальше в процесс включаются другие участники и факторы. На FortRocks я особенно ясно увидела, насколько важно разделять качество сайта и конечный коммерческий результат.
Что я думаю о поэтапном редизайне после FortRocks
Считаю, что поэтапно обновлять большой действующий сайт вполне разумно. Особенно если нет возможности сразу выделить бюджет на полную разработку. Можно начать с наиболее важных разделов, постепенно менять оформление и одновременно продолжать пользоваться существующим сайтом.
Но если говорить о том, как я организовала бы такую работу в следующий раз, то уделила бы больше внимания последовательности. Сначала — общая дизайн-система и главная страница. Затем — основные страницы коммерческих разделов. И уже после этого — многочисленные внутренние страницы, реализованные проекты, статьи и другие материалы. Так сайт менялся бы более последовательно, а обновленные элементы не выглядели бы чужеродными на фоне старого оформления.
В FortRocks у клиента были другие приоритеты. Необходимо было быстрее подготовить коммерчески важные страницы к приему рекламного трафика. И в этом смысле выбранный подход себя оправдал: новые страницы стали привлекательнее, посетители активнее с ними взаимодействуют и чаще оставляют обращения. Но с точки зрения визуальной целостности работа еще не закончена.
Итоги и планы
На текущем этапе обновлены четыре крупных направления сайта FortRocks: кухни, стеновые панели, реализованные проекты и блог. Создано большое количество внутренних страниц, подготовлена графика, обработаны фотографии и видео, разработаны квизы, формы и индивидуальные композиции на Zero Block. Параллельно сформирована собственная библиотека блоков, которая упрощает дальнейшую разработку. По статистике, обновленные страницы показывают более высокую вовлеченность и приносят больше обращений.
Визуальную задачу я не считаю закрытой. Проект временно на паузе: продолжение редизайна следующих разделов отложено, пока заказчик не будет готов двигаться дальше. Мне хочется со временем завершить визуальное преобразование сайта, обновить главную страницу и постепенно привести все разделы к единому премиальному оформлению.
FortRocks стал для меня интересным профессиональным опытом. Он показал, сколько работы скрывается за красивыми страницами большого коммерческого сайта и насколько важно глубоко понимать деятельность компании, с которой работаешь. А еще подтвердил, что Tilda позволяет реализовывать сложные многостраничные проекты с индивидуальным дизайном, если внимательно работать со структурой, контентом и техническими деталями.
Посмотреть раздел «Кухни»: fortrocks.ru/kukhni. Сайт компании: fortrocks.ru.
Поэтапный редизайн действующего сайта
Если нужно обновлять большой действующий сайт по частям, сохранить текущую структуру и собирать новые страницы на Tilda, я могу подключиться к такой задаче: от отдельных разделов и графики до форм и дальнейшего сопровождения.