Офтоп WebCanape
248

Секреты цветоводства: как разработать интернет-магазин за 2 дня

Что можно успеть за 2 дня? Прочитать книгу, которая давно пылится на полке. Записаться на шейпинг, а потом передумать и вернуть деньги. Посмотреть пару сезонов сериала. Разработать и запустить интернет-магазин цветов. Именно так, 2 дня на интернет-магазин. Удобный функционал, адаптивный дизайн в фирменном стиле — то есть полностью готовый к приему посетителей сайт. Как команде WebCanape удалось создать такой за 2 суток, расскажем в статье.

В закладки

Предыстория или вьетнамские флешбэки

За 10 лет работы в digital мы повидали многое. Некоторые вещи даже лучше бы забыть... Но сейчас речь пойдет не об этом. Случилось это в далеком мае 2018-го. Вот что рассказывает один из очевидцев:

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

Сергей Абрамов
Менеджер проектов разработки WebCanape

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

Гармонию прервал телефонный звонок — наш старый клиент. Он когда-то уже заказывал у нас сайт и остался доволен. Сергей, наш менеджер отдела разработки, насторожился — голос клиента взволнованно подрагивал. Мы заподозрили неладное. И не ошиблись.

Заказчик открывал цветочный бутик в Москве. До открытия оставалось три дня, и все вроде бы готово: дизайн, промоутеры, листовки, визитки. На визитках все как надо — телефон, адрес магазина, адрес сайта. Но самого сайта нет. Вот незадача, да? «Ни слова больше», — сказали мы и, смахнув скупую мужскую слезу со щеки Сергея, принялись за дело.

Как разработать крутой сайт за 2 дня с перерывами на сон, обед и истерики

Паниковал ли я? Да, я паниковал.

Сергей Абрамов
Менеджер проектов разработки WebCanape

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

Мы свято чтим дедлайны и всегда закладываем в разработку время на согласование. Обычно на одно только утверждение макетов уходит неделя, а тут на все выделили лишь 3 дня. Отступать было некуда.

Сейчас наша студия работает преимущественно с эксклюзивными сайтами. От конвейерного производства по шаблону мы отказались еще несколько лет назад в пользу творчества. Основным пожеланием клиента по этому проекту был как раз индивидуальный дизайн. Интернет-магазин должен был соответствовать по стилю и статусу открывающемуся бутику. Однако на разработку эксклюзива с нуля времени совершенно не хватало. Поэтому мы решили вспомнить былое и объединить два подхода. Получился гибрид: шаблон интернет-магазина + фирменный стиль бутика.

Итак, что мы имели:

  • уже приобретенный домен,
  • фирменный стиль (лого, фирменные цвета, визитки),
  • фотографии товаров,
  • 3 дня.

Ход работы

Один день ушел на формальности, без которых никуда:

  • согласование перечня работ,
  • обсуждение деталей,
  • подписание договора.

Ниже расскажем, чем мы занимались два дня, оставшиеся до открытия магазина.

1. Создание дизайна

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

Дорабатывая шаблон, мы изменили:

  • шрифты,
  • высоту меню,
  • вид навигации в слайдере,
  • иконки — отрисовали их в стиле логотипа, поменяли цвет и добавили ховер-эффект при наведении.

Вот что получилось:

Главная страница belfiore24.ru

Клиент предоставил отличные фотографии, работать с ними было приятно и легко. Самое главное в таких проектах то, как выглядит товар — это должно быть максимально круто.

Александр Ерыгин
Дизайнер WebCanape

2. Согласование макета

Основная масса дизайнерских работ пришлась на слайдер. Его важно было согласовать поскорее, переделка потребовала бы времени, которого просто не было.

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

3. Верстка сайта

Это мой двадцатый по счету сайт про цветы. Но даже спустя полгода я помню, как его верстал! Есть в нем что-то особенное, стильное.

Алексей Соколов
Верстальщик WebCanape

«Ура! Все согласовано, можно верстать», — с облегчением подумали мы. Но не тут-то было. Клиенту резко потребовалось добавить в меню дополнительный пункт, для которого ну совсем не было место на уже созданном, согласованном макете. Между тем, до сдачи проекта оставался 1 день. Что делать? Рисовать по новой и опять согласовывать?

Мы решили отойти от макета: уменьшили размер шрифта и кнопок меню. Получилось вот так:

4. Наполнение товарами

Какой же интернет-магазин без товаров? У нас были фотографии и прайс-лист. Ко дню X мы успели добавить в каталог около 30 букетов. На этом этапе карточка товара осталась шаблонной:

  • фото,
  • цена,
  • блок с описанием,
  • отзывы,
  • кнопка «Купить».

Итоги

Эти 2 дня мы действительно работали в ускоренном режиме. В поте лица, не покладая рук, засучив рукава. Конечно, нельзя сказать, что такая разработка занимает обычно ГОРАЗДО больше времени, ведь мы опирались на шаблон. Но все же вот вам любопытная статистика:

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

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

Второй раз заказал в WebCanape сайт. Результат отличный, в очень сжатые сроки, сделали отлично. Спасибо!

Отзыв клиента

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "WebCanape", "author_type": "self", "tags": [], "comments": 6, "likes": 9, "favorites": 7, "is_advertisement": false, "subsite_label": "flood", "id": 59245, "is_wide": false, "is_ugc": true, "date": "Fri, 22 Feb 2019 11:42:15 +0300" }
{ "id": 59245, "author_id": 179067, "diff_limit": 1000, "urls": {"diff":"\/comments\/59245\/get","add":"\/comments\/59245\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/59245"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

6 комментариев 6 комм.

Популярные

По порядку

Написать комментарий...
2

Помню лет пять назад, к нам пришёл клиент с бизнесом по продаже пластиковых окон и заказал самый дешёвый вариант сайта на шаблоне "на попробовать нишу бизнеса". Сегодня этот скромненький сайт совместными усилиями вырос во вполне достойный проект https://www.okno-moskva.ru. Надеюсь, что с цветочным сайтом будет всё очень похоже :)

Ответить
1

Еще бы мужчин разрабатывали, которые эти букеты будут дарить ^^ )))

Ответить
1

Вообще это очень ПРАВИЛЬНО быстро выпустить первую версию продукта, а затем его развивать и дорабатывать. Если проект затягивается, то первоначальная стратегия заказчика 100 раз может поменяться.

Ответить
0

Цветов на сайте маловато. В подвале сайта нет ссылок на соцсети ((

Ответить
0

Крашеные розы - фи, а остальные букеты можно и за 50к купить) я бы взяла))

Ответить
0

Мне нравится дизайн сайта, и фотки букетов очень качественные. Хорошо получилось, и не подумала бы что это за такие сроки) Стильненько) Хочется ещё больше цветов!!! БОЛЬШЕ!!!!! ❤️

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }