Good Design

  • 1,939 views
Uploaded on

Good Web design practices

Good Web design practices

More in: Design , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,939
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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