SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
DESIGN ZEN:
         ATTRACTIVE AND FUNCTIONAL WEBSITES
                          Graham Garner • E-Business Practicum BA/CA 388-01
                                    Wartburg College • Fall 2012

Tuesday, October 16, 12
INFORMATION
                          ARCHITECTURE (IA)
    •   Structural design of information
        environments

    •   Combination of organization, labeling,
        search, and navigation systems

    •   Making web sites usable
        and findable

    •   Focused on design and architecture
        on the Web; it’s an art and a science


Tuesday, October 16, 12
WHY IA MATTERS
    •   The cost of finding information is lost
        productivity.

    •   The cost of not finding information is that
        bad decisions come from bad information.

    •   It costs more to fix a
        problem twice than it does once.

    •   The cost of maintenance is clear.

    •   Building a brand costs money and time.

Tuesday, October 16, 12
BUILDING BLOCKS OF IA:
                           USERS
                  Do you know who's using your web site?

                  Do you know how they're using it?

                  And perhaps most importantly, do you know what information
                  they want from your site?




Tuesday, October 16, 12
BUILDING BLOCKS OF IA:
                         CONTENT

                  Think about all the stuff that makes up a web site. Think about
                  Ownership, Format, Structure, Metadata, Volume and
                  Dynamism.




Tuesday, October 16, 12
BUILDING BLOCKS OF IA:
                         CONTEXT

                  What makes your business unique? Then, find ways to align the
                  information architecture with the goals, strategy and culture of
                  your business.




Tuesday, October 16, 12
ORGANIZATION SYSTEMS


     Present the site's
     information to us in
     a variety of ways,
     such as content
     categories or
     specific audiences



Tuesday, October 16, 12
NAVIGATION SYSTEMS


                                   Help users move
                                   through the content




Tuesday, October 16, 12
SEARCH SYSTEMS


             Allow users to search
             the content




Tuesday, October 16, 12
LABELING SYSTEMS

            Describe categories, options,
            and links in language that
            (hopefully) is meaningful to
            users




Tuesday, October 16, 12
QUESTIONS USERS ASK
    1. Where am I?
    2. I know what I'm looking for; how do I search for it?
    3. How do I get around this site?
    4. What's important and unique about this
       organization?
    5. What's available on this site?
    6. What's happening there?
    7. Do they want my opinion about their site?
    8. How can I contact a human?
    9. What's their physical and mailing address?

Tuesday, October 16, 12
ZEN OF WEB DESIGN
                                     Clear your mind.
                                   Relax and meditate.
                            Observe and learn from the masters.
                                      Obtain clarity.
                                Become one with the web.




Tuesday, October 16, 12
With nearly 70 categories, Website entries make up the majority of Webby Awards Winners,
     Nominees and Honorees. Some are beautiful to look at and interact with. Others are a testament to
     usability and functionality. And a handful excel across the board. To be selected among the best is an
                    incredible achievement worthy of praise -- and perhaps a little bragging.

Tuesday, October 16, 12
COUNTERSPILL.ORG
                              Activism • Green

Tuesday, October 16, 12
BEETLE.COM
                          Automotive • Best Navigation/Structure
                              Best Visual Design - Function
Tuesday, October 16, 12
MANILLA.COM
                            Banking/Bill Paying

Tuesday, October 16, 12
VISITNORWAY.COM
                            Best Home/Welcome Page

Tuesday, October 16, 12
KINETIC.COM
                          Best Visual Design - Aesthetic

Tuesday, October 16, 12
MASHABLE.COM
                             Blog - Business

Tuesday, October 16, 12
PINERIDGESIOUX.COM
                            Charitable Organizations/Nonprofit

Tuesday, October 16, 12
URBANEARS.COM
                            Consumer Electronics

Tuesday, October 16, 12
GOOGLE MUSIC
                           Corporate Communications

Tuesday, October 16, 12
MINT.COM
                          Financial Services

Tuesday, October 16, 12
ALLSTATETEENDRIVER.COM
                          Insurance

Tuesday, October 16, 12
EPICURIOUS.COM
                               Lifestyle

Tuesday, October 16, 12
PITCHFORK.COM
                               Music

Tuesday, October 16, 12
ASKAPATIENT.COM
                              Pharmaceuticals

Tuesday, October 16, 12
PADMAPPER.COM
                              Real Estate

Tuesday, October 16, 12
FERVR.NET
                          Religion and Spirituality

