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

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

1. Визуальная иерархия определяет, что люди замечают в первую очередь (и в последнюю очередь)

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

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

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

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

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

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

2. Пользователи не должны думать

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

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

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

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

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

3. Контраст и движение привлекают внимание

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

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

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

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

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

4. Пустое пространство позволяет контролировать визуальный поток

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

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

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

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

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

5. Слишком много информации перегружает пользователя

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

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

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

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

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

6. До интерактивных областей должно быть легко добраться

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

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

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

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

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

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

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

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

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

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

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

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

8. Композиция многое говорит о вас

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

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

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

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

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

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

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

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

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

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

Предыдущая статья7 типичных опечаток в веб-дизайне
Следующая статьяКак подобрать размер шрифта на сайте?