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

Designing for Content Management Systems

Designing for Content Management Systems

Jared Ponchot

March 11, 2012
Tweet

More Decks by Jared Ponchot

Other Decks in Design

Transcript

  1. SXSW Interactive 2012
    Jared Ponchot // @jponch // Lullabot
    Designing for
    CONTENT
    MANAGEMENT
    SYSTEMS

    View full-size slide

  2. Hello, my name is
    JARED PONCHOT
    @jponch on twitter & dribbble
    ... and I’m a web designer

    View full-size slide

  3. Strategy | Development | Training

    View full-size slide

  4. LIKE FATHER
    LIKE SON

    View full-size slide

  5. BEAUTIFUL
    ALIGNMENT

    View full-size slide

  6. DESIGN SCHOOL

    Taught me to think creatively

    Taught me to critique

    Taught me to create systems

    View full-size slide

  7. “Design is the conscious effort to
    impose a meaningful order.
    - VICTOR PAPANEK

    View full-size slide

  8. HOW A CMS like Drupal
    THINKS

    Contexts

    User Types

    Content Types (& their Fields or “chunks”)

    View full-size slide

  9. CONTENT TYPES & FIELDS

    What are the types of content?

    How can we break down these types of
    content into discreet chunks?

    View full-size slide

  10. GOALS
    Content Types provide a sensible target
    for creating goals for your website. Set
    goals for each type of content in your
    design process.

    View full-size slide

  11. USER TYPES

    Who is using the site?

    What are they using it for?

    Anonymous or Authenticated

    What can they access or not access,
    create or not create, edit or not edit?

    View full-size slide

  12. CONTENT CREATORS ARE
    USERS TOO!

    Authors

    Editors

    Administrators

    Moderators

    View full-size slide

  13. THINK LIKE A CREATOR!
    Put yourself in the shoes of the content
    creators early and often and you will
    better understand the correct structure
    of the content, produce better designs,
    and increase your likelihood for a
    successful project and a happy client!

    View full-size slide

  14. CONTEXTS
    A context provides conditions and reactions
    based upon a defined criteria. Conditions
    might be things like sections, content types
    or user types. Reactions might be things like
    display a list of these chunks from this type
    of content in the sidebar.

    View full-size slide

  15. RECAP

    Contexts

    User Types

    Content Types (& their Fields or “chunks”)

    View full-size slide

  16. WHY SHOULD WE THINK IN
    THIS WAY?

    We need to know our tool.

    It simplifies the complexity.

    We can’t design for each PIECE of content
    on a dynamic site!

    View full-size slide

  17. “An escalator can never break: it can only
    become stairs. You should never see an
    Escalator Temporarily Out Of Order sign,
    just Escalator Temporarily Stairs. Sorry for
    the convenience.
    - MITCH HEDBERG

    View full-size slide

  18. LET’S GET
    PRACTICAL

    View full-size slide

  19. RADIO SHOW:
    CONTENT TYPES

    Episode

    News Item

    Question

    Guest Appearance

    Guest

    Topic

    View full-size slide

  20. EPISODE
    Air date
    Media links
    Summary writeup
    Playlist link
    NEWS ITEM
    Timestamp
    Summary
    External links
    GUEST APPEARANCE
    Timestamp
    Summary
    Guest Link
    QUESTION
    Timestamp
    Name & Location
    Answer
    External links
    GUEST
    Name
    Bio photo
    home page
    social links
    TOPIC
    Title
    Summary
    Related topics
    SONG
    Timestamp
    Youtube/iTunes/etc link
    STATION
    Callsign
    FEATURETTE (?)
    Title
    SPONSOR
    Company name
    Writeup

    View full-size slide

  21. DON’T FORGET
    HIERARCHY!
    Design is the conscious effort to
    impose a meaningful order.
    - VICTOR PAPANEK

    View full-size slide

  22. GESTALT & OTHER
    FUNDAMENTALS

    position

    proportion

    proximity

    symmetry

    similarity

    alignment

    contrast

    color

    isomorphism

    unity

    pause

    View full-size slide

  23. THE PSYCHOLOGY OF VISUAL
    HIERARCHY
    Gestalt psychology was founded by Max
    Wertheimer in 1912 and expanded upon by
    others like Kurt Koffka.
    Gestalt psychology is based on the observation
    that we often experience things that are not a
    part of our simple sensations.

    View full-size slide

  24. Especially visually, the whole is often
    more than the sum of its parts.

    View full-size slide

  25. POSITION
    1
    2 3

    View full-size slide

  26. POSITION
    E U H Y D A
    S R I O T N
    A C

    View full-size slide

  27. POSITION
    C A N Y O U
    R E A D T H
    I S

    View full-size slide

  28. PROPORTION
    1
    2
    3

    View full-size slide

  29. http://lb.cm/petchow

    View full-size slide

  30. PROXIMITY
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    View full-size slide

  31. PROXIMITY
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    View full-size slide

  32. PROXIMITY
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    View full-size slide

  33. PROXIMITY
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    View full-size slide

  34. funnysigns.net

    View full-size slide

  35. SYMMETRY
    When we perceive objects, we tend to perceive
    them as symmetrical shapes that form around
    their center.
    { } { } { }

    View full-size slide

  36. SYMMETRY
    When we perceive objects, we tend to perceive
    them as symmetrical shapes that form around
    their center.
    { } { } { }

    View full-size slide

  37. SYMMETRY
    When we perceive objects, we tend to perceive
    them as symmetrical shapes that form around
    their center.
    { } { } { }

    View full-size slide

  38. SIMILARITY
    Things that are similar are perceived to be more
    related than things that are dissimilar.

    View full-size slide

  39. SIMILARITY
    Things that are similar are perceived to be more
    related than things that are dissimilar.

    View full-size slide

  40. SIMILARITY
    Things that are similar are perceived to be more
    related than things that are dissimilar.

    View full-size slide

  41. COLOR & VISUAL IMPORTANCE

    Warm colors stand out

    Cool colors recede

    View full-size slide

  42. Aoccdrnig to rscheearch at Cmabrigde
    uinervtisy, it deosn't mttaer waht oredr the
    ltteers in a wrod are, the olny iprmoetnt tihng
    is taht the frist and lsat ltteres are at the rghit
    pclae. The rset can be a tatol mses and you can
    sitll raed it wouthit a porbelm. Tihs is bcuseae
    we do not raed ervey lteter by it slef but the
    wrod as a wlohe.

    View full-size slide

  43. According to a research at Cambridge
    University, it doesn't matter in what order the
    letters in a word are, the only important thing
    is that the first and last letter be at the right
    place. The rest can be a total mess and you can
    still read it without problem. This is because
    the human mind does not read every letter by
    itself but the word as a whole.

    View full-size slide

  44. “Surprise amplifies our
    emotional response.
    When we anticipate a moment, the
    emotional response is diluted across time.
    A moment of surprise compresses emotion
    into a split second, making our reaction
    more intense, and creating a strong
    imprint on our memory.
    - AARRON WALTER // DESIGNING FOR EMOTION

    View full-size slide

  45. PATTERNS ARE
    IMPORTANT!

    View full-size slide

  46. ADDING BY LEAVING OUT:
    THE POWER OF PAUSE
    http://lb.cm/pause

    View full-size slide

  47. TIPS &
    TRICKS

    View full-size slide

  48. A NIFTY TRICK

    View full-size slide

  49. A NIFTY TRICK

    View full-size slide

  50. A NIFTY TRICK

    View full-size slide

  51. LETS HAVE FUN
    WITH THIS THING
    JARED PONCHOT
    @jponch on twitter & dribbble

    View full-size slide

  52. FOR YOUR LINKING
    PLEASURE

    http://www.alistapart.com/articles/future-ready-content

    http://en.wikipedia.org/wiki/News_style

    http://www.lullabot.com/articles/baby-got-backend

    http://lb.cm/petchow

    http://lb.cm/pause

    http://badassideas.com/style-tiles-as-a-web-design-process-tool

    http://www.markboulton.co.uk/journal/comments/structure-first-content-always

    View full-size slide