Ошибки в веб-дизайне влияют на эффективность веб-сайта, поэтому очень важно, чтобы на просторы интернета выходили сайты, которые не только зрительно привлекательны, но и функционально удобны в использовании. В этой статье я опишу примеры ошибок веб-дизайна, а также подскажу, как их можно избежать.
1. Непродуманный макет
Посетители приходят на ваш сайт, потому что им нужна информация, но если эта информация плохо организована, они уходят. Поэтому вся структура страницы должна быть продумана так, чтобы посетитель мог понять, где находиться то, что ему нужно, просто пробежавшись по ней глазами.
Чтобы основные ошибки веб-дизайна не попали на ваш следующий макет:
- Всегда используйте сетку (grid). Она разграничивает макет на вертикальные и/или горизонтальные направляющие, вокруг которых происходит построение содержимого страницы.
- используйте правило двух третьих: поделите изображение на 9 одинаковых частей (3 x 3) и разместите объект, к которому требуется привлечь внимание на пересечении этих линий.
- Придерживайтесь правила золотого сечения — вам даже не нужно делать расчеты вручную, просто воспользуйтесь одним из многочисленных онлайн-калькуляторов. Макет страницы при этом разделяется на две части, большую (a) и меньшую (b), при этом (a+b) : a = a:b.
2. Неудобная навигация
Если посетитель не может найти ссылку для перехода в какой-либо из разделов сайта, он просто решит, что такого раздела нет. Кроме того, кликая на пункте меню, посетитель ожидает перехода в соответствующий раздел сайта, а с выпадающими меню ему приходиться снова выбирать, куда перейти:
Помните о следующем:
- Посетитель ожидает, что горизонтальная навигация будет располагаться вверху, а вертикальная — слева.
- Если разделов немного, не используйте выпадающие меню.
- Больше всего внимания привлекают пункты, которые идут вначале и в конце. Поэтому размещайте все самое важное вначале, а последним пунктом пусть будут данные для связи.
3. Непоследовательность в дизайне страниц
Когда страницы одного сайта имеют разный дизайн, это может сбивать с толку (ведь визуально посетителю может казаться, что он перешел на другой сайт). Кроме того, если размещение навигации и блока поиска изменяется от страницы к странице, общее впечатление от сайта будет крайне негативным.
Чтобы дизайн был более гармоничным:
- Используйте на всех страницах одну и ту же цветовую схему.
- Необходимо, чтобы расстояния по вертикали и горизонтали между элементами макета везде были одинаковыми.
- Заголовки на разных страницах должны быть одинакового размера.
- Не рекомендуется менять расположение навигации на разных страницах.
- Желательно придерживаться единого оформления ссылок.
- А так же используйте иконки, выполненные в одном стиле.
- Обязательно обеспечьте единство оформления форм.
4. Неудачная цветовая схема
Цвета, которые не подходят под тематику или резонируют с ней, повлияют на восприятие сайта. Используя сливающиеся цвета, вы рискуете потерять посетителя в первые же секунды.Чтобы избежать ошибок, учтите следующее:
- Имеются ли у компании корпоративные цвета. Если да, то их следует использовать при создании дизайна для сайта.
- Какая у сайта цель. Теория цвета говорит, что красный — это цвет страсти и воодушевления, он привлекает внимание и побуждает к действию, в то время как синий — цвет спокойствия и уверенности, он говорит о надежности и вызывает чувство доверия к бренду. Если вы свободны в выборе цветов, уделите время тому, чтобы подобрать те, которые максимально соответствуют цели сайта.
- Существуют ли изображения и фотографии, которые требуется использовать. В таком случае вам понадобиться использовать цвета, которые будут хорошо с ними сочетаться.
- Используйте 3 разных цвета. При этом рекомендуемое соотношение составляет 60%, 30% и 10%. Запомните, что чем больше цветов вы используете, тем тяжелее будет создать гармоничную и сбалансированную страницу.
5. Дизайн выглядит неудачно на некоторых разрешениях экрана
Этот недостаток также входит в топ-10 ошибок веб-дизайна и может проявляться по-разному: например, у посетителей с меньшим разрешением экрана появляется горизонтальная прокрутка.
Чтобы дизайн выглядел хорошо на большинстве разрешений:
- Самые важные блоки должны находиться верху страницы, чтобы пользователям не приходилось много скроллить.
- Проверьте, комфортно ли читать текст в разных колонках, учитывая их ширину.
- Убедитесь, что все ли элементы остаются на нужных местах и ничего не съезжает.
Проверьте, верно ли это для разных разрешений экрана в диапазоне от 800 x 600 до 1280 x 1024. А так же проверьте, чтобы сайт отображался корректно во всех браузерах и не расползался. Кроме того, вы можете предложить клиенту создать адаптивный сайт, чтобы эти ошибки веб-дизайна не беспокоили посетителей и клиентов, которые заходят на сайт.
6. Отсутствует свободное пространство
Разумеется, основная, функция веб-сайта — это предоставлять информацию. Запросите у клиента всю необходимую информацию о его деятельности. Но принцип «чем больше, тем лучше» здесь не работает:
Информацию нужно подавать так, чтобы между блоками текста оставалось достаточно свободного места. Это поможет:
- Улучшить читаемость и общее восприятие текста.
- Привлечь внимание к тексту, просто окружив его пустым пространством.
- Создать ощущение элегантности и открытости.
7. Слишком сложные формы регистрации
Дни, когда пользователям приходилось заполнять множество полей и по несколько раз вводить данные в поля с валидацией, давно прошли:
Необходимо делать формы максимально простыми — дополнительные данные всегда можно запросить позже, не раздражая пользователя
8. Неккоректное использование изображений
Слишком большое количество изображений может пагубно сказаться на впечатлении от сайта, однако это не повод от них отказываться:
Правильно подобранные качественные изображения или фотографии дополняют материал на странице и помогают понять, чему посвящен сайт. Вот еще несколько советов касательно изображений:
- У изображения должна быть цель: подкрепить идеи из текста, вызвать эмоции, объяснить принцип использования продукта и т. д.
- Не используйте стоковые фотографии, а только изображения с реальными людьми,ведь чем правдивее фотографии, тем больше они вызывают доверие.
- Оптимизируйте размер изображений, чтобы они загружались не слишком долго.
9. Незаметные контактные данные
Это особенно критично для магазинов — контактная информация должна быть доступна на каждой странице сайта и быть достаточно заметной
10. Отсутствие поиска
Вполне возможно, что нужные посетителю данные находятся где-то в недрах сайта — предоставьте ему возможность найти их самостоятельно. Тем более что этот элемент тоже можно сделать достаточно привлекательным.
И напоследок хотелось бы отметить , что самые распространенные ошибки в веб-дизайне преимущественно связаны с тем, что некоторые дизайнеры склонны отталкиваться не от потребностей клиента, а от визуальной привлекательности сайта. Это неправильный путь, поэтому прежде чем начать работу на дизайном, убедитесь в том, вы получили всю необходимую информацию от заказчика и хорошо понимаете его потребности.