Прямая аналитика vs. Обратный разбор: Горизонтальный макет и основы дизайна под прицелом.

Привет! Эта неделя, в счастливом контрасте с предыдущими тремя, выдалась на удивление лёгкой. Я успела:

1. Насладиться тёплой погодой без мошки - спасибо ветру, который дал нам хоть немного отдохнуть от нее!
2. Провести время с семьёй - подтверждая, что они меня ещё узнают!
3. И, конечно, есть фрукты – потому что лето же!

Но вот задание... Оно казалось лёгким. Пока не дошло до дела. Провести прямой анализ да ещё и обратный анализ – это вам не фрукты есть!

Суть проблемы:

1. Мысли - витают где-то в облаках вдохновения...
2. Слова - напрочь отказываются складываться в связный текст, будто специально саботируют отчет!
3. Есть сомнения в проведенной прямой аналитике горизонтального макета, я разделила 1 самостоятельный блок на 2 дочерних блока из-за центрального круга, что приводит меня к неуверенной аналитики в этой части.

Общая композиция горизонтальная landing page. Доминанта расположена в вертикальной ориентации в правой части макета. С помощью направляющих можно определить поля. В итоге видим, что в макете используются четкие симметричные поля, закрыты якорные точки.

Визуально макет разделен на 2 самостоятельных блока - меню и основной с текстом и доминантой, которые обособленны друг от друга воздушным пространством.

Второй (родительский) блок (ниже первого блока с меню) содержит два дочерних блока. Блоки включают в себя:

1. Блок слева включает в себя заголовок, текст и плашки.
2. Блок справа включает в себя доминанту и плашку с текстом.

Круг со стрелкой отцентрован и не является доминантой.

Цветовая гамма спокойная. Основа — светлые монохромные тона, усиленные цветовым акцентом (акцент на взаимодействии).

В левом дочернем блоке (цвет #FFFFFF) текст выравнен по левой выключке, в правом блоке (цвет #D9ED3E) текст в плашке также выравнен по левой выключке.

В плашке (цвет #D9ED3E) текст выравнен по левой выключке (доказано с помощью направляющих и прямоугольников, которые определяют размер отступов).

Вертикальный макет использует центральную доминанту, адаптированную под новую ориентацию — в противовес правому акценту (в левом дочернем блоке) горизонтальной версии страницы.

Вертикальная версия (900×1200 px) реализована с частичным соблюдением композиции и элементной базы горизонтального макета согласно аналитическим выводам. Разница форматов потребовала компромисса: я сознательно изменила композицию, переместив некоторые элементы для сохранения баланса. А именно:

1. Круг с текстом "One size" поместила между первым и вторым блоками. Размерный дисбаланс плашек (верхняя уже нижней по высоте) мешает центрировать круг "One size" между блоками, как в референсе.
2. Верхний дочерний блок сделала меньше по высоте, чем в референсе из-за вертикальной ориентации.
3. По цветной плашке отцентровала 2 плашки с серой обводкой, в референсе цветная плашка отдельно и расположена над 2-мя плашками с серой обводкой.

Композиция включает два независимых блока, один из которых разделен на два подблока.

Почему я сразу не разделила макет на 3 части: 1 блок - меню, 2 блок - заголовок и текст с плашками, 3 блок - доминанта? Потому что мне помешал круг справа отделить сразу блоки друг от друга. В результате я большой блок разделила на 2 подблока.

С помощью направляющих заданы симметричные поля: боковые отступы равны друг другу, верхнее и нижнее поля идентичны по размеру. Якорные точки элементов выровнены по направляющим.

1. Текст в первом дочернем подблоке выравнен согласно референсу, а именно по левой выключке.

2. Достигнут высокий контраст между заголовками и основным текстом для улучшения иерархии.

3. Отклонение от референса: классический гротеск заменен на неогротеск -Manrope.

Цветовая гамма спокойная. Основа — светлые монохромные тона, усиленные цветовым акцентом (акцент на взаимодействии).

Практикум: анализируем реальную карточку Wildberries с типографическими и композиционными ошибками, затем создаем улучшенную версию на основе дизайн-принципов.

Сообщаю: это мои «дизайн-грехи» N года! Решила совершить подвиг — самой найти ошибки и сделать апгрейд:

1. Поля не соответствуют друг другу (маленькие и неровные). Поля должны быть равны со всех сторон или симметричны с двух сторон. Признак повторяемости отсутствует.
2. Фото девушки и парня отвлекает внимание от доминанты, что мешает сконцентрироваться на главном - доминанте.
3. Некорректная градиентная заливка (неконтрастные, мутные и грязные тона) на фоне конфликтует с доминантой, разрушая чистоту восприятия и целостность дизайна.
4. В заголовке нарушены пропорции внутренних и внешних отступов, отсутствует иерархия.
5. Отсутствует иерархия и контрастность в наборном тексте.
6. Доминанта прилипает к заголовку, отсутствует воздух между заголовком и доминантой.
7. Применен неверный эффект "Разрезанный текст" в заголовке.
8. Заголовок выравнен по центру, остальной текст выравнен по левой выключке, что неверно. Эта ошибка касается базового дизайна.
9. Иконка "часы" ближе к слову "120 минут", чем "120 минут" к "беспрерывной работе", хотя "120 минут беспрерывной работы" одно целое.
10. Эффекты в виде дыма, также не несут смысловой нагрузки. Нет конкретного их назначения на макете.
11. Тени под доминантой грязные, выглядят нереалистично.
12. Нет четкости у каменного подиума (немного размыт, низкое качество картинки), что портит и дешевит визуальный вид макета.
13. Модульная сетка нарушена.

Мой итог:

Я с помощью направляющих определила поля, закрыла поля якорными точками сверху и снизу по левой выключке.

Исправила все ошибки и создала с учетом полученных знаний на курсе новый макет.

Вывод: Неделя – огонь, фрукты – вкусные, дизайн – получился, а слова... что ж, с ними мы ещё договоримся.