Как спроектировать современный сайт (PDFDrive)

Чои Вин
Как спроектировать современный сайт
Текст предоставлен правообладателе

http://www.litres.ru/pages/biblio_book/?art=4234525
Как спроектировать современный сайт.: Питер; Санкт-Петербург; 2011
ISBN 978-5-459-00579-0
Аннотация
Проектирование интернет-сайтов на базе сеток – бесценный инструмент для
организации веб-страниц и создания привлекательных веб-интерфейсов, помогающий
разрабатывать по-настоящему современные, сложные и вместе с тем изящные интернет-
проекты. Эта книга позволит вам в совершенстве овладеть искусством проектирования
сайтов с помощью сетки. Здесь изложены основы теории сеток и главные принципы
работы, также вы найдете множество упражнений, посвященных практической реализации
этих идей. Книга ориентирована на опытного читателя, уже обладающего навыками
использования технологий HTML, CSS и JavaScript для создания веб-страниц. Если вы
профессионально занимаетесь веб-дизайном, руководите разработкой интернет-проектов
и интересуетесь вопросами юзабилити и дизайна веб-интерфейсов, эта книга – для вас.
Ч. Вин. «Как спроектировать современный сайт»
Содержание
Глава 1. Введение 5
Точка 7
Почему я написал эту книгу 8
Для кого эта книга 9
Заключительная рекомендация 10
Глава 2. Концепция 11
Невидимый порядок 13
Краткая ретроспектива 14
Математические формулы 15
XX век 18
Интернет 19
Изменение стиля общения 21
Глава 3. Процесс 23
Этапы 24
Исследования и ограничения 25
Эскизы 27
Терминология 28
Юнит 28
Колонка 28
Блок 29
Область 29
Базовая сетка 29
Горизонтальная или вертикальная ориентация 30
Промежутки между колонками 30
Поля страницы и отступы 30
Элемент 30
Модуль 30
Глава 4. Начинаем творить 31
Обзор проектов 32
Начало работы 33
Понимание требований 33
Область просмотра 37
Рекламный блок 39
Бренд 40
Выводы 40
Создание наброска 42
Создание сетки 43
Создание колоночной сетки (юниты) 43
Создание базовой сетки 48
Расчет полей 50
Создание шаблона страницы 54
Проект 1. Страница статьи 64
Проект 2. Информационная страница 77
Проект 3. Страница профиля 88
Проект 4. Домашняя страница 100
Дополнительные страницы 111
3
«Резиновая» верстка 118

Глава 5. Заключение 120
Приложение 121
Сетки 122
Сайты, на которых можно найти информацию о сетках 123
О дизайнерах 124
Типографика 125
HTML и CSS 126
Интерактивный дизайн 127
4
Чои Вин
Как спроектировать современный сайт
Моим родителям, которые сделали все, что могли.
Глава 1. Введение
В некотором смысле дизайн можно рассматривать как метод, с помощью которого

красота стремится установить диктатуру в мире. Это должна быть не диктатура
в классическом понимании, а скорее требование соблюдать умеренность и ввести
дополнительное самоограничение.
При переходе от постановки задачи к выбору способа ее решения дизайнер
может относиться к работе с коммерческой (коммерческие требования, технологические
ограничения) или художественной (эстетика, удобство использования, человеческий
фактор) точки зрения. Независимо от подхода, наиболее успешные дизайнерские работы
объединяет стремление превратить хаос в порядок.
Какой порядок? Порядок, отражающий представления разработчика об окружающем
мире, о том, каким ему следует быть. Этот выбор можно считать отражением представлений
дизайнера о том, как должен функционировать мир, – не что иное? как малая, ограниченная
разновидность тирании, действующая на небольшой территории.
Возможно, все это – плоды моего воображения. Но я описал то, что изначально
привлекало меня в дизайне.
Заинтересовавшись вопросами «дизайна», или «графического дизайна», я поступил в
художественный колледж, мне было семнадцать и я не имел ни малейшего представления,
чем буду заниматься. Я умел рисовать (на довольно неплохом уровне), и моей единственной
целью было научиться зарабатывать рисованием на жизнь. Когда я наконец получил
возможность рисовать все, что захочу, – окончил колледж и стал взрослым, – мир предстал
передо мной как пространство, полное хаоса. Порядка не существовало, и я понимал,
инстинктивно или сознательно, что должен направить все свои творческие способности на
борьбу с хаосом, по крайней мере, в своей работе.
По окончании колледжа я не получил ученую степень, но в течение последнего года
посещал все занятия, посвященные дизайну. По сути, я сам занимался своим образованием:
прочитал множество книг, работал над небольшими заказами в нескольких дизайн-студиях.
5
Я двигался «на ощупь», пытаясь прийти к своему пониманию графического дизайна и найти
собственный подход на практике. Все это время я интуитивно ощущал, что для решения
дизайнерских задач мне нужен научный подход, который даст мне новые идеи.
Наконец, я осознал, что наиболее эффективным способом создания упорядоченной
основы в графическом дизайне являются сетки. Я пытался использовать их в течение
многих лет с переменным успехом, но мне не хватало информационной базы и нужной
подготовки. Можно услышать утверждение, что графический дизайн – всего лишь
«выравнивание материала», и именно этим, в большей или в меньшей степени, я занимался
в течение многих лет. В большинстве своих проектов я использовал импровизированные
сетки, непродуманные колонки, которые возникали при попытке «выровнять материал».
Естественно, они не всегда могли стать основой для продуманного дизайна. Это особенно
бросается в глаза, когда я просматриваю свои старые работы, в которых был пропущен
обязательный этап планирования блоков и колонок.
Мне понадобилось много времени, чтобы начать использовать сетки, но я учился
методом проб и ошибок, читая книги, рассматривая работы талантливых дизайнеров, читая,
экспериментируя и вновь читая. Я понял, что сетки гораздо сложнее, чем кажутся на первый
взгляд. Изучая их, я постоянно узнаю что-то новое – именно это привлекает меня в дизайне,
Интернете, технологиях и в искусстве в целом. Не каждый раз сетка, которую я использую,
сильно отличается от предыдущей, но в процессе работы почти всегда можно узнать что-
то новое.
6
Точка
В первый же день занятий в художественном колледже преподаватель раздал нам
чистые листы бумаги. Он посмотрел на нас и попросил поставить точку в произвольном
месте страницы.
Пока мы выполняли задание, преподаватель ходил по аудитории, бросая беглые
взгляды на результат нашего «творчества». Он с юмором комментировал выбор места для
наших точек и то, что этот выбор позволял предположить о наших личных качествах.
Некоторые расположили точку в самой середине листа, другие – просто куда-то ткнули
карандашом, а более рассудительные попытались как-то связать ее положение с углами
листа. Затем он попросил нас поставить еще одну точку, и опять в любом месте. После этого
преподаватель сказал, что мы создали дизайн – бессмысленный и бесполезный, но тем не
менее дизайн.
Ввиду своего положения на одной плоскости, располагаясь на дальних углах страницы
или близко друг к другу, нарисованные нами точки создавали структуру. Даже в такой
примитивной и схематичной форме присутствовал элемент организации пространства.
Суть урока заключалась в следующем: наличие более чем одного элемента предполагает
осуществление действий, направленных на наведение порядка. Дизайн бесполезен, если он
не превращает хаос в порядок.
Рассматривая точки на своем листе, я думал: «Если пара любых расположенных
неподалеку точек подразумевает скрытую структуру, не лучше ли попытаться влиять
непосредственно на эту структуру и управлять ею, чем предоставлять ей свободу действий?»
Ответ на этот вопрос возник из подсознания, из моего стремления во всем найти
порядок (или установить его), именно оно и сделало меня графическим дизайнером.
Я решил: «Да! Конечно! Структура должна существовать везде».
Этот урок на практике подтвердил то, что я предполагал все время: скрытая структура
существует во всем, что нас окружает. Но теперь мне требовались знания, умения и ресурсы,
чтобы использовать порядок для решения наиболее интересных для меня задач.
7
Почему я написал эту книгу

Типографская сетка – это, возможно, наиболее яркое проявление стремления к порядку
в графическом дизайне. Упорядочивающее влияние сетки почти всегда можно найти в
лучших примерах дизайнерских работ. Это отражение наших попыток сделать пространство
упорядоченным, а также способ создания структур, удовлетворяющих как требованиям
простых людей, так и требованиям коммерческих организаций.
Неизменный успех сеток основан на идеях, зародившихся, проверенных на практике и
завоевавших огромную популярность в начале XX века, когда технология затронула сферу
коммуникаций и изменила наш взгляд на дизайн.
Свой вклад в дело внесли целеустремленные дизайнеры, художники и мыслители,
которые использовали сетки на практике. Именно их оригинальные и передовые идеи об
обществе, искусстве и технологии стали той базой, к которой мы обращаемся до сих пор.
Дизайнерам следует уделять внимание историческому развитию теории сеток, но суть
моей книги не в этом. Почти в каждом книжном магазине среди литературы, посвященной
дизайну, можно найти много познавательных и интересных книг, связанных с сетками.
Недостаток всего этого множества изданий заключается в том, что бо́льшая часть книг
посвящена применению сеток в печатных изданиях. Собственно, эта причина и сподвигла
меня на написание книги. В других источниках вы легко можете найти практические
рекомендации по «традиционному» графическому дизайну печатных изданий. А вопросам
использования типографской сетки в веб-дизайне уделено недостаточно много внимания.
8
Для кого эта книга

В книге вы найдете наглядные уроки по разработке привлекательных
пользовательских веб-интерфейсов на базе сеток. Здесь изложены основы теории сеток и
главные принципы их использования, вы найдете множество упражнений, посвященных
практической реализации этих идей.
Если вы занимаетесь веб-дизайном, руководите проектами либо просто интересуетесь
данной сферой, эта книга для вас. Особенно полезной она будет, если вы хорошо знакомы с
базовыми понятиями графического дизайна, типографского дела и собираетесь продолжить
учиться.
Если вы еще новичок в веб-дизайне, вам понадобится довольно много информации
о принципах создания вебсайтов – только тогда книга действительно вам пригодится.
Теоретические сведения и упражнения, составляющие основу этой книги, требуют от
читателя навыков по использованию HTML и CSS для создания веб-страниц. Вы должны
представлять, как улучшить веб-интерфейс с помощью JavaScript и других технологий. Не
обязательно быть профессионалом в данных областях, но необходимо понимать основные
принципы работы.
По сути, эта книга почти не затрагивает технический аспект использования сеток в
веб-дизайне. Здесь вы не найдете конкретных рекомендаций по написанию HTML-и CSS-
кодов, потому что существуют более квалифицированные специалисты и профессиональная
литература, посвященная данной теме.
9
Заключительная рекомендация
Эта книга не является исчерпывающим описанием всех подходов к применению сеток.
Она представляет одну точку зрения на проблему – мою собственную, – основанную на
моем пятнадцатилетием дизайнерском опыте, связанном с цифровыми СМИ. Поэтому здесь
вы не найдете абстрактных упражнений на создание сеток или рецептов на все случаи
жизни. В книге я предлагаю описание некоторых проблем, с которыми сталкивался в
своей профессиональной деятельности, и разбираю методы, использованные мной для их
решения.
Я рекомендую вам более детально изучить вопросы графического дизайна и интернет-
технологий. Почитайте работы создателей теории сеток, это позволит вам увидеть все
многообразие методов работы с сетками и стать более находчивым, более проницательным
дизайнером. Мой главный совет: как можно больше читайте. Не только о сетках, но и о
типографике вообще, о компоновке, взаимодействии человека и компьютера, юзабилити,
а также о том, как дизайн и технологии изменяют наше восприятие информации. (В
приложении вы найдете список рекомендованной литературы.) Я надеюсь, что независимо
от того, новичок вы или профессионал, книга «Как спроектировать современный сайт»
займет достойное место на вашей полке.
10
Глава 2. Концепция
Опытные графические дизайнеры, работающие в масс-медиа, хорошо знакомы с

преимуществами дизайна, основанного на типографской сетке. Перечислим наиболее
важные из них.
• Сетки делают информацию упорядоченной, цельной и гармоничной.
• Сетки позволяют предугадать местоположение информации, что облегчает ее
восприятие.
• Сетки позволяют добавлять новую информацию, не нарушения дизайнерской
концепции.
• Сетки облегчают коллективную работу над проектом, поскольку конкретные решения
не наносят ущерба общей концепции.
Это лишь несколько доводов, подтверждающих выигрышность дизайна на основе
сеток, но до недавнего времени они упоминались, в основном, применительно к
традиционному графическому дизайну. Меня удивляет, что до сих пор очень мало книг
посвящены использованию сеток в цифровых СМИ и при создании пользовательских
интерфейсов.
В конце концов, монитор компьютера сам представляет собой тонкую сетку – экран
заполнен точками с плотностью 72 пиксела на дюйм, которые образуют эквивалент листа
миллиметровой бумаги.
В доцифровую эпоху самые сложные и универсальные сетки рассчитывались с
высокой точностью. Столь популярны они стали потому, что отражали существующую
в природе математическую гармонию. В онлайновых СМИ математика присутствует не
только в роли простого чертежного инструмента, на основе точных математических расчетов
строятся и сетки. Каждая линия, блок или изображение, появляющиеся на цифровой сетке,
возникают в результате расчетов, выполняемых компьютером.
Поэтому компьютерную сетку можно воспринимать как структуру, которая возникает
из двух точек, поставленных на пустом листе бумаги, – она не бросается в глаза, но тем
не менее существует. В цифровых СМИ дизайн без сеток невозможен, потому что в основе
компьютерного дизайна лежит сетка пикселов.
Следовательно, веб-дизайнеры – во всяком случае те из них, кто склонен к порядку, –
хотят влиять на элементы, размещаемые на экране монитора, управлять ими, чтобы
подчинить себе эту реальность. Так что сетка оказывается естественным выбором.
11
Рассматривая приведенные ранее преимущества использования сеток, легко сделать

