Workshop #1. Создаем концепт дизайна интернет-магазина продуктов питания

Наша команда создала первое видео из серии Workshop.

Видеоверсия кейса

Сначала, немного скажем про сам формат. Это современная форма обучения, новый способ коллективного образования. Ключевое отличие от онлайн курсов и вибинаров в активном действии, во время которого теоретическая часть тут же применяться на практике. Кроме этого, возможно не только повторять за учителем, но и добавлять в процессе что-то свое. В итоге вы приобретаете опыт и практические знания, которые невозможно получить при сухом изложении лекции.

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

Подготовительная работа

Перед тем как начать создание дизайна концепции интернет магазина подготовьте следующие материалы и инструменты:

  • Создайте учетную запись в figma или в аналогичной программе, если у вас есть уже опыт работы;

  • Фирменный стиль нашего условного (а может у кого-то и реального) клиента. Нужен логотип и ключевая цветовая схема, в каком мы будем создавать дизайн;

  • Контент – материалы по товарам, категориям, и обязательно хорошие фото. Наличие качественных фотографий товаров это 50% успешности интернет-магазина;

  • Иконки в единой стилистике, например, можно взять готовый пак fontawesome;

  • Вдохновение, которое вы можете получить, изучая свежие работы у дизайнеров со всеми мира или у тех, кого вы ранее уже для себя заметили. Это позволит вам быть в тренде современных интерфейсов новых фишек и идей;

Совет. Если у заказчика нет фото, то возьмите их с аналогичных проектов. Выбирайте картинки максимально приближенные к реальным, это поможет сделать работу максимально приближенную к «боевым» условиям.

Разработка прототипа интернет-магазина

Для начала нужно заняться разработкой прототипа. Если у вас уже есть заказчик, то обязательно обсудите с ним задачи, функциональность сайта, а также какие маркетинговые инструменты они планируют применять. Полученный прототип (условно скелет будущего дизайна), также надо согласовать и утвердить у заказчика перед тем, как начнете делать дизайн. Этот шаг поможет вам избежать большого количества переделок, а клиенту ожидаемый результат.

Добавим два фрейма под разные версии - настольную и мобильную.

Для мобильного прототипа мы возьмем размеры iPhone8 Plus, а для широкого экрана берем размер 1440*1024 пикселей и расширим его до 1920х1024.

Для того чтобы наш макет был ровным и качественным. Обязательно добавляем сетку. Мы используем для стандарта сетку бустрапа, поэтому добавляем разметку на 12 колонок с отступами между ними в 15px. А вот отступы от края экрана делаем разные – на смартфоне это те же 15px, а на дестопе будет 240px по бокам, чтобы рабочая область была 1440.

!СОВЕТ : на панели слоёв (слева) объединяйте и систематизируйте слои в группы, а так же давайте им простые и понятные для вас названия, в конце работы слоев будет много, и в них будет легко запутаться.

Мобильная версия прототипа

Следуя современным тенденциям, мы сделаем мобильную версию сайта похожей на приложение.

Внизу макета делаем панель и отмечаем ключевые разделы - главная, каталог, профиль, выгодно. Где будут иконки обозначим кружками.

В нашем концепте мы решили использовать интересное решение для кнопки корзины. Сделаем ее иконку заметнее остальных и разместим по центру.

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

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

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

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

Настольная (Desktop) версия прототипа

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

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

В содержании мы делаем такие же блоки любимых категорий и рекомендуемых товаров как в мобильной версии.

Так как размер экрана у нас больше, мы добавим еще третий блок – Рецепты. Он выступает в роли маркетингового инструмента, который поможет в продвижении магазина в поисковиках.

Разработка дизайна интернет-магазина

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

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

Мобильная версия дизайна

Начнем так же с нижней панели.

Временные шарики-иконки меняем на полноценные. Подгоняем нужный размер и красиво выставляем по сетке. Далее прорабатываем текст, чтобы он был ровным и красивым. Цвет подложки сделаем фирменным желтым, а текст и иконки фирменным темным.

Затем сделаем кнопку корзины. Тут попробуем использовать наше интересное дизайнерское решение для подложки и затем так же аккуратно и ровно выставляем иконку.

В финале работы с панелью сделаем кнопку "Главной" белой, чтобы обозначить пользователю, где он находится.

Переходим к первому блоку содержания страницы. Проверяем корректность отступов мы используем отступы кратные 15)

Ставим в первую категорию заранее подготовленное фото из контента, уменьшаем до подходящего размера и закругляем края. Добавим под фото название раздела каталога.

Далее берем этот первый раздел за основу и скопируем его 5 раз. Затем заменим картинки и названия других разделов. Напомним важность использовать реальные названия и картинки, какие будут потом на сайте. Это поможет лучше спроектировать визуальную часть макета.

Почти похожая процедура со второй частью содержания страницы. Только тут мы уже работаем с товарами и кроме названия у нас добавляются еще параметры по весу или объему, а так же цена и кнопка купить.

Так же точно и аккуратно сделаем отступы и размеры по сетке. Выставим правильное выравнивание и проработаем кнопку Купить, чтобы она была аппетитной и на нее хотелось бы нажать.

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

Настольная (Desktop) версия дизайн

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

В шапке добавляем наш логотип на белую подложку, чтобы он хорошо смотрелся. Затем. прорабатываем кнопку каталог и рядом раздел Выгодно. Используя те же иконки.

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

После того как мы закончили и с рецептами, наш концепт готов и для широкоформатной версии. Теперь мы можем с вами немного его оформить для презентации, например, в своем портфолио.

Резюме

Надеемся вам понравился данный урок.

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