<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>dimcheg.com &#187; Метка: элемент</title>
	<atom:link href="http://dimcheg.com/tag/element/feed" rel="self" type="application/rss+xml" />
	<link>http://dimcheg.com</link>
	<description>Современный дизайн, веб-дизайн (web design), графический дизайн, создание и разработка сайтов, тенденции в дизайне и искусстве.</description>
	<lastBuildDate>Sun, 06 May 2012 07:54:46 +0000</lastBuildDate>
	<language>ru</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>«Воздух» &#8212; его значение для восприятия</title>
		<link>http://dimcheg.com/vozdux-ego-znachenie-dlya-vospriyatiya.html</link>
		<comments>http://dimcheg.com/vozdux-ego-znachenie-dlya-vospriyatiya.html#comments</comments>
		<pubDate>Sun, 04 Jul 2010 11:00:56 +0000</pubDate>
		<dc:creator>dimcheg</dc:creator>
				<category><![CDATA[Веб-дизайн]]></category>
		<category><![CDATA[Дизайн и искусство]]></category>
		<category><![CDATA[Современный дизайн]]></category>
		<category><![CDATA[воздух]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[дизайнер]]></category>
		<category><![CDATA[композиция]]></category>
		<category><![CDATA[материал]]></category>
		<category><![CDATA[пространство]]></category>
		<category><![CDATA[работа]]></category>
		<category><![CDATA[типографика]]></category>
		<category><![CDATA[часть]]></category>
		<category><![CDATA[читатель]]></category>
		<category><![CDATA[шрифт]]></category>
		<category><![CDATA[элемент]]></category>

		<guid isPermaLink="false">http://dimcheg.com/vozdux-ego-znachenie-dlya-vospriyatiya.html</guid>
		<description><![CDATA[Статья Марка Болтона: Сила &#8212; в «воздухе». Первая моя работа дизайнером была связана с маленьким манчестерским полиграфическим агентством. Оно работало со многими печатными СМИ, и предоставляло услуги дизайна обложек, верстки материалов прямой почтовой рассылкой. Во время работы с рассылкой мне &#8230; <a href="http://dimcheg.com/vozdux-ego-znachenie-dlya-vospriyatiya.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[
<!-- google_ad_section_start -->
<p align="right"><em>Статья Марка Болтона: Сила &#8212; в «воздухе».</em></p>
<p>Первая моя работа дизайнером была связана с маленьким манчестерским полиграфическим агентством. Оно работало со многими печатными СМИ, и предоставляло услуги дизайна обложек, верстки материалов прямой почтовой рассылкой. Во время работы с рассылкой мне довелось обратить внимание на то, что те дизайнерские принципы, которые изучались в колледже, здесь не используются – самое популярное решение, это жирный плотный текст большого размера. Как говорил, в то время, один клиент: «воздух – это просто пустота», я не забуду никогда эти слова.</p>
<p>Наши заказчики почтовой рассылки, были сориентированы на небогатый потребительский рынок, на котором фиксировались основные продажи. А разве может воздух быть действительно пустотой, если продажи так высоки?</p>
<p><span id="more-1224"></span></p>
<h3>«Воздух», что это?</h3>
<p>«Пустое место», или «воздух» – это некоторое пространство между композиционными элементами. А именно:</p>
<ul>
<li>Пространство между крупными, основными элементами, это «макро-воздух»</li>
</ul>
<p><a href="http://dimcheg.com/wp-content/uploads/2010/07/clip_image002.jpg" rel="lightbox[1224]"><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px;" title="clip_image002" src="http://dimcheg.com/wp-content/uploads/2010/07/clip_image002_thumb.jpg" alt="clip_image002" width="400" height="294" border="0" /></a></p>
<ul>
<li>Пространство между деталями, такими как надписи, пункты списков, изображения, слова и буквы, это «микро-воздух».</li>
</ul>
<p><a href="http://dimcheg.com/wp-content/uploads/2010/07/clip_image004.jpg" rel="lightbox[1224]"><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px;" title="clip_image004" src="http://dimcheg.com/wp-content/uploads/2010/07/clip_image004_thumb.jpg" alt="clip_image004" width="400" height="294" border="0" /></a></p>
<p>Влияние «микро-воздуха» на читабельность.</p>
<p>Недавно я познакомился с работами Эрика Спикерманна, на одной из его лекций. Одним из пунктов которой, была оптимизация газетной верстки издания «The Economist», причиной обсуждения были жалобы читателей, на возникающие при чтении трудности.</p>
<p>На полосах газеты материалы располагались слишком плотно. В газетной верстке, как и в веб-дизайне, иногда сложно добавить «воздух», появление которого ничем не мотивировано. Газеты часто сталкиваются с такой неоходимостью, как переход на более легкий шрифт, и изменение микро-воздуха между буквами и строками. Именно эта тема и была затронута на лекции.</p>
<p>В начале работы над этим изданием, Спикерманн внес небольшие изменения, оставив причудливый оригинальный шрифт, но добавив воздух между символами. После этого он увеличил интерльяж, и сделал больше кегль. Благодаря этим микро уровневым изменениям в материалах полосы появился воздух. Это была тонкая работа, при неизменном количестве информации, увеличилась читабельность, и упростилось восприятие блоков читателем.</p>
<p>И не смотря на добавления Спикерманном макро воздуха в другие элементы дизайна, этот пример ярко демонстрирует то, что даже маленькие изменения на микро уровне оказывают значительное влияние на восприятие. Причем эти истины касаются не только газет, но и применимы в веб-дизайне.</p>
<h3>Рекламный «воздух».</h3>
<p>Для создания иллюзий элегантности и утонченности в дизайне рекламы, часто используется «воздух». Грамотное использование типографических элементов, их сочетание с пустотами – есть, ничто иное как, высокохудожественное решение. Благодаря большому количеству воздуха в своих рекламных материалах, косметические фирмы создают у потребителя впечатление о высоком качестве, изысканности, и, часто, высокой цене.</p>
<p>И мой старый клиент по рассылке был прав насчет воздуха: это не работает в рекламных материалах для рынка небогатых потребителей, т.к. создается искусственное впечатление о высокой цене и качестве. Приведу пример:</p>
<p><a href="http://dimcheg.com/wp-content/uploads/2010/07/clip_image006.jpg" rel="lightbox[1224]"><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px;" title="clip_image006" src="http://dimcheg.com/wp-content/uploads/2010/07/clip_image006_thumb.jpg" alt="clip_image006" width="400" height="297" border="0" /></a></p>
<p>В обоих примерах одинаковые фотографии и слоганы. А вот композиции – две стороны одной монеты, мало воздуха, значит дешево, много пробелов, и создается впечатление дороговизны.</p>
<p>Воздух является не только эффективным инструментом по позиционированию продукции, но и указывает на ценовую доступность, её уровень. Именно поэтому, нельзя исключать, что производитель а также его потенциальные покупатели, воспримут такую композицию, как рекламу более дорогого, другого продукта конкурентов.</p>
<h3>Пассивный и активный «воздух»</h3>
<p>Для создания гармонии и баланса часто используется воздух. Но это только часть дизайна, вершина айсберга. Воздух может стать частью дизайна, его неотъемлемой частью. Такого рода эффект используется фотографами, которые снимают большую часть комнаты при портретной съемке, и оставляют объект съемки в стороне.</p>
<p>Когда благодаря пробелу читатель «переводится» от одного элемента к другому, этот инструмент носит название «активный воздух». Например:</p>
<p><a href="http://dimcheg.com/wp-content/uploads/2010/07/clip_image008.jpg" rel="lightbox[1224]"><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px;" title="clip_image008" src="http://dimcheg.com/wp-content/uploads/2010/07/clip_image008_thumb.jpg" alt="clip_image008" width="400" height="297" border="0" /></a></p>
<p>Очень плотный текст. Для того, чтоб создать визуальную гармонию, и комфорт для читателя, нудно добавить воздух. Я добавляю поля, изменяю размер шрифта, и сам шрифт, и увеличиваю интервалы между строками. Это пример «пассивного воздуха».</p>
<p><a href="http://dimcheg.com/wp-content/uploads/2010/07/clip_image010.jpg" rel="lightbox[1224]"><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px;" title="clip_image010" src="http://dimcheg.com/wp-content/uploads/2010/07/clip_image010_thumb.jpg" alt="clip_image010" width="400" height="297" border="0" /></a></p>
<p>Многие возразят: «пассивный воздух» не играет роли, на него не стоит обращать внимание. Но я не согласен с этим. Если вы не умете работать с «воздухом», значит вы не самый лучший дизайнер. Создание иллюзии равновесия и свободы, это и есть «пассивного воздуха». И это важно.</p>
<p>Но мы отвлеклись. Используя прошлый пример, я выделил бы часто текста, допустим, вторую цитату. Чтобы акцентировать на ней внимание, можно изменить цвет, или шрифт, но я только увеличу между цитатами микро-воздух, до макро-воздуха, и тем самым привлеку взгляд читателя, а еще, сделав текст жирным, уменьшу межбуквенные интервалы.</p>
<p><a href="http://dimcheg.com/wp-content/uploads/2010/07/clip_image012.jpg" rel="lightbox[1224]"><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px;" title="clip_image012" src="http://dimcheg.com/wp-content/uploads/2010/07/clip_image012_thumb.jpg" alt="clip_image012" width="400" height="297" border="0" /></a></p>
<p>Это пример использования «активного воздуха» &#8212; добавление пустого пространства, для непосредственного выделения из общей структуры части информации.</p>
<h3>Практика, и еще раз практика!</h3>
<p>Если хотите понять работу воздуха, практикуйтесь. Словно военному, который ежедневно марширует по плацу, художнику оформителю, дизайнеру, необходимо тратить множество часов дл совершенствования навыков и понимания. Многие десятилетия студенты решают упражнения по композиции, и к счастью, часть этих работ задокументированы дизайнерами, мастерами прошлых лет. Одним из которых был Эмиль Рудер (Emil Ruder).</p>
<p>Он был швейцарцем, и работал типографом-печатником. Умер в 1970г. После двадцати одного года преподавания и практики он написал книгу – «Typography: A Design Manual», в которой писал:</p>
<p>«Эта книга умышленно занимается только вопросами работы со сборными элементами в типографском деле, которые относятся к точным системам измерений. Ее цель в создании законов типографики, а также, несмотря на наличие общих черт, в разделении типографики и графического дизайна, который из-за выбора средств и инструментов, является более свободным и более трудным занятием».</p>
<p>Не смотря на однобокость книги Рудера (акцент в сторону типографики и проектировании бланков), автор указывает на то какие пути верны, а какие нет. Опираясь на эту книгу можно изучить фундаментальные основы композиции. В книге очень много упражнений по работе с различными композиционными элементами, и, в частности с «воздухом». Это стоящий труд.</p>
<p>Лишь только вы научитесь использовать воздух грамотно, сможете реорганизовывать пустое пространство внутри композиции, снаружи и между её элементами, вы не только улучшите восприятие читателя, но и, скорее всего, увидите свою работу другими глазами.</p>
<p align="right"><em>Марк Болтон</em>.</p>
<p style="text-align: left;" align="right"><strong><span style="color: #3366ff;">Реклама на сайте:</span></strong></p>
<ul>
<li>Общественно-политическая значимость искусства <a href="http://iratta.com/duhmir/kultura/11892-obschestvenno-politicheskaya-znachimost-iskusstva-azanbeka-dzhanaeva-v-sisteme-naciostroitelstva-osetinskogo-naroda.html" target="_blank">Азанбека Джанаева</a> в системе нациостроительства осетинского народа.</li>
<li>Вальс, танго, джайв, фокстрот и прочие <a href="http://www.dancing-queen.ru/bal.html" target="_blank">занятия бальными танцами</a> в одной из лучших московских школ бальных танцев.</li>
<li>Вы знаете, <a title="Что такое фейсбук" href="http://archil.net/novosti/chto-takoe-fejsbuk/">что такое фейсбук</a> и как он помогает вебмастерам? Все это и многое другое вы сможете прочесть на сайте archil.net.</li>
</ul>

<!-- google_ad_section_end -->
<h3  class="related_post_title"><br/>Тематические статьи:</h3><ul class="related_post"><li><a href="http://dimcheg.com/9-sovetov-po-tipografike-sajta.html" title="9 советов по типографике сайта">9 советов по типографике сайта</a></li><li><a href="http://dimcheg.com/10-sajtov-gde-mozhno-najti-vdoxnovenie-i-zaryaditsya-kreativom.html" title="10 сайтов, где можно найти вдохновение и зарядится креативом">10 сайтов, где можно найти вдохновение и зарядится креативом</a></li><li><a href="http://dimcheg.com/veb-dizajn-tendencii-2010-po-versii-smashingmagazine.html" title="Веб-дизайн: тенденции 2010 (по версии Smashingmagazine)">Веб-дизайн: тенденции 2010 (по версии Smashingmagazine)</a></li><li><a href="http://dimcheg.com/ponyattya-pro-bezpechnu-palitru-koloriv.html" title="Поняття про безпечну палітру кольорів">Поняття про безпечну палітру кольорів</a></li><li><a href="http://dimcheg.com/zheltyj-cvet-v-dizajne-sajtov.html" title="Желтый цвет в дизайне сайтов">Желтый цвет в дизайне сайтов</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://dimcheg.com/vozdux-ego-znachenie-dlya-vospriyatiya.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

