basic principles of design design, multimedia, and web technologies (dmwt)
TRANSCRIPT
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.