Здесь использована крупная иллюстрация как главный акцент, сложный объемный заголовок и важная информация для потенциальных посетителей выставки.
- Начнем с контраста: розовый цвет в заголовках и дополнительном тексте слабо выделяется на бежево-коричневом фоне. Чтобы лучше расставить акценты — меняем фон на черный — с ним сейчас будет проще работать.
- Фото Давида (с точкой притяжения на жвачке) по визуальному весу сопоставимо со сложным заголовком. Чтобы задать четкие «шаги» для зрителя, стоит сделать изображение крупнее, так как иллюстрация или фото — это первое, что привлекает внимание.
- Шрифт также требует доработки: он довольно сложный для восприятия, особенно с учетом длины заголовка. Межстрочное расстояние слишком большое, а буквы расположены слишком близко друг к другу. Исправляем: выбираем более простой шрифт, корректируем интервалы и размеры для лучшей читаемости.
- Важную информацию, сопоставимую по смыслам (галерею, вход, даты) выносим в верхнюю часть постера. Распределяем цвета так же между собой, таким образом эти две части теперь перекликаются.
- У нас остается дополнительная информация, такая как адрес, время работы, телефон. Они сами по себе самоопределяемы, нет необходимости перегружать текст подписывая их.
- Знаки вопроса, это хорошее решение, чтобы разнообразить макет и при этом указать на тему постера/выставки. Но чтобы они не отвлекали внимание на себя — визуально привяжем их к иллюстрации и скорректируем их вес между собой.
Здесь у нас присутствует три небольших иллюстрации, короткий заголовок, несколько текстовых элементов и описание.
- Хочу сказать, что мне очень зашло, как серебристо-голубой фон сочетается с бабочками, это смотрится очень красиво. Но бабочки заслуживают быть больше и активнее. Для контраста между ними так же делаем разницу в размерах.
- Заголовок сейчас одинок в своем углу, хотя он может взаимодействовать с фото, в данном случае бабочки просятся сесть прямо на него, летать вокруг, подчеркивая собой его значение. Сам шрифт выбран тоже хорошо, но можно взять ещё более изящный, аналогичный по смыслу. Единственное, что в заголовке заметно выбивается это цвет. Я думаю идея была в том, чтобы взять оттенок оранжевого из бабочек (это хорошо), но он слабо смотрится на серебристом фоне. Поэтому лучше попробовать вариант темного цвета (не черный, а снова цвет из бабочки).
- Дополнительные текстовые элементы: красота, легкость и тд. Плашки сами по себе лучше использовать реже, если можно обойтись без них, значит они не нужны. Продолжаем раскрывать второстепенные элементы через фото — и три слова хорошо лягут по краям крыльев.
- Добавляем постеру объем с помощью блюра (добавляем бабочек на дальний план).
- Текст на всю ширину листа так же не очень удобно читать, если он на большом постере, взгляду будет сложно каждый раз возвращаться к началу строки на другом конце постера. Поэтому пробуем разместить его в 2 колонки.
Стильный макет, мне нравится его настроение. В данном случае помимо черного использовался белый цвет, что делает макет более приближенным к стилю бренда, делает его чище и свежее.
Тут много интересных элементов и верхняя часть макета цепляет. Идя дальше, видно много свободного пространства, макет получается воздушным и читается легко.
Но чем ниже тем идет уход немного в сторону от основного направления. Это в основном касается сложной кнопки, она кажется слишком тяжелой для фирменного стиля бренда, перегруженной эффектами неоном. Плюс так же есть вопрос к шрифту, у которого выбрано жирное начертание, в гайдбуке оно не указано и в совокупности с заголовком баннера нижняя часть макета существенно отличается по настроению. Предположим, мы так же отделяем баннер и оставляет блок с тарифами. И у нас создается вайб неонового казино). В то время как ощущение загадки, эстетики, чего-то сверх... — исчезает. У тебя так и написано при работе над макетом, неон/казино/кибер панк, но гайдлайн намного меньше про неон и намного больше про визуальные контрасты, сдержанные, но сильные акценты.
Также детали, например тени или буллиты в виде фишек, эти мелочи уводят нас немного в сторону. Фишки меняем на карточки, а тени убираем вовсе, в данном случае на пользу стилю они не идут.
Это можно доработать простыми вещами, поправить шрифты, доработать визуал блока тарифы, и пр. И тогда хороший макет превратится в отличный и будет на каждом уровне читаться как единый материал конкретного бренда.
Так же стоит обратить внимание на то что баннер несколько перегружен, руки прикольные, но капли создают много шума, который у нас и так присутствует (там и текст и монетки и слоган ещё повыше. И было бы лучше, если бы пространство не усложняло, а наоборот давало возможность этим элементам там свободно находиться.
Рассмотрим логические и визуальные ошибки данном варианте дэшборда.
Логические ошибки:
- Средний чек и воронка продаж – их стоит поменять местами и пересмотреть их визуализацию. Воронке нужно больше пространства, чтобы лучше считывались показатели. А средний чек, помимо динамики, хотелось бы видеть еще и отдельным значением на текущий момент. При этом детализированный график для него излишен, можно сильно упростить.
- Сделки и клиенты – здесь не хватает текущих значений. Динамика – это полезно, но важно сразу видеть так же и актуальное состояние, без дополнительных действий.
- Остаток продукции на складе – доли бытовых и промышленных товаров, скорее всего, не меняются критично относительно друг друга, так как производство и сбыт уже налажены, так что в таком виде блок малоинформативен. Плюс, чтобы увидеть точные цифры, нужно наводить курсор на каждый элемент, что неудобно. Визуализацию стоит пересмотреть.
Для дальнейшей проработки визуала:
- Темная тема сложна в исполнении, важно сохранить читаемость и комфортное восприятие. Сейчас контраст очень сильный, плашки слишком активные. Стоит сделать их чуть менее заметными, чтобы фон выглядел визуально более глубоким и отойти от базового вида к чему то более интересному.
- Хочется усилить общую стилистику в направлении от такого «классического» визуала, до чего то более современного. Я имею в виду типовые формы с контуром в фильтрах и периодах, немного старомодные что ли. Упростить визуализацию графиков, линии на фоне не всегда помогают, в дэшах они скорее мешают, тк вся информация так или иначе привязана автоматически к точке и сравнение по линейке пользователю не нужно, это становится лишним шумом. Тоже самое касается и осей. То сеть графики я бы пробовала сильнее облегчить.
Прототип аккуратный и понятный, хорошая визуализация блоков. Нравится, что есть четкие числовые акценты — это как раз то, что важно для пользователя. Теперь к доработкам.
Логические моменты:
- Профили клиентов – если цвет передает число заказов (от красного к желтому), а % показывает долю клиентов, то крупный по % профиль может делать небольшие заказы и отмечаться желтым. Верно? Интересная логика, но ее нужно обсудить с аналитиками, чтобы учесть их взгляд.
- Количество сделок и клиентов – визуально понятно, но важно разобраться, как это реализуется системно.
Визуальные моменты:
- Логотип компании – должен быть, так как это рабочая среда клиента, выполненная в фирменном стиле.
- Расстояния между элементами – сейчас, например, в блоках "Выручка" и "Остаток на складе" логика единая, но расстояния выглядят недоработанными. Важно, чтобы внешние отступы были больше внутренних, иначе взгляд скачет между значениями ТО.
- Акценты и уникальность. Отдельно хотелось бы внести в дэш чуть больше решений, которые придадут ему визуальной уникальности. Не перегружая макет деталями, тем не менее каждый дэшборд можно доводить до фирменной стилистики клиента не только с помощью цвета, поэтому предлагаю поискать решения, которые могли бы дать такие возможности. Но и цветовое решение применимо.
- В данном случае у нас есть так же проблема, как у другой студентки, с тем что некоторые части выглядят более активными, чем другие и не всегда это подкреплено логической необходимостью. Например воронка и средний чек определенно сильно влияют на внимание, которое получает виджет ТО. Рекомендую поискать решения для таких моментов, и опять же, фирменные цвета не обязательно использовать активно, есть оттенки серого, есть возможность использовать цвет не в графике или диаграмме, тут нужно выстраивать логику чтения и по ней дотягивать блоки визуально.