Elements of Good Web Design - PowerPoint PPT Presentation

1 / 22
About This Presentation
Title:

Elements of Good Web Design

Description:

Interface Design - Tips. Be aware of the limitations & make ... Kodak Photo Tips. http://www.kodak.com/eknec/PageQuerier.jhtml?pq-path=39&pq-locale=en_US ... – PowerPoint PPT presentation

Number of Views:501
Avg rating:3.0/5.0
Slides: 23
Provided by: L283
Category:
Tags: design | elements | good | photo | tips | web

less

Transcript and Presenter's Notes

Title: Elements of Good Web Design


1
Elements of Good Web Design
2
Design Principals
  • Making a clear web page depends on making the
    most important elements appear important, less
    important stuff less important, related stuff
    look related, and different stuff look
    different.
  • http//www.webdesignfromscratch.com/graphic-desig
    n.cfm

3
Interface Design
  • Interface Design - How the sites logical
    structure appears visually on a page
  • Navigation
  • Create an Identity - clear and appropriate

4
Interface Design
  • Navigation
  • Homepage link from all pages
  • Site-wide navigation
  • Secondary navigation or section navigation
  • Links back to main sections from all pages
  • 3-click rule
  • http//www4.uwm.edu/

5
Interface Design
  • Navigation
  • Guides the user, shapes the user experience,
    influences how they move around the site
  • Clarity, Consistency, Efficiency
  • Navigation must be easily learned
  • It should look like navigation
  • Predictable Dependable (consistent in
    appearance location)
  • Efficient keep links manageable
  • http//www.nacd.org/
  • www.apple.com

6
Design Elements
  • Images
  • Should support your message and/or add to the
    content of the site
  • Provide visual documentation
  • Can alter the feel and message of a page
  • Use metaphors with caution
  • Can make the page more readable
  • www.vagabonding.com

7
Design Principals
  • Visual hierarchy create a visual hierarchy with
    elements on the page
  • Emphasis important elements (dont make
    everything look equally important)
  • Organize content logically and predictably
  • Use the layout to lead the readers eyes through
    the page
  • http//computercorps.org/

8
Design Principals
  • Balance page should have a sense of balance
  • Appropriate proportion of text to graphics
  • Complementary colors
  • http//www.bmwusa.com/
  • http//www.mirrordeluxe.com/index.jsp?tnes_locale
    en_us

9
Design Principals
  • Color
  • Color can carry meaning, express personality,
    differentiate, and highlight content
  • Color is a good way of identifying, grouping or
    differentiating elements
  • Intense color attracts the eye too many intense
    areas of color attract the eye in too many
    directions this may be ineffective
  • www.nike.com
  • http//www.iomega.com/global/index.jsp
  • Too much color? http//www.casinocity.com/us/nv/re
    no/harrahre/
  • Resource http//www.coolhomepages.com/cda/color/

10
Design Principals
  • Contrast
  • Contrast makes things stand out from their
    surroundings
  • Provide variety within a page by utilizing
    contrast in size, shape, and color
  • If everything on a page is high contrast
    everything will be fighting for attention
  • http//www.zookoda.com/index.cfm?apghome

11
Interface Design - Tips
  • Make the Sites Purpose Clear
  • Use visual design to support and enhance your
    message (Dont Decorate, communicate!)
  • Design for your target audience (in content and
    appearance)
  • Keep file sizes small
  • Design above the fold

12
Interface Design - Tips
  • Be aware of the limitations make appropriate
    design decisions
  • Organize information for the most effective
    communication
  • Guide your audience through the page
  • Create an exciting visual experience
  • Make pages appealing, compelling, or
    entertaining
  • Create sophisticated, professional (and
    optimized) graphics and intuitive navigation
  • Be familiar with what advanced or enhanced
    technologies could be recommended and
    implemented

13
Content, Content, Content
  • Your content and the organization of that content
    is what will keep people coming back to your
    site
  • It may LOOK great but if you have no content,
    you have no audience!

14
Design Principals
  • Create a visual hierarchy
  • Contrast, variety, emphasis

15
Design Principals
16
Design Principals
17
Design Principals
  • Many photos
  • benefit from
  • judicious or
  • Creative cropping

18
Design Principals
  • Create a focal point
  • Emphasize a concept

19
Design Principals
20
Design Principals
21
Design Principals
  • Be aware of composition
  • Create focus attention
  • Kodak Photo Tips
  • http//www.kodak.com/eknec/PageQuerier.jhtml?pq-pa
    th39pq-localeen_US

22
More Examples
  • General Resources
  • Design Meltdownhttp//www.designmeltdown.com/defa
    ult.aspx
  • The Webby Awardshttp//www.webbyawards.com/webbys
    /current.php?season10
  • Sites I like
  • http//www.jimesch.org/ (navigation, hierarchy,
    colors, balance)
  • http//www.lonelyplanet.com
  • NEWS SITES Yuck!
  • http//www.jsonline.com
  • http//news.bbc.co.uk/
Write a Comment
User Comments (0)
About PowerShow.com