Layout DesignPosters, Magazines, Websites

Layout DefinitionThe overall design of a page,

spread, website, or book including elements such as apage and type size, typreface, and the arrangement of titles and page numbers.

A layout’s purpose:Communicating information clearly and effectively to the reader in a way that is also pleasing to the eye.

Print VS

Print Design allows your eyes to walk around the information, letting you select information objects and using spatial juxtaposition to enhance and explain page elements.

Web

Web Design is a transient experience based on the users movements (clicking and scrolling) and is expressed through an interaction with user movement.

Tip 1: USE A GRIDMake

sense of your elements by providing an order that easily flows.

GridA way of organizing content on a page, using any combination of margins, guides, rows, and columns.

CompositionThe placement or arrangement of visual elements or ingredients in a work of art

Tip 2: CHOOSE A SINGLE FOCAL POINTUsing a

photo, headline, or quote is a great way to grab attention and create balance.

Tip 3: USE THE RULE OF THIRDS By aligning

your key elements to these four points, you'll achieve a more pleasing composition

Rule of ThirdsA guideline that aides in compositional balance in which the image is divided in a 3x3 pattern

BleedAllowing a graphic or some other

element to extend beyond the actual margin of page or section. The element touches the side of the page, leaving no margin or white space at the edge.

Tip 4: USE WHITE SPACEThis gives

breathing space to the reader as well as help with balancing space.

CroppingCutting off an undesired portion of a printed piece, photography, or other image

Tip 5: REPEAT DESIGN ELEMENTSRepetition

can provide a strong sense of connected design and balance to a composition.

Tip 6: USE HIERARCHY This gives a

clear sense of structure and conveys the relative importance of different pieces of content on your page

Header (Heading)In typography, any text that appears at the top of a page but is not part of the body text, such as a title, author, chapter title, etc.

Sub HeadingA statement title that usually sits below the heading.

CaptionIn typography and page

layout, any strictly descriptive text accompanying an illustration, located beneath it, alongside it, or above it

Body TextAny large amount of text that is the actual article, chapter, etc.

Tip 7: USE SCALE, CONTRAST, HARMONY This helps create

a comfortable layout because the viewer will automatically look at the larger elements within the layout first, progressing through to the smaller elements as they read.

Block Text/Block TypeIn typography, paragraphs set without indents

Justification In typography, this is aligning the top, bottom,

sides, or middle of text and graphic elements on a page

Justified TextType that aligns on both the left and

right side

ASSIGNMENT 1 Objective: You are to pick one of the given articles

and create a print layout for it as if in a magazine. Requirements

The style must relate to what the article is about. Use the rule of thirds in designing layout Use negative/white space effectively Design elements used are complementary to each

other Elements such as heading, subheading, body, etc.

are distinguishable from one another Newsela.com: WMNEEZ

Assignment 2 Objective: Create a website page on an

APPROPRIATE topic of your choice using weebly.com. (Ex: buisiness, portfolio, restaurant, blog, etc.)

Requirements: The style must relate to what your website is about Pages are easy to navigate (must have 3 pages) Spacing pleasing to the eye/not cluttered Fonts used are appropriate for screens, easily

readable Design elements are complementary to each other Colors look nice together and do not clash/detract

from your information

Sources http://www.creativebloq.com/netmag/cre

ate-balanced-page-layouts-7-pro-tips-121310009#null

http://www.onextrapixel.com/2012/03/01/the-difference-between-print-and-web-design/

Weebly.com Newsela.com