Не превращайте фокусную точку в фекальную

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

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

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

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

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

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

Посмотрите на этот пример дизайна на странице «О компании» Google, который демонстрирует эффективное использование акцентов. В заявлении о миссии Google используется цветовой контраст, чтобы привлечь внимание пользователя и с первого взгляда подчеркнуть основные моменты миссии компании.

Дизайн страницы помогает пользователю одновременно определить две важные вещи:

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

– Цветовой контраст подчеркивает основные принципы бренда Google, наиболее важные области миссии.

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

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

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

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

Принципы дизайна станут набором инструментов, который вы будете использовать на протяжении всей своей карьеры UX-дизайнера. В статье Toptal «Разрушение принципов дизайна» упоминается множество различных типов принципов дизайна, о которых следует помнить.