вывод, что они распространяются и на веб-дизайн:
• Сетки добавляют упорядоченность, связность и гармонию веб-страницам с большим
объемом информации.
• Сетки помогают пользователям находить нужную информацию при переходе со
страницы на страницу, что способствует улучшенному восприятию данной информации.
• Сетки позволяют добавлять новую информацию без разрушения общей концепции,
заложенную еще при разработке сайта.
• Сетки облегчают совместную работу над проектом без ущерба для общей концепции
сайта.
Можно сказать, что эти преимущества становятся еще более заметными в Интернете,
где структура и порядок ценятся больше, чем в печатных изданиях. Хотя основной способ
доступа к информации в Интернете – это браузер (то есть программа, предназначенная
для просмотра), пользователи все же чаще не просматривают, а ищут информацию
и выполняют определенные задачи. Сетки идеально подходят для такой работы. Они
помогают пользователям находить информацию, а веб-дизайнерам – размещать материал
там, где его легко найти.
Независимо от того, работает дизайнер в печатных изданиях, Интернете или других
СМИ, сетки развивают его творческие способности.
Для тех, кто мало знаком с сетками, это утверждение может показаться спорным.
Многие новички считают, что сетки предъявляют слишком много требований к внешнему
виду и стилю, что сетки ограничивают их свободу выражения и творческие порывы.
Хотя эти мысли некогда были популярны и среди опытных дизайнеров, время
показало, насколько они ошибочны. Не случайно свою замечательную книгу «Сетка» (1978)
Аллен Хёрлберт начал с предупреждения:
Начнем с того, что сетка в этой книге вовсе не провозглашается
безоговорочно основным методом графического конструирования. Немало
опытнейших современных худож-ников-оформителей – даже в Швейцарии
и Германии, где зародился этот метод, – создают прекрасные композиции, не
прибегая к ее помощи.
Прошло более трех десятилетий, и такой осторожный подход к дизайну на основе сеток
кажется анахронизмом. Большинство опытных дизайнеров согласны, что сетки помогают в
нашей деятельности. В 2009 году известный дизайнер, писатель и теоретик дизайна Эллен
Лаптон писала:
Называть сетку ограничивающей – все равно что называть
ограничивающими язык или типографское дело.
Поэтому сетки можно рассматривать как огромное поле для творчества. Они создают
основу, с помощью которой дизайнер может решать разнообразные проблемы и помогать
читателям, пользователям и аудитории обрести то, что пытаются найти все люди, – порядок
среди хаоса.
12
Невидимый порядок
Естественно, все мы ищем разные виды порядка, и пути поиска у каждого свои. В
глазах дизайнера порядок выглядит несколько отличным от того, как его представляет себе
обыватель. Благодаря профессиональному навыку мы можем замечать как визуальные, так
и схематичные намеки. Выровнены ли предметы? Обладают ли они сходными формами,
масштабами или пропорциями? Используется ли в них общее оформление? Упорядочены
ли они по какому-либо принципу? Прослеживается ли единый стиль даже в элементах,
не бросающихся в глаза? Вот на что мы обращаем внимание, оценивая любой дизайн,
просматривая веб-страницы или пытаясь сформулировать впечатления от просмотра сайта.
Большинство людей не столь критичны в оценке упорядоченности, по крайней мере, в
визуальных образах. Людям необходимо ощущение порядка, но не обязательно его наличие.
Они задают себе вопрос, сознательно, но чаще неосознанно: на своем ли месте вещь? Не
противоречит ли визуальный образ элементарной логике? На самом деле можно сказать, что
люди ищут не только присутствие порядка, но и отсутствие беспорядка.
Нюансы любой упорядоченной структуры могут не бросаться в глаза большинству, тем
не менее постоянно присутствует ощущение системы. Поэтому пользователь интерактивной
среды – сайта, терминала или мобильного приложения – вряд ли сразу поймет общие
принципы дизайна, использованные в этой системе. С другой стороны, пользователь может
почувствовать, что характеристики этой структуры – ее содержание, средства навигации
– созданы в соответствии с неким базовым принципом. Если он обнаружит признаки
упорядоченности, его доверие к системе и удобство работы значительно возрастут. Системе
упорядочения необязательно проявлять себя, она может не восприниматься осознанно, и
все-таки ее присутствие необходимо.
Это не значит, что ощущение порядка можно имитировать, как делают многие
дизайнеры, используя непроработанные сетки. Упорядоченную систему нельзя подделать,
дизайнер не сможет убедительно передать ощущение порядка, если отсутствует сам
порядок. Чем сильнее система воздействует на пользователя и чем глубже он постигает ее
свойства, тем важнее становится необходимость упорядоченной системы. Ее логические
принципы должны подтверждаться на практике и выдерживать проверку временем.
Неважно, что многие пользователи могут лишь поверхностно ощущать упорядоченность
системы. Зато если система не была хорошо и тщательно спроектирована, это сразу
бросается в глаза.
В первую очередь сетки представляют собой визуальную упорядоченную систему.
Как и любые другие упорядоченные системы, они воздействуют на двух уровнях: сначала
на уровне восприятия, а затем на уровне деятельности. Пользователь видит сетку, а затем
использует ее.
13
Краткая ретроспектива
Вернемся на некоторое время в прошлое. Возникновение понятия типографской
сетки относят к началу XX века. Это произошло, когда группа архитекторов,
печатников, типографов и дизайнеров стала рассматривать графическое искусство как
отражение универсальных принципов, общих для природы, математики и технологии. Это
действительно так (к этому вопросу мы еще вернемся позднее), но подобное представление
не является исчерпывающим. Можно утверждать, что на протяжении всей истории
человеческий род занимался поиском порядка. Мы – люди, поэтому наш поиск – это
не столько поиск, сколько созидание. Если порядок отсутствовал, мы создавали его. В
великолепной «Книге о сетке» (The Grid Book), описывающей историю развития сетки как
концептуальной основы, искусствовед Ханна Б. Хиггинс пишет:
В вавилонском мифе о сотворении мира Бог создал людей, как кирпичи,
из глиняных форм. Именно люди стали строить стены из кирпичей. Первая
сетка – кирпичная стена – сразу вызывает ассоциации с человеческим телом.
Датируя появление кирпича 9000 годом до н. э., Хиггинс утверждает, что самые первые
строительные блоки являлись, по сути, символом человека. Благодаря небольшому размеру
их можно было обрабатывать и при отсутствии техники перемещать вручную. Созданные
кирпичи обладали неидеальной формой, но сама форма была одинакова, поэтому любой мог
их сделать. Человек знал, что конечный результат будет соответствовать исходной версии
и послужит важной цели – возведению стены. В стене кирпичи образовывали визуальную
сетку – рациональную структуру, которая также была способом мировосприятия. Кирпичная
стена – это метод установления порядка в мире, физической организации окружающей
среды путем отделения внешнего мира от внутреннего. Эта логическая связь оказалась
настолько естественной и привлекательной, что ее важность не уменьшается и по сей
день. Данный принцип естественным образом проник в геополитику: кирпичи формировали
стены для систематизации окружающей среды – они ограничивали участки земли, а участки
земли образовывали города.
Сегодня множество людей живут и работают в соответствии с этой простой
концепцией; городская сетка, методически или органически придающая городам форму, –
это мощный принцип организации повседневной жизни.
14
Математические формулы
Кирпичи просто создавать, использовать, они понятны и просты, но на протяжении
столетий возникло и сформировалось более тонкое понимание систем упорядочения. Эти
открытия и нововведения развивали наше понимание сеток. Обращаясь к математике,
природе и даже к собственному телу, мы веками пытались выявить скрытую в мире логику
и порядок.
В VI веке до н. э. греческий философ Пифагор сформулировал теорему, ныне
известную как теорема Пифагора, – математическую модель, описывающую три стороны
треугольника. Эта теорема стала концептуальной основой геометрии, которую изучают
студенты-математики, даже не осознавая, почему это необходимо. Теорема Пифагора
наглядно показывает, что взаимоотношения между простыми числами предполагают
внутренний порядок. Так что на самом деле Пифагор поднял значение математики,
превратив ее в философскую основу постижения мира.
Пифагор считается одним из первых математиков, определивших золотое отношение
(1:1,618), описывающее гармоничную взаимосвязь двух чисел. Это отношение часто
называют золотым сечением, а его особенности долгое время занимали умы величайших
математиков. Золотое сечение служило источником вдохновения для художников и
архитекторов с древних времен. Эстетический эффект, который возникал при взгляде на
сооружения или картины, в основе которых лежал принцип золотого сечения, производил
неизгладимое впечатление. Неслучайно мы замечаем, что этот принцип был использован во
многих шедеврах мировой культуры.
Спираль Фибоначчи образует сетку, используемую человечеством на протяжении

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

и единицы. Каждое последующее число равно сумме двух предыдущих, таким образом
первые числа последовательности образуют следующий ряд:
0, 1,1,2, 3,5, 8, 13,21,34, 55 и т. д.
В результате деления любого числа из последовательности Фибоначчи на предыдущее
получается очень близкое к золотому отношению значение —1,618 (иногда больше, иногда
меньше). Для больших чисел результат будет стремиться к 1,618.
Для дизайнеров важнее всего знать, что последовательность Фибоначчи, отображенная
в виде логарифмической спирали, является основой сетки, которую принято считать самой
гармоничной и логичной.
Используемый во всем мире стандарт ISO 216, описывающий бумажные форматы,

основан на прямоугольнике с соотношением сторон, равным квадратному корню из двух
Аналогичную сетку можно построить на основе прямоугольника с соотношением
сторон, равным квадратному корню из двух (его иногда путают с золотым
прямоугольником). При делении пополам данный прямоугольник сохраняет то же
соотношение сторон. Это особенно важно для дизайнеров, ведь такие прямоугольники
стали базой международных стандартов на размеры бумаги (ISO 216, в основе которого
лежит немецкий стандарт DIN 476). Данный стандарт широко используется в Европе и
16
некоторых других странах, но не в США и Канаде. Он принят Организацией Объединенных

Наций как официальный формат. Такой единообразный подход к производству, реализации
и использованию бумаги оказал заметное влияние на работу графических дизайнеров во
множестве стран, использующих международный стандарт, потому что он предоставил
основу, на которую можно опираться при создании новых проектов.
Чуть менее обоснованным считается так называемое правило третей, которое,
по сути, правилом не является и слабо связано с математикой. Появившийся в XVII
веке упрощенный метод широко используется художниками, графиками, фотографами и
дизайнерами (в меньшей степени архитекторами) для создания гармоничной композиции.
Правило гласит, что эффективную композицию можно получить, разделив изображение
натри столбца одинаковой ширины и три строки одинаковой высоты. На пересечении
разделительных линий образуются четыре точки, на которых концентрируется внимание
человека. Из правила третей следует, что за счет выравнивания элементов относительно
этих разделительных линий или при размещении элементов в центральных точках
можно сфокусировать внимание, вызвать максимальный интерес, передать энергию или
напряжение.
Возможно, из-за своей простоты правило третей является наиболее полезной из
многочисленных «формул», описывающих эстетическую целесообразность. Ее простота
убедительна, а деление на равные трети легко запомнить. Это особенно заметно, если
сравнить данный метод с более сложными вариантами, рассмотренными ранее. Золотое
отношение, последовательность Фибоначчи, да и другие математические исследования
оказали неоспоримое влияние на теорию сеток, но в большинстве обычных ситуаций их
используют существенно реже, чем методы попроще.
К счастью, золотое отношение, наиболее важное для дизайнеров, не требует
дополнительного изучения. В примерах, приведенных в данной книге, вы найдете
множество практических рекомендаций по его повседневному применению. Основной
подход прост – чем более простой метод используется для создания сетки, тем более
эффективной будет ее организация.
Правило третей позволяет определить четыре центральные точки в любой

композиции, на которых естественным образом концентрируется внимание человека
17
XX век
Уже перечисленные и многие другие теоретические принципы послужили основой для
формирования нового подхода к дизайну в XX веке. В течение первых двух десятилетий
XX века формировались основы современного мира дизайна. Графические произведения
по большей части базировались на традициях или интуиции, а основное внимание
уделялось имитации природы или подражанию исторически сложившимся, но зачастую
плохо поддающимся анализу чувственным моделям.
В 1920-х и 1930-х годах произошел революционный сдвиг в направлении
рациональности, непосредственно связанный с новыми технологичными подходами. Среди
основоположников модернистского подхода к дизайну можно назвать Зль Лисицкого, Курта
Швиттерса, Яна Чихольда, Пауля Реннера, Ласло Мохой-Надя и др. Большинство работали
в Германии, а некоторые преподавали в знаменитом «Баухаусе». Они настаивали на новой
парадигме упорядочения мира: форма должна следовать за функцией, системное мышление
и стандартизация необходимы. Они отвергали прямое копирование природных форм, а
вместо него предлагали использовать внутреннюю красоту техники, которая тогда полным
ходом меняла общество.
Из-за распространения в Германии идей фашизма многие из упомянутых ранее
дизайнеров были вынуждены покинуть страну в 1932 году, после того как нацисты закрыли
«Баухаус». Многие переехали в Швейцарию, где их идеи нашли поддержку, а новый подход к
графическому дизайну продолжил развиваться и процветать. Идеалы «Баухауса» «обросли»
научно обоснованной простотой и минимализмом, в результате чего сформировался
так называемый международный типографский стиль. Базовой идеей, естественно, было
использование сетки в дизайне, позволяющей задействовать структуру каждой страницы
для создания ощущения порядка. В умелых руках швейцарских дизайнеров, например
Йозефа Мюллера-Брокмана, сетки находили применение почти в каждом дизайнерском
решении, геометрические формы становились все более выразительными, а математические
расчеты, лежащие в основе элементов, становились все более важными. Швейцарский стиль,
как его иногда называют, быстро превратился в совершенный набор визуальных средств,
который принято считать пиком художественного развития графического дизайна.
В это же время другая часть бывших ведущих специалистов «Баухауса» переехали
в Америку, где их идеи завоевали популярность и расцвели после окончания Второй
мировой войны. С конца 1950-х годов немецкие дизайнеры объединились с дизайнерами-
эмигрантами из других европейских стран и американскими специалистами, среди которых
был, например, Пол Рэнд. Вместе они превратили модернистскую основу порядка в
эстетический идеал и главную составляющую жизни американцев XX века. Модернистский
графический дизайн и сетка на протяжении десятилетий меняли облик Америки и до сих
пор остаются неотъемлемой частью используемых визуальных средств.
18
Интернет
Графический дизайн, дорабатывавшийся и развивавшийся на протяжении XX века,
заложил весьма богатую основу как для печатного, так и для графического творчества. Его
теория и практика очень важны для понимания того, как люди воспринимают информацию
и влияют на нее. С появлением общедоступного Интернета в 90-х годах прошлого
века эти знания легли в основу нашего представления о сетевом пространстве как о
множестве страниц, каждая из которых наполнена такими же элементами, что и печатный
лист: названия, подзаголовки, разделы, позволяющие отображать, читать и воспринимать
информацию почти в том же виде, что и на бумаге.
Как концептуальная основа графический дизайн сыграл огромную роль для содействия
переходу массовой аудитории от печатных изданий к Интернету. Такой базис помог
Интернету повторить бо́льшую часть визуальных средств доцифровой эпохи коммуникации,
не утратив ощущения близкого контакта в пугающем виртуальном пространстве. Уже
существовавшие и только что появившиеся компании использовали внутреннюю силу
графического дизайна и его принципы для стремительного развития Интернета на
протяжении последних двадцати лет.
Однако вскоре проявились специфические ограничения, связанные с использованием
графического дизайна в Интернете. Сложные задачи доцифрового дизайна всегда носили
конкретный характер и требовали конкретных решений.
Книга или журнал, даже система идентификации, требуют, чтобы дизайнер создавал
штучный проект, выполненный в традиционном стиле. Такой дизайн может развиваться с
течением времени, изменяться в зависимости от условий или разнообразных версий, но
каждое его воплощение – экземпляр книги, номер журнала, визитная карточка или печатный
бланк – должно появляться и функционировать одним и тем же образом, вне зависимости
от того, кто с ним сталкивается.
В Интернете дело обстоит совершенно по-другому, дизайнерское решение может
иметь бесконечное (по крайней мере, очень большое) количество форм, зависящих от
аппаратного или программного обеспечения или от явных или скрытых предпочтений
пользователя. Дизайнер печатных изданий задается вопросом: «Каким должно быть
решение?», а дизайнер, работающий с цифровыми средствами массовой информации,
формулирует вопрос по-другому: «Каким должно быть решение и как оно будет изменяться
в зависимости от условий использования?» Представление веб-страницы может радикально
трансформироваться, например, при выборе пользовательских профилей. Кроме того,
страница может менять свои размеры – увеличиваться или уменьшаться – в зависимости от
браузера.
Технология, используемая для просмотра любого материала в Интернете, может
превратиться в столь же важный фактор, как и сама информация, которую хотят
донести до пользователя. Доцифровые дизайнерские решения редко требовали каких-
либо технологических ухищрений, но в цифровом дизайне для каждого решения
необходимы определенные технические средства. Собственно говоря, без веб-браузера или
компьютера не существует веб-дизайна. Более того, не все браузеры работают одинаково,
а характеристики компьютеров, на которых они установлены, бывают очень разными.
Поэтому средства, выбираемые людьми или доступные для них, могут привести к самым
разнообразным вариантам решений.
Вот почему принципы, на которых базируются типографские сетки, перейдя в
Интернет, приобрели множество новых черт.
19
• Веб-решение на основе сетки во многом зависит от доступной пользователю

