Без категории

Опубликовано: 18.10.2023

Без категории

Основные советы по графическому дизайну для каждого веб-сайта. Часть 2.

Давайте продолжим советы по графическому дизайну веб-сайтов.

Рекомендуем вам присоединиться к бесплатному обучению на Введение в графический дизайн,где вы узнаете о деятельности графических дизайнеров, что они должны знать и уметь и над какими проектами они работают.

Используйте цвет и масштаб для обозначения значения сигнала

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

Из наиболее визуально доминирующего элемента следует ряд последующих элементов, размерами, весом или цветом которых управляют. Эти элементы визуальной иерархии побуждают читателя следовать по определенному пути вниз по странице к тому, что в конечном итоге является призывом к действию или форме. Рассмотрите возможность применения контрастных цветов или нескольких вариантов шрифта, чтобы создать визуальную иерархию внутри ваших элементов. Регулируйте различные настройки до тех пор, пока не почувствуете, что каждый элемент играет свою роль в направлении читателя к концу страницы или к призыву к действию.

Источник: www.bentographics.com.

Подчеркните призыв к действию

В коктейлях визуальной иерархии важно выделить призыв к действию. Призыв к действию (CTA) призван вызвать немедленный ответ или побудить к конверсии. Общие призывы к действию включают заполнение контактных форм, подписку на рассылку по электронной почте или совершение покупки. По сути, ваш призыв к действию должен отражать, почему вы вообще опубликовали страницу.

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

Уважайте складку

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

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

Каким бы шикарным ни был веб-сайт в стиле минимализма, сайт, лишенный человеческого прикосновения, может показаться холодным и безличным. Вот почему включение изображений реальных людей может быть так полезно в веб-дизайне. Когда на продающей странице было изображение реального человека на заднем плане, конверсия подскочила на 102,5%. Лица помогают завоевать доверие и повысить конверсию, если вы избегаете стоковых фотографий. Большинство стоковых фотографий являются постановочными и изображают моделей с жесткими, преувеличенными выражениями лиц. Это может иметь противоположный эффект, к которому вы стремитесь. Вместо этого выбирайте более непринужденные фотографии реальных людей, желательно реальных сотрудников или клиентов, которые понимают потребности вашей аудитории.

Источник: www.assets-global.website-files.com.

Быть последовательным

Разработка единого стиля зависит от вашего выбора шрифта, цвета, качества, освещения и пропорций. Например, заголовок размером 120 пикселей не должен сочетаться с подзаголовком размером 40 пикселей. От масштаба ваших элементов до того, насколько они персонализированы или стилизованы, создайте ощущение сплоченности, сохраняя последовательность.

Добавьте значки, чтобы добавить интересные слои

Здесь могут вступить в игру значки. От стрелок и молний до значков социальных сетей — их можно разместить, чтобы выделить раздел и привлечь трафик. Например, предположим, что вы хотите подчеркнуть преимущества вашей услуги или продукта. Вы создали три отдельных текстовых поля для подробного описания каждого преимущества. Самый простой и наименее утомительный способ повысить интерес к этим разделам — разместить значок поверх каждого.

Сделайте каждый элемент графического дизайна целенаправленным

Большая часть простоты — это удаление посторонних элементов дизайна, которые не служат никакой цели. Хотя исходная строка служит определенной цели, добавленные элементы оформления раздела на самом деле делают текст более трудным для чтения и менее впечатляющим. За счет удаления посторонних элементов и упрощения исходной линии поля дизайн становится чище и понятнее.

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

Посмотреть часть 1 статьи можно здесь: Основные советы по графическому дизайну для каждого веб-сайта. Часть 1