10 ошибок в дизайне сайта, которые допускают новички (а иногда

Первый в истории редизайн кнопки «Like» на Facebook занял месяц, или — 280 рабочих часов.

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

Возможно, ваш сайт не имеет такой широкой аудитории, но его внешний вид все равно важен. Чем он лучше, тем выше прибыль вашего бизнеса — это уже доказано. Вопрос в другом: хороший дизайн — это какой? Мы в Weblium постарались найти ответ. Наши специалисты проанализировали десятки сайтов и выявили ключевые ошибки в их дизайне.

Содержание

1. Неправильная контрастность текста

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

Чтобы этого не было, нужно использовать правильную контрастность. По мнению W3C (Консорциум Всемирной Паутины), для текста обычного размера коэффициент контрастности должен составлять не менее 4.5:1. Для крупного — 3:1. Но конструктор Weblium избавит вас от необходимости разбираться с цифрами. Встроенная система смарт-дизайна автоматически настроит удобные для восприятия оттенки.

2. Отсутствие единого стиля

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

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

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

3. Выравнивание текста

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

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

4. Использование нелицензионных изображений

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

Чтобы избежать ненужных проблем, либо покупайте изображения в фотобанках, либо пользуйтесь их бесплатными аналогами — iStock, Pixabay, Free Stock Images. В Weblium уже интегрирован Unsplash — один из крупнейших сайтов для обмена бесплатными фотографиями.

5. Отсутствие отступов между блоками

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

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

6. Использование цветных полос для разделения блоков

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

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

7. Непродуманное меню

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

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

8. Слишком длинные заголовки

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

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

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

9. Непродуманное оформление формы обратной связи

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

Допустимый вариант — 2-3 поля для заполнения. Еще лучше, если сможете ограничиться только одним.

10. Несоблюдение иерархии в размерах шрифтов

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

Чтобы задать правильную иерархию для шрифтов, используйте пропорцию 1:1,6. То есть, если вы выберите размер обычного текста 16, то предпочтительный размер подзаголовка для него будет 26 (16 * 1,6 = 26). Размер основного заголовка — 42 (26 * 1,6 = 42).

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