Популярность интернет-ресурса непосредственно зависит от того, насколько качественно выполнен дизайн интерфейса. Удобно и понятно ли пользователю использовать ваш ресурс. Представляем вашему вниманию несколько советов, проверенных на личном опыте, которые действительно работают.
На первый взгляд, особенно новичку в этом деле, они могут показаться несущественными и даже незаметными. Но в конечном итоге создают успешный пользовательский опыт.
1. Выделить более значимую информацию рекомендуется с помощью иерархии цвета шрифта, а не размера.
Это означает то, что самая важная информация будет иметь самый контрастный оттенок цвета, по сравнению с второстепенной. Гармонично будут смотреться использование трех оттенков цвета. К примеру:
- Темный (но не черный) для важной информации;
- Чуть светлее для второстепенного контента;
- Самый светлый для вспомогательного контента.
Аналогично, обычно для интерфейса достаточно два веса шрифтов:
- Обычный шрифт (400 или 500 в зависимости от шрифта) для основного массива текста;
- Более тяжелый шрифт (600 или 700) для текста, который вы хотите выделить.
2. Дурным тоном считается использование серого цвета на цветном фоне.
Светло-серый цвет текста хорошо подходит для того, чтоб не привлекать внимание читателя. Если у вас есть не особо значимая информация, но она должна быть, можете использовать эту хитрость.
Однако, если вам все-таки важно, чтоб пользователи обратили внимание на данный текст, играйте с оттенком цвета фона (сделайте его светлее чем фон).
3. Смещение теней.
Добавьте один вид смещения, чтобы сделать тень более заметной и выразительной. Так изображение будет выглядеть более естественным. Так как мы привыкли видеть один источник света, тень со всех сторон смотрится не натурально.
4. Используйте меньше границ.
Это не единственный способ разделения элементов блока. К кому, же этот способ давно уже устарел и не используется в современном дизайне. В качестве альтернативы можно использовать один из следующих методов:
- Используйте блочные тени для визуального разделения элементов;
- Используйте разные цвета фона;
- Добавьте дополнительный отступ.
Увеличение отступа — отличный способ создать различие между группами элементов без необходимости переработки интерфейса.
5. Не увеличивайте размер иконок.
Иконки, которые были нарисованы в размере 16−24px, никогда не будут выглядеть профессиональными, если вы растяните их в 3−4 раза от их предполагаемого размера. Им не хватает детализации, и они всегда воспринимаются непропорционально «массивными».
Если у вас есть маленькие иконки, попробуйте поместить их в другую фигуру и придайте фигуре цвет фона:
Это позволяет сохранить иконку ближе к ее предполагаемому размеру, при этом заполняя большее пространство интерфейса.
6. Используйте акцентные границы.
Даже если вы не являетесь высококлассным дизайнером, данный свет не составит для вас никакого труда. Чтобы внести креативную нотку в сайт, можно добавить яркие границы в виде акцентов к некоторым частям вашего интерфейса, которые в другом случае казались бы мягкими или малозаметными.
Например, рядом с предупреждающим сообщением:
…или выделить активные элементы навигации:
…или даже в верхней части всего вашего макета:
7. Покажите пользователю иерархию кнопок на странице.
Чтоб пользователь определил какая кнопка на сайте является важной, используйте для нее фон. Как правило, на странице существует всего одна важная кнопка, остальные второ- или третьестепенные.
Семантика — это важная часть дизайна кнопок, но есть более важное измерение, о котором часто забывают: иерархия.
- Первичные действия должны быть очевидными. Однотонные, высококонтрастные цвета фона прекрасно подойдут.
- Вторичные действия должны быть ясными, но не выделяющимися. Стили контура или более низкие контрастные цвета фона — отличные варианты.
- Третичные действия должны быть легко обнаруживаемыми, но ненавязчивыми. Придайте этим действиям вид ссылки. Как правило — это лучший подход.
Используйте красный и смелый стиль, когда это негативное действие действительно является основным действием в интерфейсе, например, подтверждение в диалоговом окне:
