18 советов по улучшению качества дизайна сайта

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

1. Выбор шрифта

Выбор шрифта

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

2. Размер шрифта

Размер шрифта

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

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

3. Цветовой контраст

Цветовой контраст

С темными шрифтами нужно использовать светлый фон, который повышает читаемость контента. Но если фон страницы ярко-синий, а цвет шрифта – желтый, черный или зеленый, это отталкивает читателя.

4. Длина строк

Длина строк

Для обеспечения лучшей читаемости в строке должно быть 50-60 символов. Но если длина строки слишком велика, читатель может потеряться между предложениями контента при прочтении следующей строки.

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

5. Компактные абзацы

Компактные абзацы

Абзацы текста должны быть краткими и лаконичными. Читатель привык просматривать содержимое через короткие абзацы, чтобы найти полезные фрагменты информации. Более длинные абзацы заставят пользователя прокручивать весь контент. Поэтому рекомендуется использовать абзацы с 3-4 строками.

6. Меньше воды

Меньше воды

Контент, который точно и кратко раскрывает суть темы статьи, предпочтительнее для пользователей.

7. Минимум технических терминов

Минимум технических терминов

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

8. Форматирование и структурирование контента

Форматирование и структурирование контента

Правильно отформатированный текст привлекает внимание читателя в нужных местах. Согласованность текста должна поддерживаться всегда. Например, маркированный список должен использовать аналогичный стиль и размер шрифта. Заголовки иметь одинаковый цвет, стиль и размер шрифта.

9. Плотность текста

Плотность текста

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

10. Структура контента

Структура контента

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

11. Реализация графики

Реализация графики

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

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

Иногда графика выходит за пределы видимого пространства экрана. Из-за этого читателю приходится прокручивать страницу.

12. Разделители

Разделители

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

Самый простой способ структурировать контент – использование линий для разделения текстовых элементов и визуализации иерархии контента.

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

13. Поля

Поля

Использование полей в тексте помогает читателю удерживать фокус на основной части контента. А также различать контент и остальную часть макета веб-страницы.

14. Стили типографики

Стили типографики

Текст на простом монохроматическом фоне читается лучше всего. Но иногда можно поэкспериментировать, если при этом читаемость текста при заданном размере экрана не ухудшается.

15. Необычное текстовое представление

Необычное текстовое представление

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

16. Использование тиснения

Использование тиснения

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

17. Стиль фона

Стиль фона

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

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

18. Стилизация гиперссылок

Стилизация гиперссылок

В длинных статьях ссылки часто размываются в содержимом статьи. Поэтому их также нужно стилизовать. Если гиперссылка располагается в середине контента, выделите ее жирным шрифтом или курсивом.

Но если гиперссылка указана в отдельно расположенном тексте, тогда для нее можно использовать стилизованные шрифты. Цвет шрифтов гиперссылок также может быть установлен в соответствии с их статусом. Например, если ссылка еще не нажата, выделяться красными шрифтами, если посещена – фиолетовым или темно-серым цветом.

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

Пожалуйста, оставляйте ваши мнения по текущей теме статьи. За комментарии, дизлайки, отклики, подписки, лайки огромное вам спасибо!

Вадим Дворниковавтор-переводчик статьи «18 Tips to Improve Website Design Legibility»