[Bender]

Очередная статья которую я посчитал полезной для начинающих.

--------------------------------
Формируем стиль проекта

Антон Сакара

Спецвыпуск: Хакер, номер #050, стр. 050-012-1


--------------------------------------------------------------------------------

Ведущий дизайнер MTV Россия

Цвета, шрифты, основы композиции

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

От тебя требуется создать настолько удачную композицию, чтобы заказчик сказал «wow!» или хотя бы «неплохо!». Только в таком случае тебя посетит чувство выполненного долга: твой дизайн не так уж плох, а может, даже гениален! Что нужно для всего этого?

Во-первых, жди вдохновения (это как будто в тебя что-то вдохнули) . Не было, а тут раз - и появилось. Срочно начинать работу! Вдохновение надолго не задерживается. Один мой друг, он же известный дизайнер, говорит так: "Начинай работу не отходя от кассы". Послушай хорошую музыку, полистай дизайнерские книжки, зайди на www.computerlove.net - позволь всемирному культурному наследию заронить в тебя семя. При хороших условиях взойдет очень быстро.

Во-вторых, необходимы некоторые знания: вспомнить некоторые рецепты красоты не помешает. Пройдемся по основным понятиям дизайна, таким как шрифт, цвет, композиция и стиль.

Шрифт

Любой дизайнер, начинающий работу над новым проектом, сталкивается с проблемой выбора подходящего шрифта. Надо обязательно удивить всех красивыми буквами! Хочется сделать так, чтобы внешний вид сайта рассказывал зрителю намного больше, чем можно на нем прочитать. Большие и красивые буквы завораживают и влекут к себе как сирены Одиссея. В окне выбора шрифтов перебираешь сотни и тысячи гарнитур, ищешь самый подходящий, каких обычно набирается с неробкую дюжину. Как раз с этого и начинаются ошибки начинающих дизайнеров.

Во-первых, всегда хочется написать название проекта большими буквами. Когда я учился в Архитектурном институте, мы отличали новичков от тех, кто отучился перед поступлением в художественной школе, по размеру надписи "ПРОЕКТ" на планшете. Во-вторых, всегда тянет разнообразить написание текста. Начинающий дизайнер хочет показать всем, что у него много шрифтов и вообще он в этом деле виртуоз. Смотришь на веб-страничку и легко находишь пять-семь разных написаний. Чем важнее смысл текста, тем более вычурный шрифт. В-третьих, появляется желание приложить свою руку к великом делу типографики и помочь разработчику шрифта. Обязательно надо растянуть текст по вертикали или, еще хуже, по горизонтали, вписать его вдоль кривой или исказить каким-нибудь эффектом, например, "отражением в воде".

Рецепты красоты

Во всей композиции лучше использовать не более трех гарнитур (шрифтов).

Заголовки лучше писать "рублеными" шрифтами (Helvetica, Pragmatika, Arial, Helios). Если есть желание использовать декоративный шрифт с завитушками и вензелями, то используй не больше двух-трех слов, иначе у зрителя возникнут трудности с чтением. Они даже могут нажать на смертоносный крестик в правом верхнем углу браузера, и ты распрощаешься с этими пользователями навсегда.
Если текста много, пиши гарнитурой с засечками. Их еще называют "антиквы" - Times New Roman, Garamond, Journal, Baltica и т.п. Засечки помогают следить за словами по строкам и не сбиваться. Кстати, для этого можно использовать и рубленные шрифты: страничка будет смотреться прогрессивнее и свежее.

Не стоит деформировать шрифт. Поверь, это неблагодарный труд. Все, что тебе простит разработчик гарнитуры - это изменение расстояния между буквами (tracking), между строчками (leading), а также более плотную подгонку отдельных букв друг к другу, что допустимо в заголовках (kerning). Последнее как раз и отличает макет, сделанный профессионалом, от любительского. Буквы - самое совершенное изображение из тех, что придумал человек, и они заслуживают того, чтобы за ними нежно ухаживали.

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

Цвет

Ты можешь сколько угодно спорить со мной, но чаще всего закрывают после пяти секунд просмотра ту веб-страницу, дизайн которой выполнен на основе ярко-красного, зеленого или желтого фона, какой бы интересной она ни была. Глазное дно находится в катастрофической близости от мозга, который еще может пригодиться . То, что мы видим на экране монитора, является всего лишь комбинацией трех цветов: Red (красный), Green (зеленый) и Blue (синий). Задача дизайнера - уговорить всех троих хорошо поработать в коллективе и, как следствие, порадовать глаз зрителя. Для этого надо выяснить, что на самом деле любит этот "Мистер Глаз".

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

Рецепты красоты

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

Цвета, лежащие друг напротив друга (дополнительные), например, красный и зеленый, вряд ли уживутся на одной территории. Дело в том, что у них принципиальное противостояние вот уже несколько миллионов лет, примирить их - утопия. Но и утопия имеет право на существование, если ты задался целью создать дизайн в стиле "панк".

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

Композиция

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

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

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

--------------------------------------
Продолжение следует...

Bender добавил [date]1139309102[/date]:
Продолжение статьи: "Формируем стиль проекта".

-----------------------------------------------------------

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

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

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

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

