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

XX век

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

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

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

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

Интернет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Глава 3. Процесс

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

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

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

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

Этапы

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

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

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

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

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

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

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

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

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

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

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

Исследования и ограничения

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

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

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

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

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

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

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

 Технические ограничения определяют дизайнерское решение. К ним относятся разрешение экрана

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

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

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

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

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