Задача: разработать сайт-каталог для компании МОП ВТИ с возможностью заказа товара.
Решение: в студии разрабатываем современный, стильный сайт, используя фирменные цвета и фотографии оборудования компании-изготовителя. Пользователи узнают о технике компании Sivik и смогут заказать ее, оставив заявку.
Для каждой категории товара готовим отдельную страницу каталога.
Чтобы визуально не нагружать карточки товаров, показываем кнопку «оставить заявку» и лэйбл о наличии товара при наведении на карточку.
Дизайним страницу с описанием товара.
Разрабатываем форму для заказа товара.
Скидочная программа клиента действует только при покупке нескольких товаров, поэтому перед нами стояла задача наглядно продемонстрировать покупателю выгоду от подобного приобретения.
У компании многолетний опыт работы. Рассказываем о нем, разбавляя текст фотографиями и видео.
Делаем нестандартную иллюстрацию для страницы 404.
Готовим страницу контактов и остальные текстовые страницы.
Создаем адаптивную версию для мобильных устройств.
По просьбе заказчика акцент на сайте следует сделать на качестве продукции. На рынке много сайтов, рассказывающих про компанию, мы же рассказываем про оборудование.
Дистрибьютор поставляет технику российской компании Сивик. Компании-производителю выгодно сотрудничество с нашим клиентом. Заказчик получил разрешение на использование логотипа, фирменных цветов и фотографий продукции.
Приступаем к первым макетам. Начинаем с верхнего баннера на главной, чтобы определиться со стилистикой сайта.
Останавливаемся на последнем варианте. На баннерах показываем топовую продукцию. По клику можно перейти на страницу товара.
Решаем на главной описывать все категории оборудования.
Разрабатываем индивидуальные блоки для каждой категории.
Останавливаемся на седьмом варианте. В нем отказываемся от видео в описании. Фоны для баннеров делаем в фирменных цветах. Скучный текст трансформируем в краткий и информативный. Разбавляем иконками.
Все иконки дизайнер отрисовывает в фирменном стиле компании-производителя.
На главной добавляем этаж с описанием компании. Понимаем, что простой текстовый блок — не вариант.
В третьей версии комбинируем плитку с преимуществами компании и ее видео-описание. Однако в окончательном варианте было принято решение разместить видео на странице о компании. Акцентируем внимание пользователей на том, что деятельность компании сертифицирована и является качетвенной, с помощью яркого фактоида.
Добавляем еще три блока: о преимуществах компании, форму обратной связи и новости.
Собираем всю страницу. Утверждаем макет у заказчика. Доделываем несколько правок и приступаем к внутренним страницам.
Прорабатываем страницы каталога. Решаем распределить все товары клиента по четырем категориям.
Проектируем карточку товара. Стараемся сделать ее не перегруженной, но информативной.
Дизайнер создает баннеры под все типы техники.
Под каждую категорию оборудования проектируем индивидуальные фильтры.
Показываем страницы каталога заказчику. Попали в точку — правок нет.
Приступаем к странице товара. Оборудование нашего клиента недешевое. Пользователям перед покупкой нужно тщательно изучить большое количество информации об интересуемой технике. Думаем, как ее лучше разместить.
Клиент описывает нам акции, которые проводятся в компании. Поясняет, что акционные не товары, а пакеты. Мы решаем создать индивидуальные баннеры под каждый пакет. На баннерах ставим задачу описать не только ценовую выгоду, но и оборудование.
Баннеры получаются очень шумными и непонятными. Не ясно, где какое оборудование, нет возможности прочитать детальное описание.
Создаем яркие баннеры. Названия продукции дублируем в описании, подписываем каждое оборудование. Теперь при клике на товар можно перейти на его страницу и ознакомиться с детальными характеристиками.
Показываем заказчику. Допиливаем небольшие правки и доделываем оставшиеся страницы. Передаем макеты верстальщикам и программистам.