технологии отображения информации.
• Оформление на данном этапе развития Интернета очень непостоянно, разные
пользователи могут видеть разные изображения, так что с помощью сетки не удается
добиться нужных результатов.
• Окно веб-браузера не имеет стандартизированного размера, ведь физический размер
экранов мониторов различается, а пользователь может увеличивать или уменьшать окно
браузера. Таким образом, сетка не может иметь фиксированного, известного заранее
размера, в отличие от печатной страницы.
• Пользовательская информация, предпочтения и настройки, изменяемые в пассивном
или активном режиме, могут заметно повлиять на требования к интернет-решению,
базирующемуся на сетках.
• На веб-страницах возможно точное размещение элементов, но сетка определяется
кратным количеством пикселов, а сами пикселы могут иметь разные физические размеры в
зависимости от типа монитора.
С учетом крайне изменчивых требований к веб-дизайну дизайн печатных изданий
можно считать относительно детерминированным. Аналоговые дизайн-решения являются
фиксированными, а в случае веб-дизайна мы имеем дело с интерактивными решениями.
Веб-дизайн подразумевает своего рода компромисс между идеями дизайнера, доступной
технологией и пользователем. Более того, общение
в Интернете (и по всем цифровым каналам) все чаще направлено на упрощение
коммуникаций между пользователями, на создание систем, в которых могут передаваться
крайне непредсказуемые виды информации. Так что веб-дизайн похож на классический
типографский, но фундаментально отличается от того, что существовал в доцифровую
эпоху.
Насколько же он другой? Для ответа на этот вопрос следует рассмотреть два вида
повседневного общения: традиционное выступление перед аудиторией и ведение диалога,
например беседа друзей или знакомых.
Оратор, выступающий перед группой людей, не всегда может точно предсказать
успех своего выступления, но тем не менее он хорошо представляет условия, в которых
будет выступать, – аудитория находится перед ним и задаст вопросы в конце выступления.
Беседа, напротив, может начаться с определения основных вопросов, и активный участник
в состоянии руководить обсуждением, но беседы почти всегда предсказуемы в той же мере,
как и непредсказуемы.
С другой стороны, впечатления аудитории от выступления в целом однотипны –
каждый член аудитории формирует свое собственное мнение о том, насколько успешно
выступил докладчик, но вся аудитория прослушала одну и ту же речь в одном и том
же помещении. В личной же беседе впечатления могут сильно различаться. Все мы
можем вспомнить переговоры, после которых чувствовали, что озвученные мысли сильно
отличались от ожиданий других участников или даже противоречили им.
Публичные выступления предназначены для восприятия аудиторией – оратор
выступает перед публикой, но не говорит с ней. Размер аудитории не имеет значения, речь,
подготовленная для сотни людей, не сильно отличается от речи, подготовленной для двух
сотен. Беседа же создает общие впечатления. Участие в беседе предполагает, что человек
выступает с роли соавтора и может изменять ее ход. А если нет участников, нет и общения.
20
Изменение стиля общения

Если проанализировать относительно краткую историю развития Интернета, сдвиг
от декларативного к диалоговому общению выглядит как внезапная и резкая перемена
курса, которая привела к пересмотру всех правил. Но при внимательном взгляде на эту
проблему можно заметить некоторые исторические предпосылки того, что происходит
сейчас. Изменение стиля подачи информации можно рассматривать как продолжительное
соревнование, в котором оба стиля дополняют и соперничают друг с другом, и то один, то
другой одерживает победу на некотором промежутке истории человечества.
В свой книге «Glut: Mastering Information Through the Ages» дизайнер Алекс
Райт рассматривает возникновение письменности как ранней формы метода фиксации
простых договорных соглашений, ранее скреплявшихся только устной договоренностью
двоих людей. Таким образом, письменность благодаря своему объективному характеру
выступает в качестве альтернативы человеческому общению, носящему гораздо более
субъективный характер. С появлением письменности возникли законы и власть. Именно
поэтому данный метод коммуникации стал преобладать над менее регламентированной, но
более аргументативной природой простых бесед.
По такому же сценарию, в момент краха цивилизаций и потери веры во власть и законы,
произошло возрождение значимости беседы. После распада Римской империи возникла
новая народная традиция, завоевавшая популярность среди бедных слоев населения.
Технология создания печатной продукции еще не была известна, поэтому фольклор
являлся единственным способом общения между рассказчиками и их слушателями,
доносящим основные идеи путем живого слова, повторения и запоминания.
В XV веке, после изобретения Иоганном Гутенбергом печатных машин с литерами,
маятник опять качнулся в сторону декларативного общения. С помощью массового
тиражирования литературы идеи, факты и выдуманные истории могли передаваться на
большие расстояния без ущерба для качества исходного текста. Печатный станок поставил
под сомнение достоверность устного повествования и диалога и создал новую основу
понимания мира: напечатанное слово обязано быть правдой (по крайней мере, оно всегда
вызывает больше доверия, чем что-то услышанное).
Эта борьба продолжается даже сейчас, на всем протяжении относительно короткого
цифрового века. Компьютерная техника, возникшая во второй половине XX века, выступала
в качестве средства декларативного общения. Большие компьютеры использовались только
в серьезных учреждениях и организациях и находились под строгим контролем; доступ
к оборудованию имел только ограниченный круг пользователей и только для выполнения
конкретных задач в течение строго определенного промежутка времени. После появления
персональных компьютеров компьютерная техника стала доступна любому человеку почти
в любом месте в любое время, то есть она превратилась в диалоговое средство общения.
Именно диалоговый характер компьютерной техники вызвал такие заметные перемены в
графическом веб-дизайне.
Более важной здесь является мысль о том, что ни один из подходов никогда не вытеснял
другой: с приходом письменности и «бумажных» договоров устные соглашения никуда не
исчезли, письмо просто дополнило их. По своей природе письменный договор основывается
на традиции устных соглашений. Народные предания и легенды продвигали идеи Римской
империи, дух ее власти и законы в неменьшей степени, чем печатное слово. Книгопечатание
стало успешным благодаря воспроизведению устной речи. Персональный компьютер в
течение многих лет использовал возможности больших ЭВМ благодаря обширным сетям,
но сама идея строго охраняемых компьютерных серверов по-прежнему актуальна.
21
Используя сетку в веб-дизайне, мы должны учитывать потребности пользователей,

мы должны создавать продукт не только для восприятия, но и для использования,
поэтому необходимо учитывать не только количественные, но и качественные аспекты.
Мы должны помнить, что сетка – это не средство навязывания порядка пользователям или
инструмент влияния, это способ передать пользователям ощущение порядка, чтобы они
могли сформулировать свои собственные впечатления.
Почему же вопросы коммуникации и история книгопечатания столь важны для
изучения сеток? Причина проста – рассматривая более широкий круг проблем, мы можем
найти более эффективные решения.
При внимательном изучении обоих подходов, становится понятно, что задачи дизайна,
связанные с ними, фундаментально различаются. В то же время, если вспомнить, что
между этими двумя видами коммуникации ведется длительная борьба, что они во многом
взаимодополняют друг друга, напрашивается вывод, что они могут многое позаимствовать
друг у друга.
Диалоговый дизайн перенял множество идей из работ дизайнеров печатных изданий
XX века. Наряду с этим, в нем используются не менее значительные достижения из
области взаимодействия человека и машины, кибернетики и даже промышленного дизайна.
Результат имеет много общего с декларативной традицией, но вместе с этим существенно
отличается.
Типографская сетка является средством, изначально предназначенным для решения
проблем декларативного дизайна, но в этом контексте она также является логичным и
полезным средством для решения проблем диалогового дизайна. Совет тем, кто будет
использовать ее на практике, а также всем читателям этой книги: принципы сетки нужно
приспосабливать к новым требованиям, связанным с особенностями Интернета. Мы всегда
должны создавать дизайн, позволяющий решить конкретную задачу, а не имитировать
способы, найденные ранее. Чем больше полученный результат соответствует средству
общения, для которого ищется дизайнерское решение, тем более он пригоден.
22
Глава 3. Процесс
Дальнейший материал этой книги посвящен созданию сетки начиная с этапа поиска
решения. Однако сперва следует разобраться с принципами, которые должны учитывать
дизайнеры.
Сетка помогает решить конкретную задачу, и только потом настанет пора
позаботиться об эстетике. Сетка может настолько улучшить привлекательность и
эстетическое восприятие любого дизайна, что возникает соблазн уделить все внимание
красоте, а не полезности. Многие дизайнеры ставят во главу угла красоту, невзирая
на то что при попытке использовать такую сетку пострадают функциональность или
содержание. Большинство эффективных сеток были созданы для достижения конкретных
целей. Вне зависимости от поставленной перед дизайнером задачи – обмен информацией,
организационные или деловые проблемы – красота сетки определяется тем, насколько
успешно она решает эти проблемы.
Сетка является составной частью юзабилити. Сетка – это не средство установления
полного контроля над действиями пользователя на сайте. Сетка, скорее, представляет
собой основу, с помощью которой пользователь может управлять своими собственными
действиями. Дизайнерам не следует втискивать все интерактивные и неинтерактивные
элементы в рамки сетки, нельзя допускать, чтобы действия пользователя становились
случайными и непредсказуемыми. Основная работа дизайнера состоит в том, чтобы
попытаться решить часть проблем без участия пользователя, но не все, а только те, которые
помогут пользователю беспрепятственно достичь свои целей. Сетка – это наилучший способ
решения данной задачи.
Чем проще сетка, тем она эффективнее. Принципы, описанные в этой книге,
можно использовать для создания сеток из шестнадцати, двадцати и более блоков с
любой комбинацией колонок одинаковой или разной ширины. Суть в том, что создавать
следует как можно более простую сетку. Мы увидим, что математическая точность является
ключевым элементом эффективного дизайна, но не стоит забывать и о математической
пригодности. Формулы, используемые для расчета блоков и колонок, должны быть
достаточно понятными, даже простыми, чтобы вы могли найти ответ в уме или объяснить
расчет коллеге. Если сетка проста в применении и понятна, она будет полезна и
пользователям.
23
Этапы
Давайте перечислим основные этапы поиска решения на основе сетки:
1. Проведение исследований и выявление существующих ограничений.
2. Техническое задание.
3. Подготовительный дизайн:
• карандашные эскизы;
• блоки, колонки, предварительные расчеты;
• эскизы страниц.
4. Компоненты.
5. Создание (код).
Помните, что наиболее скрупулезно следует отнестись к этапу обдумывания задачи.
Хотя приведенный порядок действий удобен и полезен мне, другим дизайнерам он может
не подойти. Шаги не обязательно должны следовать друг за другом в указанном порядке,
длиться определенное время или выполняться определенным способом. Некоторые этапы
вообще можно пропустить. Например, шагЗ, касающийся подготовительного дизайна,
состоит из трех разных операций, которые часто выполняются одновременно. Дизайнер
по мере необходимости обращается то к карандашу и бумаге, то к компьютеру, то
делает простые расчеты. Важно не механическое выполнение приведенного алгоритма, а
постоянное следование принципам эффективного дизайна на основе сетки.
Тем не менее не забудьте уделить побольше внимания двум важным этапам: сначала
необходимо провести исследование, а затем сделать наброски.
24
Исследования и ограничения
Признаком действительно хорошего дизайна является не его красота, новизна или
эффективность, а то, насколько хорошо он воплотил решение поставленной задачи. Для
успешного решения дизайнер должен понимать поставленную задачу и знать, какие
ограничения будет необходимо учитывать. Дизайнер должен задать вопросы: Кто является
целевой аудиторией? В каких условиях существует данная задача? Когда задача может быть
решена? Как будет использоваться решение? И даже: Почему решение необходимо?
И найти на них ответы.
Ответить на эти вопросы бывает сложно, а сами ответы имеют расплывчатую
формулировку или плохо поддаются анализу. Но дизайнер должен задавать эти вопросы
постоянно, добиваясь четких и точных ответов, которые можно будет проанализировать и
понять.
Поскольку сетка предоставляет дизайнеру самый простой и быстрый путь к решению
поставленной задачи, возникает соблазн пропустить этот этап. После того, как дизайнер
овладел основами сетки, ему проще начать механический процесс создания блоков и
колонок, чем задавать вопросы и заниматься поиском ответов.
Для решения почти каждой дизайнерской задачи необходим этап тщательного
изучения, предшествующий поиску решения. Без четкого понимания поставленной задачи
любая дизайнерская работа – включая создание сетки – делается впустую. Гораздо
продуктивнее начать проект с исследования, чем переходить непосредственно к дизайну.
Дизайн на основе сетки так же требует дополнительной подготовки. Чем полнее
исследована задача, тем эффективнее будет сетка. Тщательная подготовка сеток позволяет
максимально реализовать творческий потенциал дизайнера. При таком подходе вы сможете
заранее предугадать возникновение некоторых трудностей и миновать ловушки, которые
неизбежно возникают при излишней поспешности, – неправильно структурированных
блоков и колонок, сеток, которые можно использовать только при решении конкретных
задач, но абсолютно бесполезных для изменившихся условий, сеток, не учитывающих
неочевидные ограничения, – то есть оказавшихся настолько бесполезными, что приходится
тратить много времени на их переделку.
Какие разновидности ограничений должен учитывать дизайнер? Их можно разделить
на три основные категории.
Технические ограничения определяют дизайнерское решение. К ним относятся
разрешение экрана
и поколение («современность») веб-браузера – два критических фактора,
оказывающих влияние на любой дизайнерский проект. Важными бывают и технические
ограничения, касающиеся возможностей сайта, способа представления информации.
Дизайнер обязательно должен учитывать данные ограничения. Система публикации
часто влияет на то, каким образом авторы должны подготавливать материалы, и
последовательность действий, что в свою очередь влияет на вид дизайнерского решения.
Коммерческие ограничения определяют задачу, которую необходимо решить.
Чего мы должны добиться в результате? Должен ли наш проект увеличить количество
посетителей, продолжительность их нахождения на страницах сайта, количество переходов
по рекламным объявлениям либо количества покупок, сделанных на сайте, – эти цели
являются наиболее важными при поиске любого дизайнерского решения. Дизайнер должен
обязательно учитывать задачи брендинга, позиционирования и маркетинга. Наконец, он
обязан оценить затраты на поддержание своего проекта в дальнейшем: кто будет работать с
созданной им сеткой и какие навыки для этого необходимы.
25
Ограничения на форму представления материала должны учитывать различные

