Дизайн лендинга от @SvetlanaTafi в стиле наив, большой разбор.
#UI_ревью 5. Разбор сайта для Lingokids
Сегодня у нас супер-подробное ревью сайта. В нём подсвечены частые ошибки начинающих, которые я видел в макетах джуниоров. Если ты начинающий дизайнер сайтов и приложений, особенно рекомендую к изучению.
Работа в Figma Community
https://www.figma.com/community/file/1290649997767955706/ui-review-5-lingokidsАвтор работы: @SvetlanaTafi
От автора:
Добрый день, прошу оценить и дать обратную связь на учебный проект. Задача была в том, чтобы сделать редизайн сайта. Он должен познакомить пользователя с услугами компании.
Хочу услышать общие впечатления, недочёты и слабые места. И можно ли с работами такого уровня претендовать на место джуна? Или пока слабо?
Буду очень благодарна 🙏
Комментарий Саши:
Привет, Светлана. Общее впечатление противоречивое, но скорее позитивное. Эта работа пока сыроватая, но можно быстро исправить многие моменты. Я постарался бережно прокомментировать всё, что увидел.
Заявленная тобой задача — познакомить пользователя с услугами компании. Если под услугами понимаем мини-игры Lingokids, им на сайте не уделено никакого внимания и непонятно, чем именно мы продаём выгоды продукта, кроме приятного визуального стиля. Нет хука, через который мы вдохновляем людей нажимать на кнопку Download. Самый простой способ его сделать — добавить скриншоты настоящего продукта.
С точки зрения UI это хорошая джуниорская работа, я уверен, что ты многому научилась в процессе её создания. Но UX и коммуникация, к сожалению, пока не на высоте. С точки зрения гигиены макетов тоже можно лучше, расскажу как.
Если бы заявленная задача была в том, чтобы дать минималистичный MVP-лендинг продукта, она была бы покрыта.
Разбор и анализ визуальных приёмов будет в комментариях, выкладываем сейчас.
@slashdesigner #первые_шаги
Начнём с общих вопросов про дизайн.
😔 1. Нет знакомых маскотов
Lingokids
https://lingokids.com/lingokids-universe— это уже сильный детский бренд. Он построен на узнаваемых маскотах, которые являются неразрывной его частью.
Если мы реально делаем сайт Lingokids, мы должны знать их имена: Билли, Элиот, Кауи, Лиса, Бэйби Бот. Моя дочь играет в это приложение каждый день, так что для меня они почти как домашние животные. Не использовать их образы — это очень странное решение, лишающее сайт мощного эмоционального аспекта. Лев, слон и лис нарисованы неплохо, но вызывают когнитивный диссонанс. Всё равно, что заменить кролика Nesquik на незнакомого мишку. Кощунственно! Возникнет вопрос: А это точно Nesquik или подделка? Если это твои иллюстрации, они классные.
❤️ 2. Визуально привлекательный плотный хиро
Весь первый экран (хиро) выглядит вполне симпатично, подобрана стильная мягкая пастельная палитра, которая соблюдается как в иллюстрациях, так и позже в вёрстке: блоках и цвете кнопок. Есть гармония между фоновым цветом и нарисованной радугой около маскота. Вторая радуга на фото в ободке девочки тоже с ней рифмуется.
Радуга и шурёхи в стиле наив подходят стилистике сайта про детский продукт.
😔 3. Неподходящее фото: девочка схватилась за голову
Сама иллюстрирующая фотография с девочкой имеет скрытый негативный подтекст: она схватилась за голову, то ли от скуки, то ли от сложности заданий и совсем не выглядит вовлечённой. Следует уделять внимание психологическим жестам и не транслировать то, что не хотим.
А если делать как следует, стоило бы отказаться от использования конкретно этого фото из-за неудачной позы. Если был бы выбор фото из фотосессии с девочкой, нужно было подобрать другую позу.
Вариант 2 — сделать фотосессию заново, найти реального ребёнка в жизни, посадить её с айпадом и настоящим интерфейсом Lingokids где-нибудь в естественной среде среди игрушек. Лучше бы фото было снято на телефон, но транслировало правильный посыл, работающий на продажу.
Ракурсы в фото-материалах гораздо важнее внешнего лоска профессиональной фотосессии, особенно в учебной работе.
😔 4. Левый контент на айпаде
Сам текст на её айпаде явно не похож на интерфейс Lingokids и не работает на продажу, хотя контент айпада по смыслу это самое важное, что есть на этой странице и привлекает максимум внимания.
Я понимаю, что это скорее всего какое-то стоковое фото, которое наспех подобрали для учебной работы. Но если цель сайта в продаже продукта, первый экран необходимо прорабатывать очень тщательно. Ничто не мешало использовать эту фотографию в качестве мокапа и через плагин Snapshot или на худой конец Photoshop подставить интерфейс Lingokids.
Сам айпад в каком-то обшарпанном кейсе, не привлекает. Да, я сам писал о шершавости, но камон, не до такой же степени!
https://medium.com/slashdesigner/stock-vs-authentic-e15473906209
😔 5. Шурёхи ломают композицию
Через шурёхи мы можем намеренно загромождать или очищать макет. Хорошо, когда страница находится в композиционном равновесии и распределение элементов равномерно. Если наспамили слева, значит, это надо как-то компенсировать справа. Здесь же слева и лев и шурёхи, получается перегруз.
Я бы оставил их ниже, на экране Step By Step Learning Plan.
😔 6. Иллюстрации — «чтобы были»
Вместо того, чтобы показать выгоды продукта лицом, здесь мы увлекаемся эстетичными стоковыми фото, которые совершенно тут не в тему и иллюстрируют саму концепцию обучения ребёнка и процесса чтения детской книжки. Lingokids в это никак не встраивается.
😔 7. Конфликт акцента на кнопке Watch More
На двух соседних секциях стоит розовая акцентная кнопка Watch More. Непонятно, по какой логике она работает.
Вариант 1. Это общий CTA всей страницы
По правилам хорошего тона, на странице должна быть одно главное действие, иначе пользователь будет путаться, какое действие важнее. CTA (call-to-action) может повторяться в нескольких местах, но приводит к одному действию, например, к запуску красочного рекламного ролика о Lingokids. Если мы хотим подчеркнуть её и получить больше просмотров на видео, мы осмысленно выделяем её акцентом относительно других кнопок. В этом слвчае непонятно, почему она расположена так близко к текстам. По такой логике следует убрать одну из них.
Вариант 2. Это индивидуальная кнопка More для каждого блока, не CTA
Вёрстка такова, что кнопка завершает два разных смысловых блока: один про темы обучения, другой про пошаговый план. Близость к этим блокам делает эти кнопки контекстными по отношению к ним, группирует через правило близости.
https://medium.com/slashdesigner/margins-8f2a78b10181При этом, обе кнопки выглядят одинаково и слишком ярко.
В этом случае непонятно, чем обусловлено такое сильное акцентирование. Следует сделать обе контурными.
😔 8. Кнопка Watch more непропорционально длинная, её можно было бы сократить почти вдвое.
Оптимальный размер кнопки такой или меньше.
