Дизайн для НЕдизайнеров. Робин Вильямс. The NonDesigners The NonDesigners
 Скачать 6.88 Mb.
|
|
72 Часть 1. Правила дизайна Внизу вы видите типичный рекламный модуль из телефонного справоч- ника. Кроме всего прочего, нехорошо, что текст набран шрифтом практи- чески одной жирности и одного кегля. В результате все слова имеют почти одинаковое значение: «Builders Exchange Member» (участник строитель- ной биржи) визуально так же важны, как «Remodel and Repair Specialists» (специалисты по ремонту и реконструкции). Но правильно ли это? Определите, на что необходимо в первую очередь обратить внимание читателя, и привлеките его при помощи контраста. А потом усильте кон- траст, применив выравнивание и принцип приближенности. С чего начать улучшение этого модуля? Определитесь с центром внимания, а затем сделайте его заметным, увеличив кегль шрифта и выбрав жирное начертание. Первые буквы сделайте прописными, откажитесь от капители. Решите, на какие группы будет разбита информация, и объедините соответствующие элементы (правило приближенности), оставляя между группами свободное пространство, подчеркивающее взаимосвязи между ними. Расположите все элементы вдоль жесткой линии выравнивания. Удалите конфликтующие элементы: непонятно, зачем нужна такая гипертрофированная рамка, ведь она не имеет здесь первостепенного значения; читателю необходимо помочь сосредоточиться на сути рекламы, а здесь на значительную часть его внимания претендуют звездочки; углы вполне можно оставить пустыми – одного орла вполне достаточно! 73 Некоторые элементы можно без опасений сделать маленькими, чтобы создать контраст с крупными элементами и свободное пространство. Достаточно привлечь читателей, создав центр внимания, и они, заинте- ресовавшись, прочитают и мелкий текст. Если же заинтересовать их не удастся, то не будет иметь никакого значения, насколько крупными вы сделаете элементы оформления. Имейте в виду, что действуют и все остальные правила: приближенности, выравнивания и повтора. Они создают общий эффект. Очень редко при формировании страницы применяется лишь какой-то один принцип. Кто-то может возразить, что это объявление не позволяет судить об индивидуальности хозяина бизнеса, тогда как предыдущее как раз позволяет. Но если исходить из предположения, что рекламное объявление должно привлекать людей, желающих потратить деньги, то какое из них произведет на потенциального клиента впечатление бoльшего профессионализма и надежности? Посмотрите, как и где именно применяются в нем принципы повтора и контраста. Этот рекламный модуль будет напечатан в телефонной книге, поэтому целесообразно применить принцип повтора, набрав номер телефона крупно и выделив его жирным шрифтом. П Я Т Ь : К О Н Т Р А С Т 74 Часть 1. Правила дизайна Из всех принципов дизайна интереснее всего применять принцип контра- ста, и эффект при этом достигается самый впечатляющий! Несколько про- стых изменений способны сделать заурядную работу очень эффектной. Помните рекламный модуль с ковбоем из главы 2? Это опять он, и все такой же немного вялый. А теперь взгляните, каким он стал, после того как мы добавили немного контраста (на противоположной странице). Найдите как минимум четыре отличия, вызванных добавлением контраста. 75 На какое из этих двух объявлений вам бы, скорее всего, захотелось по- смотреть второй раз? Вот она, сила контраста: затраты те же, а эффект куда сильнее. Всего несколько простых изменений, но какая потрясаю- щая разница в ощущениях! Поменяв буквы в заголовке с прописных на строчные, я освободила место, смогла увеличить кегль и выделить заголовок жирным шрифтом. Чтобы соблюсти принцип повтора, я набрала тем же шрифтом слова «Be a Cowboy» в нижней части модуля. Укрупнила буквы вводного текста каждого предложения, чтобы он был немного заметнее. И почему бы не увеличить ковбоя, чтобы он стал действительно большим (не будьте мямлей!). Роста он и вправду немаленького, но очень светлый, а потому не конкурирует с заголовком. П Я Т Ь : К О Н Т Р А С Т 76 Часть 1. Правила дизайна Конечно, редко необходимо усилить только контраст, но очень часто после этого все остальные аспекты приходят в норму. Например, эле- менты, создающие контраст, иногда могут применяться для реализации принципа повтора. Это объявление было напечатано в одной небольшой газете. Контраста в нем явно недостаточно (еще надо отметить выравнивание по центру, унылый шрифт, пренебрежение принципами повтора и приближенности). В оформлении нет ничего, что сообщало бы желание прочитать этот документ. Щенок прелестный, но и только. Впрочем, нельзя сказать, что контраста и повтора нет совсем (кстати, где они?), но они какие-то чахлые. Дизайнер сделал попытку, но проявил излишнюю застенчивость. Вам наверняка приходилось видеть (а может, и создавать) массу подобных работ. В этом нет ничего страшного. Теперь-то вы знаете все. 77 Может показаться, что объявление, расположенное внизу, радикально отличается от предыдущего в лучшую сторону, но в действительности оно представляет собой лишь результат применения четырех основных принципов. Итак, перечислю шаги, которые необходимо предпринять, чтобы превра- тить объявление на левой странице разворота в то, что расположено выше. Избавьтесь от шрифтов Times Roman и Arial/Helvetica. Исключите их из своей палитры шрифтов палитры шрифтов палитры шрифтов палитры шрифтов палитры шрифтов. Поверьте на слово. (И еще избавьтесь от шрифта Sand.) Долой выравнивание по центру выравнивание по центру выравнивание по центру выравнивание по центру выравнивание по центру. Знаю, что это нелегко, но без этого не обойтись. Потом, когда ваш глаз станет более изощренным, вы сможете вернуться к этим экспериментам. Найдите самый интересный (или самый важный) элемент на странице и подчеркните подчеркните подчеркните подчеркните подчеркните его! В данном случае наибольший интерес представляет морда собаки, а роль самого важного элемента по праву принадлежит названию магазина. Какой смысл рекламировать магазин, если его имя никому неизвестно? Важнейшие элементы надо располагать поблизости друг от друга, чтобы внимание внимание внимание внимание внимание читателей не рассеивалось не рассеивалось не рассеивалось не рассеивалось не рассеивалось. Разбейте информацию на логические группы. Разделить элементы или, наоборот, организовать связи между ними вам поможет свобод- ное пространство. Найдите элемент, подходящий для претворения в жизнь принципа повтора повтора повтора повтора повтора (не упуская из вида ни один элемент, отвечающий за контраст). И самое главное - добавьте контраст контраст контраст контраст контраст. На приведенном выше объявле- нии черный цвет контрастирует с серым шрифтом, белым цветом, выбранной гарнитурой и начертанием. Над каждым принципом надо работать по-отдельности. Результат работы вас поразит – это я гарантирую. П Я Т Ь : К О Н Т Р А С Т 78 Часть 1. Правила дизайна Пример, расположенный ниже, взят из главы 2, в которой мы говорили о приближенности. Вполне приятно выглядит, но на следующей страни- це показано, какого эффекта можно достичь при помощи небольшого уси- ления контраста. На этой веб-странице принцип контраста уже воплощен, но его можно усилить, применив и к некоторым другим элементам. Как добавить контраст за счет изменения цвета? А за счет размера? 79 Надеюсь, вы начинаете понимать, насколько важен контраст, и как на самом деле нетрудно его усилить. Надо только ясно осознавать это. А когда контраст уже создан, его элементы можно задействовать для ре- ализации принципа повтора. В данном случае я лишь добавила немного черного (или просто темного) фона и увеличила «ботаника». Страница стала динамичнее и интереснее. П Я Т Ь : К О Н Т Р А С Т 80 Часть 1. Правила дизайна В заключение о контрасте Контраст Контраст Контраст Контраст Контраст привлекает внимание читателя к странице; нашим глазам нра- вится контраст. Если страница оформлена при помощи двух неодинако- вых элементов (например двух гарнитур или разных длин строк), то эти элементы не могут быть подобными, они должны сильно отличаться друг от друга, иначе контраст не будет эффективным. Применение принципа контраста можно уподобить закрашиванию пят- на на стене – нельзя подобрать цвет приблизительно, совпадение цве- тов должно быть идеальным, а иначе приходится перекрашивать всю сте- ну. Как говаривала моя бабушка, «‘Почти попал’ считается, только когда бросаешь гранату или биту». Главная цель Главная цель, которую мы преследуем, применяя принцип контраста, двояка, и ее составляющие неотделимы друг от друга. Одна из них – сде- сде- сде- сде- сде- лать страницу интересной лать страницу интересной лать страницу интересной лать страницу интересной лать страницу интересной, потому что чем интереснее страница, тем больше вероятность, что ее прочитают. Другая – способствовать струк- способствовать струк- способствовать струк- способствовать струк- способствовать струк- турированию турированию турированию турированию турированию информации. Необходимо обеспечить читателю возмож- ность сразу понять, как организована информация, увидеть логические связи между элементами страницы. Элементы, контрастирующие между собой, ни в коем случае не должны запутать, смутить читателя или со- здать центр внимания, который на самом деле внимание привлекать не должен. Как реализовать контраст Добавление контраста достигается за счет подбора шрифтов (об этом говорится в части II «Шрифтовой дизайн»), толщины линий, цветов, форм, размеров, распределения свободного пространства и т. п. Найти способ добавить контраст нетрудно и, наверное, это самый приятный и умиро- творяющий способ сделать объявление визуально интересным. Но де- лать это надо энергично. Чего следует избегать Не будьте мямлей. Уж если взялись добавлять контраст, не жалейте на это силы. Не пытайтесь создать контраст, противопоставляя «вроде бы толстую» линию той, что «вроде бы чуть потолще», а коричневый текст – черным заголовкам. Не допускайте наличия в объявлении двух или бо- лее шрифтов, похожих друг на друга. Если элементы не повторяют друг друга в точности, сделайте их разными! сделайте их разными! сделайте их разными! сделайте их разными! сделайте их разными! 81 6 6 6 6 6 Есть и еще один главный принцип, действующий в Дизайне (и в Жизни тоже): Не будьте мямлей Создавая свой Дизайн (или устраивая Жизнь), не бойтесь свобод- ного пространства, ибо на нем отдыхает глаз (и Душа). Не бойтесь нарушить центральную симметрию макета – это неред- ко усиливает эффект. Нет ничего плохого в том, чтобы сделать что- то неожиданное. Пусть слова будут очень длинными или, наоборот, очень коротки- ми; не стесняйтесь говорить громко или, наоборот, шепотом. К месту хорошо все. Не бойтесь сделать иллюстрации слишком заметными или очень маленькими – главное, чтобы они дополняли или усиливали ваш замысел. Посмотрим на этот довольно унылый титульный лист в свете каждого из рассмотренных принципов. Довольно унылый, но типичный титуль- ный лист: выравнивание по центру, строки равномерно заполняют страницу. Если бы вы не могли прочитать, что на нем написано, то подумали бы, что на странице перечислены шесть различных тем. Каждая строка кажется вполне самостоятель- ным элементом. 82 Часть 1. Правила дизайна Приближенность Если элементы имеют отношение друг к другу, сдвиньте их плотнее. В противном случае их надо изолировать. Расстояние между элемента- ми должно указывать на важность или прочность связей. Расположив заголовок и подзаголовок рядом, мы получили один четко обозначенный элемент вместо шести разрознен- ных. Теперь ясно, что две темы тесно взаимосвязаны. Когда мы отодвигаем строки с фамилией автора и датой издания, сразу становится понятно, что информация, содержащаяся в них (хоть и связана с заголовком и, наверное, важна) не является его частью. 83 Ш Е С Т Ь : О Б З О Р Выравнивание Обдумывайте каждый элемент, помещаемый на страницу. Чтобы при- дать цельность всей странице, выровняйте элементы по краю какого-либо объекта. Если этот принцип соблюдается неукоснительно, то вы може- те его изредка нарушать, и это не будет выглядеть ошибкой. Имя автора далеко от названия, но благодаря выравниванию между этими двумя элементами есть визуальная связь. Пример на предыдущей странице также выровнен, но по центру. Как видите, выравнивание по левому или правому краю (см. пример выше) создает четкую границу, линию, обеспечивающую уверенное движение взгляда. Кроме того, выравнивание по одному из краев обычно придает странице более утонченный вид, чем выравнивание по центру. 84 Часть 1. Правила дизайна Повтор Повтор – это эффективный способ создания цельного образа. При- киньте, какой из элементов, уже задействованных вами для реализа- ции принципа повтора (маркеров, шрифтов, линий, цветов и т. д.), можно выдвинуть на роль уникального повторяющегося элемента. По- втор помогает усилить у читателя чувство понимания сути данной ра- боты. Характерный шрифт названия повторяется в строке с именем автора, что усиливает связь между этими элементами, хотя физически они и отдалены друг от друга. Маленькие треугольники были добавлены специально для создания повтора. Все они направлены в разные стороны, но их форма достаточно индивидуальна, так что треугольники всегда можно узнать. «Цвет» треугольников – это тоже элемент повтора. Повтор помогает связать воедино отдельные элемен- ты дизайна. 85 Ш Е С Т Ь : О Б З О Р Контраст Эта страница сильнее притягивает взгляд, чем предыдущая, не так ли? Все дело в контрасте, который создается за счет противопоставления черного и белого. Способов добавления и усиления контраста много: при помощи линий, шрифтов, цветов, изменения пространственных взаимо- связей, направления текста и т. д. Вторая часть этой книги посвящена созданию контраста при помощи шрифтов. В данном случае добавление контраста свелось к добавлению черного прямоугольника. Я немного усилила контраст между элементами, набрав подзаголовок курсивом и противопоставив его основному заголовку и строке с именем автора. (Для заголовка выбран шрифт Bodoni Poster Compressed, а для подзаго- ловка – Bodoni Italic.) Как в этом примере реализо- ваны принципы приближен- ности, выравнивания и повтора? 86 Часть 1. Правила дизайна Короткий тест №1. Принципы дизайна Найдите семь отличий между этими двумя резюме. Обведите каждое из них и скажите, какой принцип дизайна тут нарушен. Что надо изменить? 87 Ш Е С Т Ь : О Б З О Р Короткий тест №2. Редизайн рекламы Перед вами рекламное объявление, взятое из телефонной книги. Пере- числите ее недостатки и пути их устранения. Подсказки Подсказки Подсказки Подсказки Подсказки. Сколько разных гарнитур в этом объявлении? Сколько спо- собов выравнивания? По какой линии следует выровнять все элементы? ПОЧЕМУ СТОЛЬКО ТЕКСТА НАБРАНО ЗАГЛАВНЫМИ БУКВАМИ? Объединены ли в группы близкие по смыслу элементы? Какие элементы пригодны на роль повторяющихся? Нужна ли здесь тяжелая рамка сна- ружи и тонкая внутри? Есть ли здесь центр внимания? Если нет, то поче- му, и как его создать? Приложите к объявлению кальку и обведите его контуры. Теперь, пере- мещая кальку по объявлению, обводите отдельные элементы так, чтобы они расположились на ней иначе, чем на исходном объявлении. Пере- верстайте его так, чтобы получилась более профессиональная, четкая и внятная реклама. Найдите применение каждому из принципов дизай- на: приближенности, выравниванию, повтору и контрасту. 88 Часть 1. Правила дизайна Заключение На этом часть, посвященная дизайну, заканчивается. Может быть, в ней маловато примеров. Но примеры окружают вас повсюду, и я больше все- го надеюсь, что мне удалось безболезненно привить вам обостренную обостренную обостренную обостренную обостренную зрительную чувствительность зрительную чувствительность зрительную чувствительность зрительную чувствительность зрительную чувствительность. Я подумывала о том, чтобы снабдить книгу приложением с готовыми вариантами дизайна, но, как совершен- но справедливо говорится в известной пословице, «не тот помог, кто рыбой накормил, а тот, кто ловить научил». Помните, что профессиональные дизайнеры постоянно «крадут» идеи, осматриваются в поисках источника вдохновения. Если вы изготавлива- ете афишу, то найдите афишу, которая вам по-настоящему нравится, и измените макет в соответствии со своим заданием. Поставьте в него собственный текст и графику – и афиша станет вашей, единственной и неповторимой. Найдите визитную карточку, шапку информационного бюллетеня по своему вкусу и творчески их переработайте, сделайте сво- ими. В процессе переработки они изменятся и станут вашими. Мы все так поступаем. Я очень советую вам прочитать (если, конечно, вы еще этого не сделали) книги The Mac is not a typewriter или The PC is not a typewriter. Если вы до сих пор печатаете два пробела после точек, подчеркиваете текст, не ста- вите правильные апострофы и кавычки (“ и ”, а не «), то в их прочтении назрела серьезная необходимость. А когда прочитаете данную книгу и усвоите все принципы, которые в ней рассмотрены, перейдите к книге Robin Williams Design Workshop. Она снабжена цветными иллюстрациями и посвящена более сложным во- просам дизайна. А пока желаю приятного чтения. Не скучайте. Не принимайте слишком серьезно все эти дизайнерские премудрости. Обещаю, что, если вы про- сто будете следовать этим четырем принципам, у вас будут получаться, интересные, живые, упорядоченные страницы, которыми вы будете гор- диться. 89 В этой главе мы займемся созданием пакета рекламных и вспомогатель- ных материалов для вымышленной компании под названием Url’s Internet Cafe 1 . Я буду говорить о массе приемов и трюков, но в каждом проекте, независимо от его величины, применение рассмотренных четырех прин- ципов будет для вас очевидным. Глава содержит рекомендации по разработке визитных карточек, фир- менных бланков, конвертов, флаеров, информационных бюллетеней, бук- летов, открыток для прямой почтовой рекламы, рекламных объявлений для публикации в газетах и сайтов. 1 Сайт UrlsInternetCafe.com действительно существует, но материалы, представ- ленные в этой главе, не предназначены для продажи. То есть они были для нее предназначены, но online fulf illment company, с которой мы работали, прекра- тила свою деятельность, и все наши замечательные материалы пропали. |