Добро пожаловать в наш огород!
Нет, нет, мы не сошли с ума. Все в отличной психической и физической форме, на свежем воздухе ведь работаем.
Пришёл интересный заказчик с вкусной темой, поэтому мы решили показать нашу работу с ним, да и вообще наш типичный процесс работы по созданию сайта на примере агро процесса по выращиванию чего-нибудь.
Если честно, у нас ещё корыстный интерес есть к этой теме, только не говорите никому)
В будущем можем серьёзную конкуренцию заказчику составить. У нас есть все задатки.
Анализ конкурентов и целевой аудитории. Этап 1
Анализ рынка и планирование урожая. Мы как агрономы-предприниматели на этом этапе обязаны были изучить и проанализировать текущую ситуацию на рынке:
Мы досконально изучили материалы и наметили две задачи, которые должен был решать сайт...
Задача №1. Узнаваемость бренда
У заказчика был конкретный запрос и шикарный брендбук. Поэтому первоочередной задачей сайта было повышение узнаваемости бренда среди широкой аудитории.
Задача №2. Клубника или ягода?
Такой вопрос возник у нас сразу при обдумывании идеи сайта. У заказчика планировался большой ассортимент ягод, но на момент разработки сайта была только клубника.
Поэтому перед нами встала непростая задача: нужно было и весь ассортимент показать, которого пока нет, с заделом на будущее, и клубнику выделить, ведь именно её нужно было продавать.
Разработка структуры и текст. Этап 2
Что посеешь, то и пожнёшь... Мы решили сеять ягоду!
То есть в тексте мы использовали именно слово «ягода» и подразумевали весь ассортимент. Клубнику просто польём получше на следующем этапе, чтобы она затмила пока остальные ягоды.
Прежде чем продолжим готовиться к посеву, вставим сентиментальную, НО ВАЖНУЮ РЕМАРКУ.
Мы ему прям поверили, в его любовь к делу, в сладкий вкус клубники зимой, в то, что детей можно спокойно ей кормить.
И конечно, сделали всё, чтобы в это поверили его клиенты. У нас даже слоган родился.
Посев...
Семена мы подготовили, осталось их только грамотно посеять: в правильном порядке, с нужными интервалами, по структуре.
В текстовом прототипе сначала отразили наиболее важную информацию:
Разработка дизайн-концепций. Этап 3
Начинается наш любимый этап, где мы буквально поливаем и оживляем наши задумки из серии:
В данном проекте к серии «Показать не показывая и скрыть, не скрывая» относился пока ещё не существующий ассортимент, который нужно было показать, но не сильно. При этом сделать акцент на клубнику, но не только.
Дизайн-концепция №1
Тут образ был построен на основе логотипа «Пять сезонов» — прямоугольные, закруглённые формы, напоминающие геометрию силуэта упаковки.
Вариант 1.1:
1. В главном экране сделали акцент на клубнике.
Максимально минималистично, с концентрацией на самом продукте, разместили красивую сочную клубнику, в качестве подложки взяли силуэт упаковки из логотипа - просто, но со смыслом. Неявная деталь, которая усиливает ассоциативную связь продукта с брендом.
2. При этом показали остальные ягоды, не показывая :)
Чтобы учесть наш нюанс - не делать акцент на будущих продуктах, но дать понять, что производят не только клубнику, решили убрать другие ягоды в слайдер на главном экране. При этом показать наличие других ягод сразу через пагинаторы в виде миниатюр.
3. То же самое сделали в каталоге.
Необходимо было показать всю продукцию, даже которой пока нет. Поэтому мы решили указать в карточках товара предполагаемую дату, когда ожидается урожай.
Данную дизайн-концепцию мы сделали ещё в одном цветовом решении.
Основой служил теперь светло-бежевый цвет, а темно-зеленый выполнял роль акцентного, так концентрация внимания на каждом блоке усилилась.
Вариант 1.2:
Дизайн-концепция №2
Более классическая. Сделали акцент не только на продукции, но и показали масштаб производства — теплицы и готовый урожай. Так родилась девушка с клубникой на главном экране.
Вариант 2.0:
1. Основу концепции составляли сочные фотографии.
2. Каталог
В каталог заложили идею разных фонов, цвет которых у каждой ягоды был бы свой. Но, чтобы избежать пестроты, каталог свернули в слайдер.
Доработка дизайн-концепции. Этап промежуточный
Был выбран первый дизайн-концепт в светлом исполнении, но с несколькими поправками.
Каталог также требовал завершенности.
Заказчику не понравилось пустое место в каталоге, попросил решить данную проблему. Нам пришла идея сделать элемент по форме карточек и ещё раз показать лого бренда вместе со слоганом - это стало достаточно логичной акцентной точкой в данном блоке.
Разработка полного дизайна. Этап 4
Разрабатываем полный дизайн-макет. Чтобы всходы быстрее дали плоды, удобряем, предупреждаем возможные проблемы.
Например, было несколько моментов, которые даже на этом этапе могли быть непонятны заказчику. Дело в том, что мы не делаем анимацию сразу, а на согласование отправляем статичные макеты. Поэтому, чтобы избежать недопонимания, подготавливаем сопроводительное письмо с объяснениями.
Подготовка к вёрстке, тз для верстальщика. Этап 5
Если бы всё было так просто после всходов, то определённо у всех агрономов была бы не жизнь, а малина.
А тут, когда кажется, что всё уже готово, ещё нужно прополоть, окучить, адаптивы сделать, ТЗ для верстальщика написать. А потом ещё надо урожай собрать, продегустировать и отгрузить.
Вёрстка, разработка, тестирование. Этап 6
И вот так всегда! Вся наша ягода достаётся верстальщику.
Сначала он её собирает и по коробочкам раскладывает, а затем пробует и наслаждается отличным вкусом и результатом.
Итак, что сделали:
- Сверстали все страницы.
- Разработали функционал на CMS Битрикс.
- Провели тестирование на исправную работу сайта, адаптивность. На всех устройствах: компьютерах, ноутбуках, телефонах, планшетах, Windows, Mac Book.
- Выявили и устранили проблему: видео с сайта не проигрывалось на телефонах Android.
- Проверили скорость загрузки сайта и оптимизировали.
Передача проекта заказчику. Этап 7
Отгружаем партию заказчику, как положено - с накладной и полным отчётом.
Настроили админ панель. Продумали и подготовили подробный мануал, чтобы заказчик в дальнейшем мог самостоятельно управлять сайтом. Это важно, так как необходимо будет добавлять новые продукты.
Хотите, чтобы в ваш проект погрузились также, не бросайте камень в наш огород, бросьте заявку :) Оставьте заявку на сайте.
Подпишитесь на наш телеграм-канал, где мы рассказываем про коммерческий дизайн и показываем работу студии изнутри.
