Изучаем особенности продукции. Эти уникальные устройства распыляют безвредный для человека диоксид хлора и позволяют практически моментально очистить окружающее пространство от вирусов, бактерий, неприятных запахов. Продукция очень популярна в Японии, но на российском рынке пока не известна. Действие устройств непонятно без подробной инструкции. А главное - спрос на продукцию только формируется, до покупателя нужно донести информацию о том, что такие приборы существуют и могут принести большую пользу.
Мы тщательно изучаем длинные технические тексты про устройства, находим самую важную информацию и “переводим” ее на язык обычного посетителя сайта. Выделяем преимущества каждого устройства, его отличия и специфику действия. Всю информацию собираем в набор мокапов и презентуем клиенту. После утверждения всех текстов переходим к этапу оформления. Клиент просит использовать фирменные цвета: насыщенный зеленый и голубой. Но при этом сделать сайт легким, воздушным и использовать сине-зеленый “медицинский” цвет. Превращаем наши мокапы в красивые цветные страницы будущего сайта:
В линейке продукции Клиента 4 прибора. Поэтому принимаем решение сделать не классический каталог, а меню выбора товара в картинках и набор промо-страниц для каждого прибора. Вся информация передается с помощью изображений и иконок, текста немного. И, конечно, все страницы адаптированы к просмотру на экранах любого размера - от десктопа до смартфона.
Продумываем и оформляем остальные разделы и страницы сайта. Создаем небольшие анимационные эффекты - двигающиеся иконки, плавную анимацию продуктового ряда, сворачивающиеся списки, рубрикаторы. Учитываем, как этими элементами будет удобно пользоваться не только на десктопе, но и на планшетах и смартфонах. Тестируем все элементы на маленьких экранах.
- Адаптивная верстка на 5 размеров экранов,
- Разработка каталога продукции со сложной, многокомпонентной промо-карточкой товара с возможностью добавления новых карточек силами контент-менеджера,
- Управляемая через админку карта розничных торговых точек (фирменные магазины, аптеки) с возможностью выбора центрирования и масштаба для каждого региона,
- Анимационные эффекты с учетом пользовательского поведения на экранах разных размеров.