Неряшливость веб-дизайнеров часто оправдывается фразой: “Я так вижу". Но художник и дизайнер - понятия немного разные.
Веб-дизайнер - специалист, работающий над внешним видом сайта. Он выбирает элементы, блоки, их размеры, порядок отображения на странице, цвета, композиции. Самое главное для веб-дизайнера - сделать макет сайта максимально удобным для пользователя.
В отличии от картин художника, результат работы веб-дизайнера нельзя потрогать. И в первую очередь важна не просто красота, а донесение информации до посетителей сайта.
Вы знаете, что основные правила веб-дизайна опираются на знание психологии? Человек воспринимает предметы, расположенные близко друг к другу как единое целое - так работает теория близости.
Хотя общее количество элементов осталось одинаковым. Так работает принцип близости в дизайне.
Поэтому внутренние расстояния между элементами должны быть меньше, чем внешние. Этот закон актуален как для букв и слов, так абзацев, картинок и модулей.
Рассмотрим еще один пример.
При несоблюдении правила внешнего и внутреннего в дизайне разные элементы часто образовывают случайные связи и вызывают в лучшем случае улыбку.
Интерлиньяж - это расстояние между строками текста. Для букв внутренним считается расстояние между ними, а внешним - межстрочный интервал.
А при добавлении заголовка к тексту улучшилась наглядность. При накладывании текста на серую подложку ее внутренние поля шире, чем расстояние между строками текста. Информация теперь больше привлекает внимание. Вы согласны?
Теперь рассмотрим принцип работы правила на примерах.
В этом примере буквам очень тесно, а увеличенное внутреннее пространство символа "О" как-бы разрывает слово. | А так слово приобрело значимость и лучше читается. |
В этой фразе сливаются слова. | При увеличении расстояний между словами фраза обрела читабельность. |
А тут мы вытянули шрифт вверх. | Теперь логично уменьшить межбуквенное расстояние. |
Какая фраза выглядит самой компактной и лучше всего воспринимается? Та, которая написана по правилам внешнего и внутреннего расстояния - самая последняя.
Абзац и заголовок - это самостоятельные объекты. Поэтому внимательно следите за расстояниями.
Рассмотрим такой блок:
Заголовок не должен "зависать в воздухе". Он относится именно к тому блоку, о котором пойдет речь.
И напоследок несколько закономерностей из копилки правил веб-дизайнера.
При сборке макета сначала определите внешние и внутренние расстояния. И помните про принцип схожести - используйте одинаковые шрифты и стили, иначе результат будет смешным.
Запомнить все рекомендации очень затруднительно. И даже если вы выучите их наизусть, то найдутся новые. Ведь копилка веб-дизайнера бесконечна. Самое важное - применять правило ко всем частям макета - внутреннее расстояние должно быть меньше внешнего.