Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS 27.


Изящество и притяжение в типографском дизайне


Размышляя над тем, что представить на сайт CSS Zen Garden, Майкл Пик решил сделать
«что-нибудь забавное и немного странное». Так и появилась работа «Живым или мертвым».
Идея Пика состояла в том, чтобы противопоставить дикий Запад миру японского самурая, показав занимательное историческое различие. На тему дикого Запада намекает типография в стиле вестернов с различными специальными символами. С точки зрения типографских особенностей получился очень интересный результат, проливающий свет на проблему, как надо использовать шрифты в дизайне.

Декоративные символы


Один из самых любопытных визуальных аспектов работы «Живым или мертвым» является использование декоративных типографских символов, получивших собирательное название dingbats («штучки-дрючки»). Традиционно это были цветочки или элементы орнамента, а в цифровом мире они подбираются по темам, например:
• бизнес;
• спорт;
• животные;
• природа;
• разное.
Пик сумел подчеркнуть тему вестерна в своей работе специальными символами и графическими украшениями, поэтому дизайн получился изощренным и искусным.
Прежде всего бросается в глаза заголовок. Шрифт, вызывающий ассоциации с диким Западом, сочетается с изображением пагоды, которая помещена в овальную область, обрамленную причудливыми завитушками. В результате получается тематический
контраст между диким Западом и древней Японией.
Пятиконечная звезда, то есть звезда шерифа, хорошо знакома по фильмам-вестернам. В списках ссылок заголовки обрамлены такими звездами и отделены специальным шрифтовым символом.
Перемещаясь вниз по основному тексту, мы обнаруживаем дополнительные украшения. Во-первых, в верхней части видны изображения фигур самураев и дерево-бонсай.
В последующих заголовках доминирует тема дикого Запада, подчеркнутая стилизованным изображением указающего перста.
Для усиления впечатления применены еще два декоративных элемента. Вдоль верхнего и нижнего края размещен красивый узор, напоминающий о банкнотах и сертификатах акций (рис. 6). И наконец, почтовый штемпель с доменным именем mikepick.com служит тонким украшением с толикой юмора.
Не будь на странице специальных символов и графических украшений, осознать тематический контраст было бы непросто. На этом примере видно, как дизайнер может с помощью удачно размещенных декоративных элементов подчеркнуть свою идею.

Типографская верстка

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

Оптическое восприятие

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

Использование притяжения для направления взгляда


Процесс направления взгляда вниз называется притяжением (gravity). Как сила тяжести физически тянет нас вниз, так и взгляд притягивается к области естественного завершения дизайна.
Зная это, вы не станете удивляться тому, что логотип обычно помещают в главной оптической области (левом верхнем углу), а текст и элементы дизайна, создающие финальный анкер, располагают внизу. По пути из одной точки в другую встречаются «горячие точки» - обычно там, где взгляд останавливается перед тем, как перейти в левую часть страницы. Шаблон, идеально соответствующий такой модели, представ-
лен на рис. 9. Работа «Живым или мертвым» дает прекрасный пример дизайна, в котором взгляд не встречает препятствий естественному движению.

Как избежать непонимания

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

Заголовки

Разумеется, заголовки призваны отделить друг от друга разделы документов. В работе «Живым или мертвым» мы видим, что заголовок может еще и нести дополнительный смысл, усиливая впечатление от дизайна.
Вот некоторые рекомендации по эффективному использованию заголовков:
• если вы используете в заголовках цвет, то это должен быть самый заметный цвет в палитре;
• цвет заголовка должен быть энергичным. Исследования подтверждают, что светлые заголовки не оказывают такого воздействия, как темные. Чем ближе цвет заголовка к черному, тем сильнее он воздействуют зрителя;
• чем значимее заголовок, тем он должен быть заметнее;
• слегка зауженный шрифт заголовка делает его более заметным. Иногда рекомендуют устанавливать плотность на уровне 70-90%;
• полезны бывают шрифтовые контрасты. В работе «Живым или мертвым» все заголовки набраны заглавными буквами, что выделяет их на фоне прочего текста;
• заголовки должны быть короткими. Слишком длинный заголовок выглядит неприятно и может быть непонятен читателю.
Еще один интересный фактор, который нужно учитывать в дизайне заголовков, - это воздействие знаков препинания, в особенности точек. Вообще говоря,
следует избегать точек в конце заголовков. Точка символизирует завершение мысли, тогда как смысл заголовка - начать новую мысль.

