Основные правила дизайна сайта

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

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

Что такое веб–дизайн?

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

Веб–дизайн тем и притягателен (для меня точно), что это не сводится только лишь к внешней эстетике сайта. И веб–дизайн объединяет несколько, казалось бы, совершенно разных областей знаний — в дизайне сходятся  психология поведения людей, маркетинг и технологические процессы.

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

Потому веб–дизайн заслуживает самого серьезного отношения, это не просто «поиграть со шрифтами» и подобные «игры».

Что важно учесть при дизайне сайта?

В качестве отправных точек при дизайне сайта служат:

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

Работа над дизайном сайта не начинается с подбора цветовой гаммы для кнопочек и шрифтов для заголовков!

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

Какие задачи вы можете поставить перед сайтом?

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

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

Вот в чем дело: не существует универсального варианта для сайта.

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

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

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

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

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

Эти сведения понадобятся вам и для написания контента для сайта: для составления вашего УТП, вашего предложения, ответов на возможные или реальные возражения клиентов и т.д.

Поэтому не пропускайте этот этап и обязательно составьте портрет вашей ЦА (целевой аудитории).

>> Подробнее: Как составить описание целевой аудитории сайта (есть шаблон)

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

Знаю, что многие веб–дизайнеры (и я в том числе) сталкиваются с такой ситуацией, когда тексты еще не готовы, а клиент уже просит о начале работ над дизайном сайта («текст добавим потом!»).

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

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

Основа разработки сайта — удобство для вашего пользователя (юзабилити).

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

>> Подробнее: 13 простых способов улучшить юзабилити сайта

>> Подробнее: Как улучшить время загрузки сайта

>> Подробнее: Что важно знать о показателе отказов сайта

«Красота в глазах смотрящего» — настоящую эффективность дизайна сайта оценит не владелец сайта, а пользователи.

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

Отражаются ли размеры инвестиций на дизайне сайта? Ответ утвердительный.

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

Как сделать сайт привлекательным для пользователей?

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

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

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

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

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

Веб-дизайн может быть сложной Вселенной.

Кстати, я свою рассылку так и посвящаю «Вселенной Webдизайна и WordPress».

Если хотите тоже присоединиться к моим подписчикам и получать такие полезные письма, то для этого вам нужно зарегистрироваться на моей странице ресурсов! Буду рада!

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

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

Какие основные правила веб дизайна важно учитывать при создании дизайна вашего онлайн–проекта?

Правила в дизайне сайта, о которых вам нужно знать

Разберем, благодаря каким приемам веб–дизайна ваш сайт будет легким и простым для восприятия и будет удобным для посетителей.

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

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

# Навигация на сайте

Ограничьте количество пунктов в основной навигации до 5–7

Не добавляйте много ссылок в основное меню сайта.

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

Это демонстрация «уловки» нашего мозга на избегание трудностей. И еще качество нашей краткосрочной памяти удерживать в активном состоянии до 5–7 объектов внимания.

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

Призывы к действию сделайте очевидными, понятными и лаконичными

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

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

Используйте ваши цвета бренда для привлечения внимания к кнопкам.

>> Подробнее: Правила цветовой палитры для сайта

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

Пусть будет предельно ясно и понятно, какое действие произойдет: «Оформить заказ», «Отправить в корзину», «Заказать консультацию» и т.д.

Избегайте всяческих неопределенностей: «Тыц сюда», «Это найдешь здесь», «Все подробности тут» и проч.

Кнопки с одинаковым целевым действием стоит оформить в одном и том же стиле (используйте одинаковый цвет, размер, закругление углов, состояние при нажатии и клике и т.д.)

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

Доступность важных страниц сайта

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

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

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

# Иерархия контента

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

Определите значение каждой страницы

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

Иерархия обеспечивает четкую организацию в дизайне сайта и облегчает ориентацию пользователей в интерфейсе.

Иерархия в организации сайта достигается путем определения степени важности страниц — самые важные страницы выводятся в основное меню сайта.

Некоторые второстепенные страницы становятся «вложенными» для страниц первого уровня или переносятся в дополнительное меню сайта.

Дайте важным страницам адекватные названия

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

Это вовсе неплохо. Такие шаблоны поведения в онлайн–среде ускоряют процесс обработки информации.

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

Ваши посетители и потенциальные клиенты будут искать информацию о вас на вашей личной странице или странице компании «Обо мне/ О нас», для ознакомления с услугами будут искать страницу «Услуги», чтобы найти ваши контакты — страницу «Контакты» и т.д. Ваш блог на странице «Статьи», «Блог», «Новости».

>> Лучшие практики для написания страницы «О нас/ О себе»

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

Пункты в основном меню сайта должны быть лаконичны, желательно в 1 слово.

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

Подчеркните важность ключевых элементов на странице

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

Заголовки и подзаголовки выделяют, как правило, размером и весом шрифта, и цветом.

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

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

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

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

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

Важные призывы к действию оформляют в виде кнопок или ссылок.

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

F– и Z–способ сканирования страницы

F–маршрут — наиболее распространенный способ, которым посетители просматривают текст на веб-сайте. 

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