формы подачи информации, например, содержание и размер статей, длину заголовков
и объем аннотаций, наличие цитат и изображений, включенных в материал (видео и
интерактивных элементов), таблиц и схем и т. п.
Естественно, дизайнеры будут жаловаться на неудобство ограничений, с которыми они
должны мириться. Если бы эти ограничения отсутствовали, решение было бы гораздо проще
найти или оно было бы более изящным.
Однако не все так ужасно: эти ограничения могут усложнить задачу, но они также
могут упростить создание дизайна. Сетки являются комплексным решением и становятся
эффективнее, если строятся на основе одного-двух обязательных ограничений, которые
нельзя изменить просто так в процессе работы. Дополнительные ограничения могут
непосредственно влиять на пропорции сетки, размеры блоков, колонок и областей. Может
показаться, что такие ограничения препятствуют свободе выбора дизайнера, но дизайнер
при этом часто становится еще более изобретательным. Чем проще проблема, чем меньше
ограничений, тем менее вероятно, что дизайнер интуитивно придет к логическому решению,
отличающему успешный дизайн. Выполнение обязательных требований может помочь
дизайнеру в работе. Соблюдение определенных пропорций, технические ограничения,
рекламный блок или какой-либо иной фактор, который дизайнер должен учитывать, а не
менять условия под свои потребности, – все это может оказаться весьма полезным.
26
Эскизы
После того как мы осознали важность детального изучения задачи, можно перейти
к следующему шагу – созданию набросков на бумаге. Это важнейший инструмент,
позволяющий решить дизайнерскую задачу, особенно необходим на этапе проектирования
сеток. Примерный набросок комбинаций колонок и возможных вариантов расположения
позволит сэкономить время и поможет найти более интересные творческие решения, чем
прямой переход к работе над сеткой и дизайном.
Я подчеркиваю: самым эффективным путем является использование карандаша и
бумаги для проработки задачи, поиска возможных решений и изучения перспективных
(и не очень) идей, проверка которых другим способом может оказаться слишком дорогой
или трудоемкой. По сути, эскизы позволяют быстро просмотреть возможные идеи без
существенных финансовых затрат. Помните, что наброски остаются всего лишь набросками,
они не должны быть красивыми.
Не забывайте, что рисование набросков не обязательно является отдельным этапом
создания сетки, привязанным к конкретному промежутку времени. Наброски можно делать
на любом этапе проекта, на любом уровне готовности, хотя логичнее будет обратиться
к ним на ранней стадии, чтобы можно было рассмотреть большее количество идей и
возможностей. Если у вас под рукой есть карандаш и лист бумаги, они обязательно окажутся
полезными.
27
Терминология
Термины, описывающие различные компоненты сетки, выглядят простыми, но
поразительно неопределенными. Например, термин «колонка» кажется достаточно
очевидным, но на базе сетки из восьми колонок дизайнер может создать страницу с двумя
колонками текста, что делает этот термин весьма расплывчатым. Единая терминология не
всегда используется даже в книгах по дизайну на основе сеток.
В некоторых изданиях используются термины, отсутствующие в других (например,
области, поля). Давайте перечислим несколько наиболее общих терминов, которые помогут
нам облегчить практическую работу с сетками.
Юнит
Юнит – это строительный «кирпичик» любой сетки, самый узкий вертикальный
объект на странице (в юнитах измеряют ширину), на основе которого формируются
колонки. Как правило, юниты имеют слишком маленькую ширину, чтобы использовать их
непосредственно для размещения текстовых материалов.
Колонка
Колонки – это группы юнитов, которые объединяются, чтобы создать рабочую зону,
подходящую для размещения материала. Большинство текстовых колонок состоят из двух
или нескольких юнитов. Например, сетка из шестнадцати юнитов может образовывать две
колонки по восемь юнитов в каждой либо четыре колонки по четыре юнита в каждой и т. д.
16 блоков
8 колонок
3 блока
28
2 области
Блок
Блоки – это группы схожих колонок, образующие части страницы. Например, в сетке
из четырех колонок первые три колонки слева могут использоваться для отображения одного
вида материала, а четвертая колонка образует другой блок.
Базовая сетка основана на невидимых линиях, на которых расположены буквы
Область
Области – это элементы, структурирующие страницу по вертикали и помогающие
дизайнеру визуально распределить элементы по оси Y. Размеры областей можно
рассчитывать несколькими способами, но наиболее эффективным считается золотое
отношение.
Базовая сетка
В типографике базовой линией называют невидимую линию, на которой
располагаются буквы. Например, нижний край буквы е лежит на базовой линии, а нижний
выносной элемент буквы р находится под ней. Сетка образуется множеством базовых линий,
расстояние между которыми соответствует высоте строки (интерлиньяжу) текста.
29
Горизонтальная или вертикальная ориентация

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

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

Поля представляют собой свободное пространство вне юнита или колонки. Отступ –
это свободное пространство внутри юнита или колонки. Поля, как правило, используются
для создания промежутков, а отступ – для создания небольшого видимого смещения абзаца
текста в пределах колонки.
Элемент
Элементы – это любые единичные компоненты структуры, например, заголовок, абзац
текста, фотография или кнопка.
Модуль
Модули – это группы элементов, объединенные для создания отдельных блоков по
принципу единства формы или функции. Форма регистрации, например, представляет собой
модуль, объединяющий множество элементов, – метки поля формы, кнопки и т. д.
30
Глава 4. Начинаем творить
Нет лучшего способа научиться использовать сетки, чем «засучить рукава» и

приступить к делу. Настало время применить на практике все накопленные теоретические
знания. В этой главе описан поиск практического решения для создания веб-сайта.
Естественно, не существует такого понятия как стандартный сайт или стандартный
веб-дизайн. Задача, решение которой мы рассмотрим в данной главе, состоит из нескольких
универсальных страниц: страницы блога, страницы профиля и домашней страницы,
связывающей воедино разнородные материалы. Проект поможет нам поближе рассмотреть
множество разнообразных дизайнерских задач, на которых можно выработать общий
подход, основанный на использовании сетки. Давайте попробуем, учитывая все проектные
ограничения, создать единую сетку и использовать ее для построения разных типов страниц.
Небольшой комментарий: эту главу, как и всю книгу, можно читать с любого места,
и я сознаю, что читатели, скорее всего, начнут именно с этой главы. В этом нет ничего
плохого. Тем не менее не могу не сказать, что идеи и мысли, изложенные в предыдущих
главах, нужно использовать вместе с практическими рекомендациями, приведенными далее
в этой главе. Здесь вы найдете конкретные инструменты и методики, но первые три главы
призваны развить у вас творческие умения, необходимые для эффективного использования
этих инструментов. Не обманывайте себя!
31
Обзор проектов
Постановка задачи: необходимо разработать дизайнерский онлайн-журнал – сайт о
дизайнерах, созданный дизайнерами и адресованный дизайнерам. Он должен объединять в
единое целое редакционное содержание в форме блога и возможности онлайн-общения.
Сайт состоит из четырех основных шаблонов:
• Страницы статьи.
• Информационной страницы.
• Страницы личных данных пользователя.
• Домашней/главной страницы.
Мы рассмотрим создание сетки, которая будет подходить для каждого случая, а
затем используем ее в дизайне страниц. При разработке шаблонов нужно учитывать, что
различные ограничения и рекомендации будут накладываться друг на друга.
Получившееся решение мы будем использовать и для создания шаблонов
второстепенных страниц, что послужит доказательством универсальности использованного
подхода:
• Страницы сообщения (например, сообщения об ошибке).
• Страницы содержания блога.
• Страницы настройки параметров.
• Страницы календаря.
• Шаблона для сообщений электронной почты.
Поскольку мы разрабатываем проект воображаемого сайта, то смело можем назвать
его Designery.us. Это даст нам стартовую точку для решения задач брендинга, которые будут
подробно рассмотрены далее.
32
Начало работы
Понимание требований
Один из главных уроков, который вы должны извлечь из данной книги, заключается в
том, что изучение существующих ограничений – это первый и наиболее важный этап. Мы
должны найти критерии, которые сделают наш проект максимально успешным и удобным
в использовании. Пока этап не завершен, едва ли имеет смысл думать о разработке сетки и
совсем нет смысла переходить к выбору шрифтов и цветов.
Работая с Designery.us, мы предполагаем, что вам предоставили хорошо
подготовленное техническое задание в виде набора моделей страниц. Модели
– это упрощенные схемы, описывающие особенности и разновидности контента,
представленного на каждом шаблоне. Эти модели делают за нас бо́льшую часть работы; по
сути, они содержат большинство (если не все) ограничений.
На данном этапе мы не будем рассматривать все существующие ограничения. Вместо
этого мы уделим самое пристальное внимание четырем основным шаблонам, на которых
базируется большинство веб-страниц. Если наше решение окажется продуманным, то
любую разработанную нами сетку можно будет легко использовать или адаптировать для
остальных менее важных шаблонов.
В моделях четырех основных шаблонов учитываются два принципиальных
ограничения. На наше счастье, они довольно точно сформулированы и присутствуют в
большинстве задач веб-дизайна. Речь идет о размере области просмотра и рекламном блоке.
33
34
35
36
С. 57–60: Наш проект основан на четырех моделях страниц: статья,

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

начальной стадии развития, стандартным был размер экрана 1024 х 768 пикселов. Полагаю,
это самое практичное из всех стандартных разрешений экрана, с которыми мы можем
работать. Оно подходит как для сравнительно больших экранов, так и для небольших
портативных устройств.
Итак, первое ограничение – наш дизайн должен помещаться на экране с разрешением
1024 х 768.
Естественно, размер 1024 х 768 пикселов не обязательно означает, что в вашем
распоряжении будет вся эта область. Доступное место уменьшается за счет элементов
пользовательского интерфейса, например, меню, поэтому в большинстве браузеров область
просмотра оказывается меньше общей площади экрана примерно на 20 %. Кроме того,
необходимо учитывать и небольшие поля слева и справа, поэтому доступная область
просмотра становится еще меньше.
1024 х 768 – это стандартное разрешение экрана. Оно будет одним из ограничений
нашего проекта
38
Площадь, занимаемая браузером на экране, не превышает 80 % площади, доступной

при просмотре любой веб-страницы. Поэтому доступная область в браузере имеет
размеры 974 х 650 пикселов
Учитывая поля на левой и правой сторонах браузера, получаем доступную

