В графическом дизайне макет страницы — это расположение визуальных элементов на странице . Обычно он включает в себя организационные принципы композиции для достижения конкретных коммуникационных целей. [1]
Высокоуровневая компоновка страницы включает в себя принятие решения об общем расположении текста и изображений, а также, возможно, о размере или форме носителя. Она требует интеллекта, чувствительности и креативности и определяется культурой, психологией и тем, что авторы и редакторы документа хотят сообщить и подчеркнуть. Низкоуровневая навигация и набор текста являются более механическими процессами. Учитывая определенные параметры, такие как границы текстовых областей, гарнитура и размер шрифта, предпочтение выравнивания может быть выполнено простым способом. Пока настольные издательские системы не стали доминирующими, эти процессы все еще выполнялись людьми, но в современных издательских системах они почти всегда автоматизированы . Результат может быть опубликован как есть (как для интерьера телефонной книги жилого дома ) или может быть изменен графическим дизайнером (как для тщательно отполированного, дорогого издания).
Начиная с ранних иллюминированных страниц в рукописных книгах Средневековья и заканчивая сложными современными макетами журналов и каталогов, правильный дизайн страницы долгое время был предметом рассмотрения в печатных материалах. В печатных СМИ элементы обычно состоят из шрифта (текста), изображений (картинок) и иногда графики-заполнителя для элементов, которые не печатаются чернилами, таких как штамповка / лазерная резка , тиснение фольгой или слепое тиснение .
Термин «мебель страницы» может использоваться для элементов на странице, отличных от основного текста и изображений, таких как заголовки , подписи авторов или подписи к изображениям . [2]
В рукописях все элементы добавляются вручную, поэтому создатель может определить макет непосредственно в процессе создания работы, возможно, используя в качестве руководства расширенный эскиз. [3]
При древней ксилографии все элементы страницы вырезались непосредственно на дереве, хотя позднее могло потребоваться принятие решений по макету, если печать переносилась на более крупное произведение, например, большой кусок ткани, потенциально с несколькими оттисками клише.
С изобретением в эпоху Возрождения высокой печати и холодно-металлического подвижного шрифта набор осуществлялся путем физической сборки символов с помощью наборной палочки в гранке — длинном подносе. Любые изображения создавались путем гравировки .
Оригинальный документ представлял собой рукописную рукопись; если набор выполнялся кем-то другим, а не художником-верстальщиком, к рукописи добавлялась разметка с инструкциями относительно гарнитуры, размера шрифта и т. д. (Даже после того, как в 1860-х годах авторы начали использовать пишущие машинки, оригиналы по-прежнему назывались «рукописями», а процесс разметки оставался прежним.)
После первого раунда набора может быть напечатан граночный пробный оттиск для выполнения корректуры , либо для исправления ошибок в оригинале, либо для того, чтобы убедиться, что наборщик правильно скопировал рукопись и правильно интерпретировал разметку. Окончательный макет будет построен в «форме» или «forme» с использованием кусков дерева или металла (« мебель ») для разнесения текста и изображений по желанию, рамки, известной как погоня, и объектов, которые фиксируют рамку, известных как куины . Этот процесс называется импозицией и потенциально включает в себя размещение нескольких страниц для печати на одном листе бумаги, который позже будет сложен и, возможно, обрезан. «Импозиционный пробный оттиск» (по сути, короткий тираж печати) может быть создан для проверки окончательного размещения.
Изобретение набора горячим металлом в 1884 году ускорило процесс набора, позволив рабочим производить заготовки — целые строки текста — с помощью клавиатуры. Заготовки были результатом заливки расплавленного металла в формы, временно собранные наборной машиной. Однако процесс компоновки остался таким же, как и при холодном металлическом наборе: сборка в физические гранки.
Офсетная литография позволяет ярким и темным областям изображения (сначала запечатленного на пленке) контролировать размещение краски на печатной машине. Это означает, что если одну копию страницы можно создать на бумаге и сфотографировать, то можно напечатать любое количество копий. Набор можно набирать на пишущей машинке или, для достижения профессиональных результатов, сопоставимых с высокой печатью, на специализированной наборной машине. Например, IBM Selectric Composer может производить шрифты разного размера, разных шрифтов (включая пропорциональные шрифты ) и с выравниванием текста . С помощью фотогравюры и полутонов физические фотографии можно переносить в печать напрямую, а не полагаться на ручные гравюры.
Затем процесс макетирования превратился в задачу создания paste up , названного так потому, что резиновый цемент или другой клей использовался для физического наклеивания изображений и столбцов текста на жесткий лист бумаги. Завершенные страницы стали известны как camera-ready , «механические» или «механическое искусство».
Фотонабор был изобретен в 1945 году; после ввода с клавиатуры символы снимались один за другим на фотонегатив, который затем можно было напрямую отправить в типографию или сфотографировать на фотобумагу для склейки. Эти машины становились все более сложными, с моделями, управляемыми компьютером, способными сохранять текст на магнитной ленте.
По мере развития графических возможностей компьютеров их начали использовать для визуализации символов, столбцов, страниц и даже многостраничных подписей напрямую, а не просто для вызова фотографического шаблона из заранее предоставленного набора. Помимо использования в качестве устройств отображения для операторов компьютеров, электронно-лучевые трубки использовались для визуализации текста для фотонабора. Однако изогнутая природа ЭЛТ-дисплея приводила к искажениям текста и изображений на экране по направлению к внешним краям экранов. Появление «плоских экранов» (ЖК-дисплеев, светодиодов и, в последнее время, OLED) в 1997 году устранило проблемы искажения, вызванные старыми ЭЛТ-дисплеями. По состоянию на 2016 год [обновлять]плоские дисплеи почти полностью заменили ЭЛТ-дисплеи. [4] [ циклическая ссылка ]
Принтеры , подключенные непосредственно к компьютерам, позволяли им печатать документы напрямую, в нескольких копиях или как оригинал, который можно было скопировать на ditto-машине или фотокопировальном аппарате . Текстовые процессоры WYSIWYG позволили обычным офисным пользователям и потребителям создавать более сложные макеты страниц, использовать выравнивание текста и использовать больше шрифтов, чем это было возможно с пишущими машинками. Ранняя матричная печать была достаточна для офисных документов, но была слишком низкого качества для профессионального набора. Струйная печать и лазерная печать производили шрифты достаточно высокого качества, поэтому компьютеры с этими типами принтеров быстро заменили фотонаборные машины.
С современным программным обеспечением для настольных издательских систем , таким как флагманское программное обеспечение Adobe InDesign [5] и облачное программное обеспечение Marq [6] , процесс макетирования может происходить полностью на экране. (Подобные параметры макета, которые были бы доступны профессиональной типографии, делающей макет, поддерживаются программным обеспечением для настольных издательских систем; в отличие от этого, программное обеспечение для «обработки текста» обычно имеет гораздо более ограниченный набор доступных вариантов макета и типографики, жертвуя гибкостью ради простоты использования для более распространенных приложений.) Готовый документ может быть напрямую распечатан как версия, готовая к печати, без необходимости физической сборки (при наличии достаточно большого принтера). Изображения в оттенках серого должны быть либо полутоновыми в цифровом виде, если они отправляются на офсетную машину, либо отправлены отдельно в типографию для вставки в отмеченные области. Завершенные работы также могут быть переданы в цифровом виде в типографию, которая может распечатать их самостоятельно, снять непосредственно на пленку или использовать технологию «компьютер-форма», чтобы полностью пропустить физический оригинал. PostScript и Portable Document Format (PDF) стали стандартными форматами файлов для цифровой передачи.
С появлением персональных компьютеров навыки верстки страниц распространились на электронные и печатные носители. Электронные книги , документы PDF и статические веб-страницы относительно точно отражают бумажные документы, но компьютеры также могут добавлять мультимедийную анимацию и интерактивность. Макет страницы для интерактивных носителей пересекается с дизайном интерфейса и дизайном пользовательского опыта ; интерактивная «страница» более известна как графический пользовательский интерфейс (GUI).
Современные веб-страницы обычно создаются с использованием HTML для контента и общей структуры, каскадных таблиц стилей для управления деталями представления, такими как типографика и интервалы, и JavaScript для интерактивности. Поскольку все эти языки основаны на тексте, эта работа может быть выполнена в текстовом редакторе или специальном HTML-редакторе , который может иметь функции WYSIWYG или другие вспомогательные средства. Дополнительные технологии, такие как Macromedia Flash, могут использоваться для мультимедийного контента. Веб-разработчики отвечают за фактическое создание готового документа с использованием этих технологий, но отдельный веб-дизайнер может отвечать за создание макета. Определенный веб-дизайнер может быть также беглым веб-разработчиком или может быть просто знаком с общими возможностями технологий и просто визуализировать желаемый результат для команды разработчиков.
Проецируемые слайды, используемые в презентациях или развлекательных программах, часто имеют те же требования к компоновке, что и печатные страницы.
Волшебный фонарь и непрозрачный проектор использовались во время лекций в 1800-х годах с использованием печатных, машинописных, сфотографированных или нарисованных от руки оригиналов. Два комплекта фотопленки (один негативный и один позитивный) или одна обращаемая пленка могут использоваться для создания позитивных изображений, которые могут проецироваться при прохождении света. Интертитры широко использовались в самых ранних кинофильмах, когда звук был недоступен; они до сих пор иногда используются в дополнение к вездесущим карточкам тщеславия и титрам .
Стало популярным использовать прозрачную пленку для презентаций (с непрозрачным текстом и изображениями) с использованием проекторов верхнего расположения в 1940-х годах и проекторов слайдов в 1950-х годах. Прозрачные пленки для проекторов верхнего расположения могли быть напечатаны некоторыми фотокопировальными аппаратами. Программы для компьютерных презентаций стали доступны в 1980-х годах, что позволило сделать макет презентации в цифровом виде. Разработанные на компьютере презентации можно было напечатать на прозрачной пленке с помощью некоторых лазерных принтеров, перенести на слайды или напрямую спроецировать с помощью ЖК- проекторов верхнего расположения. Современные презентации часто отображаются в цифровом виде с помощью видеопроектора , компьютерного монитора или телевизора с большим экраном .
Макет презентации представляет собой несколько иные проблемы, чем печатный документ, особенно потому, что человек обычно будет говорить и ссылаться на проецируемые страницы. Можно рассмотреть:
Сетки и шаблоны — это шаблоны дизайна макетов страниц, используемые в рекламных кампаниях и многостраничных публикациях, включая веб-сайты.
Сетка — это набор руководящих принципов, которые можно увидеть в процессе проектирования и которые не видны конечному пользователю/аудитории, для выравнивания и повторения элементов на странице. Макет страницы может или не может соответствовать этим принципам в зависимости от того, насколько много повторений или разнообразия требует стиль дизайна в серии. Сетки должны быть гибкими. Использование сетки для размещения элементов на странице может потребовать столько же или даже больше навыков графического дизайна, чем те, которые требовались для проектирования сетки.
Шаблон , напротив, более жесткий. Шаблон включает повторяющиеся элементы, в основном видимые конечному пользователю/аудитории. Использование шаблона для компоновки элементов обычно требует меньше навыков графического дизайна, чем те, которые требовались для разработки шаблона. Шаблоны используются для минимальной модификации фоновых элементов и частой модификации (или замены) содержимого переднего плана.
Большинство настольных издательских программ допускают сетки в виде страницы, заполненной цветными линиями или точками, размещенными на указанном равном расстоянии по горизонтали и вертикали друг от друга. Автоматические поля и линии корешка брошюры (переплета) могут быть указаны для глобального использования по всему документу. Несколько дополнительных горизонтальных и вертикальных линий могут быть размещены в любой точке страницы. Невидимые для конечного пользователя/аудитории формы могут быть размещены на странице в качестве руководящих принципов для макета страницы и обработки печати. Шаблоны программного обеспечения достигаются путем дублирования файла данных шаблона или с помощью функций главной страницы в многостраничном документе. Главные страницы могут включать как элементы сетки, так и элементы шаблона, такие как элементы верхнего и нижнего колонтитула, автоматическая нумерация страниц и функции автоматического оглавления.
Статические макеты позволяют лучше контролировать эстетику и тщательно оптимизировать пространство вокруг и перекрывающийся контент неправильной формы, чем динамические макеты. В веб-дизайне это иногда называют макетом фиксированной ширины; но весь макет может масштабироваться по размеру, сохраняя при этом исходные пропорции, статическое размещение и стиль контента. Все форматы растровых изображений по сути являются статическими макетами, но статический макет может включать текст с возможностью поиска, отделяя текст от графики.
Напротив, электронные страницы допускают динамические макеты с подкачкой контента, персонализацией стилей, масштабированием текста, масштабированием изображений или переформатируемым контентом с переменными размерами страниц, часто называемыми текучим или жидким макетом. Динамические макеты, скорее всего, разделяют представление от контента , что имеет свои преимущества. Динамический макет размещает весь текст и изображения в прямоугольных областях строк и столбцов. Поскольку ширина и высота этих областей определяются как проценты от доступного экрана, они реагируют на изменяющиеся размеры экрана. Они автоматически обеспечивают максимальное использование доступного пространства, всегда оставаясь оптимально адаптированными как к изменениям размеров на экране, так и к ограничениям, заданным оборудованием. Размер текста можно свободно изменять, чтобы обеспечить индивидуальные потребности пользователей в удобочитаемости, не нарушая при этом пропорции заданного макета. Таким образом, общее расположение контента на экране может всегда оставаться таким, каким оно было изначально задумано.
Разработка статического макета может потребовать больше навыков графического дизайна и визуального искусства, тогда как разработка динамического макета может потребовать больше навыков интерактивного дизайна и управления контентом , чтобы тщательно предвидеть изменения контента.
Графика движения не вписывается ни в одну из категорий, но может включать навыки макетирования или тщательное рассмотрение того, как движение может повлиять на макет. В любом случае элемент движения делает его динамическим макетом, но таким, который оправдывает дизайн графики движения больше, чем статический графический дизайн или интерактивный дизайн.
Электронные страницы могут использовать как статические, так и динамические функции макета путем разделения страниц или комбинирования эффектов. Например, раздел страницы, такой как веб-баннер, может содержать статическую или динамическую графику, содержащуюся в области подкачки контента. Динамический или живой текст может быть обернут вокруг изображений неправильной формы с помощью невидимых разделителей, чтобы отодвинуть текст от краев. Некоторые компьютерные алгоритмы могут определять края объекта, содержащего прозрачность , и обтекать контент вокруг контуров.
С современными технологиями поиска и вывода медиаконтента визуальные коммуникации ( front-end ) и информационные технологии ( back-end ) во многом пересекаются. Крупноформатные издания (толстые книги, особенно обучающего характера) и электронные страницы (веб-страницы) требуют метаданных для автоматической индексации, автоматического переформатирования, публикации в базе данных, динамического отображения страниц и интерактивности конечного пользователя. Большая часть метаданных ( метатеги ) должна быть закодирована вручную или указана в процессе макетирования страницы. Это разделяет задачу макетирования страницы между художниками и инженерами или поручает художнику/инженеру делать и то, и другое.
Более сложные проекты могут потребовать двух отдельных дизайнов: дизайн макета страницы в качестве front-end и кодирование функций в качестве back-end. В этом случае front-end может быть разработан с использованием альтернативной технологии макета страницы, такой как программное обеспечение для редактирования изображений или на бумаге с методами ручной визуализации. Большинство программного обеспечения для редактирования изображений включают функции для преобразования макета страницы для использования в редакторе «What You See Is What You Get» ( WYSIWYG ) или функции для экспорта графики для программного обеспечения для настольных издательских систем. Редакторы WYSIWYG и программное обеспечение для настольных издательских систем в большинстве случаев позволяют выполнять front-end-дизайн до back-end-кодирования. Проектирование интерфейса и публикация баз данных могут потребовать больше технических знаний или сотрудничества с ИТ-инженерией в front-end. Иногда функция back-end заключается в автоматизации поиска и размещения контента на front-end.
Макет страницы может быть предписан в большей или меньшей степени фирменным стилем , который может быть реализован в определенном шаблоне настольной издательской системы. Также может быть относительно немного макета, который нужно сделать по сравнению с количеством страниц (как в романах и других книгах без рисунков).
Типичные решения по макету страницы включают в себя:
Конкретные элементы, которые необходимо включить, могут включать:
В газетном производстве окончательный выбор и кадрирование фотографий, сопровождающих статьи, может быть оставлено редактору макета (поскольку выбор фотографии может повлиять на форму необходимой области и, следовательно, на остальную часть макета), или может быть отдельный фоторедактор. Аналогично, заголовки могут быть написаны редактором макета, редактором-копирайтером или оригинальным автором.
Чтобы истории соответствовали окончательному макету, можно внести относительно незначительные изменения в текст (например, перефразировать для краткости) или редактор макета может внести небольшие изменения в элементы типографики, такие как размер шрифта или интерлиньяж.
Плавающий блок в письменной и издательской деятельности — это любая графика, текст, таблица или другое представление, не выровненное с основным потоком текста. Использование плавающих блоков для представления изображений и таблиц является типичной чертой академического письма и технического письма , включая научные статьи и книги. Плавающие блоки обычно помечаются подписью или заголовком, описывающим его содержание, и номером, который используется для ссылки на рисунок из основного текста. Распространенная система делит плавающий блок на две отдельно пронумерованные серии, помеченные как рисунок (для рисунков, диаграмм, графиков и т. д.) и таблица . Альтернативное название для рисунка — изображение или графика .
Плавающие блоки называются плавающими, потому что они не зафиксированы на месте на странице, а скорее дрейфуют к краю страницы. Размещая изображения или другие крупные элементы по бокам страниц [7], а не встраивая их в середину основного потока текста, набор становится более гибким и прерывание потока повествования исключается.
Например, статья по географии может иметь «Рисунок 1: Карта мира», «Рисунок 2: Карта Европы», «Таблица 1: Население континентов», «Таблица 2: Население европейских стран» и т. д. В некоторых книгах, помимо оглавления , будет таблица рисунков , в которой централизованно перечислены все рисунки, встречающиеся в работе.
Также можно выделить и другие виды плавающих блоков, например:
Макет макета может быть создан для получения ранней обратной связи, обычно до того, как весь контент будет фактически готов. Будь то бумажные или электронные носители, первый черновик макета может быть просто черновиком на бумаге и карандашным наброском. Полный макет для нового журнала может показывать заполнители для текста и изображений, но демонстрировать размещение, типографский стиль и другие идиомы, предназначенные для установки шаблона для фактических выпусков или конкретного незаконченного выпуска. Каркас веб-сайта — это недорогой способ показать макет без выполнения всей работы по созданию окончательного HTML и CSS, а также без написания копии или создания каких-либо изображений.
Текст Lorem ipsum часто используется, чтобы избежать неловкости, которую может вызвать любая импровизированная пробная копия, если она будет случайно опубликована. Аналогично, изображения-заполнители часто помечаются как « только для позиции ».
