D4D 2012: Designing for Content Management Systems

My talk from Design for Drupal 2012 Boston

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
10. LIKE FATHER LIKE SON
11. BEAUTIFUL ALIGNMENT
13. DESIGN SCHOOL ‣ Taught me to think creatively ‣ Taught me to critique ‣ Taught me to create systems
20. from flickr @nekosukidmb
21. http://crappyarchitecture.blogspot.com/2009/07/90-degrees-of-urinal.html
22. flickr @mundane_joy
24. “Design is the conscious effort to impose a meaningful order. - VICTOR PAPANEK
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!
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
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!
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
49. DON’T FORGET HIERARCHY! Design is the conscious effort to impose a meaningful order. - VICTOR PAPANEK
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
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
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
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