6 ошибок в дизайне сайтов и как их избежать

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

1. Перегружать веб-сайт деталями

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

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

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

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

Простой, но впечатляющий веб-дизайн, автор Arthean.

2. Сразу начинать работу над дизайном на компьютере

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

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

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

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

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

3. Игнорировать сетки, направляющие и колонки

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

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

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

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

4. Не создавать визуальную иерархию

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

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

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

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

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

5. Не позаботиться о доступности сайта

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

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

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

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

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

6. Не разрабатывать мобильную версию сайта

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

Этот подход известен как “mobile first” (сначала мобильные), и сейчас он пользуется большой популярностью даже среди крупных компаний. Начинать работу с создания десктопной версии зачастую неправильно, поскольку вы можете перегрузить сайт деталями, что снизит скорость его загрузки, поэтому пользователи мобильных устройств не смогут эффективно с ним взаимодействовать. Вместо этого сначала создайте мобильную версию дизайна, а лишь затем переходите к разработке десктопной.

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

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

Если вы сомневаетесь…

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