Распространенные ошибки в дизайне веб-страниц

Распространенные ошибки в дизайне веб-страниц

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

Распространенные ошибки в дизайне веб-страниц

Ошибки общего дизайна страницы

1. Содержание не разбивается на логические блоки

Пользователям легче переваривать информацию, если она сгруппирована в логические блоки. Установите отступы на 120 px-180 px и отдельные блоки текста, используя цвет фона.

Содержание не разбивается на логические блоки

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

2. Неравномерные отступы между элементами на веб-странице

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

Неравномерные отступы между элементами на веб-странице.

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

3. Слишком маленькие отступы не позволяют разбивать страницу на логические блоки

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

Слишком маленькие отступы

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

4. Избегайте низкого контраста между текстом и фоновом изображением

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

контраста между текстом и фоновом изображением

5. Слишком много стилей на одной странице

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

Слишком много стилей на одной странице

Один шрифт, один цвет и два типа написания. Типография на странице выглядит аккуратно и ясно.

6. Цветовой блок слишком узкий

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

Цветовой блок слишком узкий

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

7. Слишком большой текст внутри узких столбцов

Когда в узких столбцах много текста, его трудно прочитать. Лучше всего сократить количество столбцов и сократить текстовую копию, иначе никто ее не прочтет.

Слишком большой текст внутри узких столбцов

8. Слишком много центрированного текста

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

центрированного текста

9. Текст накладывается поверх важной части изображения

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

10. Потеря визуальной иерархии

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

Потеря визуальной иерархии

11. Перегруженное меню

Люди посещают веб-сайты, чтобы найти решения своих проблем. Помоги им! Используйте меню, чтобы помочь людям перемещаться по веб-сайту и быстро находить то, что им нужно. Не перегружайте UI чрезмерной информацией. Достаточно иметь 5-7 пунктов меню.

Перегруженное меню Перегруженное меню

Вторая часть

Понравилась статья? Подписывайтесь на нас в VK и читайте другие наши материалы