Макет страницы

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

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

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

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

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

История и технологии планировки

Прямая настройка физической страницы

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

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

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

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

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

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

Эпоха расклейки

Редакторы работают над выпуском номера Bild за 1977 год в Западном Берлине . Предыдущие титульные страницы прикреплены к стене позади них.

Офсетная литография позволяет светлым и темным областям изображения (сначала снятого на пленку) контролировать размещение краски в печатной машине. Это означает, что если одну копию страницы можно создать на бумаге и сфотографировать, то можно напечатать любое количество копий. Шрифт можно набирать на пишущей машинке или, для достижения профессиональных результатов, сравнимых с высокой печатью, на специализированной наборной машине. IBM Selectric Composer , например, мог создавать шрифты разного размера, разные шрифты (в том числе пропорциональные ) и с выравниванием текста . Благодаря фотогравюре и полутонам физические фотографии можно было напрямую переносить в печать, а не полагаться на гравюры, сделанные вручную.

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

Фотонабор был изобретен в 1945 году; после ввода с клавиатуры символы один за другим снимались на фотонегатив, который затем можно было отправить напрямую в типографию, или снимать на фотобумагу для наклеивания. Эти машины становились все более совершенными: модели с компьютерным управлением могли хранить текст на магнитной ленте.

Компьютерная публикация

По мере развития графических возможностей компьютеров их начали использовать для прямой визуализации символов, столбцов, страниц и даже многостраничных подписей , а не просто для вызова фотографического шаблона из заранее предоставленного набора. Помимо использования в качестве устройств отображения для операторов компьютеров, электронно-лучевые трубки использовались для визуализации текста для фотонабора. Однако изогнутая природа ЭЛТ-дисплея привела к искажению текста и изображений на экране по направлению к внешним краям экранов. Появление в 1997 году мониторов с «плоским экраном» (ЖК-, светодиодных и, в последнее время, OLED) устранило проблемы искажений, вызванные старыми ЭЛТ-дисплеями. По состоянию на 2016 год Плоские дисплеи почти полностью заменили ЭЛТ-дисплеи.

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

С помощью современного программного обеспечения для настольных издательских систем , такого как флагманское программное обеспечение Adobe InDesign. и облачный Marq , процесс макетирования может происходить полностью на экране. (Аналогичные варианты макета, которые были бы доступны профессиональной типографии, выполняющей монтаж, поддерживаются настольными издательскими программами; напротив, программное обеспечение для «текстовой обработки» обычно имеет гораздо более ограниченный набор доступных вариантов макета и типографики, что приводит к компромиссу с гибкостью. для простоты использования в более распространенных приложениях.) Готовый документ можно распечатать непосредственно в виде версии, готовой к использованию в камере, без необходимости физической сборки (при наличии достаточно большого принтера). Изображения в оттенках серого должны быть либо полутоновыми в цифровом виде, если они отправляются на офсетную печатную машину, либо отправляться отдельно в типографию для вставки в отмеченные области. Завершенные работы также можно передать в цифровом виде в типографию, которая может распечатать их самостоятельно, снять непосредственно на пленку или использовать технологию компьютерной печати , чтобы полностью пропустить физический оригинал. PostScript и Portable Document Format (PDF) стали стандартными форматами файлов для цифровой передачи.

Цифровые носители (небумажные)

С появлением персональных компьютеров навыки верстки страниц распространились на электронные и печатные средства массовой информации. Электронные книги , PDF-документы и статические веб-страницы относительно близко отражают бумажные документы, но компьютеры также могут добавлять мультимедийную анимацию и интерактивность. Макет страницы для интерактивных медиа пересекается с дизайном интерфейса и пользовательского опыта дизайном ; интерактивная «страница» более известна как графический интерфейс пользователя (GUI).

Современные веб-страницы обычно создаются с использованием HTML для содержания и общей структуры, каскадных таблиц стилей для управления деталями представления, такими как типографика и интервалы, и JavaScript для интерактивности. Поскольку все эти языки являются текстовыми, эту работу можно выполнить в текстовом редакторе или в специальном редакторе HTML , который может иметь функции WYSIWYG или другие вспомогательные средства. дополнительные технологии, такие как Macromedia Flash Для мультимедийного контента могут использоваться . Веб-разработчики несут ответственность за фактическое создание готового документа с использованием этих технологий, но отдельный веб-дизайнер за создание макета может отвечать . Данный веб-дизайнер также может быть беглым веб-разработчиком или просто знаком с общими возможностями технологий и просто визуализировать желаемый результат для команды разработчиков.

Проецируемые страницы

Проецируемые слайды, используемые в презентациях или развлечениях, часто имеют такой же дизайн, как и печатные страницы.

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

Стало популярно использовать прозрачную пленку для презентаций (с непрозрачным текстом и изображениями) с использованием диапроекторов в 1940-х годах и слайд-проекторов в 1950-х годах. Некоторые фотокопировальные пленки можно печатать на прозрачных пленках для диапроекторов. компьютерных Программы презентаций стали доступны в 1980-х годах, что позволило сделать презентацию в цифровом формате. Презентации, разработанные на компьютере, можно распечатать на прозрачной пленке с помощью некоторых лазерных принтеров, перенести на слайды или проецировать напрямую с помощью ЖК- проекторов. Современные презентации часто отображаются в цифровом формате с использованием видеопроектора , монитора компьютера или телевизора с большим экраном .

