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