basic principles of design design, multimedia, and web technologies (dmwt)

BASIC PRINCIPLES OF DESIGNDESIGN, MULTIMEDIA, AND WEB TECHNOLOGIES (DMWT)

COURSE COMPETENCIES

Apply principles of design, layout, and typography appropriate for a project.

Enhance appearance of a project.

BALANCEDefinition – the harmonious arrangement of elements

A symmetric arrangement of design elements is centered or balanced and suggests a conservative, safe, peaceful atmosphere.Example – The Art Institute of Chicago

To create a fun, energetic mood, you can position your design elements asymmetrically, or off balance.Example – Discovery Kids

BALANCE

Symmetric: The Art Institute Asymmetric: Discovery Kids

PROXIMITY

Definition – closeness; elements that have a relationship are placed close to each other

Proximity is strongly associated with balance.Organization results from visually connected elements that

have a logical relationship. For example, you should position: a caption near an image an organization’s name near its logo headings and subheadings near related body copy

PROXIMITY

The empty space surrounding text and graphics, called white space in a design, can also define proximity and help organize elements, eliminate clutter, and make content more readable.

White space can be created by adding: line breaks paragraph returns paragraph indents space around tables and images

PROXIMITY

white space

logo & name title / caption & photo

heading & subheadings

CONTRAST & FOCUS

Contrast is a mix of elements to stimulate attention.Contrast also establishes focus, the center of interest or

activity.The dominating segment of the design, to which visitors’

attention will be drawn, is called the focal point. Determine first what element of your design is most important

and should be the focal point, and then use contrast to establish that dominance visually.

CONTRAST & FOCUS

Contrast can be created by using:Text styles (fonts)Color choicesElement size

Website Example: The University of Chicago

CONTRAST & FOCUS

focal pointcontrast in text

sizes

UNITY & VISUAL IDENTITY

Unity is a sense of oneness or belonging.

Visual identity is the combination of design elements identified with the site and its publisher.

All the pages at a Web site must have unity in order to create and maintain the site’s visual identity.

Example – Arby’s

UNITY

What do all these web pages have in common that creates unity across the web site?

Color schemeLayoutNavigation bars

VISUAL IDENTITY

Whose website it this?How do you know?What other symbols or

logos are associated with this company?

visual identity

ALIGNMENT

Definition – the placement of objects in fixed or predetermined positions, rows, or columns

Example – Office Depot

ALIGNMENT

Notice that Yahoo.com appears to be very organized with elements consistently left-aligned.

The use of columns and rows ensures readability.

columnsheadings and

stories organized in

rows

YOUR ASSIGNMENT…YOU WILL FIND A WEBSITE EXAMPLE FOR EACH OF THE SEVEN PRINCIPLES OF DESIGN. YOU MAY NOT USE ANY EXAMPLE THAT WAS PROVIDED IN THE BOOK OR USED IN THIS PRESENTATION.