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

COURSE COMPETENCIES  Apply principles of design, layout, and typography appropriate for a project.  Enhance appearance of a project.

BALANCE  Definition – 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 choices  Element size  Website Example: The University of Chicago

CONTRAST & FOCUS focal point contrast 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 scheme  Layout  Navigation 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. columns headings 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.