8 распространенных ошибок веб-дизайна, которых следует избегать любой ценой (и как Divi может помочь)

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

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

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

Давайте начнем!

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

Существует не универсальный стандарт для того, что является «хорошим» веб - дизайн, но есть некоторые рекомендации, которые повсеместно приняты многими веб - дизайнеров. Например:

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

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

8 распространенных ошибок веб-дизайна, которых следует избегать любой ценой

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

1. Плохая читаемость

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

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

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

Есть много способов сделать ваш контент более читабельным, но самые простые из них:

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

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

Как Divi может помочь

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

Если вы хотите внести дополнительные изменения, вы всегда можете проверить расширенные настройки дизайна каждого модуля с помощью Divi Builder. Эти разделы содержат почти все, что вам нужно для улучшения читаемости (включая те, которые мы упоминали ранее), и вы также можете предварительно просмотреть любые изменения на своем веб-сайте, не выходя из конструктора.

2. Плохая навигация.

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

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

Пример веб-сайта без меню навигации.

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

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

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

Как Divi может помочь

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

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

3. Несбалансированное негативное пространство.

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

Как правильно использовать негативное пространство.

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

Пример загроможденного дизайна.

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

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

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

Как Divi может помочь

Параметры Divi Advanced Design и Custom CSS позволяют вам настроить практически любой элемент вашего дизайна, включая поля, отступы и желоба для любого выбранного вами раздела, чего более чем достаточно, чтобы проявить творческий подход, используя отрицательное пространство:

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

4. Неоптимизированный призыв к действию (CTA).

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

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

Когда дело доходит до призывов к действию, вы должны помнить о двух вещах - размещении и известности. Вот как это сделать:

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

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

Как Divi может помочь

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

Кроме того, вы всегда можете оптимизировать свои призывы к действию, используя встроенную в Divi функцию сплит-тестирования Divi Leads. Это добавляет в Divi мощную функциональность сплит-тестирования и управляется непосредственно с панели управления WordPress.

5. Отсутствие мобильной оптимизации.

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

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

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

К счастью, мы уже рассмотрели несколько элементов, которые необходимо учитывать при оптимизации мобильных устройств, например:

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

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

Как Divi может помочь

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

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

6. Непоследовательный и несфокусированный дизайн.

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

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

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

Как Divi может помочь

Все модули Divi имеют единообразный стиль и отлично смотрятся прямо из коробки. Однако вы также можете настроить их индивидуально с помощью функций Advanced Design Settings и Custom CSS , а также сохранить свои настройки в своей библиотеке Divi для будущего использования:

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

7. Неправильное использование изображений и анимации.

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

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

Пример ненужной анимации на веб-странице.

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

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

Как Divi может помочь

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

Кроме того, некоторые модули Divi, такие как Fullwidth Header, позволяют реализовать популярную функцию параллакса. Вы даже можете добавить его вручную в некоторые модули, которые не поддерживают его по умолчанию, как в случае с Divi's Slider .

8. «Скрытая» контактная информация

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

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

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

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

Как Divi может помочь

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

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

Заключение

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

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

1. Плохая читаемость.
2. Плохая навигация.
3. Несбалансированное негативное пространство.
4. Неоптимизированный призыв к действию.
5. Отсутствие мобильной оптимизации.
6. Непоследовательный и несогласованный дизайн.
7. Неправильное использование изображений и анимации.
8. «Скрытая» контактная информация.

Как вы думаете, какой ошибки веб-дизайна номер один следует избегать каждому пользователю? Подпишитесь и поделитесь с нами своими мыслями в разделе комментариев ниже!

Миниатюра статьи Meilun / shutterstock.com