10 правил веб-дизайна

Так что же делает веб-дизайн хорошим?

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

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

1. Цель

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

2. Коммуникация

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

3. Шрифты

В целом, шрифты без засечек, такие как Arial и Verdana наиболее удобны для чтения онлайн ( шрифты без засечек - современные шрифты, которые не содержат декоративного оформления). Идеальный размер для удобного чтения онлайн - 16px. И сократите количество шрифтов и их размеров на сайте максимум до трех, чтобы сохранить лаконичность дизайна.

4. Цвета

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

5. Картинки

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

6. Навигация

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

7. Макет на основе сетки

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

8. Дизайн с учетом человеческого восприятия

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

9. Скорость загрузки

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

10. Мобильная версия

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

 

Переведено: Дизайн студия Dagerotip
Источник