$30 off During Our Annual Pro Sale. View Details »

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 Slide

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

    View Slide

  3. Strategy | Development | Training

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. LIKE FATHER
    LIKE SON

    View Slide

  11. BEAUTIFUL
    ALIGNMENT

    View Slide

  12. View Slide

  13. DESIGN SCHOOL

    Taught me to think creatively

    Taught me to critique

    Taught me to create systems

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

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

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. HOW A CMS like Drupal
    THINKS

    Contexts

    User Types

    Content Types (& their Fields or “chunks”)

    View Slide

  32. CONTENT TYPES & FIELDS

    What are the types of content?

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

    View Slide

  33. View Slide

  34. View Slide

  35. 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 Slide

  36. 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 Slide

  37. CONTENT CREATORS ARE
    USERS TOO!

    Authors

    Editors

    Administrators

    Moderators

    View Slide

  38. View Slide

  39. 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 Slide

  40. 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 Slide

  41. RECAP

    Contexts

    User Types

    Content Types (& their Fields or “chunks”)

    View Slide

  42. 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 Slide

  43. “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 Slide

  44. LET’S GET
    PRACTICAL

    View Slide

  45. RADIO SHOW:
    CONTENT TYPES

    Episode

    News Item

    Question

    Guest Appearance

    Guest

    Topic

    View Slide

  46. 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 Slide

  47. View Slide

  48. View Slide

  49. View Slide

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

    View Slide

  51. View Slide

  52. GESTALT & OTHER
    FUNDAMENTALS

    position

    proportion

    proximity

    symmetry

    similarity

    alignment

    contrast

    color

    isomorphism

    unity

    pause

    View Slide

  53. 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 Slide

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

    View Slide

  55. POSITION
    1
    2 3

    View Slide

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

    View Slide

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

    View Slide

  58. PROPORTION

    View Slide

  59. PROPORTION
    1
    2
    3

    View Slide

  60. http://lb.cm/petchow

    View Slide

  61. View Slide

  62. View Slide

  63. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. PROXIMITY

    View Slide

  69. PROXIMITY

    View Slide

  70. PROXIMITY

    View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. funnysigns.net

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. ALIGNMENT

    View Slide

  82. ALIGNMENT

    View Slide

  83. CONTRAST

    View Slide

  84. COLOR & VISUAL IMPORTANCE

    Warm colors stand out

    Cool colors recede

    View Slide

  85. Isomorphism

    View Slide

  86. 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 Slide

  87. 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 Slide

  88. “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 Slide

  89. PATTERNS ARE
    IMPORTANT!

    View Slide

  90. View Slide

  91. UNITY

    View Slide

  92. UNITY

    View Slide

  93. PAUSE

    View Slide

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

    View Slide

  95. TIPS &
    TRICKS

    View Slide

  96. A NIFTY TRICK

    View Slide

  97. A NIFTY TRICK

    View Slide

  98. A NIFTY TRICK

    View Slide

  99. View Slide

  100. View Slide

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

    View Slide

  102. 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 Slide