Текст книги "Веб-дизайн"
Автор книги: Дмитрий Кирсанов
Жанр:
Интернет
сообщить о нарушении
Текущая страница: 6 (всего у книги 29 страниц) [доступный отрывок для чтения: 11 страниц]
Все рассмотренные выше технологии программирования, расширяющие возможности веб–страниц, предполагают пересылку на компьютер пользователя и последующий запуск на нем некоторого программного модуля, так или иначе связанного с «несущим» HTML-документом. Интересно, однако, рассмотреть здесь же серверные технологии программирования, предназначенные не для спецэффектов на экране пользователя, а для автоматической генерации посылаемых ему страниц (которые, в свою очередь, уже могут содержать программные вставки «уровня клиента»).
По некоторым оценкам, больше половины всех страниц в современном Интернете генерируются и обновляются динамически – на основе информации из баз данных, в ответ на действия пользователя или в зависимости от каких–то внешних обстоятельств (например, текущей даты или курса доллара). Простейшая технология такого рода, поддерживаемая почти всеми веб–серверами, называется SSI (Server Side Include, «Вставки на уровне сервера»). Возможности ее ограничены вставкой внутрь одного HTML-файла содержимого другого, автоматической установкой даты, подсчетом числа загрузок страницы и т. п. Из более сложных технологий создания динамических сайтов особенно популярны две: CGI и ASP.
Стандарт CGI (Common Gateway Interface, «Общий интерфейс шлюзов»), поддерживаемый большинством программ–серверов, не накладывает каких–либо ограничений на используемый язык программирования, а лишь перечисляет правила, которые должна выполнять программа, генерирующая веб–страницу, чтобы сервер мог запускать ее в ответ на запрос документа с определенным URL. Однако поскольку большинство таких программ пишутся на специализированном языке Perl, термины «CGI» и «Perl» часто употребляются как синонимы. Стандарт CGI достаточно прост и, в частности, ничего не говорит о взаимодействии с какими бы то ни было базами данных, оставляя этот аспект целиком на совести самой CGI-программы и того языка, на котором она написана. Язык Perl не является собственностью какой–либо фирмы, и существуют бесплатно распространяемые интерпретаторы этого языка для всех операционных систем.
Альтернатива CGI, появившаяся в последнее время, – язык ASP (Active Server Pages, «Активные страницы на сервере») фирмы Microsoft (вполне естественно, что поддержка ASP существует пока только в веб–сервере IIS этой же фирмы). asp–код хранится не в отдельных объектах, а встраивается прямо в HTML «активной» страницы, но в отличие от JavaScript никогда не выходит за пределы веб–сервера. Инструкции языка ASP позволяют генерировать фрагменты HTML-кода, выбирать один из вариантов кода в зависимости от каких–то условий, циклически повторять куски HTML с изменениями и т. п. ASP-файл может состоять целиком из ASP-инструкций, а может и быть чистым HTML без единой ASP-вставки; так или иначе, сервер отсылает броузеру только «сухой остаток» HTML после выполнения всех команд ASP. С практической точки зрения главным достоинством ASP являются развитые средства доступа к базам данных, многие из которых, как и веб–сервер Microsoft, работают на платформе Windows NT.
Основы дизайна
Я не очень–то погрешу против истины, сказав, что вся эта книга была написана ради единственной главы – той, которую вы начинаете читать. Уверенное владение современными технологиями веб–дизайнеру необходимо, однако в основе его мастерства лежат все–таки куда более фундаментальные и медленнее устаревающие знания.
От читателей моих статей по веб–дизайну, публикуемых по адресу www.webreference.com/dlab/, я получаю немало писем с одобрением их скорее теоретической, чем практической направленности (особенно выделяющейся на фоне бесчисленных сайтов с «How To» и «Top Ten Dont's», на разные лады повторяющих небольшой набор разрозненных практических советов). Многие читатели спрашивают, где начинающий веб–дизайнер – иногда поневоле, иногда по зову сердца окунувшийся в эту область творчества, но никогда не учившийся в художественном училище и даже не очень хорошо представляющий, чему там учат, – мог бы найти достаточно полный и в то же время по возможности популярный курс основ дизайна.
Хорошие книги по теории дизайна, конечно, есть. Но вместо того, чтобы опираться на авторитет классиков, я решил сам написать небольшое введение в предмет.
Поводов для такого решения несколько. Во–первых, тема моей книги – именно веб–дизайн, а не дизайн вообще. И хотя на теоретических основах это различие сказывается в последнюю очередь, некоторую интернетовскую специфи– ку полезно ввести уже на самом базовом уровне. Очевидно, хороших с дизайнерской точки зрения книг, написанных на этом новом материале, еще совсем немного, если они есть вообще (во всяком случае, на русском языке). Поэтому было бы глупо не попробовать свои силы в этой только что открывшейся области – тем более что, во–вторых, упомянутые выше статьи дали мне хороший задел для начала работы. Хотя эту главу, конечно, нельзя назвать автопереводом с английского, все же довольно многое в ней построено на материале моих статей.
Наконец, есть еще одна причина, без которой я бы не рискнул взяться за столь ответственное дело, как написание учебника дизайна. Причина эта заключается в свойствах дизайна как науки (разумеется, я вынужден здесь подходить к дизайну именно с этой точки зрения, поскольку «учебник искусства» – не очень–то осмысленное сочетание слов).
Подыскивая аналог теории дизайна среди наук традиционных, нельзя не заметить, что она стоит гораздо ближе к таким гуманитарным дисциплинам, как философия или филология, а не к точным наукам вроде математики. Как и в дизайне, в философии есть свои общепризнанные факты, принципы и подходы, истинность которых никто не подвергает сомнению. Однако ценность нового философского сочинения определяется все же свойствами скорее субъективными: новизной идей, убедительностью аргументации, иногда даже достоинствами литературного стиля. Философскую систему невозможно опровергнуть в принципе – она живет по своим собственным законам, и Витгенштейн не «опровергает» Платона, хотя и противоречит ему на каждом шагу.
Почти то же самое, с некоторыми оговорками, можно сказать и о любом дискурсе в области теоретического дизайна. Даже опираясь на примеры из практики, автор волен трактовать их сколь угодно субъективно (собственно говоря, многие категории дизайна и невозможно оценивать объективно) – так, как того требует выстраиваемая им система понятий. Вот почему я взял на себя смелость представить на суд читателя свою собственную, если так можно выразиться, философию дизайна.
Как учиться дизайну. Философия эта, как и любая философия, родилась из наблюдений, размышлений и сопоставлений. Я совсем не хочу, чтобы вы всегда и во всем разделяли мою точку зрения; моя цель – не вербовать сторонников, а сделать так, чтобы после прочтения этой книги вы глубже понимали свое ремесло и свободнее чувствовали себя с палитрой дизайнера в руках. Поэтому я призываю вас сразу же проверять все почерпнутые здесь знания своей практикой и анализом чужих работ и не пугаться, если ваши выводы не совпадут с моими. (И разумеется, я всегда буду рад услышать от вас любые комментарии или возражения как по теоретическим, так и по самым что ни на есть практическим вопросам веб–дизайна. Пишите мне по адресу: mailto: [email protected].
Самостоятельный теоретический анализ, критика и разбор чужих творений – один из лучших способов обучения практическому дизайну. Резонерствуйте, абстрагируйте, сочиняйте теории на ходу, спрашивайте себя «а что, если»; загрузите копию нравящейся вам страницы в графический редактор и посмотрите, можете ли вы ее улучшить или хотя бы изменить, не ухудшив. Немедленно обобщайте все, чему вы научились на практике и старайтесь сразу же делать практические выводы из своих теорий. Не огорчайтесь, если наткнетесь на противоречие, – ведь осознанное противоречие есть лучший двигатель мысли.
Очевидно, совет этот подходит не всем – вы можете быть одаренным дизайнером и притом не иметь никакой склонности к теоретизированию. Но и в этом случае для развития художественных способностей нет ничего лучше, чем свободное экспериментирование как с чужими работами, так и на чистом листе бумаги. В упражнениях этих нужно найти оптимальное соотношение бесцельности и целенаправленности; вы не должны при этом зависеть от вкусов и потребностей какого бы то ни было заказчика (хотя стоит прислушиваться к мнению собратьев–дизайнеров), но в то же время вы сами должны каждый раз ставить себе жесткую цель – скажем, повторить виденный где–то эффект, опробовать новый шрифт или составить красивую композицию из одних только треугольников или букв «Ю» из разных шрифтов (писатели знают, как хорошо развивает словарный запас сочинение рассказов на заданную букву). Удовлетворение от достижения цели, даже если цель эту вы придумали для себя сами, – лучший стимул к продолжению занятий
Дизайн и «чужое творчество». Попробуем теперь определить место той области визуального творчества, которой мы собираемся заниматься, среди других видов дизайна. Из жанров более или менее традиционных веб–дизайн ближе всего стоит к дизайну книг и журналов, скрещенному с дизайном интерактивных компьютерных программ. Кое–какие черты он унаследовал также от дизайна рекламы, теле – и видеопродукции. Пожалуй, вернее всего определить эту смесь термином информационный дизайн, так как его главное назначение – помогать потребителю воспринимать и усваивать некую информацию, а не, скажем, пользоваться вещью (промышленный дизайн) или делать выбор (реклама).
Что же определяет дизайн как таковой, что отличает его от других визуальных искусств? Помимо очевидно утилитарного назначения, одно из главных отличий заключается в том, что дизайнер использует в своей работе – а нередко и кладет в ее основу – не им созданные художественные ценности. Не только текстовое содержимое сайта или страницы принадлежит обычно другим людям; норма в профессиональном дизайне сегодня – использование покупных фотографий, заказной графики, не говоря уж о создаваемых специализированными компаниями шрифтах. Как и в других областях массового производства (а дизайн в современном обществе – очень даже массовая индустрия), разделение труда дает наилучшие результаты: скомпоновав работу профессионального фотографа, профессионального художника и профессионального автора текста, дизайнер обычно получает лучший результат, чем если бы всем от начала до конца пришлось заниматься ему одному.
Веб–дизайн, однако, в массе своей есть явление любительское – и таким он, по–видимому, останется в обозримом будущем (если только, конечно, в дизайнера не превратится каждый второй житель планеты). Это не значит, тем не менее, что любители лишены возможности пользоваться продукцией профессионалов. Вы вполне можете позволить себе купить для своего любимого проекта качественный цифровой шрифт или сканированную фотографию, и чем больше будет покупателей у компаний, торгующих таким товаром, тем ниже будут цены (которые и без того вполне демократичны).
Разумеется, чтобы решиться потратить даже несколько долларов на образец «чужого творчества», вы должны хорошо представлять себе, для чего он вам нужен, – что само по себе уже предполагает некую степень профессионализма. К сожалению, многие начинающие дизайнеры предпочитают вместо этого пользоваться наихудшей из всех разновидностей «чужого творчества»: рисуемыми и бесплатно раздаваемыми такими же любителями кнопками, линейками, фонами и прочей «графикой для оформления сайтов» (см. также стр.153).
Материалы и инструменты. Эта глава состоит из двух частей. В первой части рассматриваются те абстрактные материалы, с которыми работает дизайнер: размер, форма, цвет, текстура и шрифт. Эти визуальные аспекты объектов – основные краски на вашей палитре дизайнера, и чтобы уметь пользоваться ими, вы должны знать их характерные свойства, сильные и слабые стороны и поведение в разных ситуациях.
Но чтобы научиться строить здания, недостаточно знать свойства кирпичей. Вторая часть главы (начиная со стр.149) расскажет вам о фундаментальных принципах дизайна, определяющих, что можно и чего нельзя, что хорошо и что плохо, как среди бесчисленного множества сочетаний элементов отыскать наилучшее. Эти принципы – единство, баланс, контраст, динамика и нюансировка – суть те инструменты, которыми вы будете работать с материалами своей композиции.
Пространственные отношения
Идет ли речь о дизайне или о любом другом искусстве, ориентированном на визуальное восприятие (живописи, скульптуре или даже сочинении узоров для тканей), любую композицию всегда можно разбить на элементы, связанные между собой разного рода отношениями – отношениями баланса, контраста, вложенности, последования и т. п.
Эти отношения опираются на (точнее даже, выражаются через) различные визуальные аспекты объектов: их размеры, форму, взаимное расположение, цвет. В этом разделе мы рассмотрим самую важную разновидность отношений внутри композиции – пространственные отношения, к которым относятся пропорции (соотношения размеров) и взаимное расположение элементов.
Начнем мы, однако, не с отношений размеров, а с размера как такового. Характеристический размер – одна из определяющих любого визуального жанра («станковая» и «монументальная» живопись прежде всего различаются своей шкалой размеров), так что более детальные (и более технические) сведения о размерах в веб–дизайне вы найдете в. главе, посвященной специфике веб–дизайна как отдельного жанра (стр. 175). О некоторых особенностях компьютерной графики, проявляющихся только в малых размерах, вы узнаете из гл. IV (стр. 251). Пока же мы ограничимся обсуждением того, как размер влияет на визуальное восприятие и как он соотносится с формой, цветом и другими аспектами элементов композиции.
Понятие «размера» интуитивно ясно всем, а геометрия, более или менее знакомая нам со школьных времен, дает ему вполне строгое толкование. Но дизайн – это не геометрия, и элементы дизайн–композиции – это не бесцветные идеальные геометрические фигуры. Дизайнера должно интересовать прежде всего восприятие, ощущение размера, а не сам размер в тех или иных единицах длины. На восприятие зрителем размера (а в более общих терминах – даже не размера, а «заметности», «активности») элемента в композиции влияет множество факторов.
Относительность размера. Первый и самый существенный фактор – размер всей композиции, частью которой является элемент. Человеческое восприятие необычайно гибко, и когда мы рассматриваем миниатюру на перстне, наши понятия о большом и маленьком совсем другие, чем когда мы смотрим на фреску во всю стену. По сути, в дизайне нет понятия абсолютного размера, а есть лишь относительный, кажущийся, перцептивный размер в данных условиях и данном окружении. Редко когда можно заимствовать элемент из одной композиции в другую, пусть даже почти идентичную, без подгонки его размеров по месту (то же, конечно, справедливо и в отношении других свойств объектов). И никогда нельзя устанавливать размеры объектов, исходя из чисто умозрительных соображений – вам обязательно понадобится ручная, «на глазок», подгонка с тем, чтобы элемент не обязательно был, но обязательно казался нужного размера.
Приспособляемость восприятия к широчайшему диапазону условий хорошо известна фотографам, которые знают, что человеческому глазу совершенно нельзя доверять в определении условий освещенности – нередко сцены, мягко и отчетливо освещенные с точки зрения человека, на снимке (если не применялась вспышка или другое искусственное освещение) выходят слишком темными и контрастными. Поэтому профессиональные фотографы умеют «отключать» свою врожденную приспособляемость и гораздо более реалистично, чем простые смертные, оценивают общий уровень и качество освещения даже без использования технических средств.
Форма и размер. Зачастую объекты имеют сложные, почти аморфные (стр. 100) очертания, затрудняющие даже приблизительное определение их размеров. Взять, например, букву позаковыристее из какого–нибудь шрифта с засечками – от каких точек правильнее всего отсчитывать ее ширину и высоту?
Интуитивно ясно, что такого рода сложные формы распадаются на «важные» (в нашем случае это основные штрихи буквы) и «неважные» (засечки) элементы, и при определении субъективного размера неважные элементы учитываются лишь частично или игнорируются вообще. Важность компонентов формы, однако, сама зависит не только от формы, но и от размера – в крупном кегле засечки труднее игнорировать, чем в мелком. Соотношение важных и неважных частей (их можно также назвать «ядром» и «оболочкой») определяет компактность формы, очень сильно влияющую на ее воспринимаемый размер
Рис. 2 Оптическая иллюзия, демонстрирующая влияние компактности формы на воспринимаемый размер: горизонтальный отрезок в (б) кажется длиннее, чем в (а), хотя их длина абсолютно одинакова
Рис. 3 В (а) круг кажется уже, чем равновеликий ему квадрат; в (б) увеличенный фрагмент буквы с закруглением (справа) выступает вниз за базовую линию, проведенную по низу букв без закруглении (показаны строчные буквы «и» и «о» из шрифта Тайме)
(рис. 2). Теоретически максимальной компактностью обладает окружность (не имеющая «оболочки» вообще), минимальной – сложные фигуры с выступами и пустотами, лишенные какой–либо логики формы.
Но это лишь один из аспектов. При всевозможных выравниваниях элементов друг относительно друга (стр. 86) большое значение имеет то, насколько резко форма кончается в направлении, перпендикулярном отсчитываемому размеру. Так, круг и квадрат на рис. 3, а одинаковы по ширине, но квадрат кажется немного шире из–за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из–за этого, например, во всех шрифтах буквы округлой формы («о», «с») выступают вниз за базовую линию шрифта – только эта небольшая (2–3 %) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке (рис. 3, б).
Шрифты подсказывают еще несколько специфических иллюзий восприятия размера: вертикальные линии кажутся тоньше равных им по толщине горизонтальных (поправка на этот эффект есть даже у простейших рубленых шрифтов, не говоря уж о шрифтах с засечками, у которых вертикальные штрихи обычно намного толще горизонтальных), а изогнутые тоньше прямых (отсюда – утолщения на закруглениях, к примеру, буквы «В»). Наконец, на восприятие размера влияет симметрия формы: симметричные фигуры кажутся более компактными и меньшими по размеру, чем равновеликие им несимметричные.
Искусство выравнивания текста. Рассмотрим более подробно пример с различными формами букв. Допустим, стоит задача визуально выровнять правый край строки текста по некоей вертикали – например, по габаритной вертикали прямоугольника, под или над которым расположен текст. Если используется шрифт без засечек и текст кончается, например, буквой «н», никаких проблем не возникает: мы просто выравниваем правый кран последней буквы по требуемой вертикали. Если же последней буквой является, скажем, «т», буква с закруглением типа «ь» или же «н» из шрифта с засечками, то выступающие горизонтальные штрихи или закругления обязательно должны немного свешиваться за вертикаль, выравнивания. Если же в конце стоит точка или запятая, се нередко выносят за линию выравнивания целиком (так называемая «висячая пунктуация», пример которой показан на рис. 38 на стр. '145). Засечки, впрочем, бывают разные. У шрифтов типа новой антиквы (рис. 4, б) о классификации шрифтов см. стр.126) тонкие засечки соединяются с прямолинейным и вертикальным основным штрихом под прямым углом. Напротив, в большинстве шрифтов классической и переходной антиквы (рис. 4, б) более толстые засечки соединяются с основным штрихом с помощью широких плавных закруглений, а основной штрих имеет иногда сложную, вогнутую в центре форму. Очевидно, что засечки второго типа гораздо больше добавляют к видимой ширине буквы и выносить их за линию выравнивания нужно в меньшей степени. Кроме того, как я уже упоминал, величина этой поправки зависит от размера букв; сильнее всего видимая ширина букв отличается от фактической для надписей мелким кеглем (это одна из причин, по которым для них следует отдавать предпочтение шрифтам без засечек), а при достаточно большом кегле шрифта, когда засечки хорошо различимы, такая коррекция размера может оказаться ненужной и даже вредной.
Цвет и размер. Поскольку понятие «воспринимаемого размера» тесно граничит с понятием «заметности» элемента, вполне естественно, что цвет может существенно влиять на эту характеристику. Чем контрастнее цвет элемента на фоне его окружения, тем он заметнее и тем кажется больше. У этого правила, однако, есть и обратная сторона: если контраст между объектом и фоном слишком мал, границы его становятся трудноразличимыми и субъективно он может восприниматься большим, чем на самом деле (особенно если общий спектр композиции достаточно темен – «у страха глаза велики» отчасти и потому, что страх может вызываться темнотой).
Кроме того, в одних и тех же условиях по–разному действуют теплые и холодные цвета (стр. 105). Теплый цвет привлекает внимание к элементу, делает его более активным, более близким и, следовательно, большим по субъективному размеру; холодные цвета, наоборот, отдаляют и уменьшают объект.
Текстура и размер. Текстура поверхности (в том ее, достаточно общем, определении, которое дается на стр.116) также не может не влиять на воспринимаемый размер объекта. Поскольку ярко выраженная текстура обычно применяется лишь к нескольким центральным элементам композиции, служа для их акцентирования, очевидно, что такая текстура, как и контрастный цвет, должна вызывать увеличение субъективного размера. Кроме того, любая текстура усложняет облик предмета, делает его неоднородным, '|то также подталкивает наше подсознание к «растягиванию» воспринимаемого образа объекта, чтобы «дать место» всем его прожилкам, морщинам и пупырышкам.
Рис. 5 В (а) левый прямоугольник кажется уже, чем правый, хотя в (б), наоборот, левый квадрат выглядит шире правого. На самом деле ширина всех четырех фигур одинакова
Рис. 6Золотое сечение (sectio aureu): b так относится к а, как а к сумме а + b (при этом b = 0,618а). С древних времен золотое сечение считается самой совершенной, гармоничной, уравновешенной пропорцией
Простые, геометрические текстуры (стр. 118) обычно в более сильной степени обладают эффектом «раздувания» форм, что объясняется их большей регулярностью, предсказуемостью и оттого более высокой визуальной плотностью. Максимума этот эффект достигает у геометрических узоров с элементом некоторой средней величины, тогда как у слишком мелких или слишком крупных узоров он невелик.
Если элементы узора или текстуры вытянуты в каком–то одном направлении, сама фигура также будет выглядеть удлиненной в этом направлении и сплющенной в перпендикулярном (рис. 5, а). На этом основан известный совет полным людям носить одежду с продольными, а ни в коем случае не поперечными полосами. Интересно, однако, что именно в случае узора из простых полосок следование этому совету может дать совершенно обратный эффект: так как при движении глаза поперек полос узор выглядит значительно пестрее и потому визуально «тяжелее», чем вдоль, полосатый квадрат всегда кажется шире в направлении, перпендикулярном полосам (рис. 5, б).