Основной текст

Основной текст занимает большую часть страницы. Предполагается, что посетитель будет его читать или хотя бы бегло просмотрит. Но следование сложившейся типографской практике может уменьшить доходчивость сообщения.
Для эффективной работы с основным текстом придерживайтесь следующих рекомендаций:
• Старайтесь, чтобы строка состояла примерно из 60 символов. В текучем мире веб-дизайна это не всегда легко обеспечить, особенно из-за не всегда
корректной реализации свойств CSS, управляющих длиной строки, к примеру, m i n - w i d t h и max-width. Однако это следует иметь в виду, даже при текучем дизайне. Если строки слишком длинные, то их смысл становится труднее понимать.
Более того, человек вообще может отказаться от чтения текста!
• Верно и обратное. Восприятие смысла падает и при слишком коротких строках, порядка 20 символов.
Просто трудно читать длинные и узкие фрагменты текста. Короткие строки лучше применять для акцентирования внимания.
• В англоязычных текстах принято считать, что абзац должен состоять по меньшей мере из трех-четырех предложений. В Web длинные абзацы не приветствуются, считается, что короткие абзацы, содержащие действительно важную информацию, больше подходят для среды, в которой одного щелчка достаточно, чтобы покинуть страницу.
• Публикуя длинные документы, старайтесь, чтобы абзацы были насыщенными и короткими, разбивайте документ на разделы с помощью заголовков.
Это, безусловно, способствует улучшению смыслового восприятия, поскольку читателю становится легче ориентироваться в документе.
• Избегайте слишком широких и слишком узких межстрочных интервалов. Если абзац слишком близко или слишком далеко отстоит от предшествующего и последующего текста, восприятие его смысла ухудшается. Мозг просто перестает обрабатывать информацию либо из-за перегрузки, либо считая, что сообщение закончилось.
• По большей части старайтесь не использовать разные цвета в основном тексте. Как и в случае заголовков, раскраска текста иногда приносит больше вреда, чем пользы. Применяйте цвет только для акцентирования внимания и для выделения ссылок.
В работе «Живым или мертвым» даже в ссылках применяется только небольшая вариация оттенка, да и то лишь в тех, что находятся в основном тексте.

Акцентированный текст

С акцентированным текстом можно позволить чуть больше вольности, чем с заголовками и основным текстом, которые наиболее критичны для уяснения сути
информации. Акцентированным называется текст, расположенный по бокам, в виде цитат и подписей. Для работы с акцентированным текстом имеются следующие рекомендации:
+ Поскольку смысл акцентированного текста в том, чтобы отвлечь внимание от основного, то применение цветов даже поощряется. Главное - быть последовательным в использовании цветов.
• Акцентированный текст должен занимать всего несколько строчек, причем сами строки лучше делать более короткими.
• Акцентированный текст, размещенный на полях или в виде цитат, должен не прерывать поток основного текста, а дополнять его. Если он нарушает
оптическое восприятие, то становится сложнее понять смысл основного текста. То же самое относится и к иллюстрациям - они должны не прерывать основной поток и отвлекать от текста, а служить естественным дополнением.
• Читатель ожидает, что под иллюстрацией будет подпись. Подписи очень полезны, поскольку дополняют контекст и помогают лучше усвоить материал.
Решая вопрос о том, сколько текста может быть на одной странице, следует сообразовываться с практичностью. По большей части, люди не любят щелкать
по ссылке «Далее» чаще, чем необходимо. Поэтому нужно соблюсти тонкий баланс: оставить на странице не слишком мало и не слишком много текста.

Продуманные шрифты, изящный дизайн


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








css




css
css

Добавить статью в:
0



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



Поиск

***

Онлайн
Всего на сайте: 22
Гостей: 13
Пользователи: - отсутствуют
Роботы: Yandex Bot, Google Bot, Yahoo Bot, crawl Bot, MSN Bot, Google Bot, MSN Bot, Yandex Bot, MSN Bot

20-ка посетителей: elmerlk16, AgnesAccony, wordpress, JamesFreet, Ramiropl, GennadiyMap, msvuser, lunar.elf, Eusebionaice, julianaql1, Edwardkax, leonorye2, TrompokMub, tabathafh16, odneycom, fluellusy, laurieuf18, sharleneqh4, Servicehpp, leanneax3


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги