Простые задачи

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

Блог Рэя Гловера тоже производит впечатление абсолютной элегантности, текст оформлен одновременно просто, изобретательно и очень эстетично. Чтобы избежать газетной монотонности, Рэй использует очень красиво сделанные заголовочные блоки. Много воздуха, классическая комбинация «Заголовок + легенда» и графично оформленная дата поста (уменьшенная вдвое, она уже не будет так смотреться, ритм, который придают текстовому массиву эти круги с датами, исчезнет):

Ритм и контраст

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

Обратите внимание, что во всех приведенных примерах используются практически одни и те же приемы оформления текстовых блоков. Часть из них пришла из классической типографики и книжного дизайна (гуманистический шрифт с засечками, способы оформления заголовков и подзаголовков, буквицы и пр.), а часть – из современной практики веб-дизайна («негативные» пустые пространства, контраст размеров и осей выравнивания). Результат везде один: ощущение прекрасно читаемого, выпуклого, осмысленного текста.

PS Присылайте  свои ссылки на сайты с элегантной, читаемой (не в стиле «мусорный гранж») типографикой.

Минимальный объем знаний по типографике для насыщения дизайнерской гордости? Он огромен! Но элементарных правил, из которых выводится вся эта демагогия, совсем немного. Нет, не одно, а два.

Правило первое: прежде чем оформлять текст (неважно, абзац или книгу) – прочтите его. Прочтите осознанно – так, чтобы в голове возникла ментальная карта содержания.

Правило второе: сделайте так, чтобы вы были не единственным человеком, внимательно прочитавшим текст, который предстоит оформить.
Помню, на меня произвело большое впечатление письмо-прикол, где каждое слово было написано с ошибками и описками, заметить которые можно было только при повторном прочтении. Мы спешим. Живем в мире переизбытка информации. И поэтому читаем – даже важное – по диагонали. На кардинальном осознании этого факта основано удачное оформление любого текста.
Задача текстового дизайна – это не только поиск адекватной формы для содержания (набирать текст женского романа, шрифтом, который разработала женщина), но и уламывание вас на то, чтобы вы ознакомились с этим содержанием.

Несколько примеров.

Декларация независимости США

Переписана от руки Тимоти Мэтлоком.

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

Любовное письмо

Провозгласить независимость – одно дело. Полностью отказаться от нее в пользу какого-то Глина (письмо выше) – вот задача, где «как» не менее важно, чем «что». На секунду представьте, что вы пишете или читаете любовное послание. Станете ли переписывать письмо из-за невольной ошибки, зачеркивания, неудачного оборота? Прочтете ли письмо внимательно и целиком, если оно – на 7-ми страницах от малознакомого человека? Придет ли вам в голову подчеркнуть или как-то выделить отдельные фразы? Посмотрите выше: автор писала о своих страданиях, а потом отвлеклась на тщательное оформление признания «я тебя люблю» с заштопанным сердцем, аккуратным многоточием и красивым продолжением фразы.

Книга Б. Акунина

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

Интересное упражнение.

Хотите приблизиться к самой сути типографики? Не надо читать какой-нибудь объемистый труд. Попробуйте порешать те же задачи, что ставили перед собой классики типографики и дизайна: придумать адекватное оформление для библейского текста, параграфа закона или агитационного плаката.

При этом важно помнить, что современное, выращенное на клипах, сознание приходится «соблазанять» на прочтение текста даже в любовном письме  («I love you» в письме выше  можно понять как «тизер», который стимулирует читателя ознакомиться с «остальным» содержанием).

Скачать pdf файл с уроком (7, 1 М)
Скачать psd-исходник в архиве (4 М)

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

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

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

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

Это – эпицентр наших усилий. При таком подходе: четкий передний план, условный задний, от качества ретуши главного объекта зависит все. Если он будет смотрется убедительно, он полностью перетянет на себя внимание зрителя, к этому мы и стремимся. Как я уже писал, этот туториал не о ретуши, поэтому подробно на всаднике я не останавливаюсь, описываю телеграфным стилем:
- разделить на слои. Какие? А что заказчик может попросить изменить? Цвет лошади, сбруи, пиджак всадника, его лицо. Это нужно иметь в отдельных слоях или масках.
- пиджак полностью отрисовать с нуля.
- цилиндр заменить на нормальный.
- выбрать убедительное мужское лицо, которое останавливает на себе взгляд зрителя.
При выборе лица обращаем внимание на свет. На картинке ниже вы видите пример контрастно освещенного лица, которое я не возьму для коллажа – чтобы не возиться долго с его интеграцией в картинку.