Tuesday, October 16, 12
BEASTANDTHEHARE.COM
                          Restaurant

Tuesday, October 16, 12
ASOS.COM
                             Retail

Tuesday, October 16, 12
ESPN.COM
                            Sports

Tuesday, October 16, 12
SESAMESTREET.ORG/MUPPETS
                          Youth

Tuesday, October 16, 12

Contenu connexe

En vedette

E business planning presentation, fall 2012
E business planning presentation, fall 2012E business planning presentation, fall 2012
E business planning presentation, fall 2012Graham Garner
 
Design zen presentation, fall 2012
Design zen presentation, fall 2012Design zen presentation, fall 2012
Design zen presentation, fall 2012Graham Garner
 
The Day Your Brand Exploded: How Social Media Makes or Breaks Your Organization
The Day Your Brand Exploded: How Social Media Makes or Breaks Your OrganizationThe Day Your Brand Exploded: How Social Media Makes or Breaks Your Organization
The Day Your Brand Exploded: How Social Media Makes or Breaks Your OrganizationGraham Garner
 
Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...Graham Garner
 
Swot Analyses for E-business
Swot Analyses for E-businessSwot Analyses for E-business
Swot Analyses for E-businessGraham Garner
 
Online Consumer Behavior
Online Consumer BehaviorOnline Consumer Behavior
Online Consumer BehaviorGraham Garner
 

En vedette (9)

E business planning presentation, fall 2012
E business planning presentation, fall 2012E business planning presentation, fall 2012
E business planning presentation, fall 2012
 
Developers Agenda
Developers AgendaDevelopers Agenda
Developers Agenda
 
Design zen presentation, fall 2012
Design zen presentation, fall 2012Design zen presentation, fall 2012
Design zen presentation, fall 2012
 
Social Media Basics
Social Media BasicsSocial Media Basics
Social Media Basics
 
The Day Your Brand Exploded: How Social Media Makes or Breaks Your Organization
The Day Your Brand Exploded: How Social Media Makes or Breaks Your OrganizationThe Day Your Brand Exploded: How Social Media Makes or Breaks Your Organization
The Day Your Brand Exploded: How Social Media Makes or Breaks Your Organization
 
Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...Internet infrastructure and the history of the world wide web presentation, f...
Internet infrastructure and the history of the world wide web presentation, f...
 
Presentation_Logo_Sumy
Presentation_Logo_SumyPresentation_Logo_Sumy
Presentation_Logo_Sumy
 
Swot Analyses for E-business
Swot Analyses for E-businessSwot Analyses for E-business
Swot Analyses for E-business
 
Online Consumer Behavior
Online Consumer BehaviorOnline Consumer Behavior
Online Consumer Behavior
 

Similaire à Design zen presentation, rfs, fall 2012

Everything you always wanted to know about search in typo3
Everything you always wanted to know about search in typo3Everything you always wanted to know about search in typo3
Everything you always wanted to know about search in typo3Olivier Dobberkau
 
Principles of Web Usability I - Summer 2006
Principles of Web Usability I - Summer 2006Principles of Web Usability I - Summer 2006
Principles of Web Usability I - Summer 2006white paper
 
404 Page Strategies with ExpressionEngine
404 Page Strategies with ExpressionEngine404 Page Strategies with ExpressionEngine
404 Page Strategies with ExpressionEngineRyan Battles
 
Protecting your online privacy
Protecting your online privacyProtecting your online privacy
Protecting your online privacyRam Parthasarathy
 
Presentación LIDAP 2013
Presentación LIDAP 2013Presentación LIDAP 2013
Presentación LIDAP 2013camilo sanchez
 
Ram social media seminar
Ram social media seminarRam social media seminar
Ram social media seminarJess Sloss
 
John Blue - All These Tool: What Next?
John Blue - All These Tool: What Next?John Blue - All These Tool: What Next?
John Blue - All These Tool: What Next?John Blue
 
AI, Machine Learning, and Data Science Concepts
AI, Machine Learning, and Data Science ConceptsAI, Machine Learning, and Data Science Concepts
AI, Machine Learning, and Data Science ConceptsDan O'Leary
 
Okfn workshop chennai
Okfn workshop chennaiOkfn workshop chennai
Okfn workshop chennaiLucy Chambers
 
Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...
Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...
Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...Northeast Kansas Library System
 

Similaire à Design zen presentation, rfs, fall 2012 (11)

App design process - cocoaheads
App design process - cocoaheadsApp design process - cocoaheads
App design process - cocoaheads
 
Everything you always wanted to know about search in typo3
Everything you always wanted to know about search in typo3Everything you always wanted to know about search in typo3
Everything you always wanted to know about search in typo3
 
Principles of Web Usability I - Summer 2006
Principles of Web Usability I - Summer 2006Principles of Web Usability I - Summer 2006
Principles of Web Usability I - Summer 2006
 
404 Page Strategies with ExpressionEngine
404 Page Strategies with ExpressionEngine404 Page Strategies with ExpressionEngine
404 Page Strategies with ExpressionEngine
 
Protecting your online privacy
Protecting your online privacyProtecting your online privacy
Protecting your online privacy
 
Presentación LIDAP 2013
Presentación LIDAP 2013Presentación LIDAP 2013
Presentación LIDAP 2013
 
Ram social media seminar
Ram social media seminarRam social media seminar
Ram social media seminar
 
John Blue - All These Tool: What Next?
John Blue - All These Tool: What Next?John Blue - All These Tool: What Next?
John Blue - All These Tool: What Next?
 
AI, Machine Learning, and Data Science Concepts
AI, Machine Learning, and Data Science ConceptsAI, Machine Learning, and Data Science Concepts
AI, Machine Learning, and Data Science Concepts
 
Okfn workshop chennai
Okfn workshop chennaiOkfn workshop chennai
Okfn workshop chennai
 
Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...
Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...
Duct Tape, Circuits, and Knitting, Oh My! Maker Culture at Your Library (KLC ...
 

Plus de Graham Garner

Storytelling, CASEVI, 9 Jan 2012
Storytelling, CASEVI, 9 Jan 2012Storytelling, CASEVI, 9 Jan 2012
Storytelling, CASEVI, 9 Jan 2012Graham Garner
 
University and Public Relations: Making the Most of Communications and Market...
University and Public Relations: Making the Most of Communications and Market...University and Public Relations: Making the Most of Communications and Market...
University and Public Relations: Making the Most of Communications and Market...Graham Garner
 
Making Sense of Social Media
Making Sense of Social MediaMaking Sense of Social Media
Making Sense of Social MediaGraham Garner
 
Philanthropists and Fund Raisers in American Higher Education
Philanthropists and Fund Raisers in American Higher EducationPhilanthropists and Fund Raisers in American Higher Education
Philanthropists and Fund Raisers in American Higher EducationGraham Garner
 
Medical Education at Idaho State University
Medical Education at Idaho State UniversityMedical Education at Idaho State University
Medical Education at Idaho State UniversityGraham Garner
 
Influences of the Market on Assessment
Influences of the Market on AssessmentInfluences of the Market on Assessment
Influences of the Market on AssessmentGraham Garner
 
Academic Planning, Fys, Spring 2008
Academic Planning, Fys, Spring 2008Academic Planning, Fys, Spring 2008
Academic Planning, Fys, Spring 2008Graham Garner
 
ISU Web Content to Consider for Portal Content
ISU Web Content to Consider for Portal ContentISU Web Content to Consider for Portal Content
ISU Web Content to Consider for Portal ContentGraham Garner
 
Study Skills, Fys, Spring 2008
Study Skills, Fys, Spring 2008Study Skills, Fys, Spring 2008
Study Skills, Fys, Spring 2008Graham Garner
 
Community Involvement, Fys, Spring 2008
Community Involvement, Fys, Spring 2008Community Involvement, Fys, Spring 2008
Community Involvement, Fys, Spring 2008Graham Garner
 
Web Developers Group Meeting, Agenda, 31 Jan 2008
Web Developers Group Meeting, Agenda, 31 Jan 2008Web Developers Group Meeting, Agenda, 31 Jan 2008
Web Developers Group Meeting, Agenda, 31 Jan 2008Graham Garner
 
Time Management Fys Spring 2008
Time Management Fys Spring 2008Time Management Fys Spring 2008
Time Management Fys Spring 2008Graham Garner
 
Financial Management, Fys, Spring 2008
Financial Management, Fys, Spring 2008Financial Management, Fys, Spring 2008
Financial Management, Fys, Spring 2008Graham Garner
 
I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...
I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...
I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...Graham Garner
 
Pursuing a Curriculum of Interdisciplinary Studies
Pursuing a Curriculum of Interdisciplinary StudiesPursuing a Curriculum of Interdisciplinary Studies
Pursuing a Curriculum of Interdisciplinary StudiesGraham Garner
 
Presentation, The Effective Advancement Professional, Edlh 734
Presentation, The Effective Advancement Professional, Edlh 734Presentation, The Effective Advancement Professional, Edlh 734
Presentation, The Effective Advancement Professional, Edlh 734Graham Garner
 
Web Liaisons Meeting, 1 Nov 2007
Web Liaisons Meeting, 1 Nov 2007Web Liaisons Meeting, 1 Nov 2007
Web Liaisons Meeting, 1 Nov 2007Graham Garner
 
Making Web Sites Out Of Nothing At All
Making Web Sites Out Of Nothing At AllMaking Web Sites Out Of Nothing At All
Making Web Sites Out Of Nothing At AllGraham Garner
 

Plus de Graham Garner (19)

Storytelling, CASEVI, 9 Jan 2012
Storytelling, CASEVI, 9 Jan 2012Storytelling, CASEVI, 9 Jan 2012
Storytelling, CASEVI, 9 Jan 2012
 
University and Public Relations: Making the Most of Communications and Market...
University and Public Relations: Making the Most of Communications and Market...University and Public Relations: Making the Most of Communications and Market...
University and Public Relations: Making the Most of Communications and Market...
 
Making Sense of Social Media
Making Sense of Social MediaMaking Sense of Social Media
Making Sense of Social Media
 
Philanthropists and Fund Raisers in American Higher Education
Philanthropists and Fund Raisers in American Higher EducationPhilanthropists and Fund Raisers in American Higher Education
Philanthropists and Fund Raisers in American Higher Education
 
Medical Education at Idaho State University
Medical Education at Idaho State UniversityMedical Education at Idaho State University
Medical Education at Idaho State University
 
Sit Down and Write
Sit Down and WriteSit Down and Write
Sit Down and Write
 
Influences of the Market on Assessment
Influences of the Market on AssessmentInfluences of the Market on Assessment
Influences of the Market on Assessment
 
Academic Planning, Fys, Spring 2008
Academic Planning, Fys, Spring 2008Academic Planning, Fys, Spring 2008
Academic Planning, Fys, Spring 2008
 
ISU Web Content to Consider for Portal Content
ISU Web Content to Consider for Portal ContentISU Web Content to Consider for Portal Content
ISU Web Content to Consider for Portal Content
 
Study Skills, Fys, Spring 2008
Study Skills, Fys, Spring 2008Study Skills, Fys, Spring 2008
Study Skills, Fys, Spring 2008
 
Community Involvement, Fys, Spring 2008
Community Involvement, Fys, Spring 2008Community Involvement, Fys, Spring 2008
Community Involvement, Fys, Spring 2008
 
Web Developers Group Meeting, Agenda, 31 Jan 2008
Web Developers Group Meeting, Agenda, 31 Jan 2008Web Developers Group Meeting, Agenda, 31 Jan 2008
Web Developers Group Meeting, Agenda, 31 Jan 2008
 
Time Management Fys Spring 2008
Time Management Fys Spring 2008Time Management Fys Spring 2008
Time Management Fys Spring 2008
 
Financial Management, Fys, Spring 2008
Financial Management, Fys, Spring 2008Financial Management, Fys, Spring 2008
Financial Management, Fys, Spring 2008
 
I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...
I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...
I Want My Education My Way: Student Consumerism and the Impact on Higher Educ...
 
Pursuing a Curriculum of Interdisciplinary Studies
Pursuing a Curriculum of Interdisciplinary StudiesPursuing a Curriculum of Interdisciplinary Studies
Pursuing a Curriculum of Interdisciplinary Studies
 
Presentation, The Effective Advancement Professional, Edlh 734
Presentation, The Effective Advancement Professional, Edlh 734Presentation, The Effective Advancement Professional, Edlh 734
Presentation, The Effective Advancement Professional, Edlh 734
 
Web Liaisons Meeting, 1 Nov 2007
Web Liaisons Meeting, 1 Nov 2007Web Liaisons Meeting, 1 Nov 2007
Web Liaisons Meeting, 1 Nov 2007
 
Making Web Sites Out Of Nothing At All
Making Web Sites Out Of Nothing At AllMaking Web Sites Out Of Nothing At All
Making Web Sites Out Of Nothing At All
 

Design zen presentation, rfs, fall 2012

  • 1. DESIGN ZEN: ATTRACTIVE AND FUNCTIONAL WEBSITES Graham Garner • E-Business Practicum BA/CA 388-01 Wartburg College • Fall 2012 Tuesday, October 16, 12
  • 2. INFORMATION ARCHITECTURE (IA) • Structural design of information environments • Combination of organization, labeling, search, and navigation systems • Making web sites usable and findable • Focused on design and architecture on the Web; it’s an art and a science Tuesday, October 16, 12
  • 3. WHY IA MATTERS • The cost of finding information is lost productivity. • The cost of not finding information is that bad decisions come from bad information. • It costs more to fix a problem twice than it does once. • The cost of maintenance is clear. • Building a brand costs money and time. Tuesday, October 16, 12
  • 4. BUILDING BLOCKS OF IA: USERS Do you know who's using your web site? Do you know how they're using it? And perhaps most importantly, do you know what information they want from your site? Tuesday, October 16, 12
  • 5. BUILDING BLOCKS OF IA: CONTENT Think about all the stuff that makes up a web site. Think about Ownership, Format, Structure, Metadata, Volume and Dynamism. Tuesday, October 16, 12
  • 6. BUILDING BLOCKS OF IA: CONTEXT What makes your business unique? Then, find ways to align the information architecture with the goals, strategy and culture of your business. Tuesday, October 16, 12
  • 7. ORGANIZATION SYSTEMS Present the site's information to us in a variety of ways, such as content categories or specific audiences Tuesday, October 16, 12
  • 8. NAVIGATION SYSTEMS Help users move through the content Tuesday, October 16, 12
  • 9. SEARCH SYSTEMS Allow users to search the content Tuesday, October 16, 12
  • 10. LABELING SYSTEMS Describe categories, options, and links in language that (hopefully) is meaningful to users Tuesday, October 16, 12
  • 11. QUESTIONS USERS ASK 1. Where am I? 2. I know what I'm looking for; how do I search for it? 3. How do I get around this site? 4. What's important and unique about this organization? 5. What's available on this site? 6. What's happening there? 7. Do they want my opinion about their site? 8. How can I contact a human? 9. What's their physical and mailing address? Tuesday, October 16, 12
  • 12. ZEN OF WEB DESIGN Clear your mind. Relax and meditate. Observe and learn from the masters. Obtain clarity. Become one with the web. Tuesday, October 16, 12
  • 13. With nearly 70 categories, Website entries make up the majority of Webby Awards Winners, Nominees and Honorees. Some are beautiful to look at and interact with. Others are a testament to usability and functionality. And a handful excel across the board. To be selected among the best is an incredible achievement worthy of praise -- and perhaps a little bragging. Tuesday, October 16, 12
  • 14. COUNTERSPILL.ORG Activism • Green Tuesday, October 16, 12
  • 15. BEETLE.COM Automotive • Best Navigation/Structure Best Visual Design - Function Tuesday, October 16, 12
  • 16. MANILLA.COM Banking/Bill Paying Tuesday, October 16, 12
  • 17. VISITNORWAY.COM Best Home/Welcome Page Tuesday, October 16, 12
  • 18. KINETIC.COM Best Visual Design - Aesthetic Tuesday, October 16, 12
  • 19. MASHABLE.COM Blog - Business Tuesday, October 16, 12
  • 20. PINERIDGESIOUX.COM Charitable Organizations/Nonprofit Tuesday, October 16, 12
  • 21. URBANEARS.COM Consumer Electronics Tuesday, October 16, 12
  • 22. GOOGLE MUSIC Corporate Communications Tuesday, October 16, 12
  • 23. MINT.COM Financial Services Tuesday, October 16, 12
  • 24. ALLSTATETEENDRIVER.COM Insurance Tuesday, October 16, 12
  • 25. EPICURIOUS.COM Lifestyle Tuesday, October 16, 12
  • 26. PITCHFORK.COM Music Tuesday, October 16, 12
  • 27. ASKAPATIENT.COM Pharmaceuticals Tuesday, October 16, 12
  • 28. PADMAPPER.COM Real Estate Tuesday, October 16, 12
  • 29. FERVR.NET Religion and Spirituality Tuesday, October 16, 12
  • 30. BEASTANDTHEHARE.COM Restaurant Tuesday, October 16, 12
  • 31. ASOS.COM Retail Tuesday, October 16, 12
  • 32. ESPN.COM Sports Tuesday, October 16, 12
  • 33. SESAMESTREET.ORG/MUPPETS Youth Tuesday, October 16, 12