20 принципов проектирования, которые не стоит нарушать (Часть 1)

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

01. Не забывайте про керн

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

02. Предпочитайте читаемость эстетическим соображениям

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

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

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

03. Следите за длиной

Вы когда-нибудь чувствовали физическое напряжение в процессе прочтения статьи? Вам знакома ситуация, когда вы пытаетесь найти то место, на котором остановились, каждый раз, когда вам нужно перейти с одной строки на другую? Очень часто такие проблемы возникают из-за плохо подобранных длины строк и размера элементов. Удобным для восприятия считается размер строки, который содержит около 6 слов или 30-40 символов (включая пробелы).

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

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

05. Используйте оптимальное расстояние между словами

Для дизайнера работа с текстом практически неизбежна. Существует огромное количество правил, которые вам придется принять во внимание. Одной из основных проблем является подбор оптимального расстояния между словами в тексте. Есть два основных момента, на которые стоит обратить внимание: трекинг и лединг.

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

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

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

06. Используйте правильное выравнивание

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

Выравнивание по левому краю - наиболее распространенный способ (обратите внимание, что даже этот текст выровнен по левому краю). Это наиболее легко читаемый вариант, так что если вы сомневаетесь, используйте выравнивание по левому краю.

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

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

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

07. Всегда используйте сетку

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

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

08. Всегда думайте о вашей аудитории

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

09. Остерегайтесь вдов и сирот

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

Вдова (widow) - термин, который используется для обозначения строки текста, которая принадлежит к абзацу, но была перенесена в следующую колонку. Сирота (orphan) - это одно единственное слово в целой строке.

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

10. Используйте логичную цветовую палитру

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