iPedia Free Information Center

Information about Page Layout

Enlarge picture
Consumer magazine sponsored advertisements and covers rely heavily on professional page layout skills to compete for visual attention.
:For the Wikipedia policy about articles layout, see Wikipedia:Guide to layout. Page layout is the part of graphic design that deals in the arrangement and style treatment of elements (content) on a page. Beginning from early illuminated pages in hand-copied books of the Middle Ages 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 or blind embossing.

Since the advent of personal computing, page layout skills have expanded to electronic media as well as print media. The electronic page is better known as a graphical user interface (GUI) when interactive elements are included. Page layout for interactive media overlaps with (and is often called) interface design. This usually includes interactive elements and multimedia in addition to text and still images. Interactivity takes page layout skills from planning attraction and eye flow to the next level of planning user experience in collaboration with software engineers and creative directors.

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. Producing the most popular electronic page (the web page) may require knowledge of markup languages along with WYSIWYG editors to compensate for incompatibility between platforms. Special considerations must be made for how the layout of an HTML page will change (reflow) when resized by the end-user. Cascading style sheets are often required to keep the page layout consistent between web browsers.

Grids versus templates

Grids and templates are page layout design patterns used in advertising campaigns and multiple page publications, including web sites.
  • A grid is a set of guidelines, visible 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 automatic dots placed at a specified equal horizontal and vertical distance apart. Automatic margins and booklet spine (gutter) lines maybe 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 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 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 the alternate 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 WYSIWYG 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.

See also

additional references or sources for verification.
* It may require general cleanup to meet Wikipedia's quality standards.

Please help [ improve the article] or discuss these issues on the talk page.
..... Click the link for more information.
Illumination might refer to:

Artistry
  • Illumination (lighting)
  • Illumination (image), presenting effects of lighting in drawings, paintings, etc.

..... Click the link for more information.
Middle Ages form the middle period in a traditional schematic division of European history into three "ages": the classical civilization of Antiquity, the Middle Ages and Modern Times.
..... Click the link for more information.
Typography is the art and techniques of type design, modifying type glyphs, and arranging type. Type glyphs (characters) are created and modified using a variety of illustration techniques.
..... Click the link for more information.
IMAGE (from Imager for Magnetopause-to-Aurora Global Exploration), or Explorer 78, was a NASA MIDEX mission that studied the global response of the Earth's magnetosphere to changes in the solar wind.
..... Click the link for more information.
For other uses of this term, see Die.
A die is a specialized tool used in manufacturing industries to cut, shape and form a wide variety of products and components.
..... Click the link for more information.
Laser cutting is a technology that uses a laser to cut materials, and is usually used in industrial manufacturing. Laser cutting works by directing the output of a high power laser, by computer, at the material to be cut.
..... Click the link for more information.
Foil stamping, typically a commercial print process, is the application of pigment or metallic foil, a special film-backed material, to paper where a heated die is stamped onto the foil, making it adhere to the surface leaving the design of the die on the paper.
..... Click the link for more information.
Embossing is the process of creating a three-dimensional image or design in paper and other ductile materials. It is typically accomplished with a combination of heat and pressure on the paper.
..... Click the link for more information.
personal computer (PC) is a computer whose original sales price, size, and capabilities make it useful for individuals.

It is unknown who coined the phrase with the intent of a small affordable computing device but John W.
..... Click the link for more information.
Electronic media are that utilize electronics or electromechanical energy for the end user (audience) to access the content. This is in contrast to static media (mainly print media), which are most often created electronically, but don't require electronics to be accessed by the
..... Click the link for more information.
electronic page is a term to encompass the grouping of content between basic breaking points in 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.
..... Click the link for more information.
graphical user interface (GUI) is a type of user interface which allows people to interact with a computer and computer-controlled devices which employ graphical icons, visual indicators or special graphical elements called "widgets", along with text, labels or text
..... Click the link for more information.
widget (or control) is an interface element that a computer user interacts with, such as a window or a text box. Widgets are sometimes qualified as virtual to distinguish them from their physical counterparts, e.g.
..... Click the link for more information.
Interactive media refers to of communication that allow for active participation by the recipient, hence interactivity. Traditional information theory would describe interactive media as those media that establish two-way communication.
..... Click the link for more information.
User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction.
..... Click the link for more information.
Multimedia (Lat. Multum + Medium) is media that uses multiple forms of information content and information processing (e.g. text, audio, graphics, animation, video, interactivity) to inform or entertain the (user) audience.
..... Click the link for more information.
Interactivity. In the "contingency view" of interactivity, there are three levels: Noninteractive, when a message is not related to previous messages; Reactive, when a message is related only to one immediately previous message; and Interactive, when a message is related to a
..... Click the link for more information.
User experience design is a subset of the field of experience design which pertains to the creation of the architecture and interaction models which impact a user's perception of a device or system.
..... Click the link for more information.
Software engineering is the application of a systematic, disciplined, quantifiable approach to the development, operation, and maintenance of software.[1] The term software engineering
..... Click the link for more information.
A creative director is a position usually found within the advertising, media or entertainment industries, but may be useful in other creative organizations such as web development and software development firms as well.
..... Click the link for more information.
Desktop publishing (also known as DTP) combines a personal computer and page layout software to create publication documents on a computer for either large scale publishing or small scale local economical multifunction peripheral output and distribution.
..... Click the link for more information.
A Web page or webpage is a resource of information that is suitable for the World Wide Web and can be accessed through a web browser. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.
..... Click the link for more information.
markup language provides a way to combine a text and extra information about it. The extra information, including structure, layout, or other information, is expressed using markup, which is typically intermingled with the primary text.
..... Click the link for more information.
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.
..... Click the link for more information.
HTML (Hypertext Markup Language)

File extension: .html, .htm
MIME type: text/html
Type code: TEXT
..... Click the link for more information.
The end-user is a popular concept in software engineering, referring to an abstraction of the group of persons who will ultimately operate a piece of software (i.e. the expected user or target-user).
..... Click the link for more information.
Cascading Style Sheets

File extension: .css
MIME type: text/css
Developed by: World Wide Web Consortium
Type of format: Stylesheet language
Standard(s): Level 1 (Recommendation)
Level 2 (Recommendation)
..... Click the link for more information.
A web browser is a software application that enables a user to display and interact with text, images, videos, music and other information typically located on a Web page at a website on the World Wide Web or a local area network.
..... Click the link for more information.
A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.
..... Click the link for more information.


This article is copied from an article on Wikipedia.org - the free encyclopedia created and edited by online user community. The text was not checked or edited by anyone on our staff. Although the vast majority of the wikipedia encyclopedia articles provide accurate and timely information please do not assume the accuracy of any particular article. This article is distributed under the terms of GNU Free Documentation License.
Herod_Archelaus


page counter