Добавить в корзинуПозвонить
Найти в Дзене
Ремонт сайта

Частые ошибки дизайна веб-страницы или как визуально НЕ уничтожить свой сайт (часть 2)

Ошибки в дизайне статьи 1. Длинный сплошной текст
Длинный и не разделенный на абзацы текст снижает удобство чтения. Чтобы в тексте было проще ориентироваться, стоит разделить его на абзацы и разбавить, например, ключевой фразой или изображением. 2. Заголовок стоит на равном расстоянии от предыдущего и следующего абзаца Заголовок не должен «летать» между текстами предыдущей и следующей главы, потому что по смыслу он относится к последующему абзацу. Расстояние над заголовком должно быть раза в 2−3 больше, чем расстояние под ним. А расстояние под заголовком должно быть примерно равным расстоянию между абзацами или немного больше. Таким образом заголовок будет визуально относиться к последующему тексту. 3. Смысловая иерархия не соблюдается Контраст в типографике помогает визуально разделить уровни текста и четко распределить иерархию. Самыми крупными должны быть заголовки, подзаголовки — заметно меньше, но отчетливо выделяться в тексте. 4. Разные отступы сверху и снизу одного смы
Оглавление

Ошибки в дизайне статьи

1. Длинный сплошной текст

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

2. Заголовок стоит на равном расстоянии от предыдущего и следующего абзаца

Заголовок не должен «летать» между текстами предыдущей и следующей главы, потому что по смыслу он относится к последующему абзацу. Расстояние над заголовком должно быть раза в 2−3 больше, чем расстояние под ним. А расстояние под заголовком должно быть примерно равным расстоянию между абзацами или немного больше. Таким образом заголовок будет визуально относиться к последующему тексту.

-2

3. Смысловая иерархия не соблюдается

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

-3

4. Разные отступы сверху и снизу одного смыслового блока

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

-4

5. Подпись расположена слишком близко к иллюстрации

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

-5

6. Между подзаголовком и текстом мало места

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

-6

7. Основной текст расположен близко к акценту

Акцент внутри основного текста (например, ключевая фраза или цитата) — самостоятельный объект. И чтобы он действительно выделялся и бросался в глаза, его нужно отделять от основного текста отступами от 75 до 120 px.

-7

8. Слабый контраст элементов

Если вы решили сделать акцент на какой-то фразе — будьте смелее, сделайте ключевую фразу крупнее основного текста на 10-15 px, пусть важная мысль действительно выделяется из окружающего текста.

-8

9. Цветной фон для узкого блока

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

-9

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

10. Между двумя полноэкранными изображениями есть пустое пространство

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

-10

11. Много выделений в тексте

Акценты (в данном случае жирное начертание) хорошо работают, когда их мало. Большое количество выделений в тексте затрудняют чтение.

Много выделено жирным, текст рябит в глазах
Много выделено жирным, текст рябит в глазах

 Небольшое выделение акцентирует внимание на элементе, но не мешает читать весь текст
Небольшое выделение акцентирует внимание на элементе, но не мешает читать весь текст

12. Много стилей типографики

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

-13

13. Выравнивание по центру в длинном тексте

Выключку (выравнивание) по центру обычно используют в заголовках и выносах — акцентах в тексте, чтобы выделить элемент из массы. Когда весь текст выровнен по центру, это значительно снижает удобство чтения.

-14

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

Заголовок — самостоятельный элемент. Он не должен быть расположен слишком близко к следующей за ним иллюстрации. Чтобы заголовок хорошо сочетался с изображением, сделайте отступ не менее 60 px и добавьте подзаголовок, он раскроет содержание и правильно расставит акценты.

-15

15. Неуместное использование курсива

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

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

16. Смещение блоков относительно центра и друг друга

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

-18

Источник выше изложенного материала, а так же его более полная версия находится на: https://tilda.education/design-mistakes