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

Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.

Автор работы Алёна, подписчица DL PRO

Алёна прислала нам ссылку на Фигму.

Так выглядит главная страница проекта
Редизайн интернет-магазина Инканто, цель – показать свои навыки в дизайне (так как это просто концепт). Целевая аудитория – девушки среднего достатка. Хочется научиться делать эстетичный и удобный дизайн и понять, какие ошибки допущены, что можно улучшить в макете.

Привет, Алёна!

Спасибо, что прислала нам свою работу на разбор. Твою работу оценили по четырём критериям: Логика, Визуал, Бизнес и Команда. Все эти составляющие важны в работе дизайнера.

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

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

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

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

Вот хороший пример кейса по редизайну сайта с показом этапов работы: https://www.behance.net/gallery/126259087/Kuzbass-Philharmonic-Redesign?tracking_source=for_you_feed_activity

Логика

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

  • Почему в предыдущей версии дизайна выбрана именно такая навигация по сайту и поведение шапки при скролле?
  • Если показана иконка избранного, то каким образом товар туда добавляется?
  • Для чего дополнительные элементы в карточках товара на главной, помимо цены и названия самого товара?
  • Удобно ли сейчас совершить покупку, и что там можно улучшить с точки зрения пользовательского опыта, а не визуала?

Визуал

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

Типографика

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

Примеры кейсов с хорошей работой с типографикой в e-commerce:

https://www.behance.net/gallery/123410459/Katreen-Handmade-Accessories-Website-Design?tracking_source=search_projects_recommended%7CE-commerce

https://www.behance.net/gallery/124973743/Jewelry-E-Commerce-Shop-redesign?tracking_source=search_projects_recommended%7CE-commerce

Композиция

Нужно вырабатывать чувство насмотренности через осознанный просмотр сайтов на таких ресурсах, как: Awwwards.com, CSS Design Awards, Best Website Gallery.

В части блоков нарушается правило близости, не хватает контрастности тексту. Размеры некоторых элементов слишком маленькие. Не хватает опыта в работе с ритмом.

Бизнес

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

Команда

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

Что посмотреть

По работе с типографикой:

https://xd.adobe.com/ideas/process/ui-design/typography-in-ui-design/

https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/

Подборка советов от Бюро Горбунова по работе с цветом:

https://bureau.ru/soviet/selected/andrey-skorik/kak-podobrat-tsvet/

Статья про основные этапы работ над веб-проектом:

https://tilda.education/courses/web-design/basicsteps/

Удачи!

Работу разобрали Саша и Наташа

Наш бот Прошка оценил работу так

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис развития и поддержки дизайнеров Design Line PRO.

https://pro.dsgnline.ru/