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

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

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

Возможно, все это – плоды моего воображения. Но я описал то, что изначально привлекало меня в дизайне.

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

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

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

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

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

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

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

Рассматривая точки на своем листе, я думал: «Если пара любых расположенных неподалеку точек подразумевает скрытую структуру, не лучше ли попытаться влиять непосредственно на эту структуру и управлять ею, чем предоставлять ей свободу действий?»

Ответ на этот вопрос возник из подсознания, из моего стремления во всем найти порядок (или установить его), именно оно и сделало меня графическим дизайнером.

Я решил: «Да! Конечно! Структура должна существовать везде».

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

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

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

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

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

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

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

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

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

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

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

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

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

• Сетки делают информацию упорядоченной, цельной и гармоничной.

• Сетки позволяют предугадать местоположение информации, что облегчает ее восприятие.

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

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

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

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

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

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

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

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

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

Вернемся на некоторое время в прошлое. Возникновение понятия типографской сетки относят к началу XX века. Это произошло, когда группа архитекторов, печатников, типографов и дизайнеров стала рассматривать графическое искусство как отражение универсальных принципов, общих для природы, математики и технологии. Это действительно так (к этому вопросу мы еще вернемся позднее), но подобное представление не является исчерпывающим. Можно утверждать, что на протяжении всей истории человеческий род занимался поиском порядка. Мы – люди, поэтому наш поиск – это не столько поиск, сколько созидание. Если порядок отсутствовал, мы создавали его. В великолепной «Книге о сетке» (The Grid Book), описывающей историю развития сетки как концептуальной основы, искусствовед Ханна Б. Хиггинс пишет:

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

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

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

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

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

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

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

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

0, 1,1,2, 3,5, 8, 13,21,34, 55 и т. д.

В результате деления любого числа из последовательности Фибоначчи на предыдущее получается очень близкое к золотому отношению значение —1,618 (иногда больше, иногда меньше). Для больших чисел результат будет стремиться к 1,618.

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

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

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

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

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

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

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

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

В 1920-х и 1930-х годах произошел революционный сдвиг в направлении рациональности, непосредственно связанный с новыми технологичными подходами. Среди основоположников модернистского подхода к дизайну можно назвать Зль Лисицкого, Курта Швиттерса, Яна Чихольда, Пауля Реннера, Ласло Мохой-Надя и др. Большинство работали в Германии, а некоторые преподавали в знаменитом «Баухаусе». Они настаивали на новой парадигме упорядочения мира: форма должна следовать за функцией, системное мышление и стандартизация необходимы. Они отвергали прямое копирование природных форм, а вместо него предлагали использовать внутреннюю красоту техники, которая тогда полным ходом меняла общество.

Из-за распространения в Германии идей фашизма многие из упомянутых ранее дизайнеров были вынуждены покинуть страну в 1932 году, после того как нацисты закрыли «Баухаус». Многие переехали в Швейцарию, где их идеи нашли поддержку, а новый подход к графическому дизайну продолжил развиваться и процветать. Идеалы «Баухауса» «обросли» научно обоснованной простотой и минимализмом, в результате чего сформировался так называемый международный типографский стиль. Базовой идеей, естественно, было использование сетки в дизайне, позволяющей задействовать структуру каждой страницы для создания ощущения порядка. В умелых руках швейцарских дизайнеров, например Йозефа Мюллера-Брокмана, сетки находили применение почти в каждом дизайнерском решении, геометрические формы становились все более выразительными, а математические расчеты, лежащие в основе элементов, становились все более важными. Швейцарский стиль, как его иногда называют, быстро превратился в совершенный набор визуальных средств, который принято считать пиком художественного развития графического дизайна.

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

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

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

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

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

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

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

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

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

В свой книге «Glut: Mastering Information Through the Ages» дизайнер Алекс Райт рассматривает возникновение письменности как ранней формы метода фиксации простых договорных соглашений, ранее скреплявшихся только устной договоренностью двоих людей. Таким образом, письменность благодаря своему объективному характеру выступает в качестве альтернативы человеческому общению, носящему гораздо более субъективный характер. С появлением письменности возникли законы и власть. Именно поэтому данный метод коммуникации стал преобладать над менее регламентированной, но более аргументативной природой простых бесед.

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

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

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

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

Более важной здесь является мысль о том, что ни один из подходов никогда не вытеснял другой: с приходом письменности и «бумажных» договоров устные соглашения никуда не исчезли, письмо просто дополнило их. По своей природе письменный договор основывается на традиции устных соглашений. Народные предания и легенды продвигали идеи Римской империи, дух ее власти и законы в неменьшей степени, чем печатное слово. Книгопечатание стало успешным благодаря воспроизведению устной речи. Персональный компьютер в течение многих лет использовал возможности больших ЭВМ благодаря обширным сетям, но сама идея строго охраняемых компьютерных серверов по-прежнему актуальна.

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

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

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

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

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

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

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

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

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

