Помощь по Теле2, тарифы, вопросы

С течением времени значительная часть визуальных элементов исчезла, чтобы уступить дорогу более понятной, «простой» графике. Этот новый «плоский» стиль дизайна стирает элементы, которые создают глубину и размерность, такие как тени и текстуры. Дизайнеры, сегодня, склонны к плоскому дизайну, потому что он оставляет важные компоненты дизайна — цвет, форму и содержание. Некоторые «ключевые слова», используемые для описания этого стиля дизайна, являются «минималистичный», «чистый» и «современный». Но откуда появилась эта идея «плоского» дизайна?

Плоский дизайн имеет сходство с «Швейцарским типографическим стилем». Швейцарский дизайн зародился примерно в 1920-1930 годах. Он фокусируется на использовании сеток (для выравнивания), типографских шрифтов без засечек (как на примере) и четкой иерархии графических элементов. Фактически, очень любимый шрифт sans-serif «Helvetica» был создан в эпоху процветания этого стиля дизайна в 1957 году.

Термины «плоский» дизайн и «минимализм» сегодня часто взаимозаменяемы. Минимализм, однако, в значительной степени является составной частью «плоского» дизайна. Минимализм приобрел популярность как стиль дизайна в 1960 году. В период минимализма художники, в первую очередь, удаляли все, что считали «несущественными» в макете. Несколько художественных работ, содержащих простые геометрические фигуры, были восприняты как одни из величайших картин той эпохи.

Минимализм в дизайне интерфейса стал набирать популярность в 2012 году, с выпуском Windows 8 и его «чистого» интерфейса Metro. Стиль дизайна Metro использует строгую сетку, состоящую из блоков контента с острыми краями и вершинами, контрастными цветами и типографией без засечек.

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

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

Плоский дизайн

Наряду с переходом на iOS 7 от iOS 6, Apple представила интерфейсы «плоского дизайна» для своего массива продуктов. Если сравнить визуальный дизайн iOS 6 с iOS 7, очевидно, что Apple покончила с такими элементами, как тени для элементов и текстурами — вот почему такой дизайн называется плоским. Тем не менее, этот стиль дизайна по-прежнему сохраняет скевоморфные аспекты: телефонное приложение по-прежнему использует иконку трубки, приложение камеры все еще использует камеру, а почтовое приложение все еще использует конверт в качестве значка.

Зачем двигаться в сторону плоского дизайна?

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

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

Кроме того, плоские конструкции имеют тенденцию загружаться быстрее.

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

Сколько бы сил вы ни вложили в исследование пользователей и созда" ние модели поведения продукта, способствующей достижению их це" лей, силы эти будут потрачены впустую, если вы не сумеете должным образом донести до пользователей принципы этого поведения. В слу" чае интерактивных продуктов это часто делается визуальными средст" вами – путем отображения объектов на дисплее (хотя в некоторых слу" чаях поведение продукта приходится доносить посредством физиче" ских свойств, таких как форма аппаратной кнопки или тактильные ощущения от нее).

Визуальный дизайн интерфейсов – дисциплина, которую из"за сходст" ва с графическим дизайном и изобразительными искусствами часто воспринимают неправильно. Нередко ее неверно определяют как «на" ложение шкурки» на интерфейс; нам даже доводилось слышать такую формулировку, как «украшательство продукта».

Наш опыт привел нас к выводу, что визуальный дизайн интерфейсов – очень нужная и уникальная дисциплина, которую следует применять в сочетании с проектированием взаимодействия и промышленным ди" зайном. Она способна серьезно повлиять на эффективность и привле" кательность продукта, но для полной реализации этого потенциала нужно не откладывать визуальный дизайн на потом (иначе получатся попытки «накрасить свинью»), а сделать его одним из основных инст" рументов удовлетворения потребностей пользователей и бизнеса.

Разработка визуального дизайна интерфейса требует наличия ряда со" пряженных навыков. Конкретный набор навыков определяется созда" ваемым продуктом. Чтобы создавать привлекательные и удобные пользовательские интерфейсы, дизайнер интерфейса должен владеть базовыми визуальными навыками – пониманием цвета, типографики, формы и композиции – и знать, как их можно эффективно применять для передачи поведения и представления информации, для создания

