Page layout - AbsoluteAstronomy.com

Page layout is the part of graphic design

Graphic design

Graphic design is a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form – undertaken in order to convey a specific message to a targeted audience...

that deals in the arrangement and style treatment of elements (content) on a page.

History and development

Beginning from early illuminated

Illuminated

Illuminated may refer to:* Illuminated dance floor, a floor with panels which light up with different colours* Illuminated Film Company, a British animation house...

pages in hand-copied books of the Middle Ages

Middle Ages

The Middle Ages is a periodization of European history from the 5th century to the 15th century. The Middle Ages follows the fall of the Western Roman Empire in 476 and precedes the Early Modern Era. It is the middle period of a three-period division of Western history: Classic, Medieval and Modern...

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

Typography

Typography is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading , adjusting the spaces between groups of letters and adjusting the space between pairs of letters...

(text), image

Image

An image is an artifact, for example a two-dimensional picture, that has a similar appearance to some subject—usually a physical object or a person.-Characteristics:...

s (pictures), and occasionally place-holder graphics for elements that are not printed with ink such as die

Die (manufacturing)

A die is a specialized tool used in manufacturing industries to cut or shape material using a press. Like molds, dies are generally customized to the item they are used to create...

/laser cutting

Laser cutting

Laser cutting is a technology that uses a laser to cut materials, and is typically used for industrial manufacturing applications, but is also starting to be used by schools, small businesses and hobbyists. Laser cutting works by directing the output of a high-power laser, by computer, at the...

, foil stamping

Foil stamping

Foil stamping, typically a commercial print process, is the application of pigment or metallic foil, often gold or silver, but can also be various patterns or what is known as pastel foil which is a flat opaque color or white special film-backed material, to paper where a heated die is stamped onto...

or blind embossing.

Since the advent of personal computing, page layout skills have expanded to electronic media

Electronic media

Electronic media are media that use electronics or electromechanical energy for the end-user to access the content. This is in contrast to static media , which today are most often created electronically, but don't require electronics to be accessed by the end-user in the printed form...

as well as print media. The electronic page

Electronic page

An electronic page is a term to encompass the grouping of content between basic breaking points in presentations or documents that originate or remain as visual electronic documents. This is a software file and recording format term in contrast to electronic paper, a hardware display technology...

is better known as a graphical user interface (GUI

Gui

Gui or guee is a generic term to refer to grilled dishes in Korean cuisine. These most commonly have meat or fish as their primary ingredient, but may in some cases also comprise grilled vegetables or other vegetarian ingredients. The term derives from the verb, "gupda" in Korean, which literally...

) when interactive elements

Widget (computing)

In computer programming, a widget is an element of a graphical user interface that displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given...

are included. Page layout for interactive media

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, graphics, animation, video, audio, etc.-Terminology:...

overlaps with (and is often called) interface design

Interface design

Interface design deals with the process of developing a method for two modules in a system to connect and communicate. These modules can apply to hardware, software or the interface between a user and a machine...

. This usually includes interactive elements and multimedia

Multimedia

Multimedia is media and content that uses a combination of different content forms. The term can be used as a noun or as an adjective describing a medium as having multiple content forms. The term is used in contrast to media which use only rudimentary computer display such as text-only, or...

in addition to text and still images. Interactivity

Interactivity

In the fields of information science, communication, and industrial design, there is debate over the meaning of interactivity. In the "contingency view" of interactivity, there are three levels:...

takes page layout skills from planning attraction and eye flow to the next level of planning user experience

User experience

User experience is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such...

in collaboration with software engineers and creative director

Creative Director

A creative director is a position often found within the graphic design, film, music, fashion, advertising, media or entertainment industries, but may be useful in other creative organizations such as web development and software development firms as well....

s.

A page layout may be designed in a rough paper and pencil sketch before producing, or produced during the design process to the final form. Both design and production may be achieved using hand tools or page layout software

Desktop publishing

Desktop publishing is the creation of documents using page layout software on a personal computer.The term has been used for publishing at all levels, from small-circulation documents such as local newsletters to books, magazines and newspapers...

. Producing a web page

Web page

A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...

may require knowledge of markup language

Markup language

A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. The idea and terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts...

s along with WYSIWYG editors

HTML editor

An HTML editor is a software application for creating web pages. Although the HTML markup of a web page can be written with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors work not only with HTML, but also with related...

to compensate for incompatibility between platforms. Special considerations must be made for how the layout of an HTML

HTML

HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

page will change (reflow) when resized by the end-user. Cascading style sheets are often required to keep the page layout consistent between web browser

Web browser

A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...

Grids versus templates

Grids and template

Template

Template may mean:*a stencil, pattern or overlay used in graphic arts and sewing to replicate letters, shapes or designs...

s are page layout design patterns used in advertising campaign

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...

s and multiple-page publications, including website

Website

A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...

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 lay out 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 lay out 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.
..

Front-end versus back-end

With modern media content retrieval and output technology, there is much overlap between visual communication

Visual communication

Visual communication as the name suggests is communication through visual aid and is described as the conveyance of ideas and information in forms that can be read or looked upon...

s (front-end) and information technology

Information technology

Information technology is the acquisition, processing, storage and dissemination of vocal, pictorial, textual and numerical information by a microelectronics-based combination of computing and telecommunications...

(back-end). Large print publications (thick books, especially instructional in nature) and electronic pages (web pages) require meta data for automatic indexing, automatic reformatting, database publishing, dynamic page display and end-user interactivity. Much of the meta data (meta tags) 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 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

WYSIWYG

WYSIWYG is an acronym for What You See Is What You Get. The term is used in computing to describe a system in which content displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product...

) 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.

History and development

Grids versus templates

Front-end versus back-end

See also