Составление презентации представляет собой несколько иные задачи, чем печатный документ, особенно потому, что человек обычно говорит и ссылается на проецируемые страницы. Могут быть рассмотрены:

• Редактирование представленной информации таким образом, чтобы она либо повторяла то, что говорит говорящий (чтобы аудитория могла обратить внимание на то и другое), либо представляла только информацию, которую невозможно передать устно (чтобы избежать разделения внимания аудитории или простого чтения слайдов напрямую).
• Сделать слайды полезными для дальнейшего использования при их распечатке в качестве раздаточного материала или размещении в Интернете.
• Темп: слайды меняются через удобные промежутки времени, соответствуют продолжительности выступления, а порядок содержания соответствует ожиданиям докладчика.
• Предоставление говорящему возможности ссылаться на определенные элементы на странице, например, с помощью цвета, словесных меток или лазерной указки.
• Размер текста и графики таким образом, чтобы их было видно из глубины комнаты, что ограничивает объем информации, которая может быть представлена ​​на одном слайде.
• Использование анимации для акцентирования внимания, медленного представления информации или развлечения.
• Использование верхних и нижних колонтитулов или повторяющихся элементов, чтобы сделать все страницы похожими, чтобы они выглядели связными или указывали на прогресс.
• Использование заголовков для представления новых тем или сегментов

Сетки против шаблонов

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

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

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

Большинство программ для настольных издательских систем допускают создание сеток в виде страницы, заполненной цветными линиями или точками, расположенными на определенном равном расстоянии друг от друга по горизонтали и вертикали. Автоматические поля и линии корешка буклета (переплета) могут быть указаны для глобального использования по всему документу. В любой точке страницы можно разместить несколько дополнительных горизонтальных и вертикальных линий. Невидимые для конечного пользователя/аудитории фигуры могут быть размещены на странице в качестве ориентиров для макета страницы и обработки печати. Шаблоны программного обеспечения создаются путем дублирования файла данных шаблона или использования функций главной страницы в многостраничном документе. Мастер-страницы могут включать как элементы сетки, так и элементы шаблона, такие как элементы верхнего и нижнего колонтитула, автоматическую нумерацию страниц и функции автоматического оглавления.

Статические и динамические макеты

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

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

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

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

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

Фронтенд против бэкэнда

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

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

Элементы дизайна и выбор

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

Типичные решения по макету страницы включают в себя:

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

Конкретные элементы, которые необходимо разместить, могут включать:

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

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

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

Плавающий блок

Плавающий блок в написании и публикации — это любое изображение, текст, таблица или другое представление, которое не выровнено с основным потоком текста. Использование плавающих блоков для представления изображений и таблиц является типичной особенностью академического и технического письма , включая научные статьи и книги. Плавающие блоки обычно помечаются подписью или заголовком, описывающим их содержимое, а также номером, который используется для ссылки на рисунок в основном тексте. Общая система делит плавающий блок на две отдельно пронумерованные серии, маркированные рисунком (для рисунков, диаграмм, графиков и т. д.) и таблицей . Альтернативное название рисунка — изображение или графика .

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

Например, в статье по географии может быть «Рисунок 1: Карта мира», «Рисунок 2: Карта Европы», «Таблица 1: Население континентов», «Таблица 2: Население европейских стран» и т. д. . есть таблица рисунков В некоторых книгах в дополнение к оглавлению , в которой централизованно перечислены все фигуры, встречающиеся в работе.

Можно выделить и другие виды плавающих блоков, например:

Боковая панель: Для отступлений от основного повествования. Например, техническое руководство по использованию продукта может включать на боковых панелях примеры того, как разные люди использовали этот продукт в своей работе. Также называется интермеццо . См . врезку (публикация) .

Программа. В статьях и книгах по компьютерному программированию код и алгоритмы часто помещаются на рисунках.

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

Представляем макеты в разработке

Макет макета может быть создан , чтобы получить раннюю обратную связь, обычно до того, как весь контент будет фактически готов. Будь то бумажный или электронный носитель, первый вариант макета может представлять собой просто черновой набросок на бумаге и карандашом. Комплексный макет нового журнала может содержать заполнители для текста и изображений, но при этом демонстрировать расположение, типографский стиль и другие идиомы, призванные задать шаблон для реальных выпусков или конкретного незавершенного выпуска. Каркас веб-сайта — это недорогой способ показать макет без выполнения всей работы по созданию окончательного HTML и CSS, а также без написания текста или создания каких-либо изображений.

Текст Lorem ipsum часто используется, чтобы избежать смущения, которое может вызвать любой импровизированный образец копии в случае случайной публикации. Аналогично, изображения-заполнители часто помечаются как « только для позиции ».

См. также

• Эстетика
• Дизайн книги
• Каноны построения страниц
• Публикация базы данных
• Настольная издательская деятельность
• Редактирование
• Механизм макета
• Новостной дизайн
• Поле страницы
• Издательский обменный язык
• Нарезка
• Швейцарский стиль (дизайн)
• Веб-дизайн

Внешние ссылки

• Страница SGML на www.xml.org.
• Символы – все статьи, отнесенные к категории типографских символов.
• Группа пользователей TeX
• Страница XML на сайте www.W3C.org.