Дизайн для НЕдизайнеров. Робин Вильямс. The NonDesigners The NonDesigners
 Скачать 6.88 Mb.
|
|
118 Часть 1. Правила дизайна Хитрости дизайна газетной рекламы Одна из самых больших трудностей, связанных с газетной рекламой, – нехватка свободного места. Очень многие рекламодатели, заплатив за рекламную площадь, думают, что должны заполнить каждый клочок сво- бодного места, потому что он стоит денег. Контраст В газетной рекламе контраст необходим не только внутри собственно рекламного объявления, но и между объявлением и окружающими его материалами. И в этом случае лучший способ создания контраста обес- печивает именно свободное пространство. Обычно газетные страницы «упакованы» очень плотно. Поэтому рекламное объявление, автор кото- рого не поскупился на свободное место, выделяется, и взгляд читателя просто обречен задержаться на нем. Поставьте пару экспериментов. От- кройте газету (или телефонную книгу) – гарантирую, что если там есть свободное пространство, ваш взгляд устремится именно туда. А все по- тому, что свободное пространство сильно контрастирует с плотно за- полненной страницей. При наличии свободного пространства нет никакой необходимости в крупном жирном заголовке, старающемся заглушить все вокруг. Вмес- то тяжелой гарнитуры вполне может подойти красивая рукописная или классическая старого стиля. Выбор шрифта Газеты печатают на грубой пористой бумаге, краска на которой расплы- вается. Поэтому гарнитура с маленькими изящными засечками или тон- кими штрихами, которые расплывутся при печати, не годится, если только не сделать буквы достаточно крупными. Печать вывороткой Старайтесь обходиться без выворотки (печати белым шрифтом по чер- ной заливке), но если уж это неизбежно, выберите надежную гарнитуру, в буквах которой нет тонких штрихов, заливаемых краской при печати. И сделайте кегль чуть крупнее, чем для обычной печати, потому что бе- лые буквы на черном фоне кажутся более мелкими и тонкими, чем на самом деле (этот совет действителен для печати вывороткой вообще, а не только на газетной бумаге). 119 С Е М Ь : С Е К Р Е Т Ы И Х И Т Р О С Т И Веб-сайты К веб-дизайну применимы те же базовые принципы (контраст, повтор, выравнивание и приближенность), но особое значение приобретает по- по- по- по- по- втор втор втор втор втор. Остальные три принципа способствуют тому, что веб-страница выглядит прилично и осмысленно, но именно благодаря повтору посе- тители определяют, находятся ли они все еще на том же самом сайте, – необходима единая система навигации и стиль. Цели помогают достичь: повтор цветовой схемы, шрифтов, оформления кнопок или единый стиль графических элементов, расположенных на каждой странице в одном и том же месте. Веб-дизайн порядком отличается от дизайна печатных работ. Если вы совершенно незнакомы с веб-дизайном и хотите узнать, как к нему под- ступиться, изучите материал книги The Non-Designer’s Web Book. Усвоив базовый материал, изложенный в ней, переходите к книге Robin Williams Web Design Workshop Веб-сайт должен располагать к визитам, а перемещение по нему – не вызывать затруднений. Этот сайт прост и понятен. Google.com – отличный пример потрясающего, полезного и в то же время ясного и простого сайта. 120 Часть 1. Правила дизайна Ни в коем случае! Не заставляйте посетителей прибегать к прокрутке, чтобы увидеть ссылки переходов! Не выбирайте для гиперссылок синий цвет, принятый по умолча- нию. Это верный признак страницы, сделанной любителем. Не помещайте ссылки в большие ячейки таблицы с ярко очерченны- ми границами. Не располагайте на исходной странице ссылки на каждую страни- цу сайта. Объедините родственные страницы друг с другом. Текст не должен наезжать на левую границу окна броузера. Фон не должен быть светящимся, особенно если надписи выполне- ны светящимся шрифтом! Не заставляйте посетителя прокручивать страницу Не заставляйте посетителя прокручивать страницу Не заставляйте посетителя прокручивать страницу Не заставляйте посетителя прокручивать страницу Не заставляйте посетителя прокручивать страницу горизонтально! горизонтально! горизонтально! горизонтально! горизонтально! Старайтесь удержать ее ширину в пределах 800 пикселов. И особое внимание обратите на то, чтобы ширина таблиц не превышала 600 пикселов, иначе те, кто рискнет ее распечатать, будут очень злы на вас. 121 С Е М Ь : С Е К Р Е Т Ы И Х И Т Р О С Т И А вот это попробуйте… Старайтесь удерживать габариты домашней и входной страницы в пределах 800×600 пикселов. Посетитель не должен прибегать к прокрутке домаш- ней страницы, чтобы найти ссылки! Отсутствие изъянов веб-дизайна изрядно помогает вам продвинуться на пути к его совершенству. Посмотрите на сайты Peachpit.com или Adobe.com. Назовите хотя бы пять обстоятельств, благодаря которым посетитель всегда воспринимает сайт как единое целое. Чем именно обусловлены отличия между примерами на этих двух страницах. Если вы вслух сформулируете и достоинства, и недостатки дизайна, то сами больше преуспеете как дизайнер. 122 Часть 1. Правила дизайна Хитрости дизайна веб-страниц К двум самым важным факторам веб-дизайна относятся повтор повтор повтор повтор повтор и до- до- до- до- до- ходчивость ходчивость ходчивость ходчивость ходчивость. Посетителя нельзя заставлять додумываться, как ему взаи- модействовать с системой навигации, в каком именно месте сайта он находится, и там ли он вообще до сих пор или уже перешел на какой- нибудь другой сайт. Повтор Повторяйте конкретные визуальные элементы на каждой странице Повторяйте конкретные визуальные элементы на каждой странице Повторяйте конкретные визуальные элементы на каждой странице Повторяйте конкретные визуальные элементы на каждой странице Повторяйте конкретные визуальные элементы на каждой странице сайта. Благодаря этому не только посетитель будет знать, что он все еще здесь, но и сайт приобретет стилистическое и смысловое единство – чер- ты, присущие любому удачному дизайну. На страницах, заполненных контентом, посетитель должен найти нави- гацию на привычном месте, так же устроенную и оформленную. И дело не только в том, что благодаря этому посетителю легче сориентировать- ся на сайте, но и в том, что данный фактор объединяет объединяет объединяет объединяет объединяет страницы в одну группу. Удобочитаемость Из всех носителей, на которых можно встретить текст, к наименее отве- чающим требованиям удобочитаемости можно отнести монитор – не- важно, компьютерный он, телевизионный или входит в видеосистему. Поэтому текст, расположенный на веб-странице, нуждается в некоторой «настройке», призванной максимально улучшить его читаемость. Сделайте строку строку строку строку строку короче короче короче короче короче, чем в случае текста, ориентированного на бу- мажный носитель. Основной текст не должен занимать всю ширину веб- страницы, а это означает, что текст необходимо поместить в таблицу (или, по крайней мере, задать блочные отступы справа и слева). Строка не дол- жна быть настолько короткой, чтобы предложения были разорваны слиш- ком часто. Если вы задаете конкретный шрифт для текста (если не задаете, можете не читать этот абзац) – обычно это Helvetica или Arial, Times или Times Roman, – укажите перед Helvetica шрифт Geneva, а перед Times – New York. Благодаря этому на Macintosh текст будет отображаться намного четче и лучше читаться. Если вы работаете на Macintosh, установите в качестве шрифта по умолчанию New York вместо Times, и вы сильно удивитесь, увидев, насколько удобочитаемыми стали веб-страницы. Пе- ред печатью страницы снова установите Times. В качестве шрифта для основного текста веб-страниц отлично зарекомендовал себя шрифт Verdana, который за последние несколько лет проник практически во все операционные системы. 123 Øðèôòîâîé ДИЗАЙН Âòîðàÿ ÷àñòü ýòîé êíèãè ïîñâÿùàåòñÿ øðèôòàì, âåäü èìåííî íà íèõ è äåðæèòñÿ âåñü äèçàéí, íå òàê ëè? Çäåñü íàøå âíèìàíèå áóäåò ñîñðåäîòî÷åíî íà òîì, êàê îáåñïå÷èòü ñîñóùåñòâîâàíèå íåñêîëüêèõ øðèôòîâ íà îäíîé ñòðàíèöå. Âî ãëàâó óãëà ìû ïîñòàâèì ýñòåòèêó øðèôòà. Íî íå çàáûâàéòå: âàøà öåëü ñîñòîèò â òîì, ÷òîáû äîíåñòè äî àóäèòîðèè ñóòü ñâîåãî ñîîáùåíèÿ. È øðèôò äîëæåí ïîìîãàòü âàì â ýòîì. 124 Часть 2. Шрифтовой дизайн Êàêîé çäåñü äîëæåí áûòü øðèôò? Боги молчат. Они молчат, потому что не знают. Óèëüÿì Àääèñîí Äâèããèíñ (W. A. Dwiggins) 125 8 8 8 8 8 Любая печатная страница строится в первую очередь из шрифтов. Ино- гда дизайнеру хочется задействовать разные шрифты в оформлении, но бывает и так, что сделать это необходимо. Но вот вопрос: какие шрифты гармонируют друг с другом с, а какие – нет? В природе любые элементы, если их несколько, динамически взаимодей- ствуют между собой. На странице любого документа обычно обнаружи- вается не один шрифтовой элемент. Даже если в документе нет ничего, кроме текста, в нем, как правило, присутствуют заголовки, а если нет и заголовков, то есть хотя бы номера страниц. Расстановка элементов на странице определяет взаимоотношения между ними: гармонические, конфликтные или контрастные. Гармония Гармония Гармония Гармония Гармония возникает там, где применяются шрифты одной группы, внутри которой разнообразие стиля, размеров и т. п. минимально. Страницу нетрудно удержать в таком гармоническом состоянии, а документ при этом выглядит довольно спокойно и уравновешенно (можно сказать, официально). Иногда, впрочем, уравновешенность и спокойствие вырождаются в откровенную посредственность. Конфликтные Конфликтные Конфликтные Конфликтные Конфликтные отношения складываются между шрифтовыми элемен- тами, похожими друг на друга по начертанию, кеглю, жирности и т. д. Такое сходство играет роль возмутителя спокойствия, потому что зри- тельно элементы не гармонируют, но и не контрастируют. Поэтому они конфликтуют. Контраст Контраст Контраст Контраст Контраст возможен только в случае применения разных гарнитур и комбинирования элементов, явно отличающихся друг от друга. Ди- зайнерские работы, не оставляющие аудиторию равнодушной и при- влекательные визуально, содержат массу контрастных элементов, причем контраст в них подчеркивается. Оформляя страницу при помощи нескольких гарнитур, дизайнеры не- редко дают волю фантазии, интуитивно понимая, что какая-то гарнитура лучше выглядит, например, в крупных кеглях, а какая-то более заметна в жирном варианте. Однако осознанное применение контраста и спо- собность на него указать позволяют дизайнеру управлять им, быстрее выявлять первопричину конфликта и отыскивать более интересные ре- шения. Именно этому этому этому этому этому посвящена данная часть книги. 126 Часть 1. Правила дизайна Гармония Документ гармоничен, если он оформлен при помощи одной гарнитуры, а элементы страницы обладают такими же свойствами, что и данная гар- нитура. Возможно, в оформлении задействуется курсивное начертание, а заголовки набраны более крупным кеглем, чем основной текст. Доку- мент может быть украшен иллюстрациями и декоративными элемента- ми, но неизменным остается одно – ощущение гармонии. Гармоничное оформление в большинстве случаев производит довольно спокойное, и даже официальное впечатление. Конечно, в этом нет ниче- го плохого, просто о данном свойстве надо помнить. Пример гармоничного оформления, шрифт Cochin. Первая буква заметно крупнее остальных, есть и курсивное начертание (Cochin Italic), но общая тональность довольно приглушенная. 127 В О С Е М Ь : Ш Р И Ф Т Тяжелые буквы гармонируют с толстой рамкой. Тяжеловаты даже линии, обозначающие строки. Шрифт, тонкая рамка и изящные декоративные элементы в совокупно- сти формируют единый стиль. Знакомая картина? И неудиви- тельно: по этому образу и подобию создаются многие свадебные приглашения. 128 Часть 1. Правила дизайна Конфликт Конфликт в дизайне имеет место, если страница оформлена с примене- нием двух или больше похожих шрифтов – и не совсем разных, и не со- всем одинаковых. Мне много раз приходилось видеть, как студенты пы- таются подобрать шрифт, похожий на уже участвующий в оформлении страницы. Так делать нельзя. Если рядом находятся шрифты, имеющие слишком много общего, но чуждые друг другу, чаще всего это восприни- мается как ошибка. Корень зла в подобии. Гармония Гармония Гармония Гармония Гармония основательна и полезна, а конфликтов конфликтов конфликтов конфликтов конфликтов допускать не следует. Что вы думаете, когда, читая этот отрывок, доходите до слов «full of sound and fury» (Наполненная яростью и шумом)? Не удивляетесь, что они набраны другим шрифтом? Не кажется ли вам, что это ошибка? Вы морщитесь? И почему отрывок начинается с крупной прописной буквы? 129 В О С Е М Ь : Ш Р И Ф Т Приглядитесь к буквам «a», «t» и «s» в заголовке и основном тексте. Сходство между ними есть, но оно неабсолютно. Визуально толщина рамки, штрихов букв и линеек не гармониру- ет, но и заметного контраста между ними нет. Слишком много конфликтующих элементов для такой небольшой работы. Эта пригласительная открытка оформлена с участием двух рукописных гарнитур, имеющих много общего (они не идентичны, и в то же время между ними нет явных различий). Такими же конфликтны- ми чертами характери- зуется рамка. Оформле- ние в целом немного сумбурно. 130 Часть 1. Правила дизайна Контраст Нет такого качества в нашем мире, которое продолжало бы существо- вать вне контраста. Ничто не существует само по себе. – Герман Мел- вилл 1 Переходим к развлекательной части. Соблюдение гармонии не вызывает затруднений, создание – тоже, но лучше обойтись без него. Создавать контраст интересно и приятно. Вы уже знаете, что сильный контраст притягивает взгляд. И шрифт пре- доставляет самый простой, эффективный и приятный способ сделать дизайн более контрастным. 1 «Моби Дик», (глава 11), перевод Инны Бернштейн Здесь совершенно понятно, что слова «full of sound and fury» (наполненная яростью и шумом) набраны другим шрифтом намеренно. Благодаря шрифтовому контрасту весь отрывок пьесы зрительно сильнее волнует и привлекает читателя, передает ему более мощный эмоциональный заряд. 131 В О С Е М Ь : Ш Р И Ф Т Наличие шрифтового контраста в данном случае не вызывает сомнений (хотя все шрифты относятся к гарнитуре Antique Olive) – выраженное жирное начертание контрастирует с очень светлым. Очевидны и отличия между толщиной рамки и линеек, образующих строки. Приглашение оформлено при помощи двух шрифтов, абсолютно различных во многих отношениях. Насыщенность жирного шрифта оттеняется иллюстрацией, которая, кроме того, усиливает контраст между жирным и рукописным шрифтом, а также добавляет ощущение повтора. 132 Часть 2. Шрифтовой дизайн В заключение Контраст не только помогает улучшить общее впечатление о работе. Он также неразрывно связан с организацией документа и четкостью пред- ставления информации на странице. Помните: ваша главная задача – до- нести сообщение до аудитории, и объединение разных шрифтов должно облегчать ее решение, а не затруднять его. Шрифтовой контраст можно создать одним из шести ясных и действен- ных способов: варьируя кегль, жирность, цвет и начертание шрифта, на- правление, форму и структуру надписи. Их мы и рассмотрим ниже, по очереди. И хотя говорить я буду о каждом отдельно, редко удается получить ожи- даемый эффект при помощи одного из них. Воздействие на аудиторию удается усилить, комбинируя различия и подчеркивая их. Если не получается понять, чем плоха та или иная комбинация шрифтов, надо искать не различия, а сходство между ними. Зло таится именно в похожести. Создавая шрифтовой контраст, действуйте смелее! Однако… Неплохо бы сначала предпринять хотя бы краткий экскурс в классификацию шрифтов, и только потом осваивать способы создания контраста. Уделите несколько минут примерам на страницах следующей главы, стараясь обнаружить, какие именно черты шрифтов объединяют их в гарнитуры. Попробуйте найти пару примеров каждой гарнитуры, прежде чем перейдете к следующей. Полистайте журналы, книги, посмотрите на упаковки, любые образцы печатной продукции. Время, потра- ченное таким образом, поможет быстрее и тверже усвоить материал! 133 Сегодня в нашем распоряжении много тысяч различных шрифтов, и их количество увеличивается. Однако большинство шрифтов можно рас- пределить на шесть категорий. Прежде чем познакомиться с контрас- тами между шрифтами, вам следует узнать о сходстве разных групп шрифтов, поскольку именно сходство порождает конфликты при соче- тании шрифтов. Цель этого раздела – развить в вас чуткость к тонкостям буквенных форм. А в следующем разделе я покажу вам, как их комбини- ровать. Разумеется, вы столкнетесь и со шрифтами, которые не будут принадле- жать ни к одной из описанных категорий. Вообще-то можно выбрать не- сколько сотен различных шрифтов из всего многообразия – и вперед! Для нас сейчас главное – научиться вглядываться в шрифт более при- стально. Я расскажу о следующих шести типах шрифтов: Ñòàðûé ñòèëü (Odlstyle) Современный шрифт (Modern) Брусковые шрифты (Slab serif) Рубленые шрифты (Sans serif) Ðóêîïèñíûå øðèôòû (Script) Äåêîðàòèâíûå øðèôòû (Decorative) 134 Часть 1. Правила дизайна Старый стиль Шрифты старого стиля основаны на примерах рукописных работ – пред- ставьте клинообразное перо в руке писца. Все шрифты старого стиля имеют засечки (см. комментарии ниже), засечки строчных букв всегда располагаются под углом (что имитирует наклон пера при письме). Бла- годаря такому подражанию рукописному шрифту все изогнутые линии буквенных форм имеют переход от толстого штриха к тонкому, что тер- минологически называется «переход от толстой линии к тонкой». Кон- траст в толщине штриха относительно умерен, то есть колеблется меж- ду умеренно тонким и умеренно толстым. Если вы проведете линию че- рез самые тонкие части закругленного штриха, то эта линия будет диа- гональной. Это называется нажимом – шрифт старого стиля имеет диагональный нажим. Как вы считаете, все ли подобные шрифты однообразны? Не беспокой- тесь – они однообразны для всех, кто не занимался полиграфией. Имен- но благодаря этой «неброскости» шрифты старого стиля считаются луч- шими для набора длинного текста. У них крайне мало отличительных особенностей, которые могут мешать процессу чтения: такие шрифты не отвлекают много внимания. Если вы набираете длинный текст, который, как вы надеетесь, будет прочитан, отдайте предпочтение старому стилю. Диагональный нажим Засечка Засечки строчных букв располагаются под углом Плавный переход от толстого штриха к тонкому |