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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  12. Analyze Create
    NEW
    THING!!1
    Homepage

    View full-size slide

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

    View full-size slide