«активную» область экрана примерно 960 х 650 пикселов
Рекламный блок
Ко всем моделям предъявляется одно общее требование: на видном месте должен
находиться прямоугольный рекламный блок. Он, конечно, может присутствовать не
на каждой странице, но сразу понятно, что любая созданная нами сетка должна
предусматривать наличие рекламного блока. Это обеспечивает единообразие представления
информации на всем сайте.
Для многих веб-дизайнеров рекламные блоки – это одна из главных проблем. Они
являются весьма сложным условием, которое может помешать созданию продуманного
дизайна. Рекламные блоки по определению вмешиваются в пользовательское восприятие,
которым дизайнеры пытаются управлять.
39
Очевидно, что для многих сайтов рекламные блоки – это их «мотор». Они
приносят доход, обеспечивающий само существование сайтов. Несмотря на доставляемые
неудобства, они являются реальным и важным ограничением.
Кроме того, рекламные блоки способны помочь дизайнеру. Мы уже говорили, что чем
строже ограничение, тем результативнее бывает решение. Бросающийся в глаза рекламный
блок способен стать основой для создания сетки; он фактически определяет ее форму.
В качестве второго ограничения будет выступать большой рекламный блок рекламного
интернет-агентства размером 336 х 280 пикселов. Между прочим, спецификация позволяет
разместить еще два рекламных блока в ширину: прямоугольный блок среднего размера 300 х
250 и полустраничный 300 х 600 пикселов. Таким образом, в дизайн, построенный на основе
большого рекламного блока, можно легко добавить рекламные блоки других размеров.
Бренд
Размеры области просмотра и наличие рекламного блока – это два важнейших
ограничения, но необходимо учитывать еще один важный фактор – сам бренд. Бренд влияет
на создание сетки не так заметно, как другие ограничения, но он тем не менее является
важным фактором, оказывающим влияние на все дизайн-решение. Сетка, создаваемая для
молодежного бренда, может быть гораздо более свободной, чем сетка, создаваемая для
известной финансовой организации.
Сделаем несколько простых предположений о торговой марке Designery.us:
• Целевая аудитория – дизайнеры всех возрастов с разным уровнем компьютерной
подготовки.
• Общий стиль – дружелюбный, простой и спокойный.
• Логотип должен сразу бросаться в глаза.
Выводы
На основе имеющейся информации можно сформулировать задачу. Прежде чем
перейти к разработке самой сетки, важно обобщить ограничения, чтобы избежать
дальнейшего недопонимания. Для этого попытаемся сформулирвоать задачу максимально
просто и кратко:
Разработать основные шаблоны страниц для онлайн-журнала, целевая
аудитория – дизайнеры. Сайт объединяет статьи и функции социального
общения, как это следует из моделей (см. с. 57–60). Шаблоны должны
соответствовать минимальному разрешению экрана 1024 х 768 пикселов с
активной областью 960 х 650 пикселов. На странице должен располагаться
стандартный рекламный блок размером 336 х 280 пикселов. Готовый
проект должен соответствовать продуманному и спокойному образу бренда
Designery.us; логотип должен находиться на видном месте. Необходимо
использовать красный, черный и белый цвета.
40
Дизайн всех страниц начинается с карандашных набросков
41
Создание наброска
Как и любая творческая работа, дизайн сайта начинается с набросков. С помощью
карандаша и бумаги можно быстро рассмотреть несколько разных подходов к общему
дизайну сайта. И снова внимание акцентируется на четырех основных шаблонах.
Достаточно создать наброски только этих страниц, но полезно при этом помнить и о
шаблонах второстепенных страниц.
При создании набросков цель состоит не в том, чтобы нарисовать готовое решение, а в
том, чтобы творчески осмыслить возможные варианты. Наброски должны быть быстрыми,
простыми и небольшими – одного стандартного листа бумаги более чем достаточно для
пяти-шести набросков. На данном этапе нет необходимости рисовать точную сетку или
определять количество юнитов. Достаточно прикинуть количество колонок на странице,
независимо от математической сложности расчета этих колонок. При создании набросков
нужно чувствовать себя достаточно свободно, чтобы найти решения, способные придать
сетке конкретный вид.
Такой творческий подход пригодится позднее, когда мы используем эти черновые
наброски как руководство при создании сетки.
Следует отметить, что эти эскизы существенно отличаются от предложенных
моделей: название сайта смещено вправо и занимает большую часть страницы, некоторые
навигационные элементы изменены или объединены, а соотношение между элементами
на странице и пустыми областями стало другим. Такая творческая интерпретация входит
в сферу нашей ответственности. Недостаточно просто преобразовать модели, мы должны
интерпретировать их, чтобы конечный результат был оптимальным и последовательным.
В некоторых случаях возможна более свободная интерпретация, чем в других, поэтому
дизайнеры должны обсуждать необходимые изменения моделей со своими коллегами.
Короче говоря, творческий процесс дизайнера начинается с набросков.
Не забывайте, что создание набросков не обязательно является отдельным этапом
процесса. Карандаш и бумага могут пригодиться даже позднее, после начального этапа,
если потребуется вернуться и заново поработать над набросками с учетом непредвиденных
проблем. Способность быстро анализировать возможные варианты бесценна на любом
этапе работы дизайнера.
42
Создание сетки
Создание колоночной сетки (юниты)

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

блока
Четыре колонки также не подходят, потому что рекламный блок займет слишком
много места в ширину
Давайте разобьем страницу на простые и понятные блоки. На набросках видны три
области – левая почти в два раза больше правой. Ширина области просмотра составляет 960
пикселов, значит, страницу можно разделить на три колонки по 320 пикселов каждая.
Такое соотношение стало бы изящной основой для сетки, но одной колонки будет
недостаточно для размещения рекламного блока шириной 336 пикселов. Можно уменьшить
левую область и увеличить правую, но в таком случае наша сетка станет непродуманной,
и впоследствии возникнут проблемы. Наша цель – создать универсальный принцип
разбиения страниц, которым мы будем руководствоваться при решении проблем дизайна,
возникающих в этом проекте.
Давайте добавим поля шириной 5 пикселов справа и слева от рекламного блока, чтобы
отделить его от краев колонок. Таким образом, ширина крайне правой области должна
быть не менее 346 пикселов. Умножив это значение на три, получим 1038 пикселов, что
превышает максимальную ширину области просмотра, а ведь мы еще не учли промежутки
44
между колонками. Структура, состоящая из трех колонок, была бы простым решением, но

наша задача требует более тонких расчетов.
Следующий простой вариант – разделить страницу на четыре колонки шириной 240
пикселов каждая. Это позволит нам объединить два крайних правых блока в одну колонку
шириной 480 пикселов. Такого значения достаточно для размещения рекламного блока, но
это больше, чем нужно.
К тому же, оба левых блока станут слишком узкими для использования в качестве
колонок. Логичное соотношение 2:1 будет нарушено.
Кратность четырем часто позволяет найти правильное решение. На рисунке

страница разделена на восемь блоков
45
Чтобы создать более тонкую сетку колонок, восемь блоков разделим на шестнадцать
С другой стороны, количество юнитов и колонок, кратное четырем, часто позволяет
найти правильное решение, даже если сами по себе они не годятся для работы. (На самом
деле, большинство эффективных решений построены из четырех, восьми или шестнадцати
колонок, и это нужно учитывать при создании новых сеток.) Если разделить страницу на 8
юнитов по 120 пикселов каждый, можно будет объединить 3 юнита в колонку шириной 360
пикселов, что идеально подойдет для рекламного блока. Ширина левой области составит
600 пикселов, поэтому исходное соотношение 2:1 сохраняется, и в этой области можно
разместить основной текст статьи. Но левая область будет состоять из 5 юнитов – не
слишком удачное число, если нам потребуется дальнейшее разделение.
Непродуманным решением является разбиение левой области на 2 колонки по 300
пикселов каждая. По сути, мы так и поступим, но эту возможность следует использовать для
принятия более обдуманного решения. Разделив 8 блоков сетки шириной 120 пикселов на
16 блоков шириной 60 пикселов каждый, мы получим более тонкую сетку колонок. Теперь
левую область можно разделить на 2 колонки по 5 юнитов каждая, а правая область будет
состоять из 6 юнитов либо, если понадобится дальнейшее разделение, 2 колонок по 3 юнита
каждая.
46
Сетка из шестнадцати юнитов

Шестнадцать юнитов делают сетку не только более сложной, но и более
структурированной, что нам пригодится позднее. Более того, общее количество блоков
кратно четырем, что соответствует правилу, приведенному в главе 3: «Чем проще сетка, тем
она эффективнее». Это правило гласит, что сетки должны быть как можно более простыми
с математической точки зрения, то есть юниты должны объединяться в колонки на основе
простых расчетов, которые можно произвести в уме. Шестнадцать блоков шириной 60
пикселов каждый дают в сумме 960 пикселов, создавая тем самым удобную математическую
основу. Мы знаем, что 2 юнита имеют ширину 120 пикселов, 3 юнита – 180 пикселов и т. д.
Математическая выгода такой основы становится еще более очевидной, когда мы
начинаем учитывать промежутки. Между юнитами нужны промежутки, поэтому при
объединении блоков в колонки справа от полученной колонки образуется промежуток,
размер которого можно рассчитать. Если ширина промежутка должна составлять 10
пикселов, то, вычитая это значение из ширины юнита, мы получим 16 юнитов шириной 50
пикселов, что еще больше упрощает расчеты.
47
Создание базовой сетки

После того как мы создали колоночную сетку, можно перейти к созданию базовой
сетки. Напомню, что базовая линия – это невидимая линия, на которой расположены буквы.
Сетка образуется множеством базовых линий. Расстояние между линиями определяется
кеглем текста.
Эффективная сетка, образованная базовыми линиями, хорошо дополняет более
крупные элементы, например, заголовки и подзаголовки, но базовые линии в первую очередь
предназначены для размещения основного текста на странице. Как правило, для основного
текста на сайтах выбирается кегль от 11 до 14 пунктов, но могут использоваться и другие
значения. Можно выбирать практически любой размер шрифта, но наш глаз лучше всего
воспринимает строки длиной от 60 до 80 символов. Строки, содержащие 80 или более
символов, трудно читать, поэтому старайтесь их не использовать.
Возвращаясь к колоночной сетке, можно увидеть, что самая широкая зона,
предназначенная для размещения текста, находится в левой области, где 10 блоков и
9 промежутков образуют область шириной 590 пикселов. Этого места достаточно для
размещения основной колонки текста в шаблоне страницы статьи – самом большом из
всех шаблонов. Но даже в такой широкой колонке перед абзацами обязательно должны
использоваться промежутки, упрощающие визуальное восприятие, поэтому 2 юнита и 2
промежутка мы будем использовать как свободное пространство. В результате мы получаем
8 юнитов и 7 промежутков общей шириной 470 пикселов. Даже в этом случае рекомендуется
добавить дополнительные отступы внутри колонки (мы еще поговорим об этом), поэтому
фактическая ширина составит около 450 пикселов.
Использование образцов помогает определить правильную длину строки и размер

шрифта
Какой размер шрифта подойдет для выбранной ширины?
Можно воспользоваться калькулятором, но у шрифтов могут быть разные параметры,
поэтому лучше всего использовать образец текста и оценить получившуюся картину
визуально.
48
При использовании шрифта Georgia Regular 12 пт в строку помещаются около 80

символов, шрифта Georgia Regular 14 пт – чуть больше 60 символов. Другие дизайнеры
и пользователи могут выбрать другие размеры, но мы используем Georgia Regular 13 пт.
Результат составит примерно 70 символов на строку.
Для проверки нашего выбора попробуем разместить абзац текста в более узких
колонках и оценить внешний вид. Естественно, количество символов не слишком велико, но
все равно стоит убедиться, что текст будет легкочитаемым при любой ширине колонки.
Вставляя образец текста в колонки разной ширины, можно оценить правильность

выбора размера шрифта
Размер шрифта позволяет рассчитать межстрочный интервал, на котором
основывается сетка, образованная базовыми линиями. Вопросами выбора правильного
интерлиньяжа занимались довольно давно, еще во времена становления традиционного
книгопечатания, когда для создания промежутков между строками текста заливалось олово.
За это время были выработаны несколько практических рекомендаций, но универсальных
правил не существует. Более насыщенные шрифты требуют большего межстрочного
интервала, чем обычные. Чем больше кегль шрифта, чем крупнее прописные буквы
(особенно буквы В, С и 0), тем больше должен быть межстрочный интервал. Кроме того,
необходимо учитывать множество других факторов – курсив, засечки, степень контраста
между жирным и обычным шрифтом и т. д. Нужно помнить, что межстрочный интервал
не должен быть меньше, чем кегль шрифта (особенно в основном тексте), то есть для
текста, набранного шрифтом 13 пунктов, интерлиньяж не может быть менее 13 пунктов,
а сам результат должен быть приятным глазу. Слишком маленький межстрочный интервал
усложняет визуальное разделение абзаца на читаемые строки, а слишком большой –
затрудняет переход со строки на строку.
Для нашего проекта мы выберем интерлиньяж 18 пт, чтобы текст принял цельный
и приятный вид. Таким образом, мы получим сетку базовых линий – базовые линии
заполняют всю страницу сверху до низу, повторяясь каждые 18 пикселов. Эта сетка
поможет нам расположить текст и другие элементы, но важно помнить, что это не более,
чем рекомендация. Слишком строгое следование сетке в веб-дизайне нерационально,
потому что выровнять все элементы по базовой и колоночной сеткам слишком сложно.
Преимущества использования сетки в веб-дизайне бросаются в глаза, если элементы
выравниваются по колоночной сетке. То есть большинство пользователей не обратят
внимание на выравнивание по базовой сетке.
49
Тем не менее базовая сетка пригодится при поиске других решений, которые также
должны быть продуманными. Например, отбивки между абзацами можно рассчитать
по базовой строке. В печатных изданиях абзацы могут следовать друг за другом без
дополнительного интервала.
В электронных изданиях некоторые параметры оформления, например, абзацные
отступы, довольно сложно реализовать, а пользователи перелистывают веб-страницы
гораздо быстрее, чем страницы книги, поэтому необходимо предусмотреть промежутки
между абзацами. Можно сделать фиксированный интервал между абзацами, равный 18 пт,
чтобы обеспечить визуальную гармонию между элементами, базовой сеткой и абзацами.
Базовая сетка поможет выбрать параметры заголовков и подзаголовков – HTML-стилей
Н1, Н2, НЗ и т. д. Заголовки Н1, как правило, имеют наибольший размер на странице,
они обычно отделены от основного текста и поэтому их необязательно привязывать к
базовым строкам. А заголовки Н2 и НЗ обязательно должны учитывать базовую сетку.
Очевидно, что эти элементы оформления должны быть крупнее и/или более заметны, чем
основной текст, но базовая сетка основана на интерлиньяже, а не на размере шрифта.
Например, если мы выберем для заголовков Н2 размер 24 пт, интерлиньяж должен составить
26 пт (две базовые линии). Размер шрифта может колебаться в диапазоне от 22 до 30
пунктов, но межстрочный интервал при этом составляет 36 пунктов. Более точное значение
определяется визуальной оценкой текста: попадают ли нижние выносные элементы букв
(например, g и y) на расположенный ниже текст и достаточен ли интерлиньяж для удобства
восприятия информации.
Не все параметры текста должны соответствовать сетке базовых строк. Здесь

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

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

Как подобрать правильную высоту этих полей? Нам поможет золотое отношение.
Учтем разрешение экрана компьютера и используем золотое отношение, считая, что
коэффициент приближенно равен 1,618. Разделив ширину страницы (960 пикселов) на 1,618,
после округления получим 593.
Прямоугольник шириной 960 и высотой 593 пиксела почти идеально соответствует
золотому отношению. Если разместить этот прямоугольник в верхней части страницы, его
нижний край задаст границу поля. В нашей базовой сетке ближайшая линия находится на
уровне 594 пикселов – 33-я строка сверху. И снова наши расчеты будут приближенными,
так что полученное число можно использовать и считать, что горизонтальные поля будут
разбивать страницу на фрагменты высотой 594 пиксела, начиная с верха страницы.
51
Высота полей рассчитывается с помощью золотого отношения

В этом прямоугольнике можно выделить квадрат со стороной 594 пиксела, правый
край которого будет примерно совпадать с одной из созданных нами колонок. Это случайное
совпадение, не основанное на математических расчетах, но оно подтверждает правильность
расчета сетки.
Если поля будут идти друг за другом каждые 594 пиксела, это создаст множество
проблем при расположении элементов. Многие веб-страницы заполнены блоками разных
размеров, и не все из них поместятся в 594-пиксельную область. От базовой сетки требуется
помощь в визуальном выравнивании и упорядочении любых элементов на всем сайте.
Конечно, можно использовать 18-точечную базовую сетку и выровнять элементы по
любой из сотен базовых линий, но их слишком много. Нам нужно найти промежуточный
вариант, что-то похожее на колоночную сетку.
Попробуем использовать правило третей, чтобы усовершенствовать подход к выбору
размера поля. Если разделить 594 пиксела на 3, получим 198-пиксельную область,
привязанную к сетке базовых линий. Используя базовую линию для задания промежутка
между третями, мы получим 180-пиксельные поля по 10 базовых строк в каждом.
52
Вся страница разделена на поля

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

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

