In
graphic design, page layout is the arrangement of visual elements on a
page
Page most commonly refers to:
* Page (paper), one side of a leaf of paper, as in a book
Page, PAGE, pages, or paging may also refer to:
Roles
* Page (assistance occupation), a professional occupation
* Page (servant), traditionally a young m ...
. It generally involves organizational principles of
composition
Composition or Compositions may refer to:
Arts and literature
*Composition (dance), practice and teaching of choreography
*Composition (language), in literature and rhetoric, producing a work in spoken tradition and written discourse, to include v ...
to achieve specific communication objectives.
The high-level page layout involves deciding on the overall arrangement of text and images, and possibly on the size or shape of the medium. It requires intelligence, sentience, and creativity, and is informed by culture, psychology, and what the document authors and editors wish to communicate and emphasize. Low-level
pagination
Pagination, also known as paging, is the process of dividing a document into discrete pages, either electronic pages or printed pages.
In reference to books produced without a computer, pagination can mean the consecutive page numbering to ind ...
and
typesetting
Typesetting is the composition of text by means of arranging physical ''type'' (or ''sort'') in mechanical systems or '' glyphs'' in digital systems representing '' characters'' (letters and other symbols).Dictionary.com Unabridged. Random ...
are more mechanical processes. Given certain parameters such as boundaries of text areas, the typeface, and font size, justification preference can be done in a straightforward way. Until desktop publishing became dominant, these processes were still done by people, but in modern publishing, they are almost always
automated
Automation describes a wide range of technologies that reduce human intervention in processes, namely by predetermining decision criteria, subprocess relationships, and related actions, as well as embodying those predeterminations in machines ...
. The result might be published as-is (as for a residential
phone book
A telephone is a telecommunications device that permits two or more users to conduct a conversation when they are too far apart to be easily heard directly. A telephone converts sound, typically and most efficiently the human voice, into ele ...
interior) or might be tweaked by a graphic designer (as for a highly polished, expensive publication).
Beginning from early
illuminated
Illuminated may refer to:
* "Illuminated" (song), by Hurts
* Illuminated Film Company, a British animation house
* ''Illuminated'', alternative title of Black Sheep (Nat & Alex Wolff album)
* Illuminated manuscript
See also
* Illuminate (disambi ...
pages in hand-copied books of the
Middle Ages
In the history of Europe, the Middle Ages or medieval period lasted approximately from the late 5th to the late 15th centuries, similar to the post-classical period of global history. It began with the fall of the Western Roman Empire ...
and proceeding down to intricate modern magazine and catalog layouts, proper page design has long been a consideration in printed material. With print media, elements usually consist of
type (text),
images (pictures), and occasionally place-holder graphics for elements that are not printed with ink such as
die/
laser cutting,
foil stamping
Hot stamping or foil stamping is a printing method of relief printing in which pre-dried ink or foils are transferred to a surface at high temperatures. The method has diversified since its rise to prominence in the 19th century to include a varie ...
or
blind embossing.
History and layout technologies
Direct physical page setting
With
manuscript
A manuscript (abbreviated MS for singular and MSS for plural) was, traditionally, any document written by hand – or, once practical typewriters became available, typewritten – as opposed to mechanically printed or reproduced in ...
s, all of the elements are added by hand, so the creator can determine the layout directly as they create the work, perhaps with an advanced sketch as a guide.
With ancient
woodblock printing
Woodblock printing or block printing is a technique for printing text, images or patterns used widely throughout East Asia and originating in China in antiquity as a method of textile printing, printing on textiles and later paper. Each page o ...
, all elements of the page were carved directly into the wood, though later layout decisions might need to be made if the printing was transferred onto a larger work, such as a large piece of fabric, potentially with multiple block impressions.
With the Renaissance invention of
letterpress printing
Letterpress printing is a technique of relief printing. Using a printing press, the process allows many copies to be produced by repeated direct impression of an inked, raised surface against sheets or a continuous roll of paper. A worker com ...
and cold-metal
moveable type
Movable type (US English; moveable type in British English) is the system and technology of printing and typography that uses movable components to reproduce the elements of a document (usually individual alphanumeric characters or punctuation m ...
,
typesetting
Typesetting is the composition of text by means of arranging physical ''type'' (or ''sort'') in mechanical systems or '' glyphs'' in digital systems representing '' characters'' (letters and other symbols).Dictionary.com Unabridged. Random ...
was accomplished by physically assembling characters using a
composing stick
In letterpress printing and typesetting, a composing stick is a tray-like tool used to assemble pieces of metal type into words and lines, which are then transferred to a ''galley'' before being locked into a ''forme'' and printed. Many composin ...
into a galley—a long tray. Any images would be created by
engraving
Engraving is the practice of incising a design onto a hard, usually flat surface by cutting grooves into it with a burin. The result may be a decorated object in itself, as when silver, gold, steel, or glass are engraved, or may provide an in ...
.
The original document would be a hand-written manuscript; if the typesetting was performed by someone other than the layout artist,
markup would be added to the manuscript with instructions as to typeface, font size, and so on. (Even after authors began to use typewriters in the 1860s, originals were still called "manuscripts" and the markup process was the same.)
After the first round of typesetting, a
galley proof might be printed in order for
proofreading to be performed, either to correct errors in the original, or to make sure that the typesetter had copied the manuscript properly, and correctly interpreted the markup. The final layout would be constructed in a "form" or "forme" using pieces of wood or metal ("
furniture") to space out the text and images as desired, a frame known as a
chase
Chase or CHASE may refer to:
Businesses
* Chase Bank, a national bank based in New York City, New York
* Chase Aircraft (1943–1954), a defunct American aircraft manufacturing company
* Chase Coaches, a defunct bus operator in England
* Chase Co ...
, and objects which lock down the frame known as
quoins
Quoins ( or ) are masonry blocks at the corner of a wall. Some are structural, providing strength for a wall made with inferior stone or rubble, while others merely add aesthetic detail to a corner. According to one 19th century encyclopedia, t ...
. This process is called
imposition
Imposition is one of the fundamental steps in the prepress printing process. It consists of the arrangement of the printed product’s pages on the printer’s sheet, in order to obtain faster printing, simplify binding and reduce paper waste.
...
, and potentially includes arranging multiple pages to be printed on the same sheet of paper which will later be folded and possibly trimmed. An "imposition proof" (essentially a short run of the press) might be created to check the final placement.
The invention of
hot metal typesetting in 1884 sped up the typesetting process by allowing workers to produce
slugs
Slug, or land slug, is a common name for any apparently shell-less terrestrial gastropod mollusc. The word ''slug'' is also often used as part of the common name of any gastropod mollusc that has no shell, a very reduced shell, or only a sma ...
—entire lines of text—using a keyboard. The slugs were the result of molten metal being poured into molds temporarily assembled by the typesetting machine. The layout process remained the same as with cold metal type, however: assembly into physical galleys.
Paste-up era
Offset lithography
Offset printing is a common printing technique in which the inked image is transferred (or "offset") from a plate to a rubber blanket and then to the printing surface. When used in combination with the lithographic process, which is based on ...
allows the bright and dark areas of an image (at first captured on film) to control ink placement on the printing press. This means that if a single copy of the page can be created on paper and photographed, then any number of copies could be printed. The type could be set with a
typewriter
A typewriter is a mechanical or electromechanical machine for typing characters. Typically, a typewriter has an array of keys, and each one causes a different single character to be produced on paper by striking an inked ribbon selectivel ...
, or to achieve professional results comparable to letterpress, a specialized typesetting machine. The
IBM Selectric Composer
The IBM Selectric typewriter was a highly successful line of electric typewriters introduced by IBM on 31 July 1961.
Instead of the "basket" of individual typebars that swung up to strike the ribbon and page in a typical typewriter of the perio ...
, for example, could produce type of different size, different fonts (including
proportional font
A typeface (or font family) is the design of lettering that can include variations in size, weight (e.g. bold), slope (e.g. italic), width (e.g. condensed), and so on. Each of these variations of the typeface is a font.
There are thousands ...
s), and with
text justification. With
photoengraving
Photoengraving is a process that uses a light-sensitive photoresist applied to the surface to be engraved to create a mask that protects some areas during a subsequent operation which etches, dissolves, or otherwise removes some or all of the mat ...
and
halftone, physical photographs could be transferred into print directly, rather than relying on hand-made engravings.
The layout process then became the task of creating the
paste up
Paste is a term for any very thick viscous fluid. It may refer to:
Science and technology
* Adhesive or paste
** Wallpaper paste
** Wheatpaste, A liquid adhesive made from vegetable starch and water
* Paste (rheology), a substance that behaves ...
, so named because
rubber cement
Rubber cement (cow gum in British English) is an adhesive made from elastic polymers (typically latex) mixed in a solvent such as acetone, hexane, heptane or toluene to keep it fluid enough to be used. This makes it part of the class of drying ...
or another adhesive would be used to physically paste images and columns of text onto a rigid sheet of paper. Completed pages become known as
camera-ready, "mechanical" or "mechanical art".
Phototypesetting was invented in 1945; after keyboard input, characters were shot one-by-one onto a photographic negative, which could then be sent to the print shop directly, or shot onto photographic paper for paste-up. These machines became increasingly sophisticated, with computer-driven models able to store text on magnetic tape.
Computer-aided publishing
As the graphics capabilities of computers matured, they began to be used to render characters, columns, pages, and even multi-page
signatures
A signature (; from la, signare, "to sign") is a handwritten (and often stylized) depiction of someone's name, nickname, or even a simple "X" or other mark that a person writes on documents as a proof of identity and intent. The writer of a ...
directly, rather than simply summoning a photographic template from a pre-supplied set. In addition to being used as display devices for computer operators,
cathode ray tubes were used to render text for phototypesetting. The curved nature of the CRT display, however, led to distortions of text and art on the screen towards the outer edges of the screens. The advent of "flat screen" monitors (LCD, LED, and more recently OLED) in 1997 eliminated the distortion problems caused by older CRT displays. As of 2016 flat-panel displays have almost completely replaced CRT displays.
Printers
Printer may refer to:
Technology
* Printer (publishing), a person or a company
* Printer (computing), a hardware device
* Optical printer for motion picture films
People
* Nariman Printer ( fl. c. 1940), Indian journalist and activist
* Jam ...
attached directly to computers allowed them to print documents directly, in multiple copies, or as an original which could be copied on a
ditto machine
A spirit duplicator (also referred to as a Rexograph or Ditto machine in North America, Banda machine in the UK, Gestetner machine in Australia) is a printing method invented in 1923 by Wilhelm Ritzerfeld that was commonly used for much of the ...
or
photocopier
A photocopier (also called copier or copy machine, and formerly Xerox machine, the generic trademark) is a machine that makes copies of documents and other visual images onto paper or plastic film quickly and cheaply. Most modern photocopiers ...
.
WYSIWYG
In computing, WYSIWYG ( ), an acronym for What You See Is What You Get, is a system in which editing software allows content to be edited in a form that resembles its appearance when printed or displayed as a finished product, such as a printed d ...
word processor
A word processor (WP) is a device or computer program that provides for input, editing, formatting, and output of text, often with some additional features.
Early word processors were stand-alone devices dedicated to the function, but current ...
s made it possible for general office users and consumers to make more sophisticated page layouts, use text justification, and use more fonts than were possible with typewriters. Early
dot matrix printing
Dot matrix printing, sometimes called impact matrix printing, is a computer printing process in which ink is applied to a surface using a relatively low-resolution dot matrix for layout. Dot matrix printers typically use a print head that moves ...
was sufficient for office documents but was of too low a quality for professional typesetting.
Inkjet printing
Inkjet printing is a type of computer printing that recreates a digital image by propelling droplets of ink onto paper and plastic substrates. Inkjet printers were the most commonly used type of printer in 2008, and range from small inexpen ...
and
laser printing
Laser printing is an electrostatic digital printing process. It produces high-quality text and graphics (and moderate-quality photographs) by repeatedly passing a laser beam back and forth over a negatively-charged cylinder called a "drum" to ...
did produce sufficient quality type, and so computers with these types of printers quickly replaced phototypesetting machines.
With modern
desktop publishing
Desktop publishing (DTP) is the creation of documents using page layout software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online ...
software such as flagship software
Adobe InDesign and cloud-based
Lucidpress, the layout process can occur entirely on-screen. (Similar layout options that would be available to a professional print shop making a paste-up are supported by desktop publishing software; in contrast, "word processing" software usually has a much more limited set of layout and typography choices available, trading off flexibility for ease of use for more common applications.) A finished document can be directly printed as the camera-ready version, with no physical assembly required (given a big enough printer). Greyscale images must be either half-toned digitally if being sent to an offset press or sent separately for the print shop to insert into marked areas. Completed works can also be transmitted digitally to the print shop, who may print it themselves, shoot it directly to film, or use
computer to plate technology to skip the physical original entirely.
PostScript and
Portable Document Format
Portable Document Format (PDF), standardized as ISO 32000, is a file format developed by Adobe in 1992 to present documents, including text formatting and images, in a manner independent of application software, hardware, and operating syste ...
(PDF) have become standard file formats for digital transmission.
Digital media (non-paper)
Since the advent of
personal computing
A personal computer (PC) is a multi-purpose microcomputer whose size, capabilities, and price make it feasible for individual use. Personal computers are intended to be operated directly by an end user, rather than by a computer expert or techn ...
, page layout skills have expanded to
electronic media
Electronic media are media that use electronics or electromechanical means for the audience to access the content. This is in contrast to static media (mainly print media), which today are most often created digitally, but do not require el ...
as well as print media.
E-book
An ebook (short for electronic book), also known as an e-book or eBook, is a book publication made available in digital form, consisting of text, images, or both, readable on the flat-panel display of computers or other electronic devices. Alt ...
s, PDF documents, and static
web pages mirror paper documents relatively closely, but computers can also add
multimedia
Multimedia is a form of communication that uses a combination of different content forms such as text, audio, images, animations, or video into a single interactive presentation, in contrast to tradit ...
animation, and interactivity. Page layout for
interactive media
Interactive media normally refers to products and services on digital computer-based systems which respond to the user's actions by presenting content such as text, moving image, animation, video and audio. Since its early conception, various f ...
overlaps with
interface design
User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and t ...
and
user experience design; an interactive "page" is better known as a
graphical user interface
The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inst ...
(GUI).
Modern web pages are typically produced using
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaSc ...
for content and general structure,
cascading style sheet
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technol ...
s to control presentation details such as typography and spacing, and
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
for interactivity. Since these languages are all text-based, this work can be done in a
text editor
A text editor is a type of computer program that edits plain text. Such programs are sometimes known as "notepad" software (e.g. Windows Notepad). Text editors are provided with operating systems and software development packages, and can be ...
, or a special
HTML editor
An HTML editor is a program for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HT ...
which may have WYSIWYG features or other aids. Additional technologies such as
Macromedia Flash Macromedia Flash may refer to:
*Adobe Animate, a multimedia authoring and computer animation program formerly known as ''Macromedia Flash''
*Adobe Flash
Adobe Flash (formerly Macromedia Flash and FutureSplash) is a multimedia software platform ...
may be used for multimedia content.
Web developers are responsible for actually creating a finished document using these technologies, but a separate
web designer
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...
may be responsible for establishing the layout. A given web designer might be a fluent web developer as well, or may merely be familiar with the general capabilities of the technologies and merely visualize the desired result for the development team.
Projected pages
Projected slides used in presentations or entertainment often have similar layout considerations to printed pages.
The
magic lantern
The magic lantern, also known by its Latin name , is an early type of image projector that used pictures—paintings, prints, or photographs—on transparent plates (usually made of glass), one or more lenses, and a light source. Because a si ...
and
opaque projector
The opaque projector, epidioscope, epidiascope or episcope is a device which displays opaque materials by shining a bright lamp onto the object from above. A system of mirrors, prisms and/or imaging lenses is used to focus an image of the materia ...
were used during lectures in the 1800s, using printed, typed, photographed, or hand-drawn originals. Two sets of
photographic film (one negative and one positive) or one
reversal film
In photography, reversal film or slide film is a type of photographic film that produces a positive image on a transparent base. Instead of negatives and prints, reversal film is processed to produce transparencies or diapositives (abbreviat ...
can be used to create positive images that can be projected with light passing through.
Intertitle
In films, an intertitle, also known as a title card, is a piece of filmed, printed text edited into the midst of (i.e., ''inter-'') the photographed action at various points. Intertitles used to convey character dialogue are referred to as "dialo ...
s were used extensively in the earliest motion pictures when sound was not available; they are still used occasionally in addition to the ubiquitous
vanity cards and
credits.
It became popular to use transparent film for presentations (with opaque text and images) using
overhead projector
An overhead projector (often abbreviated to OHP), like a film or slide projector, uses light to project an enlarged image on a screen, allowing the view of a small document or picture to be shared with a large audience.
In the overhead projec ...
s in the 1940s, and
slide projector
A slide projector is an opto-mechanical device for showing photographic slides.
35 mm slide projectors, direct descendants of the larger-format magic lantern, first came into widespread use during the 1950s as a form of occasional hom ...
s in the 1950s.
Transparencies for overhead projectors could be printed by some photocopiers. Computer
presentation program
A computing, a presentation program (also called presentation software) is a software package used to display information in the form of a slide show. It has three major functions:
* an editor that allows text to be inserted and formatted
* a ...
s became available in the 1980s, making it possible to layout a presentation digitally. Computer-developed presentations could be printed to a transparency with some laser printers, transferred to slides, or projected directly using
LCD overhead projectors. Modern presentations are often displayed digitally using a
video projector
A video projector is an image projector that receives a video signal and projects the corresponding image on a projection screen using a lens system. Video projectors use a very bright ultra-high-performance lamp (a special mercury arc lamp), X ...
,
computer monitor, or
large-screen television.
Laying out a
presentation
A presentation conveys information from a speaker to an audience. Presentations are typically demonstrations, introduction, lecture, or speech meant to inform, persuade, inspire, motivate, build goodwill, or present a new idea/product. Presenta ...
presents slightly different challenges than a print document, especially because a person will typically be speaking and referring to the projected pages. Consideration might be given to:
* Editing the information presented so it either repeats what the speaker is saying (so the audience can pay attention to either) or only presents information that cannot be conveyed verbally (to avoid dividing audience attention or simply reading slides directly)
* Making the slides useful for later reference if printed as handouts or posted online
* Pacing, so slides are changed at comfortable intervals, fit the length of the talk, and content order matches the speaker's expectation
* Providing a way for the speaker to refer to specific items on the page, such as with color, verbal labels, or a
laser pointer
A laser pointer or laser pen is a small handheld device with a power source (usually a battery) and a laser diode emitting a very narrow coherent low-powered laser beam of visible light, intended to be used to highlight something of interest by ...
* Sizing text and graphics so they can be seen from the back of the room, which limits the amount of information that can be presented on a single slide
* Use of animation to add emphasis, introduce information slowly, or be entertaining
* Using headers, footers, or repeated elements to make all pages similar so they feel cohesive, or indicate progress
* Using titles to introduce new topics or segments
Grids versus templates
Grid
Grid, The Grid, or GRID may refer to:
Common usage
* Cattle grid or stock grid, a type of obstacle is used to prevent livestock from crossing the road
* Grid reference, used to define a location on a map
Arts, entertainment, and media
* News ...
s and templates are page layout design patterns used in
advertising campaign
An advertising campaign is a series of advertisement messages that share a single idea and theme which make up an integrated marketing communication (IMC). An IMC is a platform in which a group of people can group their ideas, beliefs, and conc ...
s and multiple-page publications, including websites.
A grid is a set of guidelines, able to be seen in the design process and invisible to the end-user/audience, for aligning and repeating elements on a page. A page layout may or may not stay within those guidelines, depending on how much repetition or variety the design style in the series calls for. Grids are meant to be flexible. Using a grid to layout elements on the page may require just as much or more graphic design skill than that which was required to design the grid.
In contrast, a template is more rigid. A template involves repeated elements mostly visible to the end-user/audience. Using a template to layout elements usually involves less graphic design skill than that which was required to design the template. Templates are used for minimal modification of background elements and frequent modification (or swapping) of foreground content.
Most desktop publishing software allows for grids in the form of a page filled with coloured lines or dots placed at a specified equal horizontal and vertical distance apart. Automatic margins and booklet spine (gutter) lines may be specified for global use throughout the document. Multiple additional horizontal and vertical lines may be placed at any point on the page. Invisible to the end-user/audience shapes may be placed on the page as guidelines for page layout and print processing as well. Software templates are achieved by duplicating a template data file, or with
master page features in a multiple-page document. Master pages may include both grid elements and template elements such as header and footer elements, automatic page numbering, and automatic table of contents features.
Static versus dynamic layouts
Static layouts allow for more control over the
aesthetics
Aesthetics, or esthetics, is a branch of philosophy that deals with the nature of beauty and taste, as well as the philosophy of art (its own area of philosophy that comes out of aesthetics). It examines aesthetic values, often expressed t ...
, and thorough optimization of space around and overlapping irregular-shaped content than dynamic layouts. In
web design
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...
, this is sometimes referred to as a fixed width layout; but the entire layout may be scalable in size while still maintaining the original proportions, static placement, and style of the content. All
raster image formats are static layouts in effect, but a static layout may include searchable text by separating the text from the graphics.
In contrast, electronic pages allow for
dynamic layouts with swapping content,
personalization
Personalization (broadly known as customization) consists of tailoring a service or a product to accommodate specific individuals, sometimes tied to groups or segments of individuals. A wide variety of organizations use personalization to improv ...
of styles, text scaling,
image scaling
In computer graphics and digital imaging, image scaling refers to the resizing of a digital image. In video technology, the magnification of digital material is known as upscaling or resolution enhancement.
When scaling a vector graphic image ...
, or
reflowable content with variable page sizes often referred to as fluid or liquid layout. Dynamic layouts are more likely to
separate presentation from content, which comes with its own advantages. A dynamic layout lays out all text and images into rectangular areas of rows and columns. As these areas' widths and heights are defined to be percentages of the available screen, they are responsive to varying screen dimensions. They'll automatically ensure maximized use of available space while always staying adapted optimally both on-screen resizes and hardware-given restrictions. Text may freely be resized to provide users' individual needs on legibility while never disturbing a given layout's proportions. The content's overall arrangement on screen this way may always remain as it was originally designed.
Static layout design may involve more graphic design and visual art skills, whereas dynamic layout design may involve more
interactive design and
content management
Content management (CM) is a set of processes and technologies that supports the collection, managing, and publishing of information in any form or medium. When stored and accessed via computers, this information may be more specifically referre ...
skills to thoroughly anticipate content variation.
Motion graphics
Motion graphics (sometimes mograph) are pieces of animation or digital footage which create the illusion of motion or rotation, and are usually combined with audio for use in multimedia projects. Motion graphics are usually displayed via elec ...
don't fit neatly into either category, but may involve layout skills or careful consideration of how the motion may affect the layout. In either case, the element of motion makes it a dynamic layout, but one that warrants
motion graphic design
Motion graphic design, also known as motion design, is a subset of graphic design in that it uses graphic design principles in a filmmaking or video production context (or other temporally evolving visual media) through the use of animation or ...
more than static graphic design or interactive design.
Electronic pages may utilize both static and dynamic layout features by dividing the pages or by combining the effects. For example, a section of the page such as a
web banner
A web banner or banner ad is a form of advertising on the World Wide Web delivered by an ad server. This form of online advertising entails embedding an advertisement into a web page. It is intended to attract traffic to a website by linkin ...
may contain static or motion graphics contained within a swapping content area. Dynamic or live text may be wrapped around irregularly shaped images by using invisible spacers to push the text away from the edges. Some computer algorithms can detect the edges of an object that contain
transparency and flow content around contours.
Front-end versus back-end
With modern media content retrieval and output technology, there is much overlap between
visual communications (front-end) and information technology (back-end). Large print publications (thick books, especially instructional in nature) and electronic pages (web pages) require
meta data
Metadata is "data that provides information about other data", but not the content of the data, such as the text of a message or the image itself. There are many distinct types of metadata, including:
* Descriptive metadata – the descriptive ...
for automatic indexing, automatic reformatting, database publishing, dynamic page display, and end-user interactivity. Much of the metadata (
meta tags
Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page.
They are part of a web page's head section. Multiple Meta elements with different attributes can be used on the same page. Meta elements can ...
) must be hand-coded or specified during the page layout process. This divides the task of page layout between artists and engineers, or tasks the artist/engineer to do both.
More complex projects may require two separate designs: page layout design as the
front-end, and function coding as the back-end. In this case, the front-end may be designed using an alternative page layout technology such as
image editing software
In computer graphics, graphics software refers to a program or collection of programs that enable a person to manipulate images or models visually on a computer.
Computer graphics can be classified into two distinct categories: raster graphics a ...
or on paper with hand rendering methods. Most image editing software includes features for converting a page layout for use in a "What You See Is What You Get" (
WYSIWYG
In computing, WYSIWYG ( ), an acronym for What You See Is What You Get, is a system in which editing software allows content to be edited in a form that resembles its appearance when printed or displayed as a finished product, such as a printed d ...
) editor or features to export graphics for desktop publishing software. WYSIWYG editors and desktop publishing software allow front-end design prior to back-end coding in most cases. Interface design and database publishing may involve more technical knowledge or collaboration with information technology engineering in the front-end. Sometimes, a function on the back-end is to automate the retrieval and arrangement of content on the front end.
Design elements and choices
Page layout might be prescribed to a greater or lesser degree by a
house style which might be implemented in a specific desktop publishing template. There might also be relatively little layout to do in comparison to the amount of pagination (as in novels and other books with no figures).
Typical page layout decisions include:
* Deciding on the number and size of
columns
A column or pillar in architecture and structural engineering is a structural element that transmits, through compression, the weight of the structure above to other structural elements below. In other words, a column is a compression membe ...
and gutters (gaps between columns)
* Placement of intentional
whitespace
* Size and position of images and figures
* Size of page
margins
* Use of
color printing
Color printing or colour printing is the reproduction of an image or text in color (as opposed to simpler black and white
or monochrome printing). Any natural scene or color photograph can be optically and physiologically dissected into thre ...
or
spot color
In offset printing, a spot color or solid color is any color generated by an ink (pure or mixed) that is printed using a ''single run'', whereas a process color is produced by printing a series of dots of different colors.
The widespread offset ...
for emphasis
* Use of special effects like overlaying text on an image,
runaround and intrusions, or
bleeding
Bleeding, hemorrhage, haemorrhage or blood loss, is blood escaping from the circulatory system from damaged blood vessels. Bleeding can occur internally, or externally either through a natural opening such as the mouth, nose, ear, urethra, vag ...
an image over the page margin
Specific elements to be laid out might include:
*
Boxout
{{Unreferenced, date=November 2014
A boxout is an approximately square-shaped design element that contains text or graphics separate from the main body of text or graphics on the page. Unlike a sidebar, a boxout does not need to be a vertical r ...
s and
sidebars, which present information as asides from the main text flow
* Chapter or section titles, or
headline
The headline or heading is the text indicating the content or nature of the article below it, typically by providing a form of brief summary of its contents.
The large type ''front page headline'' did not come into use until the late 19th centur ...
s and
subhead
News style, journalistic style, or news-writing style is the prose style used for news reporting in media such as newspapers, radio and television.
News writing attempts to answer all the basic questions about any particular event—who, what, wh ...
s
*
Image captions
*
Notes
Note, notes, or NOTE may refer to:
Music and entertainment
* Musical note, a pitched sound (or a symbol for a sound) in music
* ''Notes'' (album), a 1987 album by Paul Bley and Paul Motian
* ''Notes'', a common (yet unofficial) shortened versio ...
like footnotes and end notes;
bibliography, for example in academic journals or textbooks
*
Page header
In typography and word processing, a page header (or simply header) is text that is separated from the body text and appears at the top of a printed page. Word-processing programs usually allow for the configuration of page headers, which are ...
s and
page footer
In typography and word processing, the page footer (or simply footer) of a printed page is a section located under the main text, or body. It is typically used as the space for the page number. In the earliest printed books it also contained the ...
s, the contents of which are usually uniform across content pages and thus automatically duplicated by layout software. The
page number
Page numbering is the process of applying a sequence of numbers (or letters, or Roman numerals) to the pages of a book or other document. The number itself, which may appear in various places on the page, can be referred to as a page number or as ...
is usually included in the header or footer, and the software automatically increments it for each page.
*
Pull quote
In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been ''pulled'' from an article and used as a page layout graphic element, serving to entice readers into the article or to hig ...
s and
nut graph
In journalism, the nut graph or nut graf (nutshell paragraph) is a paragraph that explains the context of the story. The term can be spelled many different ways.
In many news stories, the essential facts of a story are included in the lead, the ...
s which might be added out of course or to make a short story fit the layout
*
Table of contents
A table of contents, usually headed simply Contents and abbreviated informally as TOC, is a list, usually found on a page before the start of a written work, of its chapter or section titles or brief descriptions with their commencing page numbe ...
In newspaper production, final selection and
cropping of photographs accompanying stories might be left to the layout editor (since the choice of photo could affect the shape of the area needed, and thus the rest of the layout), or there might be a separate photo editor. Likewise,
headline
The headline or heading is the text indicating the content or nature of the article below it, typically by providing a form of brief summary of its contents.
The large type ''front page headline'' did not come into use until the late 19th centur ...
s might be written by the layout editor, a
copy editor
Copy editing (also known as copyediting and manuscript editing) is the process of revising written material (copy) to improve readability and fitness, as well as ensuring that text is free of grammatical and factual errors. ''The Chicago Manual of ...
, or the original author.
To make stories fit the final layout, relatively inconsequential copy tweaks might be made (for example, rephrasing for brevity), or the layout editor might make slight adjustments to
typography
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing ( leading), ...
elements like
font size
In typography, the point is the smallest unit of measure. It is used for measuring font size, leading, and other items on a printed page. The size of the point has varied throughout printing's history. Since the 18th century, the size of a po ...
or leading.
Floating block
A floating block in writing and publishing is any graphic, text, table, or other representation that is unaligned from the main flow of text. The use of floating blocks to present pictures and
table
Table may refer to:
* Table (furniture), a piece of furniture with a flat surface and one or more legs
* Table (landform), a flat area of land
* Table (information), a data arrangement with rows and columns
* Table (database), how the table data ...
s is a typical feature of
academic writing and
technical writing
Technical writing is writing or drafting technical communication used in technical and occupational fields, such as computer hardware and software, architecture, engineering, chemistry, aeronautics, robotics, finance, medical, consumer electronics, ...
, including scientific articles and books. Floating blocks are normally labeled with a caption or title that describes its contents and a number that is used to refer to the figure from the main text. A common system divides floating block into two separately numbered series, labeled ''figure'' (for pictures, diagrams,
plots, etc.) and ''table''. An alternative name for figure is image or graphic.
Floating blocks are said to be ''floating'' because they are not fixed in position on the page at the place, but rather drift to the side of the page. By placing pictures or other large items on the sides of pages rather than embedding them in the middle of the main flow of text,
typesetting
Typesetting is the composition of text by means of arranging physical ''type'' (or ''sort'') in mechanical systems or '' glyphs'' in digital systems representing '' characters'' (letters and other symbols).Dictionary.com Unabridged. Random ...
is more flexible and interruption to the flow of the narrative is avoided.
For example, an article on
geography
Geography (from Greek: , ''geographia''. Combination of Greek words ‘Geo’ (The Earth) and ‘Graphien’ (to describe), literally "earth description") is a field of science devoted to the study of the lands, features, inhabitants, an ...
might have "Figure 1: Map of the world", "Figure 2: Map of Europe", "Table 1: Population of continents", "Table 2: Population of European countries", and so on. Some books will have a table of figures—in addition to the
table of contents
A table of contents, usually headed simply Contents and abbreviated informally as TOC, is a list, usually found on a page before the start of a written work, of its chapter or section titles or brief descriptions with their commencing page numbe ...
—that lists centrally all the figures appearing in the work.
Other kinds of floating blocks may be differentiated as well, for example:
: Sidebar:
''Sams Teach Yourself Dreamweaver CS5 in 24 Hours''
p. 406. For digressions from the main narrative. For example, a technical manual on the usage of a product might include examples of how various people have employed the product in their work in sidebars. Also called an ''intermezzo''. See sidebar (publishing)
In publishing, sidebar is a term for information placed adjacent to an article in a printed or Web publication, graphically separate but with contextual connection.
The term has long been used in newspaper
A newspaper is a Periodical lite ...
.
: Program: Articles and books on computer programming
Computer programming is the process of performing a particular computation (or more generally, accomplishing a specific computing result), usually by designing and building an executable computer program. Programming involves tasks such as anal ...
often place code and algorithms
In mathematics and computer science, an algorithm () is a finite sequence of rigorous instructions, typically used to solve a class of specific problems or to perform a computation. Algorithms are used as specifications for performing ...
in a figure.
: Equation: Writing on mathematics may place large blocks of mathematical notation in numbered blocks set apart from the main text.
Presenting layouts under development
A mockup of a layout might be created to get early feedback, usually before all the content is actually ready. Whether for paper or electronic media, the first draft of a layout might be simply a rough paper and pencil sketch. A comprehensive layout
In graphic design and advertising, a comprehensive layout or comprehensive, usually shortened to comp, is the page layout of a proposed design as initially presented by the designer to a client, showing the relative positions of text and illustrati ...
for a new magazine might show placeholders for text and images, but demonstrate placement, typographic style, and other idioms intended to set the pattern for actual issues or a particular unfinished issue. A website wireframe
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.
The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimension ...
is a low-cost way to show layout without doing all the work of creating the final HTML and CSS, and without writing the copy or creating any images.
Lorem ipsum
In publishing and graphic design, ''Lorem ipsum'' is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. ''Lorem ipsum'' may be used as a placeholder before final ...
text is often used to avoid the embarrassment any improvised sample copy might cause if accidentally published. Likewise, placeholder images are often labeled " for position only".
See also
*Aesthetics
Aesthetics, or esthetics, is a branch of philosophy that deals with the nature of beauty and taste, as well as the philosophy of art (its own area of philosophy that comes out of aesthetics). It examines aesthetic values, often expressed t ...
*Book design
Book design is the art of incorporating the content, style, format, design, and sequence of the various components and elements of a book into a coherent unit. In the words of renowned typographer Jan Tschichold (1902–1974), book design, "though ...
*Canons of page construction
The canons of page construction are historical reconstructions, based on careful measurement of extant books and what is known of the mathematics and engineering methods of the time, of manuscript-framework methods that may have been used in Me ...
*Database publishing
Database publishing is an area of automated media production in which specialized techniques are used to generate paginated documents from source data residing in traditional databases. Common examples are mail order catalogues, direct marketing ...
*Desktop publishing
Desktop publishing (DTP) is the creation of documents using page layout software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online ...
*Editing
Editing is the process of selecting and preparing written, photographic, visual, audible, or cinematic material used by a person or an entity to convey a message or information. The editing process can involve correction, condensation, o ...
* Layout engine
*News design
News design is the process of arranging material on a newspaper page, according to editorial and graphical guidelines and goals. Main editorial goals include the ordering of news stories by order of importance, while graphical considerations inc ...
* Page layout
* Publishing Interchange Language
* Slicing
*Web design
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...
References
External links
SGML page at www.xml.org
* Symbols – All articles categorized as relating to typographical symbols
TeX Users Group
XML page at www.W3C.org
{{Authority control
Book arts
Communication design
Graphic design
Composition in visual art