Designing for Content Management Systems

SXSW Interactive 2012
http://schedule.sxsw.com/2012/events/event_IAP11043

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
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
21. “Design is the conscious effort to impose a meaningful order. - VICTOR PAPANEK
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?
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
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
50. DON’T FORGET HIERARCHY! Design is the conscious effort to impose a meaningful order. - VICTOR PAPANEK
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
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
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!
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
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