настроения и стимулирования физиологических реакций. Дизайнеру интерфейса также требуется глубокое понимание принципов взаимо" действия и идиом интерфейса, определяющих поведение продукта.

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

Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины дизайна

Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами. И те, и другие должны быть искусны и опытны во всем, что касается этих средств, но их деятельность слу" жит различным целям. Цель художника – создать объект, взгляд на который вызывает эстетический отклик. Таким образом, изобрази" тельное искусство – способ самовыражения художника на тему, кото" рая у него (а иногда и у общества в целом) вызывает эмоциональный или интеллектуальный интерес. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.

Дизайнеры, напротив, создают объекты для других людей . В то время как современные художники озабочены в основном самовыражением , дизайнеры, как отмечают Кевин Маллет и Даррел Сано в своей велико" лепной книге «Designing Visual Interfaces» (Mullet and Sano, 1995), «за" няты поисками наиболее подходящего представления для передачи некоторой специфической информации», то есть коммуникацией . Если говорить о дизайнерах визуальных интерфейсов, то они ищут наилуч" шее представление, доносящее информацию о поведении программы, в проектировании которой они принимают участие. Придерживаясь целеориентированного подхода, они должны стремиться представлять поведение и информацию в понятном и полезном виде, который под" держивает маркетинговые цели организации и эмоциональные цели персонажей.

Скажем прямо, что визуальный дизайн пользовательских интерфей" сов не исключает эстетических соображений, но такие соображения не должны выходить за рамки функционального каркаса. И хотя в визу" альных коммуникациях всегда присутствует субъективизм, мы стре" мимся минимизировать влияние вкуса . Мы пришли к выводу, что чет" кое выражение эмоциональных целей пользователя и бизнес"целей неоценимы, даже когда речь идет о дизайне тех аспектов визуального интерфейса, которые работают на благо бренда, отвечают за опыт пользователей и обеспечивают физиологические реакции. Более по" дробно о физиологическом уровне когнитивной обработки мы писали в главе 5.

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

При создании графических интерфейсов следует:

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

Рассмотрим их подробнее.

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

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

Глядя на любой набор визуальных элементов, пользователь бессознательно задается вопросом: "Что здесь представляет интерес?" – и почти сразу же: "Какая связь между этими объектами?" Мы должны стремиться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.

Рис. 3.4.

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

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

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

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

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

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

Элементы, расположенные рядом, как правило, связаны друг с другом. Если необходимо создать группировку, удобно реализовывать ее посредством расстояний. Элементы, разделенные бОльшими расстояниями, можно группировать посредством общих визуальных свойств.

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

Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, – дизайнеры называют этот прием тестом с прищуриванием (squint test). Закройте один глаз и посмотрите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замеченные ранее проблемы в композиции интерфейса.

Визуальная структура и логические маршруты

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

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

Выравнивание

Выравнивание визуальных элементов – один из главных приемов, позволяющих дизайнеру представить продукт пользователям в систематизированном и упорядоченном виде. Сгруппированные элементы следует выравнивать как по горизонтали, так и по вертикали ( рис. 3.5).

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

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

Сетка

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

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

