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

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

Простые советы по верстке и оформлению, которые помогут создать красивую страницу сайта

Никита Обухов

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

Ошибки в дизайне лендинга

1. Нет разделения на смысловые блоки

Информацию проще воспринимать, если она разделена на блоки по смыслу. Чтобы визуально отделить блоки друг от друга, используйте большие отступы (от 120 до 180 px) и отделяйте блоки с помощью разного цвета фона.

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

Отступы достаточно большие и блоки разделены цветом — видно, что это блоки разной информации

2. Разные отступы между элементами

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

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

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

3. Маленькие отступы, не позволяющие разделить смысловые блоки сайта

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

Маленькие отступы — блоки сайта прилипают друг к другу. Это перегружает страницу и создает путаницу, как будто это одно целое, а не разные по смыслу части

Отступы достаточно большие, сразу понятно, что блоки разные по смыслу

4. Текст плохо читается на фотографии

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

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

Текст трудно прочитать, фотография слишком светлая

На фотографию наложен фильтр, и текст теперь легко читается

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

Из-за большого количества стилей типографики непонятно, какая информация важная, а какая второстепенная

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

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

Заголовки, выделенные цветным фоном дробят смысловые блоки и выглядят отдельными самодостаточными элементами

Заголовок и текст, относящийся к нему, имеют общий фон. За счет этого видно, что это один смысловой блок

7. Много текста в узких колонках

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

Длинный текст в колонках (еще и с выключкой по центру) неудобно читать

Текста в колонках немного, легко прочитать

8. Много текста с выравниванием по центру

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

Если вам необходимо большое количество текста, используйте блок с раскрывающимся текстом (в Тильде TX12, TX16N или кнопка BF703).

Текста с центральной выключкой очень много, читается с трудом

Короткий текст под заголовком (все с центральной выключкой) создают хорошую композицию

9. Текст накладывается на важную часть изображения

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

Заголовок мешает рассмотреть лицо человека, и текст на фоне мелких деталей сложно читать

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

10. Несоблюдение визуальной иерархии

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

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

Заголовок на обложке крупнее, чем в следующем блоке, все выглядит последовательно и гармонично

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

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

Заголовок меньше, чем названия преимуществ и кажется второстепенным, хотя по смыслу он важнее

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

11. Один смысловой блок визуально распадается на два

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

Галерея во всю ширину экрана кажется не связанной с заголовком выше и выглядит как самостоятельный блок

Галерея расположена на общем фоне с заголовком — все вместе смотрится единым блоком

12. Слишком крупный длинный заголовок

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

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

Хорошая композиция, все элементы обложки сбалансированны, текст легко читается

13. Неуместное использование обводки в кнопках

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

Большое количество цветовых акцентов создает путаницу на странице: непонятно, что важнее. Достаточно использовать 1−2 цвета, чтобы выделить важные элементы.

Много ярких цветов, непонятно, на что в первую очередь обратить внимание

Один цветовой акцент создает разнообразие, но не отвлекает от содержания страницы

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

В меню слишком много информации, поэтому в нем сложно сориентироваться

Информации в меню немного, легко сориентироваться

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

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

Сплошную пелену текста сложно воспринимать глазу

В тексте расставлены акценты, благодаря которым его легче читать

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

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

Заголовок находится на равном расстоянии от абзацев снизу и сверху и непонятно, к чему относится

За счет небольшого отступа под заголовком видно, что он относится к последующему тексту

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

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

Заголовок и подзаголовок практически одинакового размера, выглядят как равнозначные уровни текста

Видно, что заголовок важнее по смыслу, чем подзаголовок

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

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

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

Отступы одинаковые, блоки выглядят как равнозначные элементы

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

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

Подпись приклеилась к изображению и мешает восприятию (и картинки, и текста)

Между картинкой и подписью есть воздух, при этом понятно, что подпись относится к фотографии

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

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

