$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
  2. Hello, my name is JARED PONCHOT @jponch on twitter &

    dribbble ... and I’m a web designer
  3. Strategy | Development | Training

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. LIKE FATHER LIKE SON

  11. BEAUTIFUL ALIGNMENT

  12. None
  13. DESIGN SCHOOL ‣ Taught me to think creatively ‣ Taught

    me to critique ‣ Taught me to create systems
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. “Design is the conscious effort to impose a meaningful order.

    - VICTOR PAPANEK
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. HOW A CMS like Drupal THINKS ‣ Contexts ‣ User

    Types ‣ Content Types (& their Fields or “chunks”)
  32. CONTENT TYPES & FIELDS ‣ What are the types of

    content? ‣ How can we break down these types of content into discreet chunks?
  33. None
  34. None
  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.
  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?
  37. CONTENT CREATORS ARE USERS TOO! ‣ Authors ‣ Editors ‣

    Administrators ‣ Moderators
  38. None
  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!
  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.
  41. RECAP ‣ Contexts ‣ User Types ‣ Content Types (&

    their Fields or “chunks”)
  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!
  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
  44. LET’S GET PRACTICAL

  45. RADIO SHOW: CONTENT TYPES ‣ Episode ‣ News Item ‣

    Question ‣ Guest Appearance ‣ Guest ‣ Topic
  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
  47. None
  48. None
  49. None
  50. DON’T FORGET HIERARCHY! Design is the conscious effort to impose

    a meaningful order. - VICTOR PAPANEK
  51. None
  52. GESTALT & OTHER FUNDAMENTALS ‣ position ‣ proportion ‣ proximity

    ‣ symmetry ‣ similarity ‣ alignment ‣ contrast ‣ color ‣ isomorphism ‣ unity ‣ pause
  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.
  54. Especially visually, the whole is often more than the sum

    of its parts.
  55. POSITION 1 2 3

  56. POSITION E U H Y D A S R I

    O T N A C
  57. POSITION C A N Y O U R E A

    D T H I S
  58. PROPORTION

  59. PROPORTION 1 2 3

  60. http://lb.cm/petchow

  61. None
  62. None
  63. None
  64. PROXIMITY Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem

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

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

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

  68. PROXIMITY

  69. PROXIMITY

  70. PROXIMITY

  71. None
  72. None
  73. None
  74. funnysigns.net

  75. SYMMETRY When we perceive objects, we tend to perceive them

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

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

    as symmetrical shapes that form around their center. { } { } { }
  78. SIMILARITY Things that are similar are perceived to be more

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

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

    related than things that are dissimilar.
  81. ALIGNMENT

  82. ALIGNMENT

  83. CONTRAST

  84. COLOR & VISUAL IMPORTANCE ‣ Warm colors stand out ‣

    Cool colors recede
  85. Isomorphism

  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.
  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.
  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
  89. PATTERNS ARE IMPORTANT!

  90. None
  91. UNITY

  92. UNITY

  93. PAUSE

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

  95. TIPS & TRICKS

  96. A NIFTY TRICK

  97. A NIFTY TRICK

  98. A NIFTY TRICK

  99. None
  100. None
  101. LETS HAVE FUN WITH THIS THING JARED PONCHOT @jponch on

    twitter & dribbble
  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