Разбор M.AKLIVE
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор Екатерина. Работа подписчика DL PRO
Привет!
Cпасибо, что прислала работу на разбор. Это интересная тема, которую будет полезно рассмотреть вместе.
Что понравилось в работе
Понравилось, как ты сделала этот проект. Дизайн оставляет приятное впечатление: светлый, легкий, с акцентами. Выглядит традиционно для косметических сайтов. В целом ты понимаешь, как действовать и многие моменты используешь в работе.
Логика
Когда смотришь твою работу, то видишь красивый и достаточно чистый визуал. И это хорошо. Есть одно но: не видно, какую работу ты провела в блоке исследований, и проводила ли. Ощущение, что перескочила через важный этап, который бы помог разобраться не только со структурой сайта, но и проработать хорошо UI. Прочитав разбор работы фитнес-приложения, ты можешь увидеть, как помогают исследования в проработке дизайна (от UX до UI, а также и в копирайте).
На фолде нет понимания, в чём же УТП (уникальное торговое предложение) этого бренда. И его надо собирать по крупицам на всём лэндинге. Выдели под преимущества проекта 1-2 блока и чётко их сформулируй. Сейчас у тебя блок "О бренде" закрывает эту задачу, но над текстом надо поработать.
Очень много общих и водянистых слов, которые не дают ответов на вопросы пользователя и не открывают преимуществ продукта: новый, абсолютно, действительно, качество, эффективность, лаконичный. Можно работать с отличным сервисом Главред или нанять копирайтера, который напишет чистый и понятный текст, который попадает в потрбености аудитории.
Целевая аудитория
Не увидели информации по целевой аудитории. Она будет новой или уже есть база? Почему они выбирают уже этот бренд? Или почему будут это делать? На эти вопросы надо ответить и использовать результат для улучшения сайта.
Дизайнеру важно понимать, для кого разрабатывается тот или иной продукт, почему два бренда косметики будут продаваться, почему объемы одного продукта будут больше, чем у другого, в чем разница ценовой политики продуктов. И главное - как с этим всем работать. Цвет, композиция, форма объектов, контент, структура - это всё напрямую связано с аудиторией продукта. Зная и понимая её, можно увеличить эффективность работы сайта, попадая в те потребности, которые свойственны потребителям нашего продукта. Персоны, JTBD, проведение интервью помогут разобраться с этим блоком и направят на интересные инсайты.
Визуал
Чтобы проект "сложился", нужно пройти через несколько аспектов разработки. В дизайне это понимание идеи проекта, задач и выбор средств, которыми мы эти задачи можем решить и которыми можем донести свою идею. В результате твой проект получился хорошо, но его можно еще улучшить, если ты разберешься с тем, какой проект делаешь, для кого и каковы особенности твоего продукта. Тогда ты сможешь предложить лучшее визуальное решение, правильно работающее на твою аудиторию. Сделать запоминающийся сайт с собственным характером. Дизайн начинается гораздо раньше того, как мы начинаем рисовать страницу в Фигме. Победа любит подготовку).
Рекомендую повышать осознанную насмотренность и собирать подборки интересных сайтов по разным тематикам, тогда при разработке ты сможешь обратиться за вдохновением к своей коллекции. Для этого можно использовать: Awwwards.com, CSS Design Awards, Best Website Gallery.
Типографика
Ты выбрала одно семейство шрифта, который поддерживает логотип и создает правильное настроение, что является правильной стратегией и работает на гармоничное впечатление от всего сайта. Разная плотность начертаний шрифта позволяет правильно расставить акценты.
Также ты умеешь работать с разной насыщенностью цвета текста, что позволяет легче воспринимать информацию и читать текст.
Композиция
Композиция достаточно простая, не перегружена лишними элементами, но с акцентами. Это интернет-каталог, потому такой подход оправдан. На странице каталога, где, как правило, бывает все очень типично, ты разбавила полотно карточек баннером. Он увлекает наше внимание, позволят зацепиться и задуматься, и далее – продолжить просмотр – это хороший прием в данной ситуации. Мы не даем покупателю заскучать и устать от однообразия карточек.
Цвет
Ты подобрала нежную гамму и светлый фон – хорошо подходит косметическому бренду. Хочу отметить подбор фотографий: очень важно подбирать фотографии с правильным настроением, соответствующим тональности сайта. Мне кажется, ты с этой задачей справилась.
К основной гамме в проектах полезно добавлять серую гамму для работы с текстом. И это есть в твоем макете).
Следующим этапом может стать работа с нестандартными сетками. Кейс для вдохновения https://www.behance.net/gallery/118882271/E-COMMERSE-Organic-cosmetics-online-store?tracking_source=search_projects_null
Бизнес
Заметно, что не хватает опыта в понимании того, как вести пользователя по сайту. Если перед дизайном не упускать этап прототипирования, получится более тщательно проработать этот момент. Увеличивай насмотренность, находи общие паттерны, анализируй успешные сайты.
Со стороны бизнеса важно понимать, в чем твои преимущества перед конкурентами. Без выделения сильных сторон не выстроить правильное предложение на сайте, которое попадает в потребности клиента. Важно понимать, что клиент уже сейчас закрывает свою потребность каким-то способом. Узнай, что это, почему он это выбирает и чего ему не хватает. И тогда будут понятны сильные стороны продукта, и как его лучше продать, забрав часть чужой аудитории. Так сайт с проработанной структурой и соответствующим контентом будет показывать лучший результат нежели тот, что сделан без исследований и без понимания преимуществ продукта.
Команда
Будет полезно выделять особенно этапы выбора цвета, подбор шрифта, стайл-борд, мудборд. Это позволит возвращаться к ориентирам проекта. Ты уже используешь сетки и компоненты. Предлагаю еще больше прокачать свою экспертизу в автолейаутах и собирать с их помощью всю страницу. Это позволит держать между блоками нужный вертикальный ритм, а также легко вносить изменения в макет.
Для улучшения коммуникации с разработчиком нужно визуализировать разные состояния экрана, чтобы всё было открыто, понятно и без переделываний простых вещей. Не забывай, что любая нарисованная деталь должна быть понятна всем участникам процесса разработки (как это будет работать, как применяться?). В некоторых случаях пояснение можно дать текстом, можно также скинуть ссылку на референс. Огромный плюс, если это пример с сайта для разработчиков с открытым кодом.
Что посмотреть
Статья про подход к редизайн проектов, откуда можно вынести много полезных мыслей: https://ux.pub/kak-pravilno-podoyti-k-protsessu-redizayna-i-povysit-tsennost-dizayna/#Opredelite_front_rabot
Сервис Типограф для аккуратных типографических знаков и сервис Главред для копирайтинга и улучшения смысла текста.
Статья про то, как улучшить карточку в интернет-магазине. А это одна из основных сущностей интернет-магазина https://ux.pub/uluchshaem-stranicu-produkta-na-sajte-elektronnoj-komercii/
Статья-самопроверки: Cерьезные ошибки ux, мешающие продажам https://ux.pub/sereznye-oshibki-ux-meshayuschie-prodazham/
Работу разобрали Ольга и Алана.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис развития и поддержки дизайнеров Design Line PRO.