Перуница

Приветствуем вас на форуме сайта Перуница!



 

Дизайн и верстка: базовые элементы

svasti asta
17 апреля 2011 01:08
Сообщение #1

Сообщений: 248
Регистрация: 3.07.2009
Дизайн и верстка: базовые элементы

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

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


Пусть дизайн будет простым

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

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

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

Мишель А. Картер замечает, что «привлекательная и удобная газета нравится не только читателям, но и рекламодателям. Они знают, что люди, на которых ориентирована их реклама, увидят ее в радующем глаз контексте, что подтолкнет читателей внимательнее вчитаться и заметить их объявления».

Успешный дизайн газеты удовлетворяет трем условиям – это «дизайн, функциональный для сотрудников газеты, отражающий содержание и характер газеты и нравящийся (подсознательно) читателям». (Определение сформулировали шотландские консультанты по медиа-дизайну Ally Palmer и Terry Watson в докладе «Новый дизайн, новые форматы» для Всемирной газетной ассоциации.)

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

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

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


Шрифт текста

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

Выберите один шрифт (гарнитуру) для вашего основного текста. Для основного текста используются «обычные», «рабочие» гарнитуры. В полосе набора совершенно неуместны декоративные шрифты. У них обычно не самый привычный вид и много дополнительных элементов, затрудняющих чтение. Их иногда используют для заголовков, шапок, логотипов и подобных случаев, когда букв не много.

Исследования показывают, что наиболее легко глаз человека читает шрифт с засечками, а не рубленый шрифт, который не имеет подобных элементов. (Шрифты с засечками: Times New Roman, Georgia, Courier New и т. д. Рубленые шрифты: Arial, Verdana, Tahoma и т. д.) Исследователи, занимавшиеся изучением функции человеческого глаза, открыли, что сетчатка глаза «улавливает» засечки букв, как будто она цепляется за ручки. Глаз и, следовательно, мозг намного быстрее идентифицируют букву с засечками, нежели без них. (При верстке веб-страниц действует обратное правило, поскольку на экране лучше читаются рубленые шрифты.)

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

Некоторые советуют выбрать 2-3 гарнитуры. Но для начинающих верстальщиков и это много.

Используйте этот единственный шрифт для всего газетного материала. Суть в том, чтобы сделать легким чтение вашей газеты, чтобы быть последовательными и чтобы иметь код, который читатель всегда поймет. Когда читатель видит шрифт вашего текста, то он знает, что читает новости.

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

Используйте выбранный шрифт достаточно большого размера (кегля), чтобы его легко можно было читать. Помните, что вы хотите сделать ваши газеты наиболее легко воспринимаемыми для читателей. Если текст напечатан слишком мелко то это, возможно, позволит вам разместить больше слов на странице, но вы затрудните читателю восприятие этих слов. Традиционно в российских газетах текст печатался 8-м кеглем, однако сейчас в газетах России наблюдается тенденция к увеличению размера шрифта до 9-9,5 пунктов.

Восприятие кегля зависит от конкретной гарнитуры. Оптическая высота строки формируется прежде всего из высоты строчных знаков, а она для каждой гарнитуры разная. Если поставить рядом 10-пунктовые AvantGarde и Garamond, первый будет смотреться намного выше.

Не сжимайте и не растягивайте шрифты. Они не случайно были разработаны определенным образом. Если уж вам действительно нужен очень узкий шрифт, то найдите тот, который изначально был создан именно таким.

Используйте выделения. Нет, физиология здесь не при чем. Это о случаях, когда нужно выделить слово или часть текста. Для этих целей применяются полужирный (bold) и курсив (italic). Читать их сложнее, но для небольших кусков текста они подойдут. Иногда уместно с осторожностью ввести цвет.

Главное – никогда не нажимайте кнопку «подчеркивание» (underline). Подчеркивание как средство выделения досталось нам от убогих по своим возможностям печатных машинок и считается верхом типографического моветона.

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

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

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

Дизайн и верстка: базовые элементы
Анатомия буквы и ее элементы

А – очко литеры (Face of Character).
B – кегельная площадка (Em-Square).
C – кегль (Size).
D – линия шрифта (Baseline).
E – высота (рост) прописного знака (Cap-height).
F – высота (рост) строчного знака (x-height).
G – межбуквенный просвет (Letterspace).
H – полуапрош (Side bearing).
I – интерлиньяж (Linespace).

1. oсновной штрих (Stem).
2. соединительный штрих (Hairline).
3. засечка, сериф (Serif).
4. верхний выносной элемент (Ascender).
5. нижний выносной элемент (Descender).
6. наплыв (Stress).
7. внутрибуквенный просвет (Counter).
8. овал (Oval).
9. полуовал (Bowl).
10. концевой элемент (Terminal).
11. каплевидный элемент (Ball).
12. точка (Dot).
13. диакритический знак, акцент (Accent).



Шрифт заголовков

