Designing for Content Management Systems

823 views

Published on

Jared Ponchot's talk at DrupalCamp ATL 2012

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing for Content Management Systems

  1. 1. Designing forCONTENTMANAGEMENTSYSTEMSDrupalCamp Atlanta 2012Jared Ponchot // @jponch // Lullabot
  2. 2. Hello, my name isJARED PONCHOT... and I’m a web designer@jponch on twitter & dribbble
  3. 3. Strategy | Design | Development
  4. 4. LIKE FATHERLIKE SON
  5. 5. BEAUTIFULALIGNMENTPROPORTIONALGRID SYSTEM
  6. 6. DESIGN SCHOOL‣ Taught me to think creatively‣ Taught me to critique‣ Taught me to create “design systems”
  7. 7. UniversityUNITY WITHIN DIVERSITY
  8. 8. “ Websites are systems rather than pages and the sooner we stop perceiving them as that, the better. — ANNA DEBENHAM
  9. 9. BOEING 777 COCKPIT
  10. 10. NOTICE THE CUP HOLDER!
  11. 11. DESIGNING SYSTEMSFUNDAMENTALS‣ Design on purpose‣ Design for user types‣ Design with a content model‣ Hierarchy, Hierarchy, Hierarchy!
  12. 12. Plans are of little importance, but planning is essential. — WINSTON CHURCHILLPhoto by Cecil Beaton, at 10 Downing Street, London, in 1940
  13. 13. Photo by R. D. Ward As we know, There are known knowns. There are things we know we know. We also know there are known unknowns. That is to say, we know there are some things we do not know. — DONALD RUMSFELD
  14. 14. Photo by R. D. Ward But there are also unknown unknowns, the ones we don’t know we don’t know. — DONALD RUMSFELD
  15. 15. DESIGNING ON PURPOSE‣ Why does this site exist?‣ Who would miss it if it goes away? Why?‣ What opportunities does this website present or create?‣ What problems can ONLY be solved via this website?
  16. 16. TEAM WORK!Get at least the designer, developer,project manager and product owner in aroom together, ask questions, take notes!
  17. 17. http://goo.gl/Zd5ZO
  18. 18. STATEMENT OFDESIGN INTENT‣ Keeps things on track when they’re going off the rails‣ Generates big ideas‣ Helps simplify complexity‣ Helps communicate and facilitate organizational change
  19. 19. SETTING GOALS‣ Be sure to identify both user goals and organizational goals!‣ Find ways to make them measurable
  20. 20. DESIGNING ON PURPOSE‣ Knowing the unknowns‣ Asking why‣ Understanding & establishing goals‣ Having a star to sail your ship by
  21. 21. http://crappyarchitecture.blogspot.com/2009/07/90-degrees-of-urinal.html
  22. 22. USER TYPES‣ Identify each type of user who will use the site.‣ Document the kinds of tasks each type of user will likely want to do on the site.‣ Ask if those tasks remain the same for each type on mobile, tablets and desktop. What changes?
  23. 23. CONTENT CREATORS AREUSERS TOO!‣ Authors‣ Editors‣ Administrators‣ Moderators
  24. 24. http://goo.gl/47ueE
  25. 25. THINK LIKE A CREATOR!Put yourself in the shoes of the contentcreators early and often and you willbetter understand the correct structureof the content, produce better designs,and increase your likelihood for asuccessful project and a happy client!
  26. 26. CONTENT FIRST!right after user types & purpose
  27. 27. THE CONTENT MODELA detailed map of all the types of contentyour project needs, the discrete attributesthat make up each content type, therelationships between them, and thecontexts through which they’re displayed.
  28. 28. “ A content model helps clarify requirements and encourages collaboration between the designers, the developers creating the CMS, and the content creators. — RACHEL LOVINGER
  29. 29. CREATING A CONTENTMODEL FOR DESIGN‣ Audit Current Content‣ Identify Content Types & Attributes‣ Identify Relationships‣ Identify Contexts
  30. 30. CONTENT AUDIT‣ What’s there now?‣ What’s going to get tossed?‣ What’s going to be new?
  31. 31. CONTENT TYPES‣ A discreet type of content (e.g. blog post, event, recipe, etc.)‣ The attributes that make up that type of content (e.g. a recipe might have a title, ingredients, lead description, full description, preparation, etc.)
  32. 32. CONTENT TYPES‣ Divorced from placement‣ Watch for patterns
  33. 33. CONTENT TYPE GOALS!‣ What types of users is this content for?‣ What are the key questions for each user type this content answers?
  34. 34. RELATIONSHIPS‣ Identify parent/child relationships‣ Identify sibling relationships
  35. 35. CONTEXTSA context provides conditions and reactionsbased upon a defined criteria. Conditionsmight be things like sections, content typesor user types. Reactions might be things likedisplay a list of these attributes from aparticular type of content in a particularsection of the markup.
  36. 36. CONTEXTSThe original “responsive web design”
  37. 37. CONTEXTSA context is a display that includesdiscreet parts from various pieces and/ortypes of content, displayed conditionallybased on things like relationships.
  38. 38. COMPONENTSThe actual bits that get displayeddepending upon the context.
  39. 39. COMPONENT HIERARCHY‣ List out all the components displayed within a given type or context.‣ Assign a 1, 2 or 3 to each component.‣ Evaluate your 1’s, 2’s and 3’s against your key questions for each type or context.
  40. 40. Responsive Bootcamp PVD 2012 #RBCPVD
  41. 41. COMPONENT HIERARCHY‣ The more components you have, the harder to keep the client from assigning a 1 or 2 to LOTS of things.‣ Iterate on the fly with the client. In round one, don’t worry even if they give everything a 1. Keep iterating until 10% or less are a 1 for any screen.
  42. 42. “ redditpics.com
  43. 43. DON’T FORGETVISUAL HIERARCHY!Design is the conscious effort toimpose a meaningful order. - VICTOR PAPANEK
  44. 44. GESTALT & OTHERFUNDAMENTALS‣ position ‣ contrast‣ proportion ‣ color‣ proximity ‣ isomorphism‣ symmetry ‣ unity‣ similarity ‣ pause‣ alignment
  45. 45. THE PSYCHOLOGY OF VISUALHIERARCHYGestalt psychology was founded by MaxWertheimer in 1912 and expanded upon byothers like Kurt Koffka.Gestalt psychology is based on the observationthat we often experience things that are not apart of our simple sensations.
  46. 46. Especially visually, the whole is often more than the sum of its parts.
  47. 47. POSITION 1 2 3
  48. 48. POSITION E U H Y D A S R I O T N A C
  49. 49. POSITION C A N Y O U R E A D T H I S
  50. 50. PROPORTION
  51. 51. PROPORTION 2 1 3
  52. 52. PROXIMITYLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  53. 53. PROXIMITYLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  54. 54. PROXIMITYLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  55. 55. PROXIMITYLorem ipsum dolor sit amet, consectetur adipiscing elit.
  56. 56. PROXIMITY
  57. 57. PROXIMITY
  58. 58. PROXIMITY
  59. 59. funnysigns.net
  60. 60. SYMMETRYWhen we perceive objects, we tend to perceivethem as symmetrical shapes that form aroundtheir center.{ }{ }{ }
  61. 61. SYMMETRYWhen we perceive objects, we tend to perceivethem as symmetrical shapes that form aroundtheir center.{ } { } { }
  62. 62. SYMMETRYWhen we perceive objects, we tend to perceivethem as symmetrical shapes that form aroundtheir center.{ } { } { }
  63. 63. SIMILARITYThings that are similar are perceived to be morerelated than things that are dissimilar.
  64. 64. SIMILARITYThings that are similar are perceived to be morerelated than things that are dissimilar.
  65. 65. SIMILARITYThings that are similar are perceived to be morerelated than things that are dissimilar.
  66. 66. ALIGNMENT
  67. 67. ALIGNMENT
  68. 68. CONTRAST
  69. 69. COLOR & VISUAL IMPORTANCE‣ Warm colors stand out‣ Cool colors recede
  70. 70. ISOMORPHISM
  71. 71. Aoccdrnig to rscheearch at Cmabrigdeuinervtisy, it deosnt mttaer waht oredr theltteers in a wrod are, the olny iprmoetnt tihngis taht the frist and lsat ltteres are at the rghitpclae. The rset can be a tatol mses and you cansitll raed it wouthit a porbelm. Tihs is bcuseaewe do not raed ervey lteter by it slef but thewrod as a wlohe.
  72. 72. According to a research at CambridgeUniversity, it doesnt matter in what order theletters in a word are, the only important thingis that the first and last letter be at the rightplace. The rest can be a total mess and you canstill read it without problem. This is becausethe human mind does not read every letter byitself but the word as a whole.
  73. 73. 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
  74. 74. PATTERNS AREIMPORTANT!
  75. 75. http://www.jwz.org/blog/2006/04/soviet-playground-sculptures-apparently
  76. 76. UNITY
  77. 77. UNITY
  78. 78. PAUSE
  79. 79. ADDING BY LEAVING OUT:THE POWER OF PAUSEhttp://lb.cm/pause
  80. 80. TIPS &TRICKS
  81. 81. A NIFTY TRICK
  82. 82. A NIFTY TRICK
  83. 83. A NIFTY TRICK
  84. 84. IMPOSE AMEANINGFUL ORDER‣ Design on purpose‣ Design for user types‣ Design with a content model‣ Hierarchy, Hierarchy, Hierarchy!
  85. 85. LETS HAVE FUNWITH THIS THING!JARED PONCHOT@jponch on twitter & dribbble

×