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. DESIGN SCHOOL ‣ Taught me to think creatively ‣ Taught

    me to critique ‣ Taught me to create systems
  4. HOW A CMS like Drupal THINKS ‣ Contexts ‣ User

    Types ‣ Content Types (& their Fields or “chunks”)
  5. “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
  6. CONTENT TYPES & FIELDS ‣ What are the types of

    content? ‣ How can we break down these types of content into discreet chunks?
  7. 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.
  8. 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?
  9. 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!
  10. 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.
  11. 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!
  12. WHERE TO BEGIN? Start from your most important and/or complex

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

    Question ‣ Guest Appearance ‣ Guest ‣ Topic
  14. 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
  15. GESTALT & OTHER FUNDAMENTALS ‣ position ‣ proportion ‣ proximity

    ‣ symmetry ‣ similarity ‣ alignment ‣ contrast ‣ color ‣ isomorphism ‣ unity ‣ pause
  16. 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.
  17. PROXIMITY Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem

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

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

    ipsum dolor sit amet, consectetur adipiscing elit.
  20. SYMMETRY When we perceive objects, we tend to perceive them

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

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

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

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

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

    related than things that are dissimilar.
  26. 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.
  27. 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.
  28. “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
  29. “To achieve great things, two things are needed; a plan,

    and not quite enough time. - LEONARD BERNSTEIN
  30. 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