Стиль

Существует огромное количество стилей, в рамках которых уже существуют правила построения композиции (когда нужно "сделать дизайн в стиле…"). Перечислять стили можно бесконечно, вот некоторые: корпоративный, традиционный, классический, хай-тек, гламур, панк, кибер-панк, стим-панк, трэш, винтаж, готика, дарк, диско, хип-хоп (граффити), хэви-метал, манга, техно, диджитал, электро, фьюче, барби, ретро 20-х, ретро 40-х, ретро 60-х, ретро 70-х, ретро 80-х, ретро 90-х (уже?!), милитари, родченко, дэвид карсон, рейв, прогрессив и другие.

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

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

Любое ретро делается очень просто: смотришь на оригинальные образцы и повторяешь, смешивая с современными элементами. Многим очень нравится копаться в устаревших формулах. С помощью них можно сделать все быстро, не напрягаясь, вызвав у зрителя ностальгию. Рецепт прост - вычисляешь тот период, когда представителям целевой аудитории было 5-15 лет от роду, и создаешь ретро-дизайн в стиле той эпохи. Успех гарантирован.

В каком бы стиле ты ни работал, результат должен оказаться простым для восприятия и в меру свежим по композиционному решению. Никому не нравится повторение старого, и без того избитого. Каждый дизайнер должен быть неповторим. Новое считается таковым только на момент производства: позже твое творение будут сравнивать с имеющимися в мировой копилке аналогами. Так как эта копилка постоянно растет и пополняется, то понятие о "модности" или "немодности" регулярно обновляется - держи руку на пульсе времени. Можно привести примеры того, что является наиболее актуальным в дизайне сейчас, но уже через полгода эти слова окажутся смешными, бесполезными и пустыми.

Напутствие

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

Полезные ресурсы

ТИП: WWW

www.computerlove.net

www.newstoday.com

www.designiskinky.com

www.surfstation.lu

www.k10k.net

Мнение эксперта

Михаил Воробьев ([email protected]), профессиональный дизайнер

Композиция, колористика, золотое сечение и правила использования шрифтов - все это хорошо и практически всегда работает, но...

"Но" №1 - замыливание глаза. Если ты уже работал в сфере дизайна, то наверняка у тебя бывали ситуации, когда ты не выходил из-за монитора по нескольку часов подряд исполняя какой-то "горящий" заказ (а нужно было еще вчера). И наверняка тебе знакомо ощущение, которое испытываешь когда сидишь перед монитором в попытках посмотреть непредвзятым взглядом на то, что ты наваял, но понимаешь, что ты просто не в состоянии адекватно оценить результаты своей работы. Это вполне нормально и на этот случай есть совет. Не стесняйся показывать плоды своего труда окружающим. Позови кого-то, кто находится рядом, и спроси, что именно их раздражает в твоей работе. Что выбивается и за что цепляется взгляд. Если есть возможность, отойди от монитора минут хотя бы на 15-20 и не думай в это время о работе вообще. А вернувшись к монитору, попытайся посмотреть на свою работу по-новому, представив себе, что ты вообще видишь ЭТО в первый раз. Часто такой подход помогает.

"Но" №2 - факап как продолжение вкуса клиента. В свое время у меня были клиенты, искренне убежденные в том, что небо на их фирменном календаре должно быть фирменного зеленого цвета . У каждого дизайнера есть работы, которые он прячет не только от постороннего, но и от своего взгляда. Вкусы клиента и дизайнера часто сильно отличаются, и вот тогда в дело вступает факап практика изготовление дизайна. Преследуется цель удовлетворить вкусы заказчика любыми средствами, получить деньги и забыть обо всем этом как о страшном сне. Опять же хороший совет. Когда ты хорошо понимаешь, что предлагаемое клиентом не лезет ни в какие рамки, старайся не потерять лицо. Для тактичного убеждения клиента привлекай менеджеров, ведущих проект, и любых других причастных к этому проекту людей. Старайся не быть факапщиком, работающим исключительно ради денег, хотя иногда это и неизбежно.

Вдохновение надолго не задерживается. Если пришло - используй!

Многое кроется в самих буквах, а не в словах и предложениях. Иногда имеет смысл подогнать буквы друг к другу.

Если используешь много цветов, то успех гарантирован. Среди детей, домохозяек и умственно отсталых.

Иногда и пустое место несет в себе глубокий смысл. Нужно только уметь обыграть его.

Нюансы позволяют сделать дизайн неповторимым: чтобы смотрели и не могли оторвать глаз.

Мода - понятие относительное. То, что сейчас считается актуальным, завтра станет смешным и пустым.

Когда есть опыт и наметан глаз, красивые и модные вещи рождаются сами по себе.

[Sos]

Большое спасибо за статью! Много полезного, приводит голову в порядок, разъясняются самые азы, что полезно даже самому продвинутому дизайнеру

[m_Stasuk]

много букаф...статья интересная, но думаю в журнале лучше смотрится.

По поводу красного с зеленым...можно сочитать, можно. Только пропорции важны. Помидоры растут не на синих стебельках, арбуз вспомни

[Bender]

Да вот прочел и решил выложить, чтоб другие прочли!