Сет из воздушных шаров «С Днем Рождения Охотницы на демонов»
1 850 ₽
← Портфолио
Разработка интернет-магазина · Солнечногорск
АртПодарки Сайт, который держится на шарах
«АртПодарки» — студия воздушных шаров, букетов и подарков в Солнечногорске. Шары с гелием, фонтаны и сеты, торты из памперсов, пиньяты и оформление праздников. Команда студии разработала для неё новый интернет-магазин — светлый, перламутровый и живой, как сам праздник.
- 2013
- год, с которого студия делает праздники
- 109
- товаров в каталоге
- 15
- поводов — от выписки до юбилея
- 8
- разделов: от сетов до пиньят
Лопните шар — окно покажет его страницу, а на месте шара надуется новый.
Задача
Два сайта — один шар
У студии было два сайта: на одном — рассказ о студии и контакты, на другом — магазин шаров с товарами. Нужно было собрать их в один современный интернет-магазин, по которому с первого взгляда видно: здесь делают праздник. Из прежних сайтов взяли только содержание — товары, тексты, контакты и ссылки на соцсети, — а оформление сделали заново.
- 01
Праздник — с первого экрана
Шары на первом экране живые: всплывают, уворачиваются от курсора и лопаются конфетти. С первой секунды понятно, чем занимается студия.
- 02
Повод — короткий путь к подарку
Не все знают, что такое «фонтан» или «сет», но все знают свой повод. Поэтому у каталога два входа: по типу товара и по поводу.
- 03
Заказать — в два касания
Корзина в шапке на каждом экране, шарик улетает в неё при покупке, а «Заказать оформление» открывает короткую заявку.
Логотип
Логотипа не было — надули
Своего знака у студии не было, поэтому начали с него: шар с бликом и закрученной ленточкой, а в надписи слово «Подарки» звучит громче. Знак живёт в шапке, на кнопках, в окне заявки и на иконке вкладки браузера.
Попробуйте надуть его сами: нажмите и держите кнопку. Отпустите, когда шар войдёт в пунктир. Перестараетесь — лопнет.
АртПодарки
- 48×48
- 32×32
- 16×16
Фирменный язык
Палитра «Перламутр»
Цвета взяли у самих шаров: глянцевый розовый, лиловый, мята и золото, а фоном — светлая «подарочная» бумага. Нажмите на шар — им окрасится свет за витриной.
Праздник, который парит
GeologicaЗаголовки и текст: современный, мягкий, с хорошей кириллицей
Playfair DisplayОдно слово курсивом в заголовке — и оно переливается, как плёнка шара
Главная
Главная — восемь глав
Прокрутите страницу: окно пройдёт главную сайта сверху вниз, справа по ниточке поднимется шар, а слева загорится глава, которую вы сейчас видите.
- Первый экранЖивое небо: шары всплывают, уворачиваются от курсора и лопаются конфетти. Слово «парит» переливается перламутром.
- Лента поводовПятнадцать поводов бегут строкой под первым экраном.
- РазделыВосемь разделов плитками разного размера, карточки наклоняются за курсором.
- Какой у вас повод?Вкладки поводов и лента товаров, которую можно листать.
- Как это работаетЧетыре шага на тёмном фоне, по ниточке поднимается шар.
- Весь праздникСписок услуг студии, картинка раздела летит за курсором.
- Доставка и студияДоставка по городу, адрес, часы работы и маршрут.
- ПодвалОгромная надпись «АртПодарки» надувается по буквам.
Поводы и корзина
Какой у вас повод? Шарик — в корзину
Пятнадцать поводов — это второй вход в каталог: один товар виден и в своём разделе, и во всех своих поводах. А при покупке на сайте шарик улетает в корзину в шапке, и она подпрыгивает. Попробуйте здесь — это настоящие товары и цены магазина, но в корзину на сайте ничего не попадёт.
АртПодарки
Корзина 0
Сет из воздушных шаров «С Днем Рождения Охотницы на демонов»
1 850 ₽
Сет из воздушных шаров «Мороженое»
3 690 ₽
Сет из шаров «От всего сердца» в ассортименте
2 490 ₽
Сет из шаров «Мишка в самолете» розовый
3 050 ₽
Сет из шаров «Мишка в самолете» розовый
3 050 ₽
Сет из воздушных шаров «Розовая роза»
2 690 ₽
Сет на выписку для девочки «Коляска ретро»
3 990 ₽
Сет на выписку для мальчика «Коляска ретро»
4 150 ₽
Комбо фольгированных цифр «Юбилейные» в ассортименте
2 600 ₽
Сет из воздушных шаров «Розовая роза»
2 690 ₽
Комбо из воздушных шаров с цифрами на выбор
4 450 ₽
Композиция из шаров «Моей подружке»
1 850 ₽
Сет из шаров «От всего сердца» в ассортименте
2 490 ₽
Сердце - гигант «Красный сатин» с гелием 160 см
6 500 ₽
Боа из перьев 180 см. ярко-розовый
750 ₽
Сет из воздушных шаров «Мальчишник»
1 950 ₽
Сет из воздушных шаров «День знаний»
2 490 ₽
Сет из воздушных шаров 1 Сентября с цифрой
5 350 ₽
Сет из воздушных шаров с цифрой 1 Сентября
3 990 ₽
Фонтан из воздушных шаров 1 сентября
2 450 ₽
Сет из воздушных шаров «Мороженое»
3 690 ₽
Сет из шаров «От всего сердца» в ассортименте
2 490 ₽
Сет из воздушных шаров «Розовая роза»
2 690 ₽
Сердце - гигант «Красный сатин» с гелием 160 см
6 500 ₽
Разделы
Восемь разделов — одна серия
У каждого раздела каталога своя картинка, и все восемь — одна серия: перламутровые шары и подарки на пастельном фоне. Это иллюстрации, сделанные нейросетью по нашему описанию, а не фото работ студии — фото настоящих товаров стоят в самом каталоге.
-
Сеты из шаров
-
Фонтаны из шаров
-
Шары с гелием
-
Букеты
-
Торты из памперсов
-
Пиньяты
-
Оформление
-
Подарки
Страницы
Каждая страница — в одной упаковке
Каталог, поводы, карточка товара, корзина, блог, доставка, контакты — на общих шаблонах, в одной палитре. Тексты из админки выглядят аккуратно без ручной вёрстки. Нажмите на страницу, чтобы открыть её целиком; ленту можно тянуть мышью.
Детали
Мелочи, перевязанные ленточкой
Меню, поиск, окна и cookie сделаны заново в том же стиле. При клике мышью у кнопок и ссылок нет лишних рамок — обводка появляется только при переходе с клавиатуры.
-
Меню каталога
Наводите на «Каталог» — открывается панель: восемь разделов с картинками и подписями, а справа все поводы.
-
Поиск во весь экран
Поиск открывается поверх страницы и ищет по мере набора.
-
Заявка на оформление
Своё окно с шарами: только имя и телефон, а ниже — звонок и мессенджеры студии.
-
Окошко cookie
Маленькое, с шариком, не закрывает первый экран.
404
Этот шарик улетел — лопните цифры
На странице 404 цифры — шары: нажмите, они лопнут и надуются снова. Ниже — кнопка в каталог и самые частые поводы, чтобы вернуться к подаркам.
На телефоне
Подарок — с одной руки
Большинство таких покупок делают с телефона, часто в последний момент. Шапка остаётся с логотипом, корзиной и меню; меню выезжает с шарами, которые улетают вверх, а у товара кнопка «В корзину» всегда под пальцем.
Как шла работа
Восемь шагов — одна команда
- 01РазборРазобрали два прежних сайта студии и собрали с них всё живое: товары, тексты, контакты, соцсети. Их оформление образцом не брали.
- 02ЛоготипСвоего логотипа у студии не было. Нарисовали знак — шар с бликом и ленточкой — и надпись, где «Подарки» звучат громче.
- 03СтильПерламутровая палитра: розовый, лиловый, мята и золото на светлой «подарочной» бумаге, переливающийся акцент в заголовках.
- 04ГлавнаяЖивые шары на первом экране, разделы, поводы с товарами, шаги заказа, услуги студии, доставка и надпись в подвале.
- 05КаталогВосемь разделов по типу товара и пятнадцать поводов: один товар виден и в своём разделе, и во всех своих поводах.
- 06ПереносПеренесли 109 товаров с фото и ценами и 8 статей блога. Демо-товары и заготовки платформы выключили.
- 07СтраницыКарточка товара, корзина и оформление, блог, доставка, «О студии», контакты, правовые страницы и 404 — на общих шаблонах.
- 08ПроверкаКаждая страница на компьютере и телефоне: вид, анимации, заказ, работа с клавиатуры и без лишних рамок при клике.
Итог
Магазин, в котором уже праздник
Свой логотип, перламутровая палитра, живые шары на первом экране, каталог с двумя входами — по разделам и по поводам, 109 товаров и 8 статей на новом месте, корзина, в которую улетает шарик, доставка, контакты, окна, cookie и страница 404 — всё в одном стиле «АртПодарков».
Надпись надувается по буквам, как в подвале сайта. Лопните букву — она надуется снова.