Мы позволим себе некоторую вольность и разместим логотип Designery.us в правом
верхнем углу страницы – крайняя колонка. Столь нестандартное расположение отвечает
требованию аудитории к удобному дизайну. Данный выбор дает нам бо́льшую свободу,
чем размещение его на левой стороне, где необходимо место для основного заголовка и
содержания каждой страницы.
54
Более того, такое расположение позволяет решить проблему, часто возникающую

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

Данную область можно подчеркнуть еще сильнее, добавив дополнительные элементы,
важные для пользователя. Например, область пользовательского профиля с информацией о
статусе, уведомления о сообщениях и обновлениях могут находиться прямо под логотипом.
Это заметное положение для элементов, несущих важную для пользователя информацию (в
отличие от рекламного блока и ссылок на сторонние материалы, обычно находящихся в этой
части страницы). Такой выбор увеличивает важность правой части экрана и не позволяет ей
остаться незамеченной.
55
Обратите внимание, что информация разделена на две небольшие колонки. Обе они
привязаны к колоночной сетке, а текст выровнен по базовой сетке. Аватар также выровнен
по базовой сетке.
Естественно, нельзя разместить в дальнем правом углу все важнейшие элементы.
Учитывая, что логотип находится справа, навигационные элементы следует разместить
в левой части страницы. Давайте расположим элементы навигации вдоль верхнего края
страницы – там, где пользователи легко заметят их.
Добавление пользовательского входа под логотипом
Элементы аккаунта выровнены по сетке
56
Размещение элементов навигации вверху страницы

Данная область сетки состоит из 10 блоков, которые можно объединить в 5 колонок по
2 юнита в каждом. Ширина каждой колонки 110 пикселов, этого достаточно для размещения
кнопок навигации. В нашей модели используются только 3 элемента навигации: Home,
Articles и Browse (Profile теперь находится в правом дальнем углу). Учитывая важность
ссылки на страницу About Designery, которая изначально находилась в нижнем колонтитуле,
ее можно переместить на уровень элементов навигации. Теперь мы имеем 4 элемента. Одна
из колонок до сих пор не используется и ее можно назначить для ссылки Ноте, самой важной
из навигационных ссылок (теперь она занимает 4 юнита, 230 пикселов). Такой выбор сделает
ссылку Ноте особенно заметной даже без дополнительных выделений.
Обратите внимание, что навигационные ссылки не выровнены по базовой линии.
Выбранный шрифт не помещается между базовыми линиями, для него требуется немного
больше места. Сделаем высоту кнопок навигации (область, которую занимает вся ссылка)
равной двум базовым строкам (36 пикселов), а текст будем выравнивать по высоте
относительно данной области. Подчеркнем высоту этой зоны с помощью вертикальных
разделителей.
Использование базовой сетки для расчета высоты навигационных элементов поможет
установить их ролловер-состояние. При наведении указателя мыши на эти элементы будет
изменяться фоновый цвет, подчеркивая их «кликабельность».
57
Текст на элементах навигации не выровнен по базовой сетке
58
Ролловер-состояние элементов навигации

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

59
В этом и заключается фундаментальное отличие интерактивного дизайна от дизайна

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

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

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

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

Теперь добавим торговый знак Designery в нижний правый угол страницы. Это
подчеркнет необычное расположение логотипа в правой колонке.
Основной шаблон завершен. Он содержит стандартный набор элементов, которые
будут использованы для всего сайта, но любой элемент можно изменить, чтобы сделать сайт
максимально удобным для пользователя. В следующих проектах мы увидим, когда и где
следует вносить такие изменения.
63
Проект 1. Страница статьи

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

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

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

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

разместить необходимые элементы
Заголовки этих элементов имеют примерно такой же стиль оформления, что и
созданные ранее элементы навигации. В них используется общий шрифт торговой марки
– Univers, – а над текстом заголовка расположена тонкая линия. Сам текст, как и
элементы навигации, центрирован по вертикали в пределах двух базовых строк. Эти
заголовки довольно небольшие, и имеет смысл снова применить параметры шрифта, уже
68
использованные в нашем дизайне. Чем меньше разновидностей шрифта мы используем, тем

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

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

дополнительные навигационные элементы над рекламным блоком
Расположив большую часть элементов на странице, мы можем перейти к более мелким
деталям. Следующий элемент не столь велик, но не менее важен – название статьи и строка
с именем автора.
В нашем дизайне основного шаблона уже были определены параметры шрифта для
заголовков Н2, но здесь нам понадобятся параметры заголовка Н1. Это должна быть
наиболее заметная надпись на странице после логотипа. (Для большинства пользователей,
особенно для тех, кто заходит на сайт по ссылкам на статью, этот заголовок важнее, чем
логотип.)
70
Сетка базовых линий с шагом 18 пикселов поможет определиться с размером, если

для нахождения высоты строки использовать число, кратное 18. Три базовые строки (54
пиксела) – это слишком много, поэтому используем две строки (36 пикселов). Для высоты
строки 36 пикселов следует выбрать размер шрифта чуть меньше. Давайте возьмем шрифт
без засечек (Arial или Helvetica) и кегль 34 пт, чтобы обеспечить гармоничное соотношение
между размером и интерлиньяжем.
Выберем размер шрифта 12 пт и расположим строку с именем автора, дату и
аннотацию статьи на базовой сетке (шрифт без засечек). Обратите внимание, что для
этого вида информации и множества других элементов, уже размещенных на странице,
используются шрифты без засечек, а шрифты с засечками хорошо подходят для более
длинных текстовых блоков, составляющих основной материал.
Добавим стили для оформления названия статьи, имени автора и аннотации
71
Такие же параметры подойдут для оформления ссылок Print, Email и Share, которые
должны располагаться рядом с началом статьи. Данные элементы не должны быть
большими, для них можно использовать, например, свободное пространство справа от
основного текста. Расположим ссылки справа от строки с именем автора и аннотацией.
Эти элементы относительно небольшие, поэтому не сразу бросаются в глаза. Однако
расположение в данной колонке – с большими промежутками вверху и внизу – сделает их
заметными, когда пользователь будет просматривать страницу.
В статьях, согласно проекту, могут использоваться иллюстрации с подписями, а
также дополнительные оформительские элементы – цитаты и списки, которые также нужно
учитывать.
Иллюстрации можно разместить непосредственно в текстовой колонке. Стиль подписи
тоже соответствует нашей концепции метатекста, в которой используется шрифт без засечек.
Чтобы он отличался от основного текста, уменьшим его кегль на один пункт и выберем
более светлый цвет. Подпись находится прямо под изображением, а между текстом и
изображением будет сделан интервал величиной в одну базовую строку.
72
Добавим стили для оформления иллюстраций с подписями

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

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

Наконец добавим несколько полезных инструментов, дающих пользователю
возможность производить действия со статьей, – print (напечатать), email (отправить по
электронной почте) и share (поделиться с друзьями), – разместив их в зоне заголовка
страницы. Это небольшие элементы, но они должны быть заметны, поскольку многие
пользователи будут искать их. Давайте воспользуемся пустой колонкой, расположенной
между текстом и рекламным блоком. Если ссылки на действия со статьей находятся
в верхней части этой колонки, они будут визуально активизировать вертикальное
пространство, привлекая при этом внимание к себе.
75
Готовый дизайн статьи
76
Проект 2. Информационная страница

Занимаясь следующими шаблонами, мы будем использовать принципы расположения,
компоновки и конфигурации элементов страницы, которые разработали для шаблона статьи.
Такой подход обеспечит единый стиль оформления. Вместе с тем мы создадим новые схемы
и, возможно, изменим некоторые из старых – разные шаблоны требуют разных элементов,
поэтому мы должны быть готовы к изменениям, чтобы реализовать свои замыслы.
Давайте приступим к разработке следующего шаблона – странице со сводной
информацией. На ней должны быть представлены проекты, которые можно
найти в выдуманной нами социальной сети Designery.us, и их авторы. По
пиктограммам, соответствующим конкретным персонам или проектам, будет легко оценить
содержательную сторону сайта. Схема информационной страницы разделена на две
области, ширины которых соотносятся как 2:1. На первый взгляд такой подход полностью
соответствует концепции, использованной при создании страницы статьи.
Простое копирование шаблона страницы статьи обеспечило бы преемственность
дизайна, что само по себе неплохо. Однако мы потеряли бы возможность улучшить
собственный проект. Цели пользователей, заходящих на эту страницу, существенно
отличаются от целей пользователей, читающих статью. В последнем случае пользователь
хочет сконцентрировать свое внимание на конкретной статье и только потом может перейти
к другим материалам, которые можно найти на сайте Designery.us. На информационной
странице пользователи в первую очередь хотят найти общие сведения о сайте, возможностях
и о людях, которые его посещают. Таким образом, на этой странице пользователи не будут
концентрировать внимание на одной статье, а захотят просмотреть самые интересные из
доступных материалов.
77
Каркас информационной страницы

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

Информация так же сгруппирована в три колонки, но разделение между ними
выражено не так сильно, как при соотношении областей 2:1, использованному на странице
статьи. Мы хотим заставить колонки работать как единый объект, даже если они будут
отделены друг от друга.
Давайте проведем линию под секцией входа в систему по всей ширине страницы. Она
разрушает вертикаль зоны торговой марки и помогает отделить верхнюю часть страницы.
Здесь будет находиться название страницы. Теперь в нашем распоряжении большое пустое
пространство, несвязанное с ассиметричным расположением торговой марки наверху.
79
Проводя линию под элементами аккаунта, мы формируем область с другой динамикой

На нашем эскизе пиктограммам проектов отведена достаточно широкая средняя
область – две колонки, расположенные рядом. Чтобы создать эту область, можно объединить
8 юнитов в 16-юнитной сетке, тогда с обеих сторон останутся по 4 юнита.
Вот какой вид примет основная концепция страницы – выраженная центральная
область, со смещенным в верхний правый угол торговым знаком. Получившееся
дизайнерское решение нужно будет учитывать при добавлении других элементов и не
допускать нарушения общей идеи.
Расположим пиктограммы проектов в середине страницы

Прямо над пиктограммами проектов можно разместить аватары пользователей
Designery.us. Их размеры допустимо привязать к шагу сетки и сделать равными одному
юниту:
80
50 х 50 пикселов. Благодаря этому в данной области поместятся много пиктограмм

– восемь в ширину и четыре в высоту. Поскольку это лишь малая толика из тысяч
пользователей Designery.us, нужно разместить в правом нижнем углу блока ссылку,
позволяющую найти других пользователей. Для этого можно объединить две соседние
области, отведенные под пиктограммы.
Теперь у нас появилась проблема. Опознать пользователей по изображению нелегко.
Хотя в Интернете довольно часто можно увидеть списки пользователей в виде изображений,
нужно найти способ представления имени каждого пользователя. Как правило, это можно
сделать, выводя имя в виде текстовой метки при щелчке на изображении, но мы найдем
более творческое решение.
Если на сетке изображений выделить отдельную область для просмотра, то
пользователи смогут просматривать пиктограммы в увеличенном масштабе. Щелкнув
мышью на аватарке, ее можно увеличить, при этом на экран будет выведены имя
пользователя и дополнительная информация.
81
Аватары пользователей располагаются над названиями проектов
82
Сетка поможет создать необычное дизайнерское решение, позволяющее отобразить

имя рядом с фотографией
Обратите внимание, что увеличенное изображение имеет размер 110x110 пикселов.
Поэтому оно хорошо вписывается в шаг сетки и остается пропорциональным уменьшенным
пиктограммам. Это один из приятных побочных эффектов использования эффективной
сетки. Иногда кажется, что сетка сама управляет собой без каких-либо усилий с нашей
стороны.
Аналогичное решение можно использовать и для доступа к архивам данных. В
модели предусмотрена функция поиска информации по годам. Если выбрать конкретный
год, раскроется список месяцев. Для реализации этой функции будем использовать
четыре юнита, расположенных правее пиктограмм пользователей. Годы в модели были
упорядочены по горизонтали, но мы изменим их расположение на вертикальное. Список
83
годов можно использовать для навигации. Выбрав конкретный год, справа от него в
оставшихся трех юнитах мы увидим список месяцев. Этот список постоянен и не зависит
от года, поэтому правая сторона не изменяется, а общий принцип поиска понятен каждому.
Добавим в верхний правый угол страницы функцию поиска по датам
84
Окончательный дизайн информационной страницы

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

Элементы оказались на сетке базовых линий благодаря подзаголовкам Explore, Top
Designery.users, Browse by Date и Hot Projects on Designery. В шаблоне страницы статьи
линии над каждым подзаголовком были привязаны к базовой сетке, а текст подзаголовка
выравнивался по вертикали относительно пространства, образованного двумя базовыми
строками. Кроме того, между началом текста и базовой строкой сделан отступ величиной
в одну строку.
Рассматривая готовый проект, можно увидеть, что страница в целом выглядит
довольно эстетично. На странице бросается в глаза ярко выраженная симметрия, которую
подчеркивают пиктограммы проектов с блоками текстовой информации по их краям,
но присутствует и некоторая асимметрия – смещенное относительно центра большое
изображение, список, расположенный слева, не полностью уравновешен разделом поиска
по дате справа и логотипом в верхнем правом углу. Страница удачно повторяет шаблон
86
страницы статьи с точки зрения единой эстетики (неизменными остались блок торговой
марки и параметры текста), учитывая вместе с тем особые потребности данной страницы.
87
Проект 3. Страница профиля

Следующей по порядку идет разработка страницы профиля пользователя для сайта
Designery.us. По эскизу видно, что она во многом схожа с информационной страницей – на
ней представлено множество разнородной информации, а не материалы одного конкретного
типа.
В то же время данные, размещенные на странице пользователя, не так разнообразны,
как информация, выводимая на информационную страницу. Здесь должны быть
представлены биографические сведения и сведения о сетевой активности конкретного
пользователя, а информационная страница демонстрирует сведения об активности на всем
сайте. Так что дизайн страницы профиля должен быть более близким пользователю.
Основной элемент небольшого эскиза – персональная информация о пользователе,
занимающая отдельную область в верхней части страницы. Дополнительная информация
– например, список друзей, проектов и обзор активности – располагается ниже и является
продолжением персональной информации.
88
Вверху – эскиз дизайна; внизу– макет страницы профиля

