Дизайн лендинга от @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 непропорционально длинная, её можно было бы сократить почти вдвое.
Оптимальный размер кнопки такой или меньше.
❤️ 9. Вёрстка блока с отзывами
Напоминают стикеры, мягкие фоновые цвета смотрятся хорошо.
Могут возникнуть проблемы с адаптацией этих отзывов под мобилки, когда места по ширине будет значительно меньше и придётся уводить заголовок из центра наверх.
😔 10. Выравнивание имени в карточке отзыва
Это минор и можно отнести к моим личным предпочтениям.
В исходной работе слева имя выравнивается по нижней границе карточки, словно съехало вниз. Я предпочитаю выравнивать имя напротив аватара, чтобы они образовывали единую цельную конструкцию.
😔 11. В секции отзывов обрезались шурёхи
Дефект.
😔 12. Контурные лого соцсетей
Я вижу в этом вольность по отношению к их брендингу и не стал бы так делать. Логотипы соцсетей не должны быть в стиле остальных иконок сайта. Обычно их делают залитыми.
Теперь поговорим про технический уровень и гигиену макетов.
😔 13. Финальный дизайн не отделён от вайрфреймов
На первом экране всё свалено в одну кучу, что мешает презентации. Тут и финальный UI, и внутренняя кухня в виде вайрфреймов, и даже референсы.
Хорошо бы отделять финальную работу от того, что нужно для его создания, чтобы зритель видел сначала только чистовик.
Обычно делают так, что основной флоу сверху, а всё остальное на других экранах или хотя бы снизу. Здесь структура ещё несложная, но если у тебя будет 50 экранов, утонем.
❤️ 14. Используешь страницы, это хорошо. Главные макеты — на первой странице, это тоже хорошо.
❤️ 15. Узнала, что такое 12-колонник
Это хорошо.
❤️ 15. Узнала, что такое 12-колонник
Это хорошо.
😔 16. Но увы, пользоваться им не научилась
Справа текстовый блок заканчивается когда хочет. Разработчики озадачатся и будут лишний раз спрашивать, какова ширина текстового блока.
😔 17. Неудачное положение льва
Лев стоит так, что легко может создавать проблемы для вёрстки. При наименьшей ширине экрана на текущей сетке он обрезается экраном. При сохранении позиции льва относительно сетки из-за края экрана будут торчать рыжее ухо и хвост. Так можно поступать с шурёхами и фоновыми обьектами, но не с маскотом. А если лев выравнивается абсолютно, (left: 0), может произойти его наложение на надпись «Your…», что понизит читаемость надписи.
Как надо: Фразу про Playlearning вполне можно сверстать в две строки, чтобы лев влез в первые две колонки.
😔 18. Типографика: не соблюдается общая базовая линия
https://ru.wikipedia.org/wiki/Базовая_линия_(дизайн_шрифта)у меню и кнопки Log in, хотя визуально они оформлены похоже. От этого есть ощущение, что вёрстка сломалась и кнопка задрана наверх. Хорошо бы выровнять.
❤️ 19. Все иконки в стандартных боксах 48х48 — это здорово, разработчикам будет проще их позиционировать.
😔 20. Не используются компоненты
То есть вообще. Хотя бы для повторяемых блоков вроде хедера, футера и кнопок это обязательная гигиена, чтобы поддерживать консистентность.
Обязательно выносим футер и хедер в кит. При добавлении в них новых ссылок больше не будем ходить по всем макетам и обновлять вручную.
Иконки для такого маленького проекта можно оставить фреймами, поскольку они не повторяются нигде, кроме футера.
❤️ 21. Типографика имеет стили текста
Вау! Используются стили текста, это профессионально.
😔 22. Вместо единой системы типографики — три
Для десктопа, планшета и мобилки используются три разные типографские системы. Так делать не стоит. Лучше сделать более гибкую единую систему, в которой есть и маленькие, и большие размеры. Почему — поговорим в отдельном разборе.
❤️ 23. Цвета тоже в стилях
И реально используются на слоях макетов. Кайф.
😔 24. Кнопка не собрана в варианты и не обезличена
Этот пункт про удобство дизайнеров, которые будут после тебя дорабатывать макет. Кнопка должна быть собрана в варианты, чтобы при выделении определённого экземпляра её можно было переключать в другие состояния, а не заменять как фрейм.
Не стоит увлекаться оформлением красивых гайдлайнов для Биханса. Лучше сделать так, чтобы дизайнерам было сразу удобно переключать кнопки в разрешённые тобой состояния.
Вот как это должно выглядеть.
😔 25. Вся вёрстка не использует AutoLayout
На уровне слоёв все фреймы, из которых состоит макет, живут своей жизнью незавимо друг от друга, поскольку нигде не используется AutoLayout. Если один из пунктов меню станет длиннее, другие на это никак не отреагируют.
Он даёт точность отступов и лёгкость работы с контентом, а тажке упрощает реализацию адаптивности.
Конец разбора.