Если провести параллель между хорошим дизайном различных компаний, то можно обнаружить несколько общих моментов, назовем их принципами. Мы сделали подборку из пяти принципов необходимых для создания хорошего дизайна.
Коммуникация в контексте веб-дизайна зачастую подразумевает под собой текст. Оливер Райхенштайн, информационный директор и основатель компании Information Architect, провел мини-research и обнаружил, что веб-дизайн на 95% состоит из типографики. Для хорошего дизайна типографика должна обладать минимальным количеством шрифтов, уместной длиной строки, оптимальным межстрочным расстоянием и лаконичной структурой. Сейчас мы разберем каждый из этих факторов по порядку.
Минимальное количество шрифтов необходимо для того, чтобы не терялась композиция сайта и не было хаоса. Лучше всего использовать шрифты, которые относятся к одному семейству шрифтов или имеют общие характеристики. Тогда они будут сочетаться друг с другом и гармонировать.
Уместная длина строки залог прочтения текста на сайте. Тут должна быть золотая середина, так как при слишком короткой длине сбивается динамика текста и читатель должен постоянно прерывать чтение для перехода на другую строку, а при слишком большой нужно будет долго фокусироваться на прочитанном. При подборе ширины строки стоит ограничиться количеством в 60 знаков. Именно такую цифру рекомендует Baymard Institute для наиболее комфортного использования сайта пользователем.
Оптимальное межстрочное расстояние, либо как его еще называют интерлиньяж, способствует читабельности текста. По правилам межстрочный интервал должен быть на 30% больше высоты знака, если мы говорим про абзац. Когда дело касается пары строк текста, то показатели интерлиньяжа должны быть меньше, чтобы текст не распался.
Структура типографики — это завершающее ее оформление. Когда человек видит перед собой сплошные буквы, то ему становится очень сложно понять смысл этого хаоса. Если разбить на слова, предложения и смысловые блоки становится уже реальным понять содержимое. Совсем можно облегчить задачу если текст структурировать, выделить заголовки другим кеглем, изменить начертания и выделить цитаты. Теперь текст можно прочитать гораздо легче и быстрее.
То, что обычно принимается за многозадачность, на самом деле является быстрым переключением между задачами. Люди с большой скоростью переключаются с одного предмета на другой, меняя фокус внимания. Для этого требуется сильная концентрация внимания и большая интеллектуальная работа.
Принцип keep it simple базируется на основном законе юзабилити — веб-страница должна быть очевидной. Еще он обладает такими преимуществами, как простая навигация, быстрая загрузка ресурса, логичность и акцентирование внимания на контенте.
Простая навигация объясняется отсутствием лишних элементов и простой структурой, соответственно и скорость загрузки становится максимальной. Чем меньше пользователю необходимо задумываться над смыслом своих действий, тем лучше его впечатление о сайте — что и является главным принципом юзабилити. За счет минимализма лучше получается сфокусировать внимание посетителя на важных элементах.
Тестирование важно, так как оно дает возможность наиболее точно оценить работу и посмотреть что возможно пошло не так. Также оно помогает исправить недочеты и проанализировать, что подходит пользователям, а что нет.
Во-первых, тестирование гораздо эффективнее, если его проводить с живой целевой аудиторией. Также стоит напомнить про Закон Вайнберга, который гласит, что разработчики не способны тестировать свой код, что относится и к дизайнерам. Согласитесь, что адекватно дать оценку своей работе не всегда получается. А если включить режим “я художник, я так вижу” можно вообще начать опираться чужой критике.
И, во-вторых, тестирование стоит начинать как можно раньше, таким образом команда экономит на времени и бюджете. Не нужно редактировать ошибки — их можно предотвратить, а исправить что-либо на ранних этапах гораздо дешевле, чем при полностью готовом продукте.
Контраст очень важен в дизайне: он акцентирует внимание на нужных деталях, делает внешний вид более привлекательным и интересным для пользователя, а также создает визуальную иерархию. Мы рассмотрим какую роль играет контраст размера и цвета.
С помощью контраста размера можно выделить более значимые элементы или заголовки/подзаголовки текстов. Выполняется это следующим образом — мы ставим два элемента структуры рядом друг с другом и внимание в первую очередь акцентируется на объекте, который больше.
Комфортный цветовой контраст с бэкграундом повышает скорость прочитанного текста. Перед выбором цветовой схемы вашего сайта, стоит изначально обратить внимание на контраст переднего плана и заднего фона. Тут тоже есть нюансы, например параметры контраста в нетекстовом контенте (видео или анимация), разнятся от общепринятых для текстового. Существуют различные инструменты для проверки уровня контрастности, но для этого необходимо ознакомится с показателями. Например, AA — это минимальный контраст, ААА — улучшенный, а Fail — когда контрастность недостаточная.
Композиция — это положение объектов, когда они гармонируют друг с другом. Именно за счет композиции можно уравновесить элементы, которые обладают разными характеристиками: цветом, формой, размером и значимостью. Соответственно целью композиции является ее баланс. Любопытно, что элементы расположенные ближе к центральной оси весят больше, чем те, которые находятся более удаленно от центра. Здесь мы рассмотрим значение цвета в композиции, правила третей и то, как с помощью композиции создается визуальная иерархия.
Цвет в композиции играет эмоциональную составляющую и привлекает внимание. Цветовую контрастность мы уже успели обсудить, теперь поговорим об эмоциях. В зависимости от насыщенности и оттенка конкретного цвета зависит то, как человек будет воспринимать продукт в целом. Если цвета яркие, то они будут бодрить, если приглушенные — расслаблять. Выберите эмоцию, которую вы хотите передать вашему посетителю и используйте нужный цвет либо его подтон.
Правило третей помогает понять что и где расположить. Для использования правила третей нужно мысленно разделить страницу на 9 одинаковых частей, визуально проведя две горизонтальные и вертикальные линии. По психологии люди обращают внимание на места пересечения этих линий, соответственно — они самые выигрышные. Это стоит учитывать во время расположения деталей композиции.
Управлять взглядом пользователя просто — нужно создать визуальную иерархию. На эту тему проведено множество психологических исследований и стоит запомнить, что люди сканируют текст буквой Z. Данную информацию стоит использовать, чтобы расставлять детали на странице в нужном порядке, и привлекать внимание к конкретным элементам.
Подведем итог. При разработке дизайна сайта стоит помнить про пользователей, для которых вы его создаете. Читабельный текст, понятная структура, уместная контрастность, минимализм и своевременное тестирование — это залог хорошего дизайна и его базовые принципы.
Загрузка...
