В этой статье я собрал некоторые распространённые ошибки в дизайне веб-страниц и советы по их улучшению.
1. Содержимое не разбито на логические блоки
Пользователям легче переваривать информацию, если она сгруппирована в логические блоки. Установите отступы на 120-180 пикселей и разделите блоки текста, используя для них различный цвет фона.
|
|
2. Неравномерные отступы
Вокруг логических блоков должны быть установлены одинаковые отступы одинакового размера. Иначе страница будет выглядеть беспорядочной, и пользователи могут не относиться к каждому разделу одинаково.
|
|
3. Текст, сливающийся с фоном
Между текстом и фоном должен быть достаточный контраст. Есть несколько способов достичь этого:
- Заранее наложить на изображение полупрозрачный слой любого цвета в графическом редакторе.
- Поверх блока с фоновым изображением наложить другой — полупрозрачный и с выбранным цветом. Этот способ более гибкий, так как проще играться — достаточно менять одно css-свойство.
|
|
4. Много стилей на странице
Слишком много стилей оформления на одной странице делают её непрофессиональной и трудночитаемой. Чтобы этого избежать, ограничьтесь одним шрифтом и двумя вариантами начертания, например, нормальными и жирным.
|
|
5. Узкие цветные блоки
Избегайте выделения узких блоков страницы цветом. Это просто выглядит не очень. Например, заголовки уже хорошо заметны благодаря большому кеглю. Если нужно выделить конкретный блок на странице, используйте цветной фон для всего блока, включая заголовок и текст.
|
|
6. Много текста внутри узких колонок
Когда в узких столбцах много текста, его трудно читать, потому что посетителям сайта приходится переходить с одной строки на другую. Лучше всего сократить количество столбцов и содержащийся в них текст, иначе никто даже не будет это читать.
|
|
7. Много отцентрованного текста
Центрирование текста на странице хорошо работает, когда текста мало, в противном случае пользователям сложно ориентироваться в нём. Если нужно включить много текста, используйте сворачивающиеся блоки — тогда можно будет показать первую часть текста сразу, а остальную простыню посетитель сможет прочесть, если развернёт.
|
|
8. Накладывание текста поверх важной части изображения
Избегайте перекрытия текстом значимых частей или мелких деталей изображения. Иначе и изображение и текст будут неразборчивым.
|
|
9. Неправильная визуальная иерархия
Чтобы иерархия информации была чётко видна на странице, заголовок на обложке должен быть больше, чем остальные заголовки или, по крайней мере, того же размера, особенно если заголовок длинный.
|
|
10. Один логический блок разбит на два
Если текст и изображение связаны друг с другом, то лучше их объединить визуально с помощью одного фона.
|
|
11. Слишком длинный заголовок
Очень большой кегль идеально подходит для короткого предложения. Если заголовок длинный, используйте кегль поменьше. Это будет легче прочесть, а также останется место для остальных элементов дизайна на странице.
|
|
12. Неправильные стили для границ кнопки
Границы необходимы, когда кнопка прозрачна. Добавление границы для цветной кнопки не имеет смысла, это просто еще одна бессмысленная деталь оформления, которая перегружает страницу и затрудняет её чтение.
|
|
13. Использование большого количества цветов
Использование слишком большого количества цветов на странице является сбивающим с толку. Одного или двух цветов достаточно, чтобы дать визуальное представление о том, что действительно важно.
|
|
14. Перегруженное меню
Люди посещают веб-сайты, чтобы найти решения своих проблем. Используйте меню, чтобы помочь людям перемещаться по веб-сайту и быстро находить то, что им нужно. Не перегружайте их чрезмерной информацией, достаточно иметь 5-7 пунктов меню.
|
|