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

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

   Моим родителям, которые сделали все, что могли.

Глава 1. Введение

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

Точка

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

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

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

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

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

Заключительная рекомендация

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

Глава 2. Концепция

   Опытные графические дизайнеры, работающие в масс-медиа, хорошо знакомы с преимуществами дизайна, основанного на типографской сетке. Перечислим наиболее важные из них.
   • Сетки делают информацию упорядоченной, цельной и гармоничной.
   • Сетки позволяют предугадать местоположение информации, что облегчает ее восприятие.
   • Сетки позволяют добавлять новую информацию, не нарушения дизайнерской концепции.
   • Сетки облегчают коллективную работу над проектом, поскольку конкретные решения не наносят ущерба общей концепции.
   Это лишь несколько доводов, подтверждающих выигрышность дизайна на основе сеток, но до недавнего времени они упоминались, в основном, применительно к традиционному графическому дизайну. Меня удивляет, что до сих пор очень мало книг посвящены использованию сеток в цифровых СМИ и при создании пользовательских интерфейсов.
   В конце концов, монитор компьютера сам представляет собой тонкую сетку – экран заполнен точками с плотностью 72 пиксела на дюйм, которые образуют эквивалент листа миллиметровой бумаги.
 
   В доцифровую эпоху самые сложные и универсальные сетки рассчитывались с высокой точностью. Столь популярны они стали потому, что отражали существующую в природе математическую гармонию. В онлайновых СМИ математика присутствует не только в роли простого чертежного инструмента, на основе точных математических расчетов строятся и сетки. Каждая линия, блок или изображение, появляющиеся на цифровой сетке, возникают в результате расчетов, выполняемых компьютером.
   Поэтому компьютерную сетку можно воспринимать как структуру, которая возникает из двух точек, поставленных на пустом листе бумаги, – она не бросается в глаза, но тем не менее существует. В цифровых СМИ дизайн без сеток невозможен, потому что в основе компьютерного дизайна лежит сетка пикселов.
   Следовательно, веб-дизайнеры – во всяком случае те из них, кто склонен к порядку, – хотят влиять на элементы, размещаемые на экране монитора, управлять ими, чтобы подчинить себе эту реальность. Так что сетка оказывается естественным выбором.
   Рассматривая приведенные ранее преимущества использования сеток, легко сделать вывод, что они распространяются и на веб-дизайн:
   • Сетки добавляют упорядоченность, связность и гармонию веб-страницам с большим объемом информации.
   • Сетки помогают пользователям находить нужную информацию при переходе со страницы на страницу, что способствует улучшенному восприятию данной информации.
   • Сетки позволяют добавлять новую информацию без разрушения общей концепции, заложенную еще при разработке сайта.
   • Сетки облегчают совместную работу над проектом без ущерба для общей концепции сайта.
   Можно сказать, что эти преимущества становятся еще более заметными в Интернете, где структура и порядок ценятся больше, чем в печатных изданиях. Хотя основной способ доступа к информации в Интернете – это браузер (то есть программа, предназначенная для просмотра), пользователи все же чаще не просматривают, а ищут информацию и выполняют определенные задачи. Сетки идеально подходят для такой работы. Они помогают пользователям находить информацию, а веб-дизайнерам – размещать материал там, где его легко найти.
   Независимо от того, работает дизайнер в печатных изданиях, Интернете или других СМИ, сетки развивают его творческие способности.
   Для тех, кто мало знаком с сетками, это утверждение может показаться спорным. Многие новички считают, что сетки предъявляют слишком много требований к внешнему виду и стилю, что сетки ограничивают их свободу выражения и творческие порывы.
   Хотя эти мысли некогда были популярны и среди опытных дизайнеров, время показало, насколько они ошибочны. Не случайно свою замечательную книгу «Сетка» (1978)
   Аллен Хёрлберт начал с предупреждения:

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

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

   Называть сетку ограничивающей – все равно что называть ограничивающими язык или типографское дело.

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

Невидимый порядок

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

Краткая ретроспектива

   Вернемся на некоторое время в прошлое. Возникновение понятия типографской сетки относят к началу 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 веке упрощенный метод широко используется художниками, графиками, фотографами и дизайнерами (в меньшей степени архитекторами) для создания гармоничной композиции. Правило гласит, что эффективную композицию можно получить, разделив изображение натри столбца одинаковой ширины и три строки одинаковой высоты. На пересечении разделительных линий образуются четыре точки, на которых концентрируется внимание человека. Из правила третей следует, что за счет выравнивания элементов относительно этих разделительных линий или при размещении элементов в центральных точках можно сфокусировать внимание, вызвать максимальный интерес, передать энергию или напряжение.
   Возможно, из-за своей простоты правило третей является наиболее полезной из многочисленных «формул», описывающих эстетическую целесообразность. Ее простота убедительна, а деление на равные трети легко запомнить. Это особенно заметно, если сравнить данный метод с более сложными вариантами, рассмотренными ранее. Золотое отношение, последовательность Фибоначчи, да и другие математические исследования оказали неоспоримое влияние на теорию сеток, но в большинстве обычных ситуаций их используют существенно реже, чем методы попроще.