Закажите сайт по телефону 8-800-5555-864

«Главное — детали»: адаптивный интернет-магазин цветов

Заказчик: Цветочный магазин «Главное — детали»
Разработка: Red Collar
Платформа: UMI.CMS Shop
Сайт: glavnoe-detali.ru

«Главное — детали» — это изысканный интернет-магазин цветов. Как и все настоящие флористы, его хозяева относятся с пристальным вниманием даже к самым, на первый взгляд, незначительным тонкостям!

Red Collar Главное - детали
Красота, оригинальность и доступность — ключевые понятия, на которые полагается команда магазина.

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

Компания поставила перед digital-агентством Red Collar задачу разработать отменное решение для цветочного сайта с целевой аудиторией, состоящей на 60% из мужчин в возрасте 20-35 лет — мобильных, современных людей, активно использующие различные гаджеты.

Выбор платформы

Агентство Red Collar уже много лет использует только UMI.CMS в качестве основы для разработки всех своих проектов, поэтому вопрос состоял только в выборе подходящей редакции. Для разработки сайта «Главное — детали» была выбрана редакция UMI.CMS Shop, так как она отвечает требованиям интернет-магазина со сложной внутренней архитектурой.

Реализация

Наметив план, Red Collar начали серьезную работу по проектированию интерфейса и отрисовке дизайна.

Анализ целевой аудитории показал, что для успешной реализации этого проекта требуется:
  • адаптивный дизайн, который будет одинаково хорошо смотреться как на широкоформатных мониторах, так и на мобильных гаджетах с небольшим разрешением экрана;
  • мощный и быстрый фильтр с множеством характеристик для наиболее удобного поиска.

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

Дизайн адаптирован под три самых распространенных разрешения: 480, 768, 1024 пикселей. Минимальное разрешение сайта было ограничено как и полагается на 320 пикселей. Результат — сайт растягивается в 6 раз! От 320 до 1900 пикселей!

Скриншоты дизайна сайта

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

Скриншот меню сайта

Как говорится, адаптив без retina — признак дурного тона. Иконки тоже оптимизировали для retina-дисплеев:

иконки

Вот так выглядят страницы с различных устройств:

скриншоты сайта

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

скриншот страницы с фильтром

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

скриншот информации о товаре

В корзине «Детали» предлагают дополнить букеты запиской, необычной плюшевой игрушкой или «шоколадным посланием»:

оформление букетов

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

скриншот страницы "Как мы работаем"

В красочном разделе, посвященном свадебной флористике, размещено несколько фото-историй с букетами «Деталей»:

Раздел "Свадебная флористика"

В форме быстрой связи добавлен шейк-эффект, с помощью которого можно быстро стереть текст, введенный с мобильных устройств:

Скриншот "Быстрой связи"

Стандартный код ответа HTTP о том, что сервер не может найти данные (ошибка 404) тоже стилизован под общий дизайн (и это прекрасная мысль!):

Скриншот сообщения об ошибке

Особенное разнообразие приятных мелочей на главной странице:

при наведении курсора на текст он разлетается на много мелких цветов

элементы дизайна

а при наведении курсора на кнопочки появляется ореол из контурных цветов

элементы дизайна

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

Скриншот отзывов

Технические особенности

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

«

Наиболее интересным оказался скрипт, который мы написали для эффекта рассыпающихся на много маленьких цветочков букв.
И что же может быть сложного в этом эффекте?
Все буквы, которые вы видите на экране, мы рисуем на Canvas. То есть это не просто текст, а текст переведенный в растровое изображение. После перевода текста мы считываем его данные, и каждому пикселю с некоторым шагом ставим в соответствие изображение цветка.
При наведении курсора мыши запускается алгоритм по которому мы «рассыпаем» текст. При этом каждая из частиц стремится отлететь на максимально возможное, определенное только для нее одной расстояние. И каждая частица имеет большой набор параметров: изначальный размер, максимальный размер, спрайт с изображениями, радиус, угол, абсолютные координаты в двух плоскостях, замедление ускорения, изначальный угол, текущий угол, поворот относительно своей оси, скорость поворота вокруг своей оси, ускорение и два метода для появления и исчезания этих частиц. И это только свойства частиц, не считая свойств самой системы!

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

»

Денис Ломов,

Арт-директор
Red Collar
Денис Ломов, Арт-директор Red Collar

Оптимизация под touch-устройства

Обычно, при клике на любой элемент touch-устройства, используется ожидание в течение 300 мс двойного нажатия (для увеличения выбранной части экрана), поэтому на многих сайтах возникает ощущение задержки отклика. Так как сайт «Главное — детали» является адаптивным и не нуждается в данном эффекте, его отключили. Сайт стал работать быстрее!

Что в итоге?

Сайт выглядит современно, просто (в самом лучшем смысле!) и отлично отражает настроение интернет-магазина. Продуманный motion-дизайн без лишних функций, перегружающих систему, работает без перебоев. Элементы «оживают» при первом прикосновении к экрану и не подвисают, что пока так непривычно для интерфейса сайтов, стремящихся применять передовые технологии внешнего оформления.

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

В сочетании с быстрой доставкой, модель адаптивного интернет-магазина позволяет владельцам «Деталей» максимально сократить отрезок времени между возникновением и исполнением желаний своих клиентов!

«

Интернет-магазин букетов «Главное — детали» продолжает завоевывать популярность в Воронеже. С увеличением количества посетителей нашего сайта, растет количество людей, чей обычный день стал особенным. Мы всегда стараемся быть оригинальными и не ограничиваемся стандартным набором цветов. Каталог наполнен букетами из анемонов, ранункулусов, орнитогалума, фрезии и прочих нетривиальностей. Спасибо ребятам из Red Collar, все, как и хотелось, продумано до мельчайших деталей! Потрясающий проект!

»

Ирина Черпакова,

Идейный вдохновитель и главный флорист
«Главное — детали»
Ирина Черпакова