– свет
- цвет
- перспектива – вот какими инструментами мы будем пользоваться, чтобы вписать всадника в пейзаж.
Т.е. следим, чтобы все объекты были примерно одинаково освещены, немного неестественная подсветка всадника не в счет, т.к. он главный герой и смысл иллюстрации – его выделить. Добавляем ТЕНИ. Приводим все объекты иллюстрации к одному тону, в нашем случае – оранжево-желтому. Используя или один и тот же цветофильтр или colorize с последующим fade до 25%. Для перспективы добавляем объекты на передний план – В СТИЛЕ ИЛЛЮСТРАЦИИ. Подойдут – листья, ветки, лужица воды, выпавший из руки всадника платок. Не подойдут – бабочки, ленты, всякие фишки в стиле феррариста и т.п. Смысл в дополнительных объектах: связь элементов, они не должны отвлекать на себя внимание зрителя.
Т.к. в нашей ситуации рассеянного освещения в парке тень от лошади не будет слишком явной, лощадь как бы повисает. Ее нужно теснее «привязать к земле». Не получается тенью – добавим листиков прямо под лошадь.
Уже неплохо, но изображение получилось статичным. И с не подчеркнутой перспективой. Мы положили листья перед всадником, теперь нужно что-то вставить между всадником и фоном. Создать средний план. Для динамики я возьму взлетающих голубей и рой кружащихся листьев, для среднего плана – женщину, подходящую к лошади. Теперь наша картинка уже сюжет, ситуация, все объекты на ней легко объяснимы. Мужчина и женщина катаются на лошадях в парке. Всадник резко остановился, вспугнув голубей. Единственно, что непонятно – как связаны мужчина и женщина. Любовники? Супруги? Друзья? Что это – ссора? или просто прогулка? Если бы женщина и другая лошадь были более явными на иллюстрации, эту смысловую связь следовало бы создать, но так как они таят в тумане я оставлю это в виде вопросов. Иллюстрация готова.

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

Глава 11. Что я услышал, сидя в бочке из под яблок.
Глава 13. Как начались мои приключения на суше.
Глава 17. Доктор продолжает рассказ. Последний рейс в ялике.

Смысл приема ясен: находите в тексте самое характерное, самое интересное и размещаете где-то рядом с текстом. Теперь, КАК это сделать в приложении к веб-дизайну.

1. Крайний случай: цитата или «краткое содержание» – является основным визуальным элементом страницы. Центральным блоком. В этом случае роль основного текста играет весь сайт. Этот прием очень хорош и уместен на сайтах всевозможных онлайн-сервисов или каких-то новых, ранее небывалых продуктов. Представив что-то новое цитатой, вы сразу помещаете это новое в контекст чужого удачного опыта, делаете непривычное user-friendly. Допустим, вам нужно представить новую систему онлайн-платежей и вы рассчитываете, что фрилансеры будут основными потребителями этой системы. Берем и делаем фразу «Много чего попробовал, остановился на [название системы]. Дима, дизайнер-фрилансер» центральным элементом страницы.

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

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

Более специфичный для веб-дизайна способ – обозначать цитаты при помощи вертикальной черты:

Галерею всего многообразия приемов оформления цитат вы можете посмотреть здесь А здесь вы можете скачать плагин для ворд-пресс, с помощью которого тексты можно легко оформлять цитатами в виде врезок в тексте.

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

Минималистичный дизайн. Т.к. основной контент страницы – это ваши работы, дизайн и всяческие навороты лучше свести к минимуму, иначе работы получат меньше внимания..
Три информационных блока. Хоршее одностраничное портфолио сразу отвечает на три вопроса: кто такой, что сделал, как тебя найти. Соответственно это и есть все блоки вашей страницы от «а» до «я».

Возможностей «как» по-большому счету три:
Работы представлены крупно: скролл. Если вы хотите показать работ в полный размер, без тумбнейлов, то контент будет оформлен как скроллируемый блок (или вертикально, или горизонтально) Пример:

Работы представлены тумбнейлами, при клике – поверх страницы грузится крупное изображение. Лучше сетки в этом случае вы мало что найдете. Пример:

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

Я предлагаю разобрать по полочкам, или лучше – на кирпичи – что такое «чистый и ненавязчивый» дизайн в приложении к сайту. Какими средствами гарантировано можно добиться ощущения «чистоты».

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

Брюс Ли, кажется, называл свой вид мордобоя «стиль без стиля». В этом проблема «чистого дизайна» – он кажется безликим, оперируя самыми скупыми выразительными средствами. Поэтому, чтобы повысить его «класс» лучше использовать в заголовках и слоганах элегантный шрифт – разумеется, если он сочетается с фирменным стилем. Так поступили дизайнеры сайта cravattificio.com

«Чистота и порядок» – это почти идиома. Использование сетки помогает организовать контент в легко воспринимаемую простую структуру. При умелом использовании сетки, в странице появляется ритм (ритм пустот, «белых пятен» и заполненных контентом областей). Это тоже очень важно. Цель в использовании сетки в «чистом» дизайне – это а) структурировать контент б) создать негативное пространство, поля, пустоты, маленькую ассиметрию в симетрии, если можно так выразиться. Хороший пример – inballard.com

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

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

Заголовок и подзаголовок набраны разными шрифтами. Используется дополнительное разделение при помощи цвета, линий, положения относительно друг друга и т.д.