Раскладка в форме буквы F имитирует нашу естественную схему чтения на Западе (слева направо и сверху вниз). 

Эффективно разработанный веб-сайт будет работать с естественной моделью просмотра страницы читателем.

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

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

# Типографика сайта

Более 90% сайтов состоят из текста на 93% и выше. Потому оформление текстов тоже относится к веб–дизайну.

Ограничьте набор шрифтов

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

>> Подробнее: 50+ причин выбрать Вордпресс для сайта

Выбор шрифта является важным решением при разработке веб-сайта.

Не сходите с ума по шрифтам!

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

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

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

Шрифт основного текста должен быть максимально читаемым. Простые шрифты без засечек, такие как Helvetica, Arial и Verdana, хорошо подходят для основного текста. Для заголовков и заголовков можно использовать более декоративный шрифт.

Учитывайте сочетание и психологию восприятия шрифта

Шрифты могут полностью разрушить все то послание вашего сайта к вашим посетителям, которое вы так старательно пытались создать другими приемами веб–дизайна!

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

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

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

Шрифты с засечками передают атмосферу изысканности, шика, даже старины.

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

Избегайте чрезмерно детских или непрофессиональных шрифтов (особенно, Comic Sans) любой ценой! Если ваш сайт детской тематики, то есть другие шрифты, которые передадут специфику ниши вашего сайта.

>> Подробнее: Руководство по выбору ниши для сайта

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

Курсив никогда не должен использоваться в качестве шрифтов основного текста. Курсив затрудняет свободное сканирование текста. Такие тексты трудно читать.

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

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

Применяйте форматирование текстов

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

Проблема в том, что если ваш текст плохо отформатирован, то маловероятно, что посетители вашего сайта когда-либо его прочитают.

Давайте разберемся, что делает это форматирование таким эффективным. 

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

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

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

Размер шрифта имеет значение

Имейте в виду, что размер шрифта также влияет на читабельность. Не у всех пользователей зрение 100%.

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

Остановитесь на 14 или 16 пунктах для основного текста.

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

Длина строки текста

Длина строки текста является важным приемом форматирования текста на сайте. 

В качестве правил существует множество различных ограничений на символы и слова, но на самом деле жесткого правила нет. 

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

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

Избегайте в колонках с текстом больше, чем 2–3 строчки, выравнивания по центру. Читабельность таких фрагментов очень низкая.

Цвет текста

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

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

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

Поэтому многие сайты тоже стали идти с темным оформлением фона и белым/ светлым текстом.

Сразу скажу, что это неудачная практика — посетитель не в состоянии продолжительное время читать такой текст.

Лучше использовать темный шрифт на светлом фоне.

Заглавные буквы только для заголовков

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

Набор текста прописными буквами приемлем для оформления заголовков.

Заголовки в таком случае должны быть короткими.

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

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

Выравнивание текста на сайте

Для нашей культуры характерно чтение и письмо слева направо.

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

Выравнивание по центру допускается для очень кратких фрагментов текста, буквально в 2–3 строки.

Выравнивание по ширине строки, по принципу книжных страниц с текстом, просто «под запретом», это зло в веб–дизайне.

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

# Цветовая схема сайта

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

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

Не стоит увлекаться большим разнообразием цветов в палитре вашего сайта. Ограничьтесь 4–5 цветами. У вас есть еще их оттенки! Поэтому этого будет вполне достаточно.

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

>> Подробнее: 9 правил для цветовой палитры сайта

>> Подробнее: Большая подборка полезных ресурсов для создания и развития сайта

# Контактные формы

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

Запрашивайте у посетителей своего сайта только самую нужную информацию.

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

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

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

# Негативное пространство

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

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

Негативное пространство необходимо посетителю как небольшая передышка для осмысления информации.

Создайте для пользователя такие «островки» в потоке послания вашего сайта.

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

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

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

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

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

# Изображения для сайта

Соблюдайте баланс между текстом и изображениями

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

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

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

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

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

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

>> Подробнее: Как правильно оптимизировать изображения для сайта

>> Подробнее: Пошаговая SEO оптимизация изображений

Используйте качественные фото

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

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

>> Подробнее: Сайты с бесплатными качественными изображениями

Вам также понадобятся несколько личных портретов или командного фото вашего коллектива, чтобы разместить их на странице «О себе/ О нас», на домашней странице и т. д.

Помните о лицензиях на использование изображений

Вы не можете просто использовать в веб–дизайне любое изображение, какое найдете в выдаче поисковика «по картинкам».

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

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

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

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

>> Подробнее: Обзор графических онлайн–редакторов

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

Изображения, которые относятся к Public Domain  (это не вид лицензии, это особая категория “Общественное достояние”), можно пользоваться без боязни нарушить чьи–то авторские права.

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

Как узнать, есть ли авторские права на фото?

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

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

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

Среди важных характеристик дизайна сайта можно выделить несколько:

 # Интерактивность элементов

Кликабельные элементы должны легко распознаваться пользователями

Для оформления ссылок, как правило, используется подчеркивание. Синий цвет текста для ссылок не так обязателен, как раньше.

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

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

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

Избегайте автовоспроизведения аудио–и видео на сайте