Базовый подход тот же, что и в основном тексте: один шрифт или, возможно, два.

Остановите выбор на едином шрифте для заголовков материалов, связанных с новостями. Как правило, если основной текст набирается гарнитурой с засечками, для заголовков выбирают рубленый шрифт.

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

Если хотите, то выберите другой шрифт для заголовков статей других (не новостных) разделов газеты. Но используйте один шрифт в одинаковых его разновидностях для этих материалов. Это еще один из ориентиров, который вы создаете своим читателям. Таким образом, они узнают, что статьи с заголовками, напечатанными одним шрифтом – это новости, а другим шрифтом – это материалы других разделов газеты.

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

Установите интерлиньяж для заголовков. Применяйте его постоянно и единообразно с определенным шрифтом.

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

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


Ширина колонок

Оптимальная ширина для колонок основного текста около 5 сантиметров (12 цицеро). Это 8-10 слов или 45-60 знаков. Все, что набрано уже этого, трудно читать.

При чтении глаз совершает зигзагообразное движение. При узкой колонке он ерзает туда и сюда. Нет размеренности движения. Если колонка выровнена по ширине, возникает слишком много переносов. Если нет – длина строки сильно меняется.

При длинной строке глазу скучно. Он устает. Движение замедляется. А найти начало следующей строки – и вовсе тяжело. Это используют для задания настроения. Заметьте, деловой, новостной, энергичный текст чаще кладется в разумно узкую, энергичную колонку. А монографии или пафосные дорогие буклеты часто используют «статичную» длинную строку.

Самую широкую колонку следует делать приблизительно в 12 сантиметров (25 цицеро). Более широкие колонки трудно читать и процесс восприятия будет значительно замедлен. Читатель будет вынужден охватывать отдельные слова, а не группы слов одновременно.


Линейки

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

Тот же принцип действует для горизонтальных разделительных линеек.

На практике без линеек бывает трудно обойтись, особенно при плотной верстке.


Фотографии

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

Фотографии очень важны. Они:

привлекают внимание к материалу;
дополняют материал визуальной информацией;
расширяют возможности верстки.

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

Ширина фотографии должна быть кратной колонке. То есть фото надо ставить шириной в одну, две, три и т. д. колонок, но не 1,5 или 2,3 ширины колонки. Варианты – увы, встречающиеся – когда фото частично «въезжает» в соседнюю колонку, недопустимы.

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

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

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

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

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

Когда на полосе располагаются несколько фото, они должны различаться размерами и формой. Исключения: верстка ряда мелких фотографий наподобие кинопленки, а также мини-интервью множества людей по определенной теме, когда даются их портреты.

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

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

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

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

Однако, данное правило не догма. Ряд качественных газет, например, «Известия», не применяют окантовку снимков.

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

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


Инфографика

Информационная графика – это карты, таблицы, графики, диаграммы, рейтинги, схемы и т. д. Для визуализации новостей информационная графика так же важна, как и фотография.

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

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

При создании инфографики доминирующим соображением должна быть информативность, а не художественность. Сложная графика бесполезна, если она не разъясняет или не дополняет статью.


Врезки

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


Белое пространство

Белые пространства на полосе – один из самых полезных элементов. Белые пространства способствуют созданию привлекательно оформленной газеты.

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

При оформлении материала располагайте все белые пятна вокруг текста. Никогда не оставляйте их внутри статьи. Пустые пространства в середине текста выглядят очень плохо. Чтобы их ликвидировать, следует произвести изменения, например, в размерах отдельных элементов (заголовка, подписей к фотографиям, фотографий).


Выворотка

Избегайте применения белого шрифта на черном (выворотки). Наиболее трудный для чтения шрифт, как показали исследования, это белый на черной основе. Если вы все-таки используете подобную технику, то сведите ее к минимуму, например, для выделения отдельных элементов (заголовков статей, рубрик).


Цвет

Цвет – это не игрушка. Он может как привлечь читателя к материалам и иллюстрациям на полосе, так и оттолкнуть его.

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

© Игорь Борисов
http://voxfree.narod.ru/journ/journ_060109.html



В добавок к вышеизложенному, советую прочитать иллюстрированную книгу:

Тим Харроуэр "Настольная книга газетного дизайнера"

где вопросы дизайна, типографики, юзабилити, спецэффектов и.т.д., рассматриваются более подробно на многочисленных примерах. Кстати много чего написанного в этой книге подходит и к веб дизайну.

Ну и конечно, наверно самая первая книга которую должен прочитать и изучить новичок в данной области - книга Яна Чихольда "Облик книги"

http://www.uznai-pravdu.com/viewtopic.php?f=10&t=176&sid=d13ca54ed3b8d7ea8531a67

ee4f6ec69
Перейти в начало страницы


Коды нашей кнопки

Просто скопируйте код выше и вставьте в свою страничку

Перуница. Русский языческий сайт

Пример баннера