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

Принципы дизайна
24.04.2015 КОММЕНТАРИИ: 0

Создание сайта — мастерство, требующее от веб-дизайнера творческого таланта, высокой квалификации и владения современными технологиями. Успех ресурса на 99,9% зависит от его удобства и полезности, в то время как визуальная привлекательность является вторичным фактором. За последние несколько лет в сфере веб-разработки прочно закрепился подход, основанный на удовлетворении запросов и потребностей пользователей. Создавая сайт, дизайнер тщательно продумывает, каким способом люди будут с ним взаимодействовать, какие функции им необходимы, где разместить стратегически важные ссылки и кнопки, чтобы они не ускользнули от взгляда посетителя.

Золотые правила дизайна 1

Юзер-ориентированный подход позволяет создавать безупречные с точки зрения юзабилити ресурсы. Заточенные под целевую аудиторию сайты обеспечивают максимально эффективный и приятный опыт взаимодействия (user experience). В их дизайн автоматически закладываются 3 основные составляющие успеха:

  • нацеленность на конверсии;
  • превосходный функционал;
  • эстетическая привлекательность.

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

Визуальная иерархия

Визуальная иерархия в веб-дизайне

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

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

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

Интуитивная понятность дизайна

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

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

Учёт пользовательского опыта

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

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

Предельное упрощение

Золотое правило веб-дизайна: максимальное упрощение

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

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

Использование принципа золотого сечения

Пример использования правила золотого сечения в веб-дизайне

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

a/b = b/(a+b)

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

Правило третей

Пример использования правила третей в веб-дизайне

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

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

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

Следование закону Хика

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

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

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

Свободное пространство

Пример оперирования свободным пространством в веб-дизайне

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

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

Принципы гештальтпсихологии в веб-дизайне

Принципы гештальтпсихологии в веб-дизайне

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

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

  1. Закон близости

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

  1.   Закон преемственности (непрерывности)

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

  1. Закон замыкания

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

  1. Закон симметрии

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

  1. Закон общей судьбы

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

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

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

Тестирование на каждом этапе разработки

Тестирование как золотое правило веб-дизайна

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

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

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

По материалам издания Design Your Way

Добавить комментарий


Защитный код
Обновить