03 сентября 2021
Вкусный прототип и здоровый дизайн для ВкусВилл
Собрали главную страницу сайта для проекта доставки готовой еды «ВкусВилл Готовит»
ЛЮБИТЕ ЛИ ВЫ ВКУСВИЛЛ ТАК ЖЕ, КАК ЛЮБИМ ЕГО МЫ?
Можно даже сказать, что когда-то ВкусВилл был одним из важнейших факторов существования нашего OUT AGENCY. Это был 2018 год, мы тогда ещё назывались Аутмаркетинг и работали все вместе в офисе в Москве.

И как-то постоянно так выходило, что в обед хотелось кушать. Проблемка!

На наше счастье, недалеко от офиса был ВкусВилл, где мы с удовольствием закупались каждый обед. Но ещё интереснее был вечер, когда мы заходили во ВкусВилл за вкусненьким сидром. Кто знает и любит — дайте пять.

А еще мы любим облепиховый сок из ВкусВилла. И сыр. И сосиски. И спаржу. И мороженое. И зефир. О боги, как же захотелось есть.

Так вот, вернемся к делу. Когда к нам пришли ребята из сервиса доставки готовой еды от ВкусВилл — мы были просто счастливы скорее взяться за задачу. Делать добро для тех, кто тебя кормит — чистый кайф!
РЕЦЕПТ ЗДОРОВОГО САЙТА
Хороший сайт — как хороший рецепт блюда. Чем проще и понятнее продукты — тем здоровее и полезнее итоговое блюдо.

В нашем искусстве мы используем только лучшие ингредиенты: две мясных котлеты гриль, специальный соус сыр подробный бриф, черно-белый прототип и сладкий дизайн.
Бриф
Это большой файл с вопросами, который клиент заполняет самостоятельно. Чаще всего за брифом следует еще и список дополнительных вопросов клиенту.
Прототип
Черно-белый макет сайта, в котором расписана уникальность продукта, спроектированы все блоки и каждое слово стоит на своём месте.
Дизайн
Наш дизайн всегда стабильно красив, но при этом и функционален. При просмотре радуется глаз и курсор.
Вёрстка
Иногда клиент верстает сам, а иногда — нашими силами. Мы любим верстать на Тильде, но можем собрать сайт на любой CMS или на чистом коде.
ЗАМЕШИВАЕМ ПРОТОТИП
Большинство агентств совсем не думают о смысловом наполнении сайта, а сразу бросаются пилить сайт вместе с дизайном. Вроде бы это ок, но такие сайты — как продавец курсов эффективности в инстаграме: снаружи красиво, а внутри смерть.

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

Когда готов прототип — дизайнер уже не думает над текстами. Если прототип согласован, значит он полностью готов к передаче в дизайн.

Работу над прототипом мы ведем итерациями и строго следуем фреймворку. Сделали — согласовали — поправили — показали еще раз. И так несколько подходов, пока не будет готов идеальный макет сайта.

Прототип для ВкусВилл мы собрали за три итерации.


  1. В первой итерации продумали корневое УТП и составили последовательность повествования.
  2. Во второй итерации проработали внутренние блоки и написали тексты.
  3. В третьей допилили чистовые тексты и поправили мелкие штуки.

В карусели можно посмотреть некоторые блоки финального прототипа, а прототип целиком — здесь.
ВЫПЕКАЕМ ДИЗАЙН
Дизайнер начинает свою работу с подробного общения с прототипировщиком. Прототипировщик передает дизайнеру все смыслы, которые были заложены в прототип и даёт всю вводную информацию.

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

Мы никогда не стремимся выиграть награду за самый креативный сайт, если того не просят клиенты (а они не просят). Удобство пользования сайтом — на первом месте. А все красивости — хорошее и обязательное дополнение.

Так же, как и с прототипом, дизайн разрабатывается итерациями.
1
Первый экран сайта
Формируем основу дизайна, отрисовываем различные варианты первого экрана. Вместе с клиентом выбираем вектор будущего дизайна.
2
Дизайн всей страницы целиком
На основе выбранного концепта отрисовываем и согласовываем дизайн десктопной версии целиком.
3
Мобильная версия
Продумываем и создаём мобильную версию сайта, чтобы все работало круто не только с компов, но и с телефонов.
4
Финальные штрихи
Вычищаем и финалим десктопную и мобильную версию. Оставляем в Фигме комментарии для тех, кто будет верстать сайт.
Дизайн десктопной версии целиком — здесь.
Мобильная версия — здесь.

А детали готового сайта смотрите в карусели ниже.
ВËРСТКА ПО ВКУСУ
С самого начала работы ребята из ВкусВилл говорили, что возьмут верстку на себя. Мы не стали мешать и отошли в сторону. Но глобально мы умеем и любим верстать. Особенно любим Тильду! Но если надо на какой-то другой CMS или на чистом коде — тоже можем.

В итоговом макете в Фигме оставили комментарии для верстальщиков. Это комментарии по анимациям на странице, про работу целевых кнопок и другие полезные уточнения, которые помогут сверстать сайт именно так, как мы его задумали.
НАВЕРНО ЭТО МОЙ РААААЙ…
Как мы говорили в начале этого кейса — мы очень любим ВкусВилл. А теперь ВкусВилл доставляет свою готовую еду.

Так что если вы решили открыть свой стартап или диджитал-студию (может не надо?), знайте: ВкусВилл подстрахует вас и накормит ваших голодных бойцов. Теперь можно и в магазин для этого не ходить.

И какой кайф, что мы тоже приложили руку к этому сервису. Приятного пользования!
Юля Хребтова
Главный дизайнер
Я ОБОЖАЮ ВКУСВИЛЛ

Ой, про это уже было, да? Ну правда: как же круто и приятно поработать с командой, чьими товарами пользуешься каждый день! Пусть дизайн этой странички будет моей личной благодарностью за то, что ВкувВилл такой вкусный!

Хотите так же круто?

Оставьте номер или email. Обсудим детали и сделаем, как для себя!