Разбор кейса редизайна интернет-магазина Инканто
Разбор работ в 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.