Один раз в месяц мы присылаем статьи на почту
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Частые ошибки дизайна веб-страницы
Простые советы, которые помогут создать красивую страницу
1
Произвольный выбор расстояний между элементами
На скриншоте ниже обратим внимание на три элемента: обложка, информация об авторе и подзаголовок. Это три самостоятельных блока и остается загадкой, почему на скриншоте слева дизайнер сократил дистанцию между верхним фото и блоком об авторе. Они равнозначны, поэтому отступ от верхнего фото должен быть равен отступу до подзаголовка.
Аналогичная ошибка — три элемента: сноска, блок с информацией об авторе и месте публикации и «подвал». Сокращая расстояние между средним блоком и нижним, дизайнер объединяет их в целое, хотя очевидно, что они автономны и отступ от среднего блока до сноски должен быть таким же, как до «подвала».
2
Смещение блоков
Этот досадный промах вы легко обнаружите сами, если после всех манипуляций с текстом (изменение размера шрифта, выравнивания, отступов) просто сделаете паузу и посмотрите на то, что получается, со стороны.
3
Слишком маленькое расстояние между иллюстрацией и подписью
Подпись к фото — это ловушка для дизайнера. С одной стороны, иллюстрация и подпись образуют единую структуру, но тем не менее это два отдельных элемента, и текст не должен вторгаться на территорию картинки.
4
Подзаголовок, прилипший к фотографии
Подзаголовок не должен быть расположен слишком близко к иллюстрации. Если подпись к фотографии хотя бы полусамостоятельный элемент, то подзаголовок точно относится ко всему разделу, а не только к картинке.
5
Недостаточное расстояние между подзаголовком и текстом
Да, подзаголовок и последующий текст образуют единый блок, но если абзацный отступ внутри текста оказывается больше, чем расстояние между всем текстом и подзаголовком, конструкция становится дисгармоничной.
6
Слишком близкие расстояния от основного текста до акцентированного
Акцентированный текст внутри основного текста — это самостоятельный объект. Его следует отделить отступами, и они не должны быть меньше, чем межстрочные интервалы внутри блока.
7
Слабый контраст элементов
Принцип контраста — один из самых важных в дизайне. Контраст выделяет главное, помогает понять связи между элементами. На примере слева три элемента все примерно одинаковые, существуют каждый по себе, от этого разваливаются и выглядят неряшливо. Справа мы поменяли размер шрифта и стало понятно — мелкий текст расшифровывает заголовок, он с ним в связке. Заголовок и форма примерно равного веса, они создают рамку, внутри которой все происходит. Композиция сложилась.
Если вы решили сделать акцент на какой-то фразе — будьте смелее, скажите громче, пусть важная мысль действительно выделяется из окружающего текста. Небольшой контраст между элементами выглядит робко и неуверенно — ни два ни полтора.
8
Пространство между двумя полноэкранными изображениями
Расположение несколько полноэкранных изображения подряд может быть отличным приемом. Но в этом случае не следует оставлять между ними отступ.
9
Цветной фон для узкого блока
Чтобы выделить блок с информацией об авторе, достаточно создать пространство вокруг. Заливка другим цветом в данном случае избыточна — блок не настолько отличается от прочих элементов, чтобы дополнительно выделять его цветом.
Подзаголовок также не следует выделять цветом, вполне достаточно того, что он крупнее основного текста и отделен отступами.
10
Много стилей
Если в исходном тексте после заголовка и подзаголовка сразу следует врез, за ним следует прямая речь и другие способы акцентирования текста, то это повод поговорить с редактором — на странице это будет выглядеть отвратительно.
11
Слишком большой размер шрифта для заголовка
Самый крупный шрифт хорош для одного слова или очень короткой фразы. Если заголовок длинный, просто поменяйте стиль на тот, где шрифт мельче, это улучшит удобочитаемость текста.
12
Перегруженное меню
Человек заходит на сайт, чтобы найти решение своей проблемы. Помогите ему в этом. Используйте меню для того, чтобы посетителю было легче сориентироваться и быстрее понять как вы ему можете помочь. Не перегружаете ни меню, ни вашего посетителя избыточной информацией.
13
Неуместное использование курсива
Курсив используется для того, чтобы выделить слово или фразу в тексте. Он не так сильно бросается в глаза, как жирное начертание, но позволяет сделать акцент в определенном месте. Набирать весь текст или заголовки курсивом не следует.

В текстах, набранных шрифтами без засечек, курсив лучше не использовать совсем. Если быть откровенным, утвержденного правила на этот счет нет, но наша настойчивая рекомендация: не надо.
14
Неуместное использование обводки в кнопках
Обводка нужна, чтобы сделать прозрачную кнопку. Добавлять обводку к цветной кнопке не нужно.
15
Неуместное использование разделителей
Не используйте одновременно много средств выделения. Правильно подобранные расстояния — уже сильный акцент.
16
Использование центральной выключки для длинного текста
Выключка по центру значительно снижает удобочитаемость.
17
Маленькие отступы, не позволяющие разделить смысловые блоки сайта
18
Маленькое пространство для кнопки и крупный текст в ней
19
Использование большого количества цветов
Множество цветовых акцентов создает путаницу на странице.
20
Наложение текста на значимую часть изображения
Не располагайте текст на важных частях фотографии и мелких деталях. Оставьте заголовку пространство, на котором его будет удобно прочитать.
21
Длинный текст в узких колонках с центральной выключкой
Короткая длина строки и выравнивание текста по центру делают длинный текст не удобным для чтения. Выходом будет уменьшение количества колонок, сокращение текста или выключка по левому краю.
22
Большое количество выделений в тексте
Акценты работают тогда, когда их мало. Множество выделений затрудняют чтение.
23
Один смысловой блок визуально распадается на два
Если изображения относятся к конкретному тексту, это должно быть понятно из их расположения. Полноэкранная галерея смотрится самостоятельным блоком.
Если добавить ей поля, то, за счет общего фона, она будет выглядеть единым смысловым блоком с текстом.

Если материал вам понравился, расскажите о нем друзьям. Спасибо!