Как распознать хороший визуальный дизайн. Элементы и принципы дизайна

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

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

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

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

Графический дизайн и пользовательские интерфейсы

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

Графические дизайнеры обычно очень хорошо разбираются в визуальных аспектах и хуже представляют себе понятия, лежащие в основе поведения программного продукта и взаимодействия с ним. Талантливые графические дизайнеры, подкованные и в цифровых аспектах, преуспевают в создании информационно насыщенных, эстетически приятных, впечатляющих интерфейсов, которые мы видим в Windows XP и Mac OS X, а также визуально насыщенных интерфейсов для компьютерных игр и приложений, ориентированных на рядового потребителя. Они способны создавать красивую и адекватную внешность интерфейсов, а кроме того - привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, композиция, которые являются атрибутами бренда, во вторую очередь -прозрачность и понятность информации и лишь затем (если до этого вообще доходит дело) - передача информации о поведении посредством ожидаемого назначения (см. главу 13).

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

336 Глава 14. Визуальный дизайн интерфейсов

Визуальный информационный дизайн

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

Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации. Эдвард Тафти написал несколько новаторских книг, подробно раскрывающих эту тему, включая «The Visual Display of Quantitative Information» (Tufte, 1983).

Промышленный дизайн

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

Строительные блоки визуального дизайна интерфейсов

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

Строительные блоки визуального дизайна интерфейсов 337

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

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

Какую форму имеет объект? Он круглый, квадратный или похож на амебу? Форма - главный признак сущности объекта для человека. Мы узнаем объекты по контурам; силуэт ананаса, текстурированного синим мехом, все равно позволяет нам понять, что это ананас. При этом различение форм требует большей концентрация внимания, чем анализ цвета или размера. Поэтому форма - не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя. Слабость формы как фактора в распознавании объектов становится очевидна, если взглянуть на Dock 1 операционной системы Mac OS X -здесь можно по ошибке вызвать iTunes вместо iDVD или iWeb вместо iPhoto. Пиктограммы имеют различную форму, но обладают сходными размерами, цветами и текстурой.

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

Специальный интерфейсный элемент операционной системы Mac OS X, который позволяет запускать программы и переключаться между ними. -Примеч. науч. ред.

333 Глава 14. Визуальный дизайн интерфейсов

важность текста растет вместе с размером и что полужирный текст более важен, чем текст с нормальным начертанием.

Таким образом, размер - полезное свойство для обозначения информационных иерархий. Достаточное расхождение в размерах обычно быстро привлекает внимание человека. Жак Бертен (Jacques Bertin) в своей классической работе «The Semiology of Graphics» (Bertin, 1983) описывает размер как диссоциативное свойство. Это означает, что если объект очень мал или очень велик, становится сложно интерпретировать другие переменные, например форму.

Яркость

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

Цвет

Желтый, красный или оранжевый? Цветовые различия быстро привлекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет - отрицательные результаты, а черный - положительные; для трейдера, работающего с ценными бумагами, синий - сигнал покупать, а красный - сигнал продавать (по меньшей мере, в США это так). Цвета приобретают смыслы и благодаря социальным контекстам, в которых проходит наше взросление. Для человека с Запада, выросшего среди светофоров, красный означает «стоп», а иногда даже «опасность», тогда как в Китае красный - это цвет удачи. Белый цвет на Западе ассоциируется с чистотой и миром, а в Азии - с похоронами и смертью. При этом в отличие от размера или яркости цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным способом передачи информации, поскольку цветовая слепота встречается довольно часто.

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

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

Направление

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

Текстура

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

Расположение

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

Принципы визуального дизайна интерфейса

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

340 Глава 14. Визуальный дизайн интерфейсов

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

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

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

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

Создавать визуальную структуру и прокладывать логический мар
шрут на каждом уровне организации;

Использовать целостные, непротиворечивые и соответствующие
контексту образы;

Интегрировать визуальный стиль с функциональностью осмыслен
но и последовательно;

Избегать визуального «шума» и беспорядка.

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

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

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

Принципы визуального дизайна интерфейса 341

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

Основой визуального интерфейса являются визуальные

принцип шаблоны.

Проектирования

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

Создание иерархии

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

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

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

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

342 Глава 14. Визуальный дизайн интерфейсов

Визуализация связей

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

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

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

Элементы, разделенные большими расстояниями, можно группировать посредством общих визуальных свойств, создавая шаблон, который в конечном итоге приобретет самостоятельный смысл для пользователей. Так, использование объема для создания ощущения физического ожидаемого назначения - вероятно, самый эффективный способ отделять элементы управления от данных и фоновых элементов (более подробно об ожидаемых назначениях читайте в главе 13). Эта стратегия часто применяется в рисовании пиктограмм. В операционной системе Mac OS X применяются яркие цвета для пиктограмм приложений и тусклые - для редко используемых вспомогательных программ. Зеленая кнопка запуска устройства может перекликаться с похожей анимированной зеленой пиктограммой, указывающей, что устройство функционирует нормально.

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

Принципы визуального дизайна интерфейса 343

Тест с прищуриванием

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