Когда–то автозапуск видео и звука при заходе на сайт было модным трендом. Как хорошо, что он быстро канул в Лету!

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

И чаще всего возможности настроить громкость звучания или вообще отключить назойливый звук просто не было!  

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

Автоматическое воспроизведение аудио или видео может раздражать и разочаровывать посетителей сайта. 

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

# Доступность контента

Важен достаточный размер основного шрифта

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

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

Позаботьтесь о контрасте

Кроме того, важно обозначить роль контраста.

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

Чтобы проверить контрастность фона и цвета текста, можно использовать этот онлайн сервис — Webaim

Укажите цвет фона и цвет текста и этого достаточно для анализа.

В зависимости от полученных результатов, вы можете регулировать использование цветов в схеме сайта.

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

# Простота организации сайта

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

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

Помним и о быстром доступе к нужной информации для посетителя — на расстоянии двух кликов.

# Адаптивность дизайна сайта

Трафик с мобильных устройств, таких как смартфоны и планшеты, уже больше количества просмотров сайтов с ПК. 

Более 90% людей покидают сайт, если есть проблемы с нормальным отображением на их устройстве.

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

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

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

>> Подробнее: Что важно учесть при выборе темы Вордпресс

Помимо удобства для мобильных устройств, стоит проверить кросс–браузерную совместимость вашего веб-сайта. По всей вероятности, вы просматривали свой сайт только в одном веб-браузере, будь то Google Chrome, Safari, Firefox или что-то еще.

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

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

Адаптивность — обязательное требование к дизайну сайта, поскольку сегодня мобильный трафик уже опережает трафик с ПК.

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

>> Подробнее: Как провести редизайн сайта

>> Подробнее: Чек–лист проверки готовности сайта после разработки

# Юзабилити сайта

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

>> Подробнее: Как улучшить удобство сайта для посетителей

>> Подробнее: Почему посетители покидают сайт и что делать

Юзабилити — ваш способ продемонстрировать заботу о пользователе сайта. Позаботьтесь о посетителях и читателях вашего сайта!

Что делает дизайн сайта привлекательным для пользователей?

Если вы начинающий веб –дизайнер, то ваш интерес вполне закономерен.

Отлично, что вы хотите улучшить свои навыки веб –дизайна.

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

Что важно при создании дизайна сайта?

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

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

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

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

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

А для веб–дизайнера такие знания о пользователях — часть его профессионального опыта.

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

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

# Пользователи сканируют сайт

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

При этом, весь процесс оценки качества сайта и своего доверия к сайту занимает до 5–7 секунд, а при беглом осмотре сокращается до 1–2 секунд.

И знаете, на чем пользователи основывают свою оценку сайта? Вы молодец, если ответили, что все решает дизайн!

# Пользователи принимают решения на основе визуальной информации

«Картинки» наш мозг «любит» больше, чем текст. Мозг обрабатывает изображения в 600 раз быстрее, чем текст. На обработку информации в виде изображения нужно всего 12–15 миллисекунд!

Потому (ох, как не нравится это копирайтерам! Но мы при чем? Это доказано наукой, не подкопаешься!), дизайн первичен для привлечения внимания и удержания посетителей на сайте!

Только после того, как пользователь решит, что этот сайт заслуживает его времени (всего за пару секунд и на основе своего ощущения к дизайну сайта, вообще–то!), он начинает вникать в суть изложенной информации или вашего предложения.

# Пользователи исследуют сайт выборочно

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

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

>> Что входит в анализ юзабилити вашего сайта и как заказать аудит юзабилити у специалиста

# Пользователь активирует кнопку «Назад»

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

Кнопка «Назад» — это выручалочка для пользователей во всех непонятных ситуациях.

# Если трудно разобраться, то есть кнопка «Назад»

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

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

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

# Пользователям важны их собственные ощущения

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

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

Да, в более безопасное для себя, туда, где они будут испытывать удовольствие от взаимодействия с сайтом.

# Пользователи ищут кнопку «Вверх»

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

Поэтому не пренебрегайте «лифтом» и обязательно размещайте кнопку «Вверх».

# Пользователи нетерпеливы и ожидают мгновенного результата

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

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

Поэтому все важные страницы и ссылки должны быть в поле видимости пользователя и на расстоянии 2 кликов.

# Пользователи хотят держать происходящее под контролем

Пользователи хотят иметь возможность управлять своим браузером и иметь ведущую роль при взаимодействии с сайтом.

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

Пользователи хотят иметь возможность вернуться с помощью кнопки «Назад» или отменить последние действия (закрыть окно рекламы, убрать звук, самостоятельно решить, смотреть видео или нет и т.д.).

Спасибо, что дочитали до конца! Публикация вышла приличная, но оно того стоило, не так ли?

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

Если вам нужна профессиональная помощь в разработке сайта, то свяжитесь со мной.

Заключение

Основы веб–дизайна не сводятся только к этим правилам. Мы с вами только слегка окунулись в тему.

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

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

Одна небольшая просьба: если вам понравилась эта статья, то поделитесь ею на вашей любимой социальной платформе, — это сделает мой день! Спасибо!