Общие правила дизайна для сайтов

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

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

Об основных правилах

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

Единая идея оформления

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

Логичная навигация

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

Выделение ссылок

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

Иерархия элементов

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

Устраняйте битые ссылки

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

Визуальное выделение

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

Теперь несколько слов о том, чего делать категорически нельзя.

Заставлять посетителя ждать

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

Открывать ссылку в этой же вкладке

Особенно это касается вопроса внешних ссылок – переход на другую страницу не должен отвлекать пользователя от Вашего ресурса.

Размещать слишком много рекламы

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

Использовать слишком много эффектов

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

Делать авто воспроизведение аудио или видео

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

Делать выбор в пользу красоты

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

Такой разный дизайн

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

Сайт компании

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

Задача главной страницы сайта – информационный остов. Она должна четко доносить задачи и цели компании, давать представление пользователю о том, как найти ответ на его вопрос.

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

Критерии, которые отличают качественную главную страницу:

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

Логотип как элемент функционала

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

Навигация

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

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

Футер

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

Кнопки

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

Изображения

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

Landing Page

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

Суть страницы

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

Минимум графических элементов

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

Минимум навигации

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

Всплывающие окна

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

Кнопка призыва

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

Минимум информации

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

Форма подписки

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

Три предложения

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

Небольшой вывод

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