Данная схема представляет собой объединение принципа разделения страницы в
соотношении 2:1 из шаблона страницы статьи и принципа симметрии с информационной
страницы. Большой рекламный блок расположен в правом углу. Как и на информационной
странице, в верхней части выделена горизонтальная область, совпадающая с рекламным
блоком. По сути, можно считать основную структуру этой схемы «проекцией» рекламного
блока.
89
Структура страницы как «проекция» рекламного блока

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

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

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

Однако при этом возникают две проблемы. Во-первых, имя пользователя смещается
вправо на несколько юнитов. Это создает некоторые трудности при поиске имени
пользователя. Любой заголовок Н1, содержащий важнейшую информацию на странице,
должен находиться как можно ближе к левому краю.
Во-вторых, если поместить фотографию вне этой области, например, под заголовком,
в заголовочном блоке останется мало элементов. Короткие строки читать легче, особенно
если они содержат информацию, предназначенную для быстрого восприятия, например,
биографические данные. Если в этой области не будет фотографии, длина текстовой строки
(количество символов) увеличится. Обратите внимание, что часть текстовых блоков имеют
малую длину, поэтому остается много пустого места. В дизайне других страниц мы часто
оставляли пустое место, но наша цель не в том, чтобы создать как можно больше пустого
92
места, а в том, чтобы использовать его целенаправленно и рационально. В противном случае

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

пользователе
Такой вариант выглядит существенно лучше. Фотография расположена рядом с
именем пользователя в верхней части страницы. Кроме того, изображение позволяет
разделить пространство. Заголовки биографических блоков находятся слева от фактической
информации, что упрощает просмотр.
В то же время биографическая информация становится более удобочитаемой,
поскольку выводится в более узкую колонку.
В качестве завершающего штриха разместим ссылки Send message и Add as a Friend
сразу под фотографией. И снова такое соседство оправдано – эти ссылки расположены под
элементами, позволяющими идентифицировать пользователя. Идеальное расположение для
ссылок, позволяющих совершать действия с данной информацией.
94
Область страницы под биографической информацией делится по уже знакомому

нам принципу 2:1. Здесь так же можно поместить материалы трех разных типов: списки
друзей, списки проектов и статистику активности. Наличие трех разных типов информации
предполагает разделение этой области на три части, согласно принципу симметрии,
реализованному на информационной странице.
Но крайняя правая колонка отчасти связана с рекламным блоком, расположенным
над ней. Конечно, ее ширину можно уменьшить, чтобы она полностью соответствовала
трем колонкам на странице категории, но это непрактично. (Помните, как мы выделяли две
колонки по четыре юнита каждая, находящиеся по сторонам широкой колонки из восьми
юнитов?)
Нижнюю часть страницы можно разделить на три равные области, согласно

принципу симметрии, использованному на информационной странице
95
Попробуем оставить преемственность, но не повторять дизайн. Пусть три колонки в

нижней части страницы помогут в решении данной задачи и не будут повторять предыдущие
дизайнерские решения.
Для этого сделаем крайнюю правую колонку шириной в шесть юнитов. На левую часть
страницы остаются десять юнитов. Из них четыре юнита образуют левую колонку, а шесть
– среднюю. Получившуюся структуру можно увидеть на противоположной странице.
Хотя симметрия нарушена, сходство с информационной страницей можно обеспечить,
расположив материал в три колонки. У нас три вида информации, причем наиболее важной
являются сведения о проектах пользователя, которые выводятся в виде изображений. Если
расположить их в центральной колонке, создастся ощущение симметрии относительно
оптического (а не точного) центра страницы.
Менее симметричная структура лучше соответствует конкретным условиям
96
Чтобы выбрать конкретный способ реализации, нужно учитывать, какое свободное

пространство находится в нашем распоряжении. Нам не хватит места, чтобы привести
эти изображения к тому же размеру, как на информационной странице. В нашем случае
можно взять размеры изображений, которые использовались при создании страницы
статьи. Изображения имели ширину 3 юнита (170 пикселов) каждое. Этих значений будет
достаточно, чтобы разместить в колонке шириной 6 юнитов (350 пикселов) 2 узких столбца
изображений. Результат напоминает информационную страницу, но больше подходит для
конкретных целей.
Альтернативный вариант отображения пиктограмм проектов

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

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

информационной страницы, мы создали новый вариант
98
Теперь осталось разместить обзор активности в правой колонке. Сам материал очень
простой – всего лишь набор текстовых записей, и его необязательно усложнять. Текст
можно расположить сверху вниз в виде колонки. Часто такой простой подход к материалу
оптимален для крайней правой колонки, потому что пользователи считают эту область веб-
страниц «рекламным местом». Контринтуитивный подход оказывается более эффективным
для данной области – чем проще материал, тем меньше он похож на рекламу, поэтому больше
пользователей уделят ему внимание.
Будем отображать активность пользователя в правой колонке
99
Проект 4. Домашняя страница

Последний необходимый нам основной шаблон – домашняя страница. Напомню, что
мы отказались от общепринятой практики, начав с других шаблонов, чтобы создать правила
и модели, которые пригодятся при создании домашней страницы. Как и в случае с любым
дизайном, мы можем при необходимости перерабатывать и изменять шаблоны, поддерживая
при этом единство стиля.
Большинство домашних страниц должны одновременно выполнять несколько
функций: отображать информацию о самых новых и/или самых интересных материалах,
об активности и проектах в социальной сети Designery.us, а также представлять некоторых
наиболее активных пользователей. Более того, страница должна демонстрировать
пользователям торговую марку Designery.us способом, отличающимся от других страниц.
Эти особые требования были отражены в задании (оно не навязывает определенный подход
к компоновке страницы и допускает больше всего изменений).
100
Проект домашней страницы

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

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

Начнем с верхней части страницы. Оформление блока с логотипом бренда
существенно отличается. Эта страница является «парадным входом» на сайт и поэтому
выполняет дополнительные функции – она должна представить и кратко описать
Designery.us новым пользователям. Для этого можно просто поместить слоган рядом с
торговой маркой:
Designery – это место встречи дизайнеров-практиков, студентов и
любителей.
Сделать это не так просто, как кажется. На других страницах логотип расположен
справа, а слоган пришлось бы размещать слева от стандартной зоны торговой марки.
Возникла бы семантическая путаница – пояснение появляется раньше самого понятия. Было
бы логичнее сначала дать термин, а затем уже привести его определение.
Для этого переместим логотип левее под навигационные ссылки, а слоган расположим
в блоке справа. Такое «нарушение» вполне обосновано, потому что, повторюсь, к домашней
странице предъявляются особые требования. Бренд должен бросаться в глаза. Если вид
домашней страницы будет отличаться от других страниц сайта, это только подчеркнет
важность информации.
102
Изменяем расположение логотипа на домашней странице

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

Теперь перейдем к основной части страницы. В нашем эскизе использовались три
колонки. Мы уже знаем, что в сетке можно реализовать не меньше двух трехколоночных
схем: симметричную схему, созданную для информационной страницы, и асимметричную
схему страницы профиля, которая имеет множество вариантов. В этом случае симметричная
схема будет нецелесообразной из-за размера рекламного блока, расположенного справа,
поэтому обратимся к трехколоночной структуре, использованной на странице профиля.
Попробуем доработать ее – изменим размеры двух колонок, чтобы первая колонка
стала шире и привлекала больше внимания. Это повысит удобочитаемость страницы.
104
На содержательных сайтах самые важные материалы стремятся расположить в верхней

левой части основной области. Как правило, эти элементы являются самыми крупными на
странице.
Основная область разбивается на три колонки

Будем придерживаться этого принципа, определяя формат для представления
аннотаций статей. Аннотация главной статьи, находящаяся в верхней части левой колонки,
должна быть самой крупной, она содержит изображение, ширина которого соответствует
ширине колонки. Далее следует расположить аннотации не столь важных статей с мини-
изображениями, ширина которых составляет два юнита.
Стиль аннотаций «второго уровня» можно использовать и во второй колонке, оставив
те же параметры для текста и пиктограмм, но учитывая более узкую колонку. В результате
мы получим оформление в едином стиле. Когда пользователь ищет интересные материалы
105
на странице, однородность дизайна упрощает восприятие и сводит к минимуму ощущение

хаоса.
Разместим аннотации статей в двух левых колонках

Будем считать, что показанные аннотации соответствуют материалам, недавно
опубликованным на сайте Designery.us. Для их отображения требуется много места на
экране, поэтому неплохо было бы уменьшить их размер. В нижней части первой колонки
можно разместить заголовки статей третьего уровня значимости (без аннотации), которые
занимают меньше места. Эти заголовки будут сопровождаться такими же пиктограммами
в два юнита шириной, что и аннотации «второго уровня», но располагаться они будут по
три в ряд.
106
Добавление аннотаций в нижнюю часть левой колонки

Это краткие аннотации, поэтому их расположение внизу колонки логически
обоснованно. Наша цель – показать, что на сайте есть и другие аналогичные материалы.
Реализуем эту мысль, добавив ссылку More Articles… в самый низ колонки.
В проекте присутствуют несколько элементов, которые мы использовали в других
шаблонах. В средней колонке разместим форму для подписки на рассылку (как на странице
статьи) и список пользователей (как на странице профиля).
107
Элементы, созданные для других страниц, например, форма для подписки на рассылку
и список пользователей с фотографиями, будут располагаться в средней колонке
В крайней правой колонке можно отображать проекты так же, как и на странице
профиля. Эта колонка имеет ширину шесть блоков, поэтому информация, появляющаяся в
этом месте, будет хорошо смотреться.
В задании были предусмотрены ссылки для поиска самых популярных, самых
обсуждаемых, недавно обновленных материалов и т. п. Расположим их над проектами,
чтобы их было легко найти (их нельзя располагать под проектами, так как они оказались бы
в нижней части страницы). На странице категории использовались аналогичные ссылки, но
колонка была меньшей ширины, чем сейчас, когда в нашем распоряжении шесть юнитов.
Такая ширина компенсируется меньшей высотой, поэтому разделим список на две более
узкие колонки по три ссылки в каждой, но с меньшим межстрочным интервалом, чем
раньше.
108
Добавление материалов в крайнюю правую колонку

Как и на странице со статьями, пользователи должны иметь возможность перейти по
ссылке к другим материалам того же типа. Одной из целей домашней страницы является
обзор материалов, доступных на сайте Designery.us. Поэтому возьмем оформление ссылки
More Articles… и используем его для списка пользователей и проектов внизу второй и
третьей колонки. Кажется, что страница упорядочена по простому принципу: статьи в левой
колонке, пользователи в середине, а проекты справа. С одной стороны, это не совсем верно
– материал все-таки более разнообразен. Но с другой стороны, это так – ведь форма подачи
материала имеет упорядоченный вид. Во многих случаях этого достаточно.
109
Готовая домашняя страница
110
Дополнительные страницы
Созданные нами шаблоны – страница статьи, страница категории, страница профиля
и домашняя страница – предлагают четыре совершенно разных подхода к компоновке
материалов в созданной нами сетке. Эти страницы, вероятно, будут просматриваться чаще
всего, поэтому они могут послужить довольно хорошей основой для разработки остальных
страниц сайта.
При разработке сайта с огромным количеством материалов и связей не следует
машинально повторять модели компоновки. Вполне возможно, что другие страницы
сайта будут характеризоваться другими ограничениями и потому потребуют других
подходов. Но мы не должны просто создавать отдельные страницы, не обращая
внимания на их взаимосвязь. Несмотря на то что невозможно предугадать точную
последовательность просмотра сайта Designery.us, можно предвосхитить некоторые модели
поведения пользователей. Пользователь может перейти с домашней страницы на страницу
статьи и, возможно, вернуться на домашнюю страницу либо перейти с информационной
страницы на страницу профиля и другие страницы, которые мы еще не разработали,
например на страницу проекта.
Зная эту информацию, мы понимаем, что упорядочение страниц является одной из
задач, стоящих перед нами. Когда пользователь просматривает сайт, мы должны помочь
ему сориентироваться в разделах сайта, чтобы разнообразные интерфейсы, входящие в
состав нашей социальной сети, походили друг на друга, а однотипные виды информации
были представлены в едином стиле. Мы должны сделать все возможное, чтобы компоновка
страниц изменялась в зависимости от ситуации, оставаясь однородной или меняясь при
необходимости. Приведем несколько примеров использования созданной нами основы для
разработки непохожих друг на друга, необычных, но простых по компоновке и внешнему
виду страниц.
111
СТРАНИЦА АВТОРА
Страница автора по своей сути похожа на страницу профиля, поэтому возникает
соблазн создать ее на основе уже существующего шаблона. Однако материал,
представленный на данной странице, по содержанию будет ближе к странице статьи.
Основное внимание здесь уделяется не общению, а редакционному содержанию. Поэтому
целесообразнее основывать дизайн этой страницы на шаблоне страницы статьи.
112
СТРАНИЦА ABOUT US
Этот же подход можно применить к разработке страницы About Us, на которой
приведены задачи сайта, история и краткая биография его создателей. Воспользуемся
соотношением 2:1, как на шаблоне страницы статьи. Эта страница будет менее
насыщенной, поэтому уберем вертикальную разделительную линию, отграничивающую
область основного материала и биографии создателей, находящиеся в правой колонке.
113
СТРАНИЦА АРХИВА
Не каждый шаблон, связанный со статьями, должен соответствовать такой же модели,
что и страница статьи. Можно предположить, что для страницы с архивной информацией
понадобится совершенно другой подход. В качестве основного принципа организации и
компоновки здесь идеально подходит календарь.
114
СТРАНИЦА ПРОЕКТА
Проекты, представленные на уже созданных нами шаблонах страниц Designery.us,
будут сведены воедино на странице проектов. На самом деле это всего лишь слайд-шоу,
позволяющее просматривать различные фотографии, которые участвуют в проекте.
115
СТРАНИЦА НАСТРОЕК
Страницы настроек бывают очень сложными, но сетка позволит упростить их вид.
На странице настроек сайта Designery.us разные поля сгруппированы в колонку шириной
шесть юнитов, а подписи к каждому элементу располагаются слева в колонке, образованной
четырьмя юнитами.
116
ШАБЛОН РАССЫЛКИ
Обратите внимание, что наша сетка может применяться не только для сайтов. Ее
также можно успешно использовать и в других областях. Проведенная нами работа
поможет оформить информационную рассылку Designery.us, на которую подписываются
пользователи.
117
«Резиновая» верстка
Все созданные нами шаблоны имели фиксированную ширину: то есть ширина
юнитов, колонок, областей и т. д. остается постоянной при изменении размеров окна
браузера. Большинство коммерчески успешных сайтов используют этот принцип с
момента появления Интернета. Данный подход оказался самым эффективным методом
компоновки, позволяющим создать качественный дизайн в среде, которая не всегда является
дружественной по отношению к дизайнеру.
Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих
размер в зависимости от области просмотра.
Дизайнеры хотят создать сайты, действительно учитывающие предпочтения
пользователей. Поэтому нельзя отбрасывать веские доводы, направленные против
страниц фиксированной ширины и вступающиеся за «резиновую» верстку. В сущности,
фиксированная ширина веб-страницы отражает склонность дизайнера к контролю над
реальным использованием, тогда как страницы, меняющиеся в зависимости от области
просмотра, в первую очередь учитывают потребности пользователей.
Можно сказать, что при большом размере экрана сайт должен занимать всю доступную
область, а при маленьком размере – соответствующим образом уменьшаться. Было бы
не совсем справедливо утверждать, что «резиновая» верстка пытается подстроится под
всех пользователей, но у нее близкая к этому задача. Интернет представляет собой
конгломерат множества систем, которые обслуживают широкие группы пользователей
способами, максимально учитывающими их индивидуальные потребности. Согласитесь,
что одинаковое восприятие содержания или функциональности одного и того же сайта
невозможно. Почему же внешний вид должен быть одинаковым для всех? «Резиновая»
верстка больше подходит для Интернета и лучше учитывает его сильные и слабые стороны,
чем страницы фиксированных размеров. Как уже было отмечено ранее, чем естественнее
решение, тем оно эффективнее.
До недавнего времени возможности веб-дизайна не позволяли нам в полной мере
насладиться «резиновой» версткой. Новые возможности браузеров, наряду с новшествами,
которые появились в CSS и JavaScript, позволяющими учитывать параметры устройств,
дают возможность дизайнерам создавать гораздо более динамичные страницы.
Дизайнеры-новаторы теперь могут заниматься так называемым «отзывчивым» веб-
дизайном. Итан Маркотт, его активный сторонник, утверждает, что такой подход открывает
новые возможности:
Можно сделать сайт удобным и привлекательным внешне, используя
при этом стандартные технологии, чтобы сайт был не только более гибким,
но и адаптировался к среде, в которой он воплощается.
Эти технологии невероятно быстро развиваются, поэтому я решил не рассматривать
их в своей книге. Оптимальные методы в сфере «отзывчивого» веб-дизайна пока еще не
найдены.
Тем не менее основные принципы дизайна остаются в силе независимо от развития
нового подхода. Справедливым остается и тот факт, что дизайнеры должны продолжать
делиться возможностями управления собственными произведениями с пользователями,
которые хотят управлять своими действиями. Было бы ошибкой считать, что «отзывчивый»
веб-дизайн означает предоставление пользователям полного контроля, потому что в
действительности им нужны только некоторые функции. Пользователи надеются, что
118
дизайнеры не только предоставят им некоторую оболочку, но и доработают ее в достаточной