В идеальном случае сетка должна задавать и пропорции различных областей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей – прославленное "золотое сечение" (равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человеческого глаза; величина, обратная квадратному корню из двух (примерно 1:1,41), которая является основой международного стандарта размера бумаги (например, листа A4). В программировании для мобильных устройств не следует полагаться на соотношение сторон дисплеев, так как для устройств на Android не существует единого стандарта размера экранов.

Использование сетки в визуальном дизайне интерфейсов дает ряд преимуществ:

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

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

Дизайнер и девелопер Джонатан Уайт рассказал о базовых принципах визуального дизайна и почему их стоит освоить, чтобы выйти на новый уровень.

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

Вернитесь к основам типографики
Работа дизайнера с типографикой может рассказать о нем многое. Это объясняется тем, что шрифт - ключевой аспект дизайна. Создать дизайн можно, используя только шрифт. Сочетание шрифтов имеет решающее значение для вашего дизайна. Также можно брать типографику за основу, расставляя шрифтами тонкие акценты. Чтобы улучшить типографику в дизайне, начните с изучения основ. Развивайте словарь для описания шрифтов. Узнайте, что значат такие термины, как трекинг, кернинг и лидинг. И учитесь сочетать шрифты, это поможет изменить динамику вашего сайта. Полезные ресурсы, которые вам помогут - FontWolf и FontPair.

Используйте негативное пространство, чтобы создать баланс
Негативное пространство создает вертикальное и горизонтальное движение в дизайне. Оно является основой для создания визуальной иерархии и связей между элементами. Вдохновиться удачными примерами негативного пространства можно на сайтах Behance или Dribbble. Но при этом важно развивать и свою интуицию в использовании негативного пространства. Развить глазомер поможет такое упражнение: возьмите существующий дизайн, нарисуйте оси Х и Y, упростите его до основных фигур, проанализируйте, как он сбалансирован, и переставьте элементы. Обратите особое внимание на то, как негативное пространство влияет на баланс этих элементов.

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

Используйте цвета, чтобы подчеркнуть смысл
Цвет передает смысл, определяет эмоциональную реакцию и объединяет дизайн. При выборе цвета предлагаем вам придерживаться следующих рекомендаций:
- определите цель своего дизайна до того, как выбрать цветовую палитру. В хорошем дизайне цветовая палитра помогает достичь поставленной цели;
- определите свою аудиторию. Люди воспринимают цвета по-разному. Это зависит от личных предпочтений человека, его культурного фона и опыта;
- простота - это ключ к правильному выбору цветовой палитры. Отдавайте предпочтение нейтральному фону. Далее выбирайте основной и дополнительный акцентный цвет. И основываясь на используемых цветах, выбирайте цвета ошибок и успеха для разных состояний пользовательского интерфейса.
Как только вы разберетесь в основах теории цвета, работа с ним сведется к экспериментам и повторам. Активно выходите из зоны комфорта и пробуйте новые цветовые палитры.

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

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

Вы не можете сделать акцент на каждом элементе. Когда вы пытаетесь сделать это, элементы начинают драться за внимание и в итоге ни один из них не выделяется. Они все кричат одновременно, но не слышно ни одного из них.

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

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

Доминирующий элемент всегда будет иметь больше визуальной весомости, чем тот, над которым он доминирует.

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

Как создать доминацию

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

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

Ваша цель – создать элементы с заметной разницей в визуальном весе.

Вы можете варьировать эти характеристики:

• размер
• форма
• глубина
• текстура
• плотность
• насыщенность
• ориентация
• количество свободного пространства
• собственный интерес
• воспринимаемый физический вес

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

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

В идеале у вас должен быть один доминирующий элемент.

Доминирующий элемент

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

Будьте осторожны, не сделайте элемент насколько доминирующим, что он сведет на нет все остальные.

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

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

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

Точки фокуса

Точки фокуса также являются элементами доминации, только не настолько сильными, как доминантный элемент, который можно назвать самой доминирующей фокусной точкой. Точки фокуса являются зонами интереса, акцента или просто отличаются от остальной композиции и удерживают внимание.

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

Также три квадрата красного цвета. Они такого же размера, как и остальные, но выделяются на фоне остальных из-за цвета.

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

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

Уровни доминации

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

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

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

Доминантный

Этот уровень имеет самый большой визуальный вес и акцент. Обычно он состоит из одного элемента.

Суб-доминантный

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

Подчиненный

Этот уровень будет иметь наименьший визуальный вес. Обычно он содержит в себе тело текста.

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

Визуальная иерархия

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

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

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

Примеры

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

Точки фокуса: лог, темный фон в области “Upcoming events” и отзыв, написанный темным и жирным шрифтом.

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

Доминирующий элемент – изображение рюкзака. Оно контрастирует с окружением и привлекает больше всего внимания.

Точки фокуса включают в себя название сайта, немного текста справа от изображения, зеленую кнопку и кнопки соцсетей.

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