Давайте перечислим основные этапы поиска решения на основе сетки:

1. Проведение исследований и выявление существующих ограничений.

2. Техническое задание.

3. Подготовительный дизайн:

• карандашные эскизы;

• блоки, колонки, предварительные расчеты;

• эскизы страниц.

4. Компоненты.

5. Создание (код).

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

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

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

И найти на них ответы.

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

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

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

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

Какие разновидности ограничений должен учитывать дизайнер? Их можно разделить на три основные категории.

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

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

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

Нет лучшего способа научиться использовать сетки, чем «засучить рукава» и приступить к делу. Настало время применить на практике все накопленные теоретические знания. В этой главе описан поиск практического решения для создания веб-сайта.

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

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

Постановка задачи: необходимо разработать дизайнерский онлайн-журнал – сайт о дизайнерах, созданный дизайнерами и адресованный дизайнерам. Он должен объединять в единое целое редакционное содержание в форме блога и возможности онлайн-общения.

Сайт состоит из четырех основных шаблонов:

• Страницы статьи.

• Информационной страницы.

• Страницы личных данных пользователя.

• Домашней/главной страницы.

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

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

• Страницы сообщения (например, сообщения об ошибке).

• Страницы содержания блога.

• Страницы настройки параметров.

• Страницы календаря.

• Шаблона для сообщений электронной почты.

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

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

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

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

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

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

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

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

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

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

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

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

Обратите внимание, что информация разделена на две небольшие колонки. Обе они привязаны к колоночной сетке, а текст выровнен по базовой сетке. Аватар также выровнен по базовой сетке.

Естественно, нельзя разместить в дальнем правом углу все важнейшие элементы. Учитывая, что логотип находится справа, навигационные элементы следует разместить в левой части страницы. Давайте расположим элементы навигации вдоль верхнего края страницы – там, где пользователи легко заметят их.

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

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

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

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

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

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

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

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

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

По сути, ни один текстовый блок не попадает на левый край соответствующей колонки. Весь текст расположен на небольшом расстоянии – 5 пикселов – от края.

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

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

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

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

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

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

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

Поэтому лучше всего выбрать положение текста в обычном состоянии таким же, как и в ролловер-состоянии.

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

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

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

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

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

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

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

Теперь добавим торговый знак Designery в нижний правый угол страницы. Это подчеркнет необычное расположение логотипа в правой колонке.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разместим форму для подписки на рассылку поближе к верхней части страницы

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

Чтобы обеспечить переход от статьи к статье, необходимо добавить дополнительные навигационные элементы над рекламным блоком

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

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

Сетка базовых линий с шагом 18 пикселов поможет определиться с размером, если для нахождения высоты строки использовать число, кратное 18. Три базовые строки (54 пиксела) – это слишком много, поэтому используем две строки (36 пикселов). Для высоты строки 36 пикселов следует выбрать размер шрифта чуть меньше. Давайте возьмем шрифт без засечек (Arial или Helvetica) и кегль 34 пт, чтобы обеспечить гармоничное соотношение между размером и интерлиньяжем.

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

Добавим стили для оформления названия статьи, имени автора и аннотации

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

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

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

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

Добавим стили для оформления иллюстраций с подписями

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

Добавление стиля цитат в основной текст

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

Добавление стиля списка в основной текст

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

Готовый дизайн статьи

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

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

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

Каркас информационной страницы

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

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

Небольшой эскиз новой страницы

Информация так же сгруппирована в три колонки, но разделение между ними выражено не так сильно, как при соотношении областей 2:1, использованному на странице статьи. Мы хотим заставить колонки работать как единый объект, даже если они будут отделены друг от друга.

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

Проводя линию под элементами аккаунта, мы формируем область с другой динамикой

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

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

Расположим пиктограммы проектов в середине страницы

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

50 х 50 пикселов. Благодаря этому в данной области поместятся много пиктограмм – восемь в ширину и четыре в высоту. Поскольку это лишь малая толика из тысяч пользователей Designery.us, нужно разместить в правом нижнем углу блока ссылку, позволяющую найти других пользователей. Для этого можно объединить две соседние области, отведенные под пиктограммы.

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

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

Аватары пользователей располагаются над названиями проектов

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

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

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

Добавим в верхний правый угол страницы функцию поиска по датам

Окончательный дизайн информационной страницы

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

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

Информационная страница с сеткой базовых линий

Элементы оказались на сетке базовых линий благодаря подзаголовкам Explore, Top Designery.users, Browse by Date и Hot Projects on Designery. В шаблоне страницы статьи линии над каждым подзаголовком были привязаны к базовой сетке, а текст подзаголовка выравнивался по вертикали относительно пространства, образованного двумя базовыми строками. Кроме того, между началом текста и базовой строкой сделан отступ величиной в одну строку.

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

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

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

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

Вверху – эскиз дизайна; внизу– макет страницы профиля

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

Структура страницы как «проекция» рекламного блока

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

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

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

