Задача от клиента
Наш клиент - Александра Онопко - дизайнер ювелирных украшений, владелица собственной мастерской и основатель бренда «Amadina Glass». Запрос Александры: разработать интернет-магазин для ее бренда украшений. Дизайн сайта необходимо сделать запоминающимся, ярким, передающим настроение бренда, а функционал удобным и простым в использовании.
Подбор референсов
Референсы мы подбирали не только просматривая интернет-магазины ювелирных украшений, но и в принципе яркие, эстетичные сайты, подходящие по атмосфере и настроению нашему клиенту.
Искали вдохновение и в самих ювелирных украшениях «Amadina Glass», их форме, цветах, деталях, что позволило глубже понять уникальность и стиль бренда.
После подбора референсов мы разделили их на 3 стилистические группы и представили клиенту в виде трех дизайн-концепций. Все три концепции были достаточно минималистичными, но отличались по палитре, элементам и композиционным решениям. Александре больше все понравилась первая концепция - самая яркая, с изображением товаров на светлом фоне, ярким фоном и крупными изображениями.
Разработка прототипов
Следующий этап разработки сайта - создание прототипов будущего интернет-магазина. Прототип - черно-белая версия страницы, на которой с помощью прямоугольников разной формы мы указываем местоположение будущих объектов: заголовков, изображений, текстов, кнопок.
Дизайн-концепция
На основе собранной информации, осмотренных материалов, референсов и функциональных прототипов мы разработали 3 варианта главного экрана и двух первых блоков. У всех вариантов схожая структура, это главный экран, затем категории товаров и после - бестселлеры или главные позиции каталога, но есть отличия в деталях.
Главным цветом палитры сайта стал фиолетовый, как символ творчества, роскоши. Этот цвет присутствует в логотипе бренда, а так же часто встречается в самих украшениях и отлично передает его настроение.
В первом варианте мы поместили на главный экран фото Александры - основателя бренда, а также изображение украшения - яркой сережки. Не забыли и про функционал сайта: верхнее меню, кнопка избранного, корзины и каталога с товарами.
Главным цветом палитры сайта стал фиолетовый, как символ творчества, роскоши. Этот цвет присутствует в логотипе бренда, а так же часто встречается в самих украшениях и отлично передает его настроение.
В первом варианте мы поместили на главный экран фото Александры - основателя бренда, а также изображение украшения - яркой сережки. Не забыли и про функционал сайта: верхнее меню, кнопка избранного, корзины и каталога с товарами.
Во втором варианте мы кардинально поменяли обложку - главный экран сайта - добавив на него мыльные пузыри с украшениями. На этот вариант нас вдохновила фотосессия Александры для местного журнала: яркие фото с украшениями, мыльными пузырями и игривым, немного детским настроением.
Мы объединили в себе вторую и третью фотографии, самостоятельно создав мыльные пузыри и добавив в них яркие украшения, подходящие по палитре к нашей идеи.
Мы объединили в себе вторую и третью фотографии, самостоятельно создав мыльные пузыри и добавив в них яркие украшения, подходящие по палитре к нашей идеи.
Новые идеи
Для создания дизайна остальных страниц клиент выбрал третью дизайн-концепцию, но попросил заменить шрифт на более скругленный, на тот, что будет по форме напоминать сами украшения.
Мы показали ему несколько вариантов, но в итоге решили, что правильнее всего будет разместить на главном экране название бренда взяв его из самого логотипа, а значок логотипа оставить в верхнем меню сайта. В то время как для остальных заголовков на сайте мы выбрали шрифт TT Firs Neue.
Мы показали ему несколько вариантов, но в итоге решили, что правильнее всего будет разместить на главном экране название бренда взяв его из самого логотипа, а значок логотипа оставить в верхнем меню сайта. В то время как для остальных заголовков на сайте мы выбрали шрифт TT Firs Neue.
Далее на основе выбранной палитры, шрифтов и стилистики вы разработали дизайн остальных блоков главной страницы. Доработали детали, добавили больше стилистических особенностей и плавных линий.
Выглядели блоки вот так:
Выглядели блоки вот так:
Показав клиенту весь макет мы столкнулись со следующей обратной связью: в дизайн необходимо добавить больше цветов, чтобы передать разнообразие и яркость бренда, самих украшений, необычных элементов, возможно, частей тела для подчеркивания стилистики сайта. И тут мы отправились на поиск нового вдохновения…
Мы попытались отойти от тех референсов, что были у нас изначально, найти что-то принципиально новое: подобрали референсы с яркими фонами и цветными или черно-белыми картинками без фона. Больше всего нам понравилась идея с ярким фоном ,мы решили добавить его на несколько блоков + добавить черно-белые картинки, которые не будут привлекать к себе слишком много внимания, но украсят сайт и сделают дизайн запоминающимся.
Мы попытались отойти от тех референсов, что были у нас изначально, найти что-то принципиально новое: подобрали референсы с яркими фонами и цветными или черно-белыми картинками без фона. Больше всего нам понравилась идея с ярким фоном ,мы решили добавить его на несколько блоков + добавить черно-белые картинки, которые не будут привлекать к себе слишком много внимания, но украсят сайт и сделают дизайн запоминающимся.
Новый макет сайта стал выглядеть так: с ярким фоном на отдельных блоках, с черно-белыми картинками, а именно руками и ушами, на которых изображены яркие элементы - украшения бренда. Так стали выглядеть первые 3 блока главной страницы.
Верстка главных и внутренних страниц
Главная и уникальные внутренние страницы:
Для того, чтобы сайт был более живым, мы добавили анимацию на все черно-белые элементы, а также создали блок “Процесс создания украшений”, где в виде коротких gif видео можно увидеть, как создаются украшения.
На обложке главной страницы мы “оживили” мыльные пузыри, которые с разной скоростью улетают снизу вверх.
На обложке главной страницы мы “оживили” мыльные пузыри, которые с разной скоростью улетают снизу вверх.
Услуги, каталог товаров
На сайт было добавлено более 50 товаров, представленных на странице каталог.
Нажав кнопку “Подробнее” откроется pop-up, где можно выбрать размер или цвет украшения, добавить его в избранное, в корзину или прочитать подробнее о коллекции, посмотреть другие фото изделия.
Итоги
Проект по созданию интернет-магазина для бренда «Amadina Glass» был успешно завершен. Мы достигли всех поставленных целей, создав сайт, который отражает уникальность и стиль бренда, обладает ярким и запоминающимся дизайном, а также предоставляет удобный и функциональный интерфейс для пользователей. Работа над проектом включала всесторонний анализ, тщательное планирование и внимание к деталям, что позволило нам создать высококачественный продукт, удовлетворяющий все требования клиента.
