Устойчивый веб-дизайн

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

Келлская книга – это прекрасно иллюстрированный манускрипт, созданный более 1200 лет назад. Заманчиво назвать ее произведением искусства, но это произведение дизайна. Цель книги – передать послание; Евангелия христианской религии. Благодаря использованию иллюстраций и каллиграфии это послание передается в привлекательном контексте, что делает его приятным для созерцания.

Начало Евангелия от Матфея в Келлской книге.

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

Печать и революция

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

Страница из Библии Гуттенберга.

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

Рамка для средневековых рукописей Яна Чихольда.

Зная соотношение размеров страницы, дизайнеры могли размещать элементы с максимальным эффектом. Страница – это ограничение, а система сетки – способ навязать ей порядок.

Перенесите свой талант в Интерне

Когда в 1990-х годах Интернет начал завоевывать мир, дизайнеры начали переходить с бумаги на пиксели. Книга Дэвида Сигела "Создание убийственных веб-сайтов" появилась как раз в это время. Его умные TABLE и GIF-хаки позволили дизайнерам воспроизвести те же макеты, которые они ранее создавали для печатной страницы.

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

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

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

Если не починил, не ломай.

Ничто так не пугает, как неизвестность. Эти слова бывшего министра обороны США Дональда Рамсфельда должны вызывать настоящий ужас (хотя в то время общее мнение было таково, что они звучали как бред):

«…Как мы знаем, есть известные нам известные; есть вещи, которые мы знаем, что мы знаем. Мы знаем также, что есть известные неизвестные: то есть мы знаем, что есть вещи, которых мы не знаем. Но есть и неизвестные неизвестные – те вещи, о которых мы не знаем, что мы их не знаем»

Дональд Рамсфельд

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

На заре развития Интернета большинство мониторов имели ширину 640 пикселей. Веб-дизайнеры создавали макеты шириной 640 пикселей. Когда все больше людей стали использовать мониторы с шириной 800 пикселей, все больше дизайнеров стали создавать макеты шириной 800 пикселей. Через несколько лет это значение стало равным 1024 пикселям. В какой-то момент веб-дизайнеры остановились на магическом числе 960 пикселей как на идеальной ширине.