Добавление разделительных линий для разметки страницы

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

Один из возможных вариантов размещения пользовательской аватарки

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

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

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

Если фотография находится сверху, текст под ней кажется неупорядоченным

Другое расположение фотографии лучше подходит для отображения информации о пользователе

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

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

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

Область страницы под биографической информацией делится по уже знакомому нам принципу 2:1. Здесь так же можно поместить материалы трех разных типов: списки друзей, списки проектов и статистику активности. Наличие трех разных типов информации предполагает разделение этой области на три части, согласно принципу симметрии, реализованному на информационной странице.

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

Нижнюю часть страницы можно разделить на три равные области, согласно принципу симметрии, использованному на информационной странице

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

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

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

Менее симметричная структура лучше соответствует конкретным условиям

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

Альтернативный вариант отображения пиктограмм проектов

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

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

Вместо того чтобы взять концепцию представления пользователей с информационной страницы, мы создали новый вариант

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

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

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

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

Проект домашней страницы

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

На бумаге можно быстро и без лишней траты времени и сил проработать несколько разных вариантов компоновки страницы.

Домашняя страница не похожа на другие страницы сайта, поэтому создание эскизов особенно важно

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

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

Окончательный эскиз домашней страницы

Начнем с верхней части страницы. Оформление блока с логотипом бренда существенно отличается. Эта страница является «парадным входом» на сайт и поэтому выполняет дополнительные функции – она должна представить и кратко описать Designery.us новым пользователям. Для этого можно просто поместить слоган рядом с торговой маркой:

Designery – это место встречи дизайнеров-практиков, студентов и любителей.

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

Для этого переместим логотип левее под навигационные ссылки, а слоган расположим в блоке справа. Такое «нарушение» вполне обосновано, потому что, повторюсь, к домашней странице предъявляются особые требования. Бренд должен бросаться в глаза. Если вид домашней страницы будет отличаться от других страниц сайта, это только подчеркнет важность информации.

Изменяем расположение логотипа на домашней странице

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

За счет увеличения логотипа слоган сместился еще правее и сравнялся с ним по высоте. Данный визуальный эффект помогает восприятию материала слева направо, от логотипа к слогану, от понятия к пояснению.

Увеличенный логотип будет привлекать дополнительное внимание

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

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

Основная область разбивается на три колонки

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

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

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

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

Добавление аннотаций в нижнюю часть левой колонки

Это краткие аннотации, поэтому их расположение внизу колонки логически обоснованно. Наша цель – показать, что на сайте есть и другие аналогичные материалы. Реализуем эту мысль, добавив ссылку More Articles… в самый низ колонки.

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

Элементы, созданные для других страниц, например, форма для подписки на рассылку и список пользователей с фотографиями, будут располагаться в средней колонке

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

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

Добавление материалов в крайнюю правую колонку

Как и на странице со статьями, пользователи должны иметь возможность перейти по ссылке к другим материалам того же типа. Одной из целей домашней страницы является обзор материалов, доступных на сайте Designery.us. Поэтому возьмем оформление ссылки More Articles… и используем его для списка пользователей и проектов внизу второй и третьей колонки. Кажется, что страница упорядочена по простому принципу: статьи в левой колонке, пользователи в середине, а проекты справа. С одной стороны, это не совсем верно – материал все-таки более разнообразен. Но с другой стороны, это так – ведь форма подачи материала имеет упорядоченный вид. Во многих случаях этого достаточно.

Готовая домашняя страница

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

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

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

СТРАНИЦА АВТОРА

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

СТРАНИЦА ABOUT US

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

СТРАНИЦА АРХИВА

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

СТРАНИЦА ПРОЕКТА

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

СТРАНИЦА НАСТРОЕК

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

ШАБЛОН РАССЫЛКИ

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

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

Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих размер в зависимости от области просмотра.

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

Можно сказать, что при большом размере экрана сайт должен занимать всю доступную область, а при маленьком размере – соответствующим образом уменьшаться. Было бы не совсем справедливо утверждать, что «резиновая» верстка пытается подстроится под всех пользователей, но у нее близкая к этому задача. Интернет представляет собой конгломерат множества систем, которые обслуживают широкие группы пользователей способами, максимально учитывающими их индивидуальные потребности. Согласитесь, что одинаковое восприятие содержания или функциональности одного и того же сайта невозможно. Почему же внешний вид должен быть одинаковым для всех? «Резиновая» верстка больше подходит для Интернета и лучше учитывает его сильные и слабые стороны, чем страницы фиксированных размеров. Как уже было отмечено ранее, чем естественнее решение, тем оно эффективнее.

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

Дизайнеры-новаторы теперь могут заниматься так называемым «отзывчивым» веб-дизайном. Итан Маркотт, его активный сторонник, утверждает, что такой подход открывает новые возможности:

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

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

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

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

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

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

• 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).

• Система сетки – 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

• 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.

• 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).

• 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.

• 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.