В телеграмме мне написал молодой человек с просьбой оценить его первую карточку товаров, сделанную в Figma. Я пообещала исправить работу и указать на основные недочеты. Такой разбор может быть интересен и другим начинающим дизайнерам, поэтому с согласия автора я написала отдельную статью.
Сразу скажу, что для первого раза карточка сделана вполне прилично, но исправления нужны. Начинаем по порядку:
1. Фон.
Что было?
Цвет подобран неплохо. Теплый коричневый оттенок костюма вполне сочетается с холодным серо-голубым.
Что я исправила?
Я сделала фон градиентным. По бокам оставила желтым, а в середине голубым, чтобы акцентировать внимание зрителя на фигуре девушки, выделить ее. Эти цвета ассоциируются с холодными временами года (осенью и зимой) для которых и предназначен костюм. Для самых недогадливых размещаю снежинки на голубом фоне и осенние листья на желтом, но так чтобы они были еле заметны. Тут помогут прозрачность и блюр. Почему так? Яркие дополнительные элементы перетягивают внимание на себя. Если не уверены, то лучше ограничьтесь градиентом. Помните, задача карточки - продать костюм.
2. Фигура девушки
Что было?
Фигура девушки размещена по центру и это правильно. Проблема в размере. Он очень большой. Голова упирается в верхний край карточки. Не забывайте про "воздух" по краям. Есть претензии и к тому, как девушка вырезана, особенно в районе головы. Видны белые участки между прядями волос.
Что я исправила?
Фигура девушка осталось по центру, но пришлось ее уменьшить. Теперь есть место для основной надписи сверху и сбоку. Появился тот самый "воздух".
Открыть файл со слоями не получилось. Вырезала девушку в фотошопе. Как это сделать смотрите здесь https://dzen.ru/video/watch/670ea955609483307cbab970?collection=author%3A8960e580-311c-485e-b1de-1ff23efe2933&order=reverse. Немного поработала над контрастностью изображения.
Чтобы сделать фото более объемным, придать карточке глубину, добавила тень сзади. Скопировала изображение девушки наклонила его и перенесла на задний план. Скорректировала с помощью эффекта наложения, прозрачности, блюра. Нижняя тень - это черно-белый овал, измененный с помощью вышеуказанных инструментов.
3. Шрифты и верстка
Что было?
Верстка - самое слабое место карточки для разбора. Здесь мы наблюдаем винегрет из шрифтов и надписей, расположенных в хаотичном порядке ( или беспорядке). Сами тезисы, кстати, очень хорошие. Подчеркивают все основные преимущества костюма.
Что я исправила?
Шрифтов не нужно много. Я остановилась на стандартном Roboto. Он понятный и имеет много начертаний. С их помощью и строим иерархию надписей в тексте. Главную (продаваемый предмет) пишем большими буквами и жирным начертанием. Вторую строчку в заглавии делаем поменьше. Можно использовать более легкое начертание. Для остальных тезисов оставляем его же или выбираем еще более тонкое начертание. Это зависит от количества и длины фраз.
Можно использовать несколько шрифтов, но точно не больше трех. Если бы речь шла о вечернем платье или предметах роскоши, то позволительно разбавить стандартный шрифт декоративным. В рекламе спортивного костюма он не нужен.
Основную надпись располагаю по центру. Выделяю ее градиентной плашкой сочетающейся с тоном костюма. Придаю ей небольшую тень. Такие же плашки с описанием добавляю сбоку, чтобы покупатель видел списком все основные преимущества товара, а не бегал глазами по карточке. Уравновешиваю композицию с помощью иконки в виде снежинки с другой стороны.
Надписи делаю белыми. Если цвет фона или плашек не слишком темный, то всегда отдавайте предпочтение белому цвету. Он смотрится более благородно.
Мой вариант не является единственно верным и правильным, но он легко воспринимается покупателем. Остальное - вкусовщина. Цель инфографики - донести информацию, а не удивлять дизайнерскими фишками. Помните об этом всегда и напоминайте иногда заказчикам. Всем удачи!