Upload
bairn
View
58
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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
PROXIMITYDefinition – closeness; elements that have a relationship
are placed close to each otherProximity 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
PROXIMITYThe 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
ALIGNMENTNotice 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.