Создание сайта на индивидуальном решении для производителя натуральных продуктов Alga Tech

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

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

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

Стратегия

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

Запросов у клиента было много, и совместить их в одном решении было непросто. Мы проанализировали каждый запрос, оценивая влияние на структуру, удобство использования и дальнейшее развитие сайта. В работу ушло только то, что усиливало ресурс.
Структуру разрабатывали с учетом особенностей контента: распределили информацию так, чтобы разделы не пересекались по смыслу, а продукция была представлена одинаково читаемо в рамках разных категорий. Отдельно учли SEO-требования и логику будущего расширения каталога.
Работу двух языков заложили еще на уровне структуры. Мы адаптировали элементы, чувствительные к длине текстов, и проверили, чтобы англоязычная версия воспринималась не как простой перевод, а как полноценный вариант сайта.
Дизайн выстраивали вокруг выбранной минималистичной эстетики, чтобы макеты выглядели спокойно и аккуратно.
Сверстали сайт строго по согласованным дизайн-макетам, сохраняя повторяемые элементы и единый принцип построения блоков.
Проверили, что сайт выдерживает реальные сценарии использования и не «ломается» при наполнении.
Запустили готовый сайт.

Над проектом работали:

Ведущий аккаунт-менеджер

Алина Мощина

Разработчик

Оксана Остапук

Контент-менеджер

Надежда Карпович

Дизайнер

Дмитрий Тарасенко

Реализация

Этап 1. Разработка структуры сайта

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

Мы также заложили требования к будущему наполнению:

где должны находиться описания продукции;
какие страницы использовать как опорные;
какие элементы должны оставаться повторяемыми.

Структура будущего сайта

Этап 2. Дизайн главной страницы

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

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

Итоговый утвержденный вариант главной страницы

Этап 3. Дизайн страниц продукции

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

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

Страница продукции. Algasgel

Страница продукции. Лечебно-диетические продукты

Страница продукции. Algenic Therapy&Beauty

Страница продукции. VitaSeaGel

Этап 4. Карточка товара

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

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

Карточка товара

Этап 6. Адаптация контента и подготовка сайта к запуску

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

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

Шестой этап

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

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

Результаты работы

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

36 часов верстальщика

17 часа контент-менеджера

9 часов дизайнера

6 часов программиста

5 часа SEO-сепециалиста

Разработка корпоративного сайта с мультиязычностью сайт alga-tech.ru