Work in progress

Пора поработать вместе. Или просто познакомиться.

Заполните форму и я свяжусь с вами в рабочее время. Все ваши данные строго конфиденциальны.

[{"lid":"1711654313973","ls":"10","loff":"","li_type":"nm","li_name":"name","li_ph":"\u0418\u043c\u044f \u0438 \u0424\u0430\u043c\u0438\u043b\u0438\u044f","li_req":"y","li_nm":"name"},{"lid":"1711654313972","ls":"20","loff":"","li_type":"sb","li_name":"type","li_req":"y","li_variants":"\u041e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442\n\u041c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442\n\u042d\u043a\u0441\u043f\u0440\u0435\u0441\u0441-\u0441\u0430\u0439\u0442 \u0437\u0430 150\n\u041f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f\n\u0413\u0430\u0439\u0434\n\u041f\u043e\u0447\u0430\u0441\u043e\u0432\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b\n\u041a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\n\u0414\u0440\u0443\u0433\u043e\u0435","li_selfirstvar":"\u0427\u0442\u043e \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442?","li_nm":"type"},{"lid":"1711654711241","ls":"30","loff":"","li_type":"in","li_name":"budget","li_ph":"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0439 \u0431\u044e\u0434\u0436\u0435\u0442 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443","li_nm":"budget"},{"lid":"1711655174424","ls":"40","loff":"","li_type":"ph","li_req":"y","li_masktype":"a","li_maskcountry":"RU","li_nm":"Phone"},{"lid":"1711655190210","ls":"50","loff":"","li_type":"sb","li_name":"type_contact","li_req":"y","li_variants":"Telegram\nWhatsApp\nViber\n\u041f\u043e\u0437\u0432\u043e\u043d\u0438\u0442\u0435 \u043c\u043d\u0435","li_selfirstvar":"\u041a\u0430\u043a \u0441 \u0432\u0430\u043c\u0438 \u0441\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f?","li_nm":"type_contact"},{"lid":"1711655552418","ls":"60","loff":"","li_type":"cb","li_req":"y","li_label":"\u042f \u0434\u0430\u044e \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 <a href=\"\/privacy\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"color: rgb(62, 62, 62);\">\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>","li_nm":"Checkbox"}]

Мы занимались разработкой сайта совместно с креативной группой Art&Air. В Art&Air обратилась компания PASHIN, занимающаяся изготовлением сыродавленых масел, жмыхов, урбечей и других продуктов из сферы полезного питания. У Пашиных был запрос на глобальный ребрендинг, мы же занимались только разработкой сайта. У них уже был сайт, собранный на платформе Taplink, но его текущий визуал и функционал не устраивал заказчика.

Команда проекта: Art&Air, Alex Mylove и anastasia ginsberg. Права на все фотоматериалы, использованные при создании кейса, принадлежат Art&Air

О проекте

Алексей и Наталья Пашины. Основатели бренда Pashin

Анализ конкурентов
Написание текстов
Прототипирование
Дизайн 9 страниц
Вёрстка на платформе Tilda
Создание личного кабинета
Интеграция истории заказов
Подключение доставки СДЭК
Подключение оплаты Робокасса
Базовая SEO-оптимизация
Тестирование сайта

Объём работ

Создать креативный и запоминающийся сайт, который передаст настрой и философию бутикового производства Пашиных и расскажет об их Внимательном Образе Жизни.

Задачи по функционалу: большой интернет-магазина с разными категориями товара, личный кабинет с историей заказов, и интеграция с AmoCRM. Также, мы должны были разработать дизайн, который бы поддерживал визуальную платформу бренда и анимации, которые бы её дополняли.

Задача

Спроектировали сайт, исходя из следующего:

Основные визуальные элементы, цвета, шрифты и приёмы взяты из брендбука, который разработала команда Art&Air. Совместно с их командой мы придумали как эти элементы можно обыграть и заанимировать.
Сайт, должен быть удобным для пользователя и креативным — с множеством микроанимаций и необычных приёмов. Соединять в себе функциональность и передавать яркость бренда.

Решение

Заказчик не хотел делать сайт «как у всех». Наша цель — сделать сайт, который поможет выделиться, поэтому мы отказались от стандартных «появление текста из прозрачности» и ушли в сложные анимации и подключение сторонних библиотек (о них в следующем разделе).

Анимации сопровождают пользователя всём сайте, однако они не мешают использовать функциональные элементы и не перетягивают внимание на себя. Их цель — дополнять историю и настроение бутика, а не главенствовать.

Весь сайт сделан на Zero-блоках и адаптирован под мобильные устройства.

Дизайн-решения

Для эффекта физических орешков на главном экране была подключена сторонняя библиотека Matter.js — движок, описывающий взаимодействие твёрдых 2D-тел. Для настройки использовалась модификация от Matilda.

Стандартные возможности тильды ограничены, поэтому были использованы модификации от Nolim и Annexx, а также собственный код.

Тильда не поддерживает показ истории заказов в личном кабинете, поэтому была настроена интеграция с базой данных Airtable через сервисы Make и Collabza.

Технические решения

Alex Mylove — дизайн, вёрстка
anastasia ginsberg — дизайн, вёрстка
Art&Air — брендинг, коммуникации с клиентом

Команда проекта

Следующий кейс

На главную

Спасибо за внимание Мы ценим его

Вам нужен сайт? Вы по адресу.

Заполните форму и я свяжусь с вами в рабочее время. Все ваши данные строго конфиденциальны.

[{"lid":"1711893745178","ls":"10","loff":"","li_type":"nm","li_name":"name","li_ph":"\u0418\u043c\u044f \u0438 \u0424\u0430\u043c\u0438\u043b\u0438\u044f","li_req":"y","li_nm":"name"},{"lid":"1711893745179","ls":"20","loff":"","li_type":"sb","li_name":"type","li_req":"y","li_variants":"\u041e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442\n\u041c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442\n\u042d\u043a\u0441\u043f\u0440\u0435\u0441\u0441-\u0441\u0430\u0439\u0442 \u0437\u0430 150\n\u041f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f\n\u0413\u0430\u0439\u0434\n\u041f\u043e\u0447\u0430\u0441\u043e\u0432\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b\n\u041a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\n\u0414\u0440\u0443\u0433\u043e\u0435","li_selfirstvar":"\u0427\u0442\u043e \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442?","li_nm":"type"},{"lid":"1711893745180","ls":"30","loff":"","li_type":"in","li_name":"budget","li_ph":"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0439 \u0431\u044e\u0434\u0436\u0435\u0442 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443","li_nm":"budget"},{"lid":"1711893745181","ls":"40","loff":"","li_type":"ph","li_req":"y","li_masktype":"a","li_maskcountry":"RU","li_nm":"Phone"},{"lid":"1711893745182","ls":"50","loff":"","li_type":"sb","li_name":"type_contact","li_req":"y","li_variants":"Telegram\nWhatsApp\nViber\n\u041f\u043e\u0437\u0432\u043e\u043d\u0438\u0442\u0435 \u043c\u043d\u0435","li_selfirstvar":"\u041a\u0430\u043a \u0441 \u0432\u0430\u043c\u0438 \u0441\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f?","li_nm":"type_contact"},{"lid":"1711893745183","ls":"60","loff":"","li_type":"cb","li_req":"y","li_label":"\u042f \u0434\u0430\u044e \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 <a href=\"\/privacy\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"color: rgb(62, 62, 62);\">\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>","li_nm":"Checkbox"}]