1 / 16

Basic Principles of Design

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

bairn
Download Presentation

Basic Principles of Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related