Basic Principles of Design

1. Basic Principles of Design Design, Multimedia, and Web Technologies (DMWT)

2. Course Competencies • Apply principles of design, layout, and typography appropriate for a project. • Enhance appearance of a project.

3. 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

4. Balance Symmetric: The Art Institute Asymmetric: Discovery Kids

5. 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

6. 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

7. Proximity title / caption & photo logo & name heading & subheadings white space

8. 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.

9. Contrast & Focus • Contrast can be created by using: • Text styles (fonts) • Color choices • Element size • Website Example: The University of Chicago

10. Contrast & Focus focal point contrast in text sizes

11. 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

12. Unity What do all these web pages have in common that creates unity across the web site? • Color scheme • Layout • Navigation bars

13. Visual Identity • Whose website it this? • How do you know? • What other symbols or logos are associated with this company? visual identity

14. Alignment • Definition – the placement of objects in fixed or predetermined positions, rows, or columns • Example – Office Depot

15. 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

16. 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.