степени, чтобы ею можно было управлять.
Дизайнеру следует принимать некоторые решения за пользователя, но не все, а только
те из них, которые помогают в восприятии. Дизайнер дает возможность пользователю
управлять наиболее важными для его целей аспектами восприятия, но пользователь при этом
должен ощущать стабильность и надежность.
«Отзывчивый» веб-дизайн не делает эту задачу проще. На самом деле он ее
усложняет. Появятся еще больше ситуаций, которые необходимо учитывать, больше
комбинаций элементов пользовательского интерфейса в различных сочетаниях, что
затруднят восприятие сайтов. Таким образом, сетка становится еще важнее для общего
дизайна; создание строгой сетки, лежащей в основе «отзывчивого» веб-дизайна, сделает его
более обоснованным и надежным.
Одни и те же принципы дизайна на основе сетки могут использоваться как в
«резиновой» верстке, так и в «отзывчивом» веб-дизайне. Юниты можно объединять в
колонки и области, а размеры элементов менять в зависимости от основных параметров
сетки. Эти элементы должны увеличиваться и уменьшаться в соответствии с этими же
параметрами, но важно помнить, что изменяться должно не всё. Некоторые элементы
могут и должны оставаться неизменными. В среде, где элементы бесконечно меняют
размеры, очень важно сохранить постоянство, предоставить пользователям какие-нибудь
ориентиры. По мере развития этой теории появятся новые возможности для дизайнеров,
работающих в этой области. Но неизменной останется центральная роль дизайнера –
человека, управляющего пользовательским восприятием.
119
Глава 5. Заключение
Завершая рассказ об основанном на использовании сетки веб-дизайне, мне хотелось

бы ненадолго остановиться на перспективах его развития.
Типографская сетка лежит в основе бесчисленного множества афиш, книг, журналов
и других выразительных примеров дизайнерского искусства, но пока еще не получила
широкого применения в цифровом мире. По мере развития средств и технологий все больше
дизайнеров начинают использовать основные принципы сетки в новой среде, сетки могут
стать более распространенными, поскольку представляют собой естественное решение,
позволяющее отображать цифровые материалы и обеспечивать их функциональность.
Благодаря постоянному совершенствованию технологии в ближайшем будущем роль сеток
станет еще более важной и они принесут еще больше пользы в новом цифровом мире.
Моя книга – это попытка помочь ускорить этот процесс, распространить принцип
сетки в надежде, что он изменит к лучшему практику веб-дизайна и дизайна во всех
цифровых сферах. Но не стоит думать, что эта книга прогнозирует будущее, в котором
Интернет или любое другое цифровое средство станет больше походить на мир печатной
продукции и аналоговых СМИ, чем сейчас. Скорее наоборот.
По мере развития технологий СМИ будут все меньше и меньше походить на те, что
были раньше. Технические новшества будут формировать и изменять наше общение.
Что более важно, поведение пользователей будет развиваться, порождая новые
способы взаимодействия в цифровом мире. Все это предоставляет дизайнерам новые
возможности и ставит перед ними новые проблемы. Изменение задач дизайна приведет к
изменению дизайн-решений.
Разработка дизайна на основе сетки – это не попытка использовать преимущества
старого метода в рамках нового. По сути, чтобы принципы создания сеток обеспечили
действительно положительные перемены в Интернете или любом цифровом СМИ,
дизайнеры должны перерабатывать и изменять их в зависимости от поставленных задач.
Многому можно научиться на основе существующего опыта использования сеток, и нам
еще предстоит освоить много правил их применения. Самая важная мысль состоит в том,
что дизайнер должен понимать поставленную перед ним задачу и найти соответствующее
решение.
120
Приложение
Одной книги о сетках будет явно недостаточно для дизайнера, стремящегося к новому.
Чем больше вы узнаете о работах других специалистов, тем быстрее вы развиваетесь.
Я привожу список лучших книг, посвященных сеткам и дизайну, которые я читал. Он
неполный, во всех этих книгах и на сайтах упоминаются множество других «источников
вдохновения». Старайтесь по возможности прочитать всё, что доступно по этой теме.
Последнее замечание: кроме указанных ресурсов ознакомьтесь с
сайтом-спутником этой книги: http://grids.subtraction.com. Здесь вы сможете
найти обновления списка литературы, дополнительные комментарии и
много другой информации.
121
Сетки
• Der typografische raster. The Typographic Grid, Hans Rudolf Bosshard.
• A Practical Guide to Designing Grid Systems for the Web, Mark Boulton.
• Grid Systems: Principles of Organizing Type, Kimberly Elam.
• Geometry of Design, Kimberly Elam (Элам К. Геометрия дизайна. Пропорции и
композиция. СПб.: Питер, 2011).
• The Grid Book, Hannah В. Higgins.
• The Grid, Allen Hurlburt (Хёрлберт А. Сетка: Модульная система конструирования и
производства газет, журналов и книг. М.: Книга, 1984).
• Grid Systems in Graphic Design, Josef Muller-Brockmann.
• The Designer and the Grid, Lucienne Roberts and Julia Thrift.
• Making and Breaking the Grid, Timothy Samara (Самара T. Создавая и ломая сетку.
Мастерская графического дизайна. М.: РИН-Холдинг, 2005).
122
Сайты, на которых можно найти информацию о сетках

• Система сетки – http://www.thegridsystem.org
• Пять простых шагов к созданию систем сеток от Марка Бултона – http://bit.ly/atBRYh
• Дизайн на основе сеток – http://grid-based.com
• Gridness – http://gridness.net
• Blueprint CSS Framework – http://www.blueprintcss.org
• Система Grid 960 – http://960.gs
• «Отзывчивый» веб-дизайн – http://responsivewebdesign.com
• Fluidgrid – http://fuid.newgoldleaf.com
123
О дизайнерах
• Unimark International: The Design of Business and The Business of Design, Jannet
Conradi.
• Paul Rand, Steven Heller.
• Swiss Graphic Design: The Origins and Growth of an International Style, 1920–1965,
Richard Hollis.
• Corporate Diversity. Swiss Graphic Design and Advertising by Geigy 1940–1970.
Josef Miiller-Brockmann: Pioneer of Swiss Graphic Design, Lars Muller and Paul Rand.
• Josef Muller-Brockmann, Kerry William Purcell.
• Otl Aicher, Markus Rathgeb.
• Design Is One, Leila and Massimo Vignelli.
124
Типографика
• The Elements of Typographic Style, Robert Bringhurst (Бринхёрст P. Основы стиля в
типографике. М.: Д. Аронов, 2006).
• TypeWise, Kit Hinrichs.
• Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students, Ellen
Lupton.
• Stop Stealing Sheep & Find Out How Type Works, Erik Spiekermann (Шпикерман Э. О
шрифте. М.: ПараТайп, 2005).
• The New Typography, Jan Tschichold (Чихольд Я. Новая типографика. М.: Студия
Артемия Лебедева, 2011).
125
HTML и CSS
• Bulletproof Web Design, Dan Cederholm (Седерхольм Д. Пуленепробиваемый Web-
дизайн. М.: НТ Пресс, 2006).
• Web Standards Solutions'. The Markup and Style Handbook, Dan Cederholm.
• Eric Meyer on CSS, Eric Meyer.
• Designing with Web Standards, Jeffrey Zeldman with Ethan Marcotte.
126
Интерактивный дизайн
• About Face 3: The Essentials of Interaction Design by Alan Cooper (Купер А. Алан Купер
об интерфейсе. Основы проектирования взаимодействия. СПб.: Символ-Плюс, 2009).
• The Inmates Are Running the Asylum: Why Tech Products Drive Us Crazy and How
to Restore the Sanity, Alan Cooper, Robert Reimann, and David Cronin (Купер A., Райман P.
и Кронин Д. Психбольница в руках пациентов. СПб.: Символ-Плюс, 2005).
• Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug (Круг С.
Веб-дизайн: книга Стива Круга, или Не заставляйте меня думать! СПб.: Символ Плюс, 2008).
• Designing Web Usability, Jakob Nielsen (Нильсен Я. Вебдизайн. Книга Якоба Нильсена.
СПб.: Символ-Плюс, 2006).
• Designing for Interaction: Creating Innovative Applications and Devices, Dan Saffer.
• Designing Interfaces: Patterns for Effective Interaction Design, Jennifer Tidwell (Тидвел
Дж. «Разработка пользовательских интерфейсов. 2-е изд. СПб.: Питер, 2011).
• Glut: Mastering Information Through the Ages, Alex Wright.
127

Как спроектировать современный сайт (PDFDrive)

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Как спроектировать современный сайт (PDFDrive)

Оригинальное название:

Загружено:

Авторское право:

Чои Вин

Как спроектировать современный сайт

Текст предоставлен правообладателе

«Резиновая» верстка 118

В некотором смысле дизайн можно рассматривать как метод, с помощью которого

Почему я написал эту книгу

Для кого эта книга

Опытные графические дизайнеры, работающие в масс-медиа, хорошо знакомы с

Рассматривая приведенные ранее преимущества использования сеток, легко сделать

Спираль Фибоначчи образует сетку, используемую человечеством на протяжении

Последовательность Фибоначчи представляет собой ряд чисел, начинающийся с нуля

Используемый во всем мире стандарт ISO 216, описывающий бумажные форматы,

некоторых других странах, но не в США и Канаде. Он принят Организацией Объединенных

Правило третей позволяет определить четыре центральные точки в любой

• Веб-решение на основе сетки во многом зависит от доступной пользователю

Изменение стиля общения

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

Ограничения на форму представления материала должны учитывать различные

Базовая сетка основана на невидимых линиях, на которых расположены буквы

Горизонтальная или вертикальная ориентация

Промежутки между колонками

Поля страницы и отступы

Глава 4. Начинаем творить

Нет лучшего способа научиться использовать сетки, чем «засучить рукава» и

С. 57–60: Наш проект основан на четырех моделях страниц: статья,

Однако на момент первой публикации этой книги, когда Интернет находился на

Площадь, занимаемая браузером на экране, не превышает 80 % площади, доступной

Учитывая поля на левой и правой сторонах браузера, получаем доступную

Дизайн всех страниц начинается с карандашных набросков

Создание колоночной сетки (юниты)

Разделение страницы на три равные колонки не подходит для нашего рекламного

между колонками. Структура, состоящая из трех колонок, была бы простым решением, но

Кратность четырем часто позволяет найти правильное решение. На рисунке

Сетка из шестнадцати юнитов

Создание базовой сетки

Использование образцов помогает определить правильную длину строки и размер

При использовании шрифта Georgia Regular 12 пт в строку помещаются около 80

Вставляя образец текста в колонки разной ширины, можно оценить правильность

Не все параметры текста должны соответствовать сетке базовых строк. Здесь

торговой марки и элементов навигации, расположенных в верхней части страницы, или

Определение областей усложняется при разной высоте страниц

Высота полей рассчитывается с помощью золотого отношения

Вся страница разделена на поля

Создание шаблона страницы

Для создания шаблона страницы выделим основные области

Более того, такое расположение позволяет решить проблему, часто возникающую

Поместим логотип в нестандартное место – верхний правый угол

Добавление пользовательского входа под логотипом

Элементы аккаунта выровнены по сетке

Размещение элементов навигации вверху страницы

Текст на элементах навигации не выровнен по базовой сетке

Ролловер-состояние элементов навигации

Текст, попадающий на край колонки, смотрится нормально

В этом и заключается фундаментальное отличие интерактивного дизайна от дизайна

Проблемы возникают при создании различных эффектов

Сдвинем элементы на несколько пикселов от края колонки

Добавление над логотипом поля поиска

Добавление нижнего колонтитула

Готовый шаблон страницы

Проект 1. Страница статьи

Проект страницы статьи

Образец текста в левой колонке

Смещение текста влево на один юнит

Правая область дополнительно разбивается на более мелкие блоки, чтобы

использованные в нашем дизайне. Чем меньше разновидностей шрифта мы используем, тем