4-ая неделя обучения: работа с референсами.

На данной неделе у нас было два задания.

Необходимо было взять горизонтальную страницу сайта, проанализировать ее и сделать карточку для МП вертикальной ориентации 900х1200 пикс.

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

Блоки формируют поля. Текст в правом блоке разделен на 4 иерархии. Первая иерархия-заголовок по размеру значительно отличается от остальных, так же выделен акцентным цветом.
Для крупного заголовка взят шрифт антиква, как на самой доминанте. Остальной текст неогратеск.

Цветовая гамма-аналоговая с акцентным цветом.

Исходя из анализа референса был составлен макет вертикальной ориентации, с сохранением всех принципов исходного дизайна.

По расположению - слева доминанта, справа текст. Сверху контекстное меню. Сохранила иерархии текста. Так как макет вертикальной ориентации, чтоб не было пустот, текст справа разделила на 3 блока, в нижнем блоке добавила один оффер и расположила по модульной сетке.
Сохранены все принципы выравнивания и полей.
Шрифт в заголовке с засечками, как на доминанте. Для остального текста взят неогратеск Inter.

Цветовая палитра соответствует принципам референса. Цвет взяла акцентный к доминанте, остальной текст черный. Сам фон светлее доминанты.

Необходимо взять карточку товара на ВБ, которая имеет дизайн, с большим количеством ошибок. Проанализировать ее, на основе этого создать свой исправленный вариант. Вот такая карточка товара мне попалась.

Композиция вертикального формата, симметричная.
- Поля со всех сторон не одинаковые, маленькие справа и слева.
- Фон контрастный к доминанте и тексту, но из-за рисунка он шумный и мелкий текст и подзаголовок не читаются.
- Текст сильно прижат к доминанте. - Нет четко выраженной иерархии-офферы слева в акцентных плашках крупнее заголовка. В этих плашках нет выравнивания текста, межстрочное расстояние слишком маленькое. - Нарушены правила внутреннего и внешнего: расстояние между заголовком
и подзаголовком больше, чем расстояние от заголовка до доминанты. Также расстояние между нижними офферами справа практически одинаковое, как
расстояние от заголовка. - Нет выравнивания заголовка и подзаголовка между собой. Заголовок по диагонали пишем снизу вверх, тут наоборот.
- Нижние офферы написаны капсом, сплошным текстом, нет никакого разделения.
- Текст в левом верхнем круге сильно прижат к обводке нет воздуха. - Все текстовые блоки между собой не выравнены.

После проведенного анализа у меня получился следующий вариант:

Так как доминанта имеет форму самого макета я решила сделать базовую композицию вертикального формата ассиметричную. Фон взяла контрастный с самой доминанты. Здесь есть четкая иерархия, соблюдены правила внутреннего-внешнего, текст разделен на блоки, закрыты все поля.