Отступ между заголовком и текстом меньше, чем отступ между абзацами

Отступ после заголовка чуть больше, чем отступ между абзацами

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

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

Отступ между основным текстом и акцентом слишком маленький

Акцент выделяется в тексте благодаря большим отступам

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

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

Ключевая фраза как будто притворяется частью текста и не хочет выделяться. Выглядит неаккуратно

Ключевая фраза выделена за счет крупного шрифта и отступов

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

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

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

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

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

Пустое пространство между полноэкранными изображениями выглядит бессмысленно и некрасиво

Фотографии выглядят гармонично

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

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

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

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

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

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

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

Стилей типографики немного, четко видны акценты и иерархия в тексте

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

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

Текст с центральной выключкой выглядит неопрятно, его неудобно читать

Равнение по левому краю лучше всего воспринимается глазом

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

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

Заголовок расположен слишком близко к фотографии, нет воздуха

Заголовок отделен от изображения подзаголовком и относится ко всему разделу, а не только к картинке

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

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

Набирать весь текст или заголовки курсивом не следует.

В текстах, набранных шрифтами без засечек, курсив лучше не использовать совсем.

Фраза уже выделяется в тексте за счет размера и отступа, курсив уже излишен

Курсив на своем месте — небольшой акцент в основном тексте

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

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

Заголовок и описание смещены влево, а текст вправо

Все элементы текста складываются в гармоничную композицию

Авторы: Ира Смирнова, Маша Белая, Юлия Засс
Дизайн и верстка: Юлия Засс

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

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

Возможность «собрать» за 1-2 дня готовый ресурс, не имея специальных знаний, привлекает многих владельцев бизнеса.

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

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

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

1. Маленькие отступы между блоками

Частая ошибка при оформлении блоков — некорректные отступы. Если они слишком маленькие или их нет вовсе, читатель не сможет понять, к какому блоку относится информация на экране.

Также усложняют восприятие текста неравномерные отступы в разных блоках. Отделить смысловые блоки между собой помогают отступы от 90 до 160 px и разные цвета фона.

2. Изображение и текст на нем мешают друг другу

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

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

Кроме того, текст не должен закрывать главный элемент, изображенный на картинке, — лицо человека, на котором сделан акцент, или предлагаемый товар.

3. Перегрузка цветами и стилями

Если для оформления сайта выбрано более 2 стилей типографики или более 3 цветов, читатель не поймет, куда смотреть.

Еще хуже, если цвета и шрифты не сочетаются между собой.

4. «Вырвиглазное» оформление статей

При добавлении статей многие забывают об их правильном оформлении.

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

Сравните, где легче воспринимать контент?

5. «Тяжелые» картинки

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

Технические ошибки

1. Нет заранее продуманной структуры

Многие собственники бизнеса, которые создают сайт для себя, придерживаются принципа «ввяжемся в бой, а там видно будет».

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

2. Длинная «портянка» текста на одной странице

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

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

Ниже показан пример оптимального скролла страницы.

3. Нет домена второго уровня

Продвигать сайт с доменом website21102020.tilda.ws и вкладывать в него деньги как минимум странно.

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

4. Сайт не адаптирован под мобильные устройства

Распространенная ошибка даже среди опытных программистов. Они «собирают» ресурс в браузере на компьютере, но забывают посмотреть, как содержимое отображается на мобильных платформах.

Необходимо адаптировать внешний вид под планшеты и смартфоны с разной диагональю экрана.

Чтобы не допустить технических недочетов и грубых ошибок дизайна на Тильде, доверьте создание сайта сотрудникам веб-студии «Гордон и Партнеры». Это поможет сократить расходы на исправления и продвижение в будущем, а также сразу увеличит конверсию. Мы разрабатываем и продвигаем все виды сайтов на Тильда. Оставьте заявку, чтобы задать вопросы или заказать создание веб-сайта.

Источник