7 непростительных ошибок в дизайне сайта

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

Почему? Что в нём не так? Мы не задумываемся. Он просто не нравится. Оказывается, у этого сайта плохой дизайн.

Что такое дизайн сайта?

Дизайн сайта (веб-дизайн) — это графическое оформление внешнего вида веб-ресурса. Оно состоит из комплекса фотографий, рисунков и текста, скомпанованных в едином стиле.

Правильный дизайн сайта:

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

Базовые моменты веб-дизайна

Веб-дизайн базируется «на трёх китах»:

• внешнее оформление;
• стиль оформления;
• адаптивность.

Внешнее оформление

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

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

Стиль оформления

Стиль должен быть единым для всех страниц. При этом — естественным и неповторимым. Важные элементы должны сами притягивать глаз.

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

Адаптивность

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

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

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

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

К этим ошибкам относятся:

• плохой макет;
• неправильно выбранная цветовая гамма;
• неправильная работа со шрифтами;
• отсутствие адаптации;
• нечитабельный текст;
• отсутствие отступов;
• отсутствие деления информации на смысловые блоки.

Давайте рассмотрим каждую ошибку подробнее.

1. Плохой макет

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

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

В первом случае создаётся впечатление, что все элементы собраны вместе и хаотично разбросаны на главном блоке. Сложно понять, куда именно смотреть, на какие кнопки нажимать, что из этого вообще является кнопками.

Во втором варианте структура более чёткая, расставлены акценты. Нам сразу ясно, что и в какой последовательности читать.

2. Неправильно выбранная цветовая гамма

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

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

Более подробно о цветовой гамме сайтов вы можете узнать в статье, посвящённой этому вопросу.

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

3. Неправильная работа со шрифтами

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

1. Тематику бизнеса и его целевую аудиторию. Если вы разрабатываете сайт для автосервиса, то неуместно будет использование рукописных шрифтов или шрифтов с плавными линиями. Это создаст не то впечатление.
2. Также шрифты должны сочетаться между собой. Для подбора оптимальной шрифтовой пары используйте сервис https://fonts.google.com/.
   

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

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

4. Нет адаптации

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

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

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

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

5. Нечитабельный текст

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

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

6. Отсутствие отступов

Ритм лендингу создают отступы. Если элементы «прилипают» к краю, то воспринимать информацию будет трудно. Лендинг должен «дышать», а наши глаза — отдыхать. Это и обеспечивают отступы между блоками.

7. Нет деления информации на смысловые блоки

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

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

Убедитесь сами. В примере два разных блока, но кажется, что один. Насколько это удобно для восприятия?

Дизайн — это смесь науки и искусства. Это фантазия, которая делает сайт уникальным, и следование законам композиции и инженерной психологии. Создание сайта только за счёт внутренней интуиции и чувства прекрасного может получиться только у гения. Нужно постоянно учиться, перенимать чужой опыт, оттачивать свои умения на практике.