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