Несмотря на ограниченность выразительных средств, дизайн текстовых документов может быть очень интересным и разнообразным, нужно только очень тщательно выбирать элементы оформления в зависимости от смысла публикации. Редактор и дизайнер часто работают над этим совместно.
Упражнение 4.7 В CorelDRAW введите достаточно большой блок текста и расположите его в две, три и четыре колонки. Меняя ширину колонок и межколонников, сверстайте несколько вариантов печатной страницы.
4.7. Создание публикаций рекламного характера
Помимо общих композиционных правил, при создании печатного документа нужно учитывать индивидуальные особенности, характер каждого текстового материала, и отражать их в оформлении страницы. Особенно это важно для рекламных изданий.
4.7.1. Типографические приемы
Текст больших литературных произведений ценен сам по себе, следовательно, его дизайн должен быть таким, чтобы не затруднять чтение, основная функция шрифта – донести содержание.
Иное дело – реклама. Задача типографики в дизайне коротких рекламных документов – заинтересовать читателя. Реклама открывает почти безграничные возможности для игры шрифтами, в ней можно делать даже то, чего, вообще говоря, делать нельзя. Содержание текста, несомненно, важно, но первая задача грамотно выполненной рекламы – привлечь к ней внимание. При этом если и страдает удобочитаемость, это компенсируется визуальным восприятием, тем более, что сначала охватывается взглядом весь объем страницы, форма, и только потом прочитывается информация. Разнообразные оригинальные приемы вполне допустимы в небольших по объему текстах. Для того чтобы взгляд "зацепился" за текст, типографическое воплощение слова и его смысл должны быть согласованы. Например, слово "синий" можно набирать буквами синего цвета, допустимо переворачивать или переставлять буквы, произвольно менять кегль, применять другие эффекты.
Использование трансформированных шрифтов и контрформы в заголовках, на плакатах, обложках буклетов, помогает передать смысл теста, усиливает восприятие за счет визуального эффекта. На рис. CD-4.35 в качестве примера приведены работы Мелль Хаммера (Melle Hammer), дизайнера из Амстердама, опубликованные в журнале "Дизайнер" (№ 3, 2003 г.).
С помощью шрифтового оформления можно создавать текстовые страницы динамичного характера. Этот прием может пригодиться не только в рекламе. Листки с расписанием поездов, обложки спортивных журналов, информационные страницы со сводками о продвижении товаров, благодаря грамотному дизайну, даже без иллюстраций будут создавать ощущение движения, если шрифт, линии, отточия и другие элементы типографики образуют динамичную композицию.
Любой шрифт изначально имеет динамичную форму. Даже в буквах, графемы которых симметричны и статичны (Т, О, П, Ж, Ф), неподвижность пропадает в рукописном варианте за счет наклона и изменения толщины штрихов. Композиция большинства букв алфавита (К, Б, Е, В, И, Г) передает движение по ходу чтения: слева направо. Во время чтения глаза все время движутся: сначала по горизонтальной строке вправо, затем быстро к началу новой строки влево, и в целом сверху вниз по странице. Следовательно, типографика всегда связана с движением. Движение может быть неявным, если текстовая колонка набрана с выключкой по формату и равными полями, или подчеркнутым за счет специальных эффектов, например, в рекламном текстовом плакате, причем направление движения может быть любым (рис. CD-4.36).
Упражнение 4.8
Используя шрифтовые элементы, составьте композицию динамического характера. Формат, количество элементов, ритм выберите сами. Выполняя упражнение в CorelDRAW, используйте возможности пакета: размещение текста вдоль кривой, расположение текста внутри объекта, применение эффектов Envelope (Огибающая), Interactive Distortion (Интерактивная деформация), Perspective (Перспектива), Extrude (Объем). Создайте несколько вариантов композиции.
4.7.2. Композиция текста и изображения
Изображение, используемое в печатном документе, обычно называют иллюстрацией. Строго говоря, слово иллюстрация скорее применимо к многостраничному документу, например, к книге. Тема книжной иллюстрации – большой и сложный вопрос. Существуют свои приемы и особенности оформления книги. Например, Владимир Фаворский считал, что книжные иллюстрации во всю страницу должны размещаться только на левой стороне разворота, с тем чтобы не останавливать ритмичное движение в глубь книги. Разглядывание иллюстрации, помещенной слева, похоже на остановку и взгляд назад, и это задает книге определенный ритм. Поэтому важно даже то, в какой части книги помещена такая иллюстрация. В то же время, мелкие изобразительные элементы могут помещаться на титулах, использоваться как заставки или концовки теста. В любом случае, иллюстрация книги – это не просто передача сюжета с помощью картинки, это создание образа литературного произведения и единого стиля книги.
Мы рассмотрим задачу размещения рисованной картинки или фотографии на странице с текстом. Это может быть "тонкое" издание (листовка, буклет, проспект) или же обложка. В последнем случае не текст сопровождает иллюстрацию, но и не изображение иллюстрирует текст, нужен синтез изображения и текста. Иллюстрация и шрифт не должны мешать друг другу, их нужно выбирать параллельно так, чтобы создать общий ритм, общие пластические принципы.
Единство шрифта и изображения может основываться на гармонии, сближении, или же, наоборот, на контрасте.
Графические рисунки хорошо объединяются со шрифтом, имитирующим начертание пером (рис. CD-4.37). Такое изображение, основанное на сочетании текста и рисунка, можно дать в негативном варианте (белое на черном или цветном).
Часто текст "обтекает" изображение по границе (рис. CD-4.38). Это нарушает строгую структуру страницы, делает ее более интересной.
Текст может накладываться на изображение, выступая вперед (рис. CD-4.39) или даже быть на слое под полупрозрачной иллюстрацией. Это придает странице глубину.
Очень популярен прием размытого края фотографии. Иллюстрация как бы "проявляется" на странице (рис. CD-4.40).
На одной странице или развороте допускается использование фотографий в рамках различных форм; изображений, вырезанных по контуру на свободном поле или обтекаемых текстом; наложения фотографий. Иллюстрации располагают в центре или по диагонали, накладывают друг на друга, выводят под обрез края или угла, иногда даже за обрез страницы, меняют размеры и углы наклона (рис. CD-4.41). Такое размещение создает ощущение многослойности и динамики.
Упражнение 4.9
В CorelDRAW создайте многоколонный текстовый документ и продумайте композицию страницы, используя текстовые блоки различного содержания и иллюстрации разного формата.
4.8. Сквозной дизайн
Автономные, полностью самостоятельные печатные документы встречаются все реже. Как правило, публикация является частью группы печатных документов. Периодические издания с первого взгляда узнаются по стилю оформления, книги часто выпускаются сериями и циклами, рекламные документы – элементы одного целого, часть рекламной политики фирмы. Поэтому почти всегда необходимо прослеживать взаимосвязи, создавать единый образ. Для решения задачи единого оформления художник должен видеть всю структуру проекта.
Сквозной дизайн серии книг создается за счет единообразного оформления заголовков, оглавления, сносок и т. д. При оформлении книги работа ведется комплексно и по оформлению обложки, и по верстке, и по схеме расположения иллюстраций. Форма страниц, пропорции переносятся на всю книгу. Ни одна страница не должна отступать от общего решения.
Единый стиль публикации создается также с помощью сетки. Структура сетки часто скрыта, иллюстрации и текст могут занимать одну или сразу несколько ячеек сетки, но их пропорции четко выдержаны и композиция не нарушается.
Оформление обложек должно быть однотипным, как правило, выполненным одними шрифтами, в одной цветовой гамме (хотя бывают исключения: в серии "Всемирная литература" однотонные обложки всех книг имеют разные цвета, но это элемент фирменного стиля, передающий смысл серии литературы разных стран и народов).
Качество бумаги и материалы, используемые для обложки, обязательно должны быть одинаковыми. Как правило, серия книг иллюстрируется одним и тем же художником.
Для фирменных документов необходим единый дизайн от бланка до рекламного листа, от бизнес-документации до инструкции пользователям.
Единство образа создается в первую очередь фирменной графикой: логотипом, цветом, шрифтом, форматом, композицией. Очень важно передать основную идею, единую концепцию. Например, банк "Авангард" использует в качестве фирменного стиля эстетику послереволюционных лет в России. В этом стиле выполнено не только декоративное оформление буклетов и визиток, но и иллюстративная деловая графика: диаграммы, таблицы, схемы и т. д. (рис. CD-4.42).
Особый интерес представляет печатная документация дизайн-бюро, типографий и рекламных компаний. Каждая из них пытается создать свое лицо, непохожее на других. Некоторые образцы таких материалов приведены ниже (рис. CD-4.43).
Очень хорошее впечатление производит единый дизайн печатной продукции для культурного мероприятия. Прекрасно был оформлен спектакль "Горе от ума" в постановке Олега Меньшикова. Билеты, программки-веера, маски, проспекты-альбомчики, выполненные оригинально и в едином стиле, создавали определенную ауру еще до начала спектакля.
Эта традиция имеет давнюю историю. По случаю подписания договора об издании серии книг о комиссаре Мегрэ в тридцатых годах XX века Жорж Сименон давал бал в баре "Белый шар". В полицейско-тюремном стиле были выполнены пригласительные билеты, афиши, декор зала, карточки с афоризмами Мегрэ. Бал имел большой успех.
Глава 5 Дизайн Web-страниц
Популярность компьютерных сетей растет лавинообразно. Каждая уважающая себя фирма создает свой Web-сайт, и спрос на Web-дизайнеров огромен. Число сайтов в мире увеличивается примерно на 4000 каждый день! Значимость Интернет постоянно возрастает, влияние его на жизнь людей трудно переоценить.
Исследования показали, что 80 % пользователей посещают в общей сложности всего 15 ООО сайтов, и только 0,4 % всех страниц внимательно просматриваются. Для привлечения посетителей на Web-сайты нужно приложить определенные усилия: тщательно продумывать их архитектуру, навигацию, содержание и, конечно, композиционное и цветовое решение. Поэтому, применительно к созданию сайтов слово "дизайн" подходит наиболее точно.
Быстро проникающий в любую точку мира Интернет организует досуг и рабочее время. Основные достоинства Интернета как средства коммуникации – высокая скорость передачи информации, возможность быстрого редактирования и доступность. Почтовая карточка, отправленная по Сети из Сан-Франциско, в тот же день будет получена в Шанхае. События, происходящие в Сиднее, почти сразу же станут известны в Сантьяго. Эта сеть действительно всемирна, никогда еще дизайн не требовал такой универсальности. Оформление страниц должно быть понятно и хорошо восприниматься на разных континентах, в разных странах, в столицах и в маленьких селениях. При растущем значении WWW происходит взаимное влияние разработчиков и пользователей, дизайн и аудитория развиваются одновременно.
Основные требования к Web-сайтам:
□ практичность (возможность помогать пользователям в решении определенных задач);
□ удобство (способность быстро находить нужную информацию, наглядность и понятность);
□ визуальная привлекательность (эстетичность, грамотная композиционная организация страниц, хорошее сочетание цветов, стильность).
При знакомстве с сайтом оценка происходит в следующем порядке: внешний вид, содержимое, технологичность, практичность.
Разработка сайта – очень сложный и трудоемкий процесс. В рамках этой книги мы рассмотрим только некоторые вопросы визуального дизайна Web-страниц, тем более что для сайта внешний вид имеет первостепенное значение.
5.1. Общие принципы дизайна Web-сайтов
На сайтах размещается очень большой объем информации, в этом их основное предназначение. С другой стороны, материал Web-страниц должен без искажений передаваться по телефонным линиям с низкой пропускной способностью, следовательно, надо стремиться к созданию небольших по объему файлов. А это значит, что нужно особенно тщательно продумывать структуру и внешний вид страниц, не перегружать их картинками и анимацией, особенно, если основная задача сайта не связана с рекламой.
Web-страница – это гипертекстовый документ, создаваемый на языке HTML, который позволяет связывать между собой участки текста, области изображения с определенными координатами и кнопки нескольких типов. Структура страницы Web-сайта базируется на основных компонентах графического интерфейса пользователя. Это окна, пиктограммы, меню и курсор. В настоящее время не существует стандартов для Web-дизайна, но есть ряд подходов, принятых по умолчанию большинством разработчиков сайтов. Эти подходы определены здравым смыслом, технологическими требованиями, традициями.
Сайт должен быть функциональным, а одна из основных функций – быстрый поиск. Для его организации необходимы ясные имена ссылок, логическая группировка кнопок, четкие заголовки, страниц, согласованные элементы навигации. Существуют специальные программы для просмотра HTML-файлов – браузеры. Наиболее известные – Microsoft Internet Explorer, Netscape Communicator, Mozilla, Opera Они используются для навигации в сети Интернет, связи с Web-сервером, интерпретации HTML-кода, вывода на экран документов в заданном формате. Браузеры поддерживают звук, видео и трехмерную графику.
Следует хорошо продумать максимально удобные переходы по сайту, предусмотреть формы обратной связи. Например, поиск по каталогу на Web-странице может осуществляться с помощью ключевых слов, вводимых в верхнем поле. Не стоит делать навигацию слишком сложной. Пользователь может запутаться в лабиринтах переходов от одной страницы к другой. По-настоящему хороша та навигация, которую не замечаешь.
Удобен ли интерфейс, хороша ли система навигации, какова скорость работы – все это станет понятным только после того, как посетитель начнет работать в сети, но в первую очередь необходимо "заманить" его на сайт.
Внешнее оформление страницы должно притягивать и как можно дольше удерживать внимание посетителя. Эстетичный внешний вид и грамотный подбор цветов делают страницы более привлекательными и заметными, укрепляют связи с пользователями и обеспечивают повторное обращение по Вашему адресу в Интернет. Для часто посещаемых, эффективных сайтов даже придумано специальное прилагательное – sticker (липкий).
Для того чтобы правильно выбрать стиль и характер графического решения сайта, нужно понять, какова потенциальная аудитория, кто основной пользователь: его местожительство, возраст, пол, язык общения, уровень технической подготовки, привычки, пристрастия в одежде, любимые виды отдыха. На основе этих сведений и создается визуальный ряд Web-страниц.
Для большинства сайтов можно выделить несколько типов пользователей, и у каждого из них внешний вид страниц должен вызвать, как минимум, положительную реакцию.
5.2. Структура сайта
Сайт – многостраничный документ, имеющий иерархическую структуру. В этом случае композиция "трехмерна". Нужно продумать визуальный дизайн, начиная с первой страницы (с которой пользователь начинает знакомство с сайтом), через подразделы, до страниц с основной информацией.
Особенность оформления любой Web-страницы – блоковая структура. В поле экрана располагаются различные типы объектов (текст, кнопки, иллюстрации, анимационные заставки). Важно определить, какие объекты должны присутствовать на странице и как они будут расположены на экране. Такой подход позволяет решить проблему сквозного дизайна (рис. CD-5.1).
Как правило, сначала рисуется общая схема расположения основных элементов. Далее нужно сделать эскиз, на котором детализировано содержимое страницы: шрифтовое решение названия и заголовков, примерные иллюстрации, их количество и размер, формы и размеры кнопок или слов гиперссылок. При этом необходимо учитывать размеры экрана и параметры окна браузера. Для начала эскиз можно набросать карандашом на бумаге, но более эффективно сделать его в графическом редакторе со всеми кнопками, текстовыми блоками и картинками. Файл стоит сохранить в формате GIF или JPEG и поместить в окно браузера, чтобы увидеть, как это будет выглядеть в жизни. Необходимо провести тестирование созданного варианта. Возможно, заказчик или потенциальный пользователь сайта сделает существенные замечания. Рекомендуется иметь несколько вариантов композиции страниц сайта, это поможет быстрее найти приемлемое решение.
В визуальном дизайне Web-страниц сложились определенные традиции. Конечно, можно создать альтернативный дизайн и удивить им пользователя, но при работе с сайтом у него наверняка возникнут трудности, которые могут испортить общее впечатление. Ниже перечислены наиболее устоявшиеся и распространенные элементы графического дизайна страниц.
Фирменный знак располагают в верхнем левом углу. Как правило, щелчок по его изображению возвращает на главную (домашнюю) страницу сайта.
В текстовых блоках могут быть различные типы текста. Обычно это основной текст, ссылки (гипертекст) и использованные ссылки. Ссылки выделяются цветом, их делают более яркими, чем основной текст, так их легче заметить. Как правило, текст гиперссылки оформляется синим цветом и подчеркиванием. Необходимо, чтобы пользователь легко определял, какие страницы уже просмотрены, а какие нет, поэтому для использованных ссылок применяется более темный цвет. Это дает возможность легче найти то, что еще нужно посмотреть.
Помимо гипертекста, для ссылок используются другие элементы композиции страницы – кнопки, пиктограммы, графика.
Изображение кнопки используют для того, чтобы выделить ссылку. Картинка создается в графическом редакторе, например, PhotoShop. Кнопка хорошо заметна на экране, кроме того, несложно создать эффект нажатой кнопки, например, для использованной ссылки.
На страницах, которые возможно захочется распечатать, часто размещают кнопку-пиктограмму вывода на принтер. Это очень удобно и экономит время работы.
Внизу страницы обычно располагаются дополнительные текстовые ссылки. Они дублируют контекстные или графические ссылки.
На страницах сайтов по договоренности или за плату размещают баннеры. Это графический элемент, который служит ссылкой на другой сайт или страницу. Часто баннеры делают анимированными. На размер баннера существует несколько стандартов: 468x60, 460x55, 392x72, 334x60, 125x125, 120x90, 120x60, 88x31, 120x240 пикселов, поэтому прежде чем создавать баннер, следует выяснить, где он будет размещаться и ознакомиться с требованиями выбранных серверов. Обычно хозяева Web-страницы жестко оговаривают не только размер картинки в пикселах, но и размер ее файла в килобайтах (слишком большой и медленно загружающийся баннер недопустим), так что вопросы анимации на баннерах, выбор цветов и т. д. надо решать очень аккуратно.