Создавайте визуальную структуру и прокладывайте логический маршрут на каждом уровне организации

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

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

Выравнивание и сетка

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

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

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

Глава 14. Визуальный дизайн интерфейсов

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

Выравнивание элементов, разнесенных по группам и панелям.

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

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

Как правило, сетка делит экран на несколько крупных горизонтальных и вертикальных областей (рис. 14.2). Качественно спроектиро-

Принципы визуального дизайна интерфейса

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

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

В идеальном случае сетка должна задавать и пропорции различных областей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей - прославленное «золотое сечение» (обозначаемое греческой буквой «фи» и равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человеческого глаза; величина, обратная квадратному корню из двух (примерно 1:1,41), которая является основой международного стандарта размера бумаги (например, листа А4); и отношение 4:3 - пропорция сторон большинства компьютерных дисплеев.

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

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

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

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

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

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

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

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

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

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

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

За много лет работы продакт-дизайнером при работе с визуальными эффектами я сталкивался со множеством сюрпризов, которые вызывали у меня следующие эмоции 😲😕😳😡😱.

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

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

1. Иллюзия бисекции треугольника (Triangle-bisection Illusion)

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

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

Какая версия математически центрирована?

Есть две теории возникновения этой увлекательной иллюзии:

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

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

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

Шучу, это не статья о математике и физике 💥 (но формула все равно правильная).

Центроид может располагаться на расстоянии 1/3 от каждой стороны до противоположной вершины. Этот метод также может применяться ко многим другим фигурам.

2. Вертикально-горизонтальная иллюзия (Vertical Horizontal Illusion)

Это прямоугольник? Нет … это квадрат?!

Вертикально-горизонтальная иллюзия

Квадраты - это фундаментальные строительные блоки любой системы дизайна. Их можно увидеть в карточках Material Design, постах на Facebook, пинах на Pinterest и шотах на Dribbble.

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

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

3. Полосы Маха (Mach Bands )

Ложная тень падает на поверхность, это иллюзия?

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

Техническое объяснение возникновения этого эффекта связано с латеральным (боковым) торможением , что означает, что более темная область ложно кажется еще более темной, а более светлая область еще светлее.

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

4. Иллюзия Геринга (Hering Illusion)

Оно живое !!!

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

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

5. Сетка Германа (Hermann Grid)

Появляется или не появляется, вот в чем вопрос.

Иллюзия сетки Германа довольно популярна и ее можно увидеть в макетах, которые содержат сетку квадратов, размещенных на фоне с высоким контрастом. Посмотрите прямо на любой квадрат, вы увидите призрачные шарики на пересечениях линий, окружающих квадраты. Но, если вы посмотрите прямо на пересечение, они исчезнут 😱.

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

6. Иллюзия одновременного контраста (Simultaneous Contrast Illusion)

Оба обособленных квадрата отражают одинаковое количество света? Хм …

Иллюзия одновременного контраста

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

Цвет текста абсолютно одинаковый с обеих сторон, но вам так не кажется

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

7. Иллюзия Манкера-Уайта (Munker-White Illusion)

Мои глаза просто обманули меня? 👀

Эта иллюзия едва уловимая, но тем не менее увлекательная! Глядя на GIF-файл выше, блоки фиолетового слева кажутся светлее фиолетовых блоков справа. Но оба блока фактически отражают одинаковое количество света 😲.

Причина возникновения иллюзии Манкера-Уайта - это… как вы догадались, латеральное торможение.

8. Акварельная иллюзия (Water Colour Illusion)

Акварельная иллюзия

Бывает, что я добавлю границу к объекту, а затем задаюсь вопросом: «Когда я успел изменить цвет фона?». Если вы посмотрите внимательно, вы можете заметить, что бледная область приобретает гораздо более светлый оттенок цвета, окружающего границу. Вы возможно удивитесь, узнав, что более светлая область на самом деле белая!

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

Белая область внутри кнопки, кажется, немного принимает оттенок цвета границы

Я признаю, что эта иллюзия оставила меня в недоумении несколько раз настолько, что мне пришлось использовать палитру цветов, чтобы проверить цвета!

9. Иллюзия Ястрова (Jastrow Illusion)

Действительно ли размер имеет значение?

Иллюзия Ястрова

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

Некоторые одинаково изогнутые края могут казаться меньшими, чем другие

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

10. Иллюзия Корнсвита (Cornsweet Illusion)

Иллюзия Корнсвита

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

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

Каждый ромб имеет одинаковый градиент, но, кажется, что они становятся темнее (сверху вниз)

Эта иллюзия создает аналогичный эффект, что и две вышеупомянутые иллюзии, но на самом деле она отличается двумя особенностями:

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

11. Иллюзия Мюллера-Лайера (Müller-Lyer Illusion)

Перерегулирование для оптимального визуального восприятия

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

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

Без перерегулирования, буква «e» в логотипе LinkedIn и буква «z» в Amazon не являются оптически сбалансированными

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

Но зачем нужно перерегулирование в типографике?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Точки фокуса

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

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

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

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

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

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

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

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

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

Доминантный

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

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

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

Подчиненный

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

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

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

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

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

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

Примеры

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

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

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

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

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

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