Разбор кейса про виртуальный гид на тему цветоводства
О том, как иногда полезно отпускать кейсы, если не получается целиком их освежить. А также о динамике и повествовании.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, которую вы видите ниже, и файла в Figma, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Виталий Асташкин, подписчик DL PRO
Какие ключевые вопросы по работе у тебя есть к менторам?
Понятен ли процесс работы и моя роль в проекте? Доступна ли приведённая в кейсе информация, смотрится ли вообще кейс приемлемо?
Задача
Подготовить кейс на беханс по проекту для павильона Цветоводство и озеленение. Как это бывает почти со всеми старыми работами, принятый дизайн мне не очень нравится, и в кейсе я пытался подсветить UX и техническую составляющие
Привет, Виталий! Кажется, мы уже видели предыдущую версию кейса. Видим, что ты сделал новую версию с новыми схемами и подачей. Разбираем кейс по блокам и советуем, что улучшить.
Видео разбор
Логика
В кейсе много технических подробностей, но мало уделено именно пользовательскому опыту. Есть юзерфлоу, но у викторины он довольно-таки простой, поэтому можно было бы больше уделить внимания деталям, нюансам и запроектировать их. Например, состояния ошибки, когда фигура не распознана, и так далее...
Клиент, продукт и ЦА определены заранее. Поэтому на этапе исследования проанализированы конкурентные решения, технические особенности, подобраны референсы.
Почему бы не показать сравнительный анализ решений и не написать вывод? И почему бы не привести референсы? Это покажет твои аналитические способности и то, как ты работаешь с источниками.
Ты спрашивал, понятен ли процесс работы. Кажется, есть куда более удачные способы его визуализировать. Например, при помощи таймлайна. Так все этапы лучше различимы, понятно, сколько какой занял, понятен порядок. Что касается твоей роли — это практически едва различимо. Мне кажется, надо было так и написать: «моя роль в проекте:» и дальше перечислить плюс показать все этапы с длительностью.
Визуал
К визуальной составляющей есть вопросы. Есть блоки, где экраны под углом. Кажется, это не лучшее решение, т.к. приходится наклонять голову, чтобы их изучить. Тени в этом блоке грязные, контраст текста на многих экранах слабоват, полупрозрачная плашка на цветном фото создаёт грязь.
Мудборд и референсы
Стоило подобрать побольше референсов и по UI и по оформлению кейса, потому что двух явно недостаточно. Причём при подборе и изучении стоит себе фиксировать, что сделано классно и почему это работает.
По поводу работы с референсами. Стоит поступать смелее, тем более если решение хорошее и акцентирует на нужных вещах. Смотри: в референсе кроме кучи экранов есть ещё и фактоид с очень крупной цифрой, которая сразу бросается в глаза. Анализируем реф дальше, что классно: сетка экранов. Обрати внимание, что это не равномерная сетка, а кладка типа кирпичом. Про неё ещё можно погуглить «masonry grid». Далее цвета: фон белый, а тени воздушные и едва заметные. Из всех этих приёмов у тебя только куча экранов. А если оставить ту же суть, что у тебя, но применить больше приёмов из референса, то у нас получится и больше сделать акцент на проделанной работе, и эстетичнее это визуализировать.
Типографика
По всему кейсу встречаются очень досадные типографические ошибки: висячие предлоги, огромная длина строки (рекомендуется 60-80 символов), опечатки. Это всё очень обесценивает твой труд и снижает шансы быть выбранным работодателем.
Команда
Сложно оценить, насколько хорошо подготовлены экраны к разработке, потому что мы имеем дело с файлом для презентации. Однако в нём тоже нужно соблюдать порядок.
Порядок в макете
Здорово, что есть стили цвета и они хорошо сгруппированы. Стоило бы добавить также стили типографики.
Что дальше
Кажется, этот кейс уже потратил у тебя много сил, поэтому, вероятно, стоит его отпустить и попробовать собрать что-то новое, используя свой опыт работы с интерактивными экранами. Например, интерактивный гид по торговому центру с поиском-навигацией. Либо доработать по нашим замечаниям, но пройтись стоит исключительно по всему: исследования, логика, UX, визуал, подача и порядок в макете.
Что посмотреть
Попробуй изучить возможности анимации и внедрить её в кейс. Это поможет удержать внимание зрителя, особенно если подобрать классный ритм повествования, как например тут:
https://www.behance.net/gallery/130995713/eParitet
Чаще UI анимируют в After Effects, но есть более простые альтернативы в виде фигма-плагинов:
https://www.figma.com/community/search?model_type=public_plugins&q=motion&fuid=393752546746740103
Работу разобрали Антон и Валерия.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: