Your SlideShare is downloading. ×
Good Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Good Design

1,974
views

Published on

Good Web design practices

Good Web design practices

Published in: Design, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,974
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Principles of Visual Design Instructional Technology & Design Dr. Toledo
  • 2. First Decisions
    • Decide the purpose/intent of the presentation or site
      • Basis for content choices
      • Basis for design
    • Who is the intended audience?
      • Characteristics
      • Idiosyncrasies
  • 3. First Decisions (con’t)
    • Congruent with purpose:
      • Organization
      • Navigation
      • Page layout
      • Graphic content
      • Multimedia
  • 4. Basic Design Principles
    • Proximity : Group related items together
    • Alignment : Nothing should be placed on the page arbitrarily - every item should have a visual connection with something else on the page
  • 5. Basic Design Principles (con’t)
    • Repetition : Repeat some aspect of the design throughout the entire piece
    • Contrast : If two items are not exactly the same, make them different
    Source: Robin Williams, Design for Non-Designers
  • 6. Visual Hierarchies
    • Things that are subordinate logically to others are subordinated visually
    Fruit apples pears oranges bananas
  • 7. Visual Hierarchies (con’t)
    • Things that fall into a classification are related visually
    Dessert cake cookies Ice cream Veggies tomatoes potatoes artichokes cabbage Fruit apples pineapple oranges bananas
  • 8. Visual Hierarchies (con’t)
    • Differentiation between classes can be emphasized, while maintaining coordination
    Dessert cake cookies Ice cream Veggies tomatoes potatoes artichokes cabbage Fruit apples pineapple oranges bananas
  • 9. Visual Hierarchies (con’t)
    • An overarching classification can be added to show subordinate classes
    Dessert cake cookies Ice cream Veggies tomatoes potatoes artichokes cabbage Fruit apples pineapple oranges bananas Groceries
  • 10. Visual Hierarchies (con’t)
    • Principles for creating clear visual hierarchies
    • More important items - more visually prominent
    • Items that are related logically - relate visually
    • Nest elements visually to illustrate what belongs with what – create space to show non-relationship
  • 11. Text Elements
    • Headings and subheadings
    • Lists
    • Block indented text
    • Bold, italics, underline
    • Font face, font size, font color
    • Links
    Notice how the author uses the above elements for clarity and emphasis in this example .
  • 12. Being Kind with Text
    • What not to do:
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
    • tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qu
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  • 13. Being Kind with Text
    • What to do with a lot of text:
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Note: Go to Format  Line Spacing and change the distance between lines and paragraphs.
  • 14. Bad Design
    • Check out the Bad PPT Design PowerPoint in the class site
    • http://www.roman-britain.org /
    • Examples from Web Pages That Suck

×