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

D4D 2012: Designing for Content Management Systems

D4D 2012: Designing for Content Management Systems

My talk from Design for Drupal 2012 Boston

Jared Ponchot

July 15, 2012
Tweet

More Decks by Jared Ponchot

Other Decks in Design

Transcript

  1. Design for Drupal 2012 Jared Ponchot // @jponch // Lullabot

    Designing for CONTENT MANAGEMENT SYSTEMS
  2. Hello, my name is JARED PONCHOT @jponch on twitter &

    dribbble & d.o ... 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. from flickr @nekosukidmb

  21. http://crappyarchitecture.blogspot.com/2009/07/90-degrees-of-urinal.html

  22. flickr @mundane_joy

  23. None
  24. “Design is the conscious effort to impose a meaningful order.

    - VICTOR PAPANEK
  25. None
  26. HOW A CMS like Drupal THINKS ‣ Contexts ‣ User

    Types ‣ Content Types (& their Fields or “chunks”)
  27. “It is unrealistic to write your content – or ask

    your client to write the content – before you design it. Most of the time. Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’. - MARK BOULTON
  28. CONTENT TYPES & FIELDS ‣ What are the types of

    content? ‣ How can we break down these types of content into discreet chunks?
  29. MODEL CONTENT As opposed to just formatting or styling it!

  30. None
  31. GOALS Content Types provide a sensible target for creating goals

    in your design process. Set goals for each type of content that your website will present.
  32. 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?
  33. CONTENT CREATORS ARE USERS TOO! ‣ Authors ‣ Editors ‣

    Administrators ‣ Moderators
  34. None
  35. 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!
  36. CONTEXTS The original “responsive web design”

  37. 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.
  38. RECAP ‣ Contexts ‣ User Types ‣ Content Types (&

    their Fields or “chunks”)
  39. 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!
  40. None
  41. “ redditpics.com

  42. LET’S GET PRACTICAL likecool.com

  43. WHERE TO BEGIN? Start from your most important and/or complex

    content type or context and work out from there.
  44. RADIO SHOW: CONTENT TYPES ‣ Episode ‣ News Item ‣

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

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

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

    of its parts.
  54. POSITION 1 2 3

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

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

    D T H I S
  57. PROPORTION

  58. PROPORTION 1 2 3

  59. None
  60. PROXIMITY Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem

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

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

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

  64. PROXIMITY

  65. PROXIMITY

  66. PROXIMITY

  67. None
  68. None
  69. None
  70. funnysigns.net

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

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

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

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

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

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

    related than things that are dissimilar.
  77. ALIGNMENT

  78. ALIGNMENT

  79. CONTRAST

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

    Cool colors recede
  81. Isomorphism

  82. 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.
  83. 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.
  84. “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
  85. PATTERNS ARE IMPORTANT!

  86. http://www.jwz.org/blog/2006/04/soviet-playground-sculptures-apparently

  87. UNITY

  88. UNITY

  89. PAUSE

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

  91. TIPS & TRICKS

  92. A NIFTY TRICK

  93. A NIFTY TRICK

  94. A NIFTY TRICK

  95. None
  96. None
  97. “To achieve great things, two things are needed; a plan,

    and not quite enough time. - LEONARD BERNSTEIN
  98. LETS HAVE FUN WITH THIS THING! JARED PONCHOT @jponch on

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