Некоторые способы размещения элементов интерфейса на веб-странице:

• Группировка по функциям. 4 Элементы интерфейса делят на классы (группы, блоки) и размещают их в порядке убывания важности для пользователя. 4
• Группировка по результату от действия. 4 Функции делят на функциональные группы по принципу схожести результата от действия их элементов. 4 Например, действия с изображениями располагают в одной части страницы, а с текстом — в другой. 4
• Деление на блоки. 4 Белый лист расчерчивают на блоки, цвет которых варьируется в зависимости от важности блока на данной странице. 4 Такое действие помогает чётко разделить важный контент от неважного и опустить неважный пониже, а важный — поднять повыше. 4
• Фиксированное расположение важных элементов. 4 Например, меню не должно каждый раз быть на новом месте, так как пользователю неудобно искать его на экране. 4 Менее важные элементы интерфейса могут быть перемещены, но это нежелательно. 4
• Использование сетки выравнивания. 2 Сетка задаёт ритм расположения элементов. 2 Выравнивание по левому краю для текста, по центру для кнопок действия, по правому для числовых значений структурирует данные и упрощает сканирование страницы. 2
• Использование акцентных цветов. 2 Акцентные цвета (не более 2–3) выделяют ключевые элементы управления и призывы к действию. 2 Насыщенные оттенки применяют для главных кнопок, приглушённые — для дополнительных функций интерфейса. 2
• Создание пустого пространства между элементами. 2 Пустое пространство между элементами (20–30% площади) снижает визуальный шум и помогает пользователю сконцентрироваться на основном содержимом сайта. 2