Главная | Портфолио | Сайты | ТМ Natuma

ТМ Natuma

www.natuma.eu
Продукция торговой марки NATUMA производится на крупнейших заводах Европы. Технология и условия производства соответствуют высшим международным стандартам качества в фармацевтической промышленности – GMP (Good Manufacturing Practices).

Следующий проект

1С-Битрикс

Адаптивный
дизайн

HTML-5 анимация

Проектирование

Основная задача нового сайта — имиджевая. Сайт должен демонстрировать через свой функционал основные конкурентные преимущества продукции NATUMA.

Портрет целевого потребителя

Основная целевая аудитория —
женщины от 20 до 65 лет.

Конкурентные преимущества продукта

натуральные ингредиенты

состав, подобранный под возрастную группу

европейское производство

уникальный состав каждого продукта

красивая упаковка

Структура каталога

Наиболее важным разделом сайта компании «Натума» является каталог продукции, состоящий из четырех категорий:

Пробиотики

Минеральные соли

Витаминные комплексы

Морская вода

Бактофлор Бэби Бактофлор Кидз Бактофлор Бактофлор, флаконы Бактофлор Кидз Профлор Витамин Д3

Флорактив Профлор Аквастандарт Аквафлю нос

Концепции

На основе полученных данных были предложены две концепции дизайна главной страницы.

С минимальными доработками в баннере был принят первый вариант.

Дизайн

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

12 колонок

56 px

40 px

Каталог

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

Пробиотики

Минеральные соли

Витаминные
комплексы

Морская вода

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

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

1 Подробное описание

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

2 Дополнительные материалы

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

3 Форма обратной связи

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

Иконографика

Для четырех разделов каталога и блока преимуществ компании Natuma подготовлены соответствующие иконки.

о нас

Каталог

Вспомогательные страницы

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

Для того, чтобы получить ответы на частые вопросы, достаточно посетить соотвествующий раздел.

На сайте представлена подробная контактная информация о компании «Натума»

Страница содержит всю необходимую информацию о свойствах компонентов препаратов и местах их приобретения. Логотипы аптек, где можно купить «Natuma», вынесены в отдельную бегущую строку

Адаптив

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

1920х1200
1280х1080

1024х768
768х1024

375х812
320х568

Особенности реализации

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