Веб-дизайн - это очень индивидуальный процесс. Чтобы создать действительно уникальные и эффектные композиции, дизайнеры должны отказаться от своих предвзятых представлений о том, как должен выглядеть веб-сайт. Вместо этого они должны позволить своим ценностям бренда, аудитории и разнице быть их «истинным севером», направляя их в процессе проектирования.
Но в то время как дизайн - это все о нарушении «правил» и создании своих собственных, есть несколько принципов веб-дизайна, о которых следует помнить дизайнерам. Эти проверенные руководящие принципы необходимы для создания отлаженных и функциональных веб-сайтов, которые привлекают вашу аудиторию. Продолжайте читать "20 основных принципов веб-дизайна", чтобы узнать следующие творения.
1. Используйте удобочитаемые и веб-шрифты
Роль типографии в веб-дизайне не может быть преуменьшена. Использование правильных шрифтов иллюстрирует индивидуальность вашего бренда и сразу же привлекает внимание аудитории. Тем не менее, это не просто хорошо выглядит. Гарнитуры, которые вы используете в своем веб-дизайне, также должны быть функциональными и удобочитаемыми. В конце концов, если пользователю придется щуриться, чтобы увидеть ваш текст, он, скорее всего, будет изо всех сил пытаться прочитать ваши сообщения или вовсе уйдет с вашего сайта. Arial, Helvetica, Times New Roman и Courier New являются примерами веб-шрифтов. Это означает, что они поддерживают разборчивость в любом размере и хорошо работают как на мобильных, так и на стационарных компьютерах.
2. Используйте шаблон «F»
Люди - это привычки, и то, как мы потребляем контент, не является исключением. Исследование Nielsen Norman Group по отслеживанию глаз показало, что когда мы сканируем информацию на веб-сайте, большинство из нас делают это в форме буквы F. Это означает, что мы сначала читаем важные заголовки вдоль верхней части страницы, затем сканируем левую сторону страницы на любые цифры, маркеры или боковые панели, а затем снова переходим по всей странице на любой жирный текст или подзаголовки. В веб-дизайне использование шаблона «F» предполагает имитацию естественного пути глаза, чтобы не нарушать визуальный поток. Это особенно важно на странице посадки и продаж, где конечной целью является конверсия.
3. Или шаблон "Z"
Хотя шаблон «F» является обычным шаблоном сканирования глаз, он не единственный. Расположение «Z» является еще одним важным принципом дизайна. Это когда глаз сканирует слева направо, образуя воображаемую горизонтальную линию. Ими она спускается в левую часть страницы, образуя воображаемую диагональную линию. Наконец, он снова возвращается вправо, образуя вторую горизонтальную линию.
Итак, когда бы вы использовали макет «Z» над «F»? В то время как макет Z имеет тенденцию работать лучше всего для целевых страниц, Z-шаблон обычно лучше подходит для страниц с очень минимальной информацией, где основным требованием является призыв к действию.
Скорее всего, вы уже видели этот шаблон в действии, потому что он используется на странице входа в Facebook! Естественно, взгляд направлен непосредственно на логотип, но шаблон Z направляет пользователей через два призыва к действию - вход в систему или присоединение.
4. Используйте отрицательное пространство
Иногда вы можете превратить негатив в позитив! Это, безусловно, имеет место с использованием негативного пространства в дизайне вашего сайта.
Также известный как пробел, это пустые области между визуальными элементами в вашем дизайне (например, фотографии, текст и значки)
Этот принцип существует примерно столько же, сколько и само искусство, но он играет особенно важную роль в веб-дизайне. Чрезмерно загруженные и сложные веб-сайты имеют тенденцию перегружать пользователей и мешать им предпринимать действия, что является полной противоположностью того, что вы хотите! Между тем, использование негативного пространства привлекает их внимание к наиболее важному контенту, повышает удобочитаемость текста и обеспечивает удобство работы с пользователем.
5. Держите ваш дизайн в соответствии
Вы уже знаете, что последовательность является ключевым в веб-дизайне. Но важно отметить, что это означает больше, чем просто сохранять ваши шрифты, цвета и значки одинаковыми как в брендбуке. Это также означает, что интервалы должны быть одинаковыми в ваших макетах. Это помогает придать вашему веб-сайту изысканный и профессиональный вид, что повышает к бренду доверие.
6. Простая и логичная навигация по страницам
Сайт без четкой навигации похож на лабиринт без карты. Это делает просмотр вашего сайта излишне сложным и запутанным для ваших посетителей. Хорошо продуманная навигация по сайту обеспечивает удобство и комфорт для пользователя. Это может принимать разные формы - будь то выпадающее меню, боковая панель или липкая навигация. Ключ в том, что его легко найти, он хорошо работает на всех устройствах и не перегружен различными опциями.
7. Используйте дополнительную цветовую палитру
Используемая цветовая палитра задает настроение вашего веб-дизайна. Например, использование множества темных коричневых и черных оттенков может создать деревенское настроение, а пастельные тона могут выглядеть довольно игриво и современно. Какой бы цвет вы ни выбрали, важно убедиться, что цвета, которые вы используете, хорошо сочетаются друг с другом. Иногда это означает прилипание к подобным оттенкам, но противоположности также могут привлекать (например, оранжевый и бирюзовый). Если вы выбираете цвета, которые находятся напротив или рядом друг с другом на цветовом круге, они должны быть взаимодополняющими.
8. Помните про аудиторию
Хорошие дизайнеры знают, что это не просто создание сайта, который, по их мнению, выглядит хорошо. Чтобы действительно создать веб-сайт, который устраняет шум в Интернете, они должны говорить непосредственно с их аудиторией через дизайн. Поставьте себя на место аудитории и спросите себя, каковы их самые большие потребности, желания и страхи. Это всё должно отражаться в выборе вашего дизайна, от шрифтов и цветов, которые вы используете, до текста кнопок и навигации по сайту.
9. Оптимизируйте кнопки и призывы к действию
В то время как кнопки часто являются последним, что нужно добавить в веб-дизайн, они играют незаменимую роль. Они могут быть решающим фактором относительно того, продолжит ли пользователь перемещаться по сайту или закрывать окно. Кнопки на вашем сайте должны кричать, а не шептать. То есть они должны выделяться на фоне других визуальных элементы на странице и легко найти и нажать.
10. Поддерживать визуальную иерархию
Мы коснулись визуальной иерархии, когда упомянули паттерны сканирования глаз и навигацию. Тем не менее, это настолько важный принцип, что он заслуживает собственный пункт! Хотя дизайн сайта должен быть эстетичным и инновационным, он также должен быть логичным. То есть вам нужно сознательно структурировать свой контент в способ, который имеет смысл для пользователя, даже если это только на подсознательном уровне.
Продолжение следует...
Подписывайтесь на канал, чтоб не пропустить продолжение статьи.
Понравилась статья поставьте, пожалуйста, "лайк" и подпишитесь на наш канал, нас это стимулирует на написание новых статей.
Читайте также: