Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Patterns

Chris Coyier
November 10, 2011

Design Patterns

Less than 5 minute presentation to introduce concept of design patterns to co-workers and show our start on implementing them.

Chris Coyier

November 10, 2011
Tweet

More Decks by Chris Coyier

Other Decks in Design

Transcript

  1. Design
    Patterns

    View Slide

  2. You use design
    patterns all the time.
    They are common solutions to problems.

    View Slide

  3. E X A M P L E D E S I G N P A T T E R N
    Problem: There is too much to fit on one page of a website.
    Solution:
    Tabs

    View Slide

  4. E X A M P L E D E S I G N P A T T E R N
    Solution:
    Dropdown Menus
    Problem: There is lots of navigation or actions you
    need to offer users, but can’t dedicate the
    screen space to show all of them at once
    (or it would be too overwhelming).

    View Slide

  5. button
    search form
    progress bar
    E X A M P L E D E S I G N P A T T E R N
    collection

    View Slide

  6. Design patterns
    are awesome.
    Here’s why.

    View Slide

  7. They are good
    for users.
    1
    There is no confusion.
    They don’t have to “learn” anything.

    View Slide

  8. Gosh, how am I going
    to get pass this solid
    wooden barrier?

    View Slide

  9. Very high chance users have
    used tabs before.
    If not, they are easy to learn.
    All the affordances are there:
    rollover, pointer cursor, white-to-white, look like real tabs

    View Slide

  10. Even if a user has to learn,
    they only need to do it once.
    For example, once you’ve
    interacted with an accordion
    in CREATE you’ll know how
    to use it in ANALYZE.
    “Accordion”

    View Slide

  11. They are good
    for development.
    2
    Speeds up development.
    Nobody repeats each other’s work.
    Ease of future updates.

    View Slide

  12. Analyze Create
    NEW
    THING!!1
    Homepage

    View Slide

  13. Rock ‘n’ Roll
    http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/

    View Slide

  14. View Slide

  15. View Slide