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

    View full-size slide

  2. Hello, my name is
    JARED PONCHOT
    @jponch on twitter & dribbble & d.o
    ... and I’m a web designer

    View full-size slide

  3. Strategy | Development | Training

    View full-size slide

  4. LIKE FATHER
    LIKE SON

    View full-size slide

  5. BEAUTIFUL
    ALIGNMENT

    View full-size slide

  6. DESIGN SCHOOL

    Taught me to think creatively

    Taught me to critique

    Taught me to create systems

    View full-size slide

  7. from flickr @nekosukidmb

    View full-size slide

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

    View full-size slide

  9. flickr @mundane_joy

    View full-size slide

  10. “Design is the conscious effort to
    impose a meaningful order.
    - VICTOR PAPANEK

    View full-size slide

  11. HOW A CMS like Drupal
    THINKS

    Contexts

    User Types

    Content Types (& their Fields or “chunks”)

    View full-size slide

  12. “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

    View full-size slide

  13. CONTENT TYPES & FIELDS

    What are the types of content?

    How can we break down these types of
    content into discreet chunks?

    View full-size slide

  14. MODEL CONTENT
    As opposed to just formatting or styling it!

    View full-size slide

  15. 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.

    View full-size slide

  16. 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?

    View full-size slide

  17. CONTENT CREATORS ARE
    USERS TOO!

    Authors

    Editors

    Administrators

    Moderators

    View full-size slide

  18. 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!

    View full-size slide

  19. CONTEXTS
    The original “responsive web design”

    View full-size slide

  20. 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.

    View full-size slide

  21. RECAP

    Contexts

    User Types

    Content Types (& their Fields or “chunks”)

    View full-size slide

  22. 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!

    View full-size slide


  23. redditpics.com

    View full-size slide

  24. LET’S GET
    PRACTICAL
    likecool.com

    View full-size slide

  25. WHERE TO BEGIN?
    Start from your most important and/or
    complex content type or context and
    work out from there.

    View full-size slide

  26. RADIO SHOW:
    CONTENT TYPES

    Episode

    News Item

    Question

    Guest Appearance

    Guest

    Topic

    View full-size slide

  27. 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

    View full-size slide

  28. DON’T FORGET
    HIERARCHY!
    Design is the conscious effort to
    impose a meaningful order.
    - VICTOR PAPANEK

    View full-size slide

  29. GESTALT & OTHER
    FUNDAMENTALS

    position

    proportion

    proximity

    symmetry

    similarity

    alignment

    contrast

    color

    isomorphism

    unity

    pause

    View full-size slide

  30. 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.

    View full-size slide

  31. Especially visually, the whole is often
    more than the sum of its parts.

    View full-size slide

  32. POSITION
    1
    2 3

    View full-size slide

  33. POSITION
    E U H Y D A
    S R I O T N
    A C

    View full-size slide

  34. POSITION
    C A N Y O U
    R E A D T H
    I S

    View full-size slide

  35. PROPORTION
    1
    2
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. funnysigns.net

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. COLOR & VISUAL IMPORTANCE

    Warm colors stand out

    Cool colors recede

    View full-size slide

  48. 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.

    View full-size slide

  49. 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.

    View full-size slide

  50. “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

    View full-size slide

  51. PATTERNS ARE
    IMPORTANT!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. TIPS &
    TRICKS

    View full-size slide

  55. A NIFTY TRICK

    View full-size slide

  56. A NIFTY TRICK

    View full-size slide

  57. A NIFTY TRICK

    View full-size slide

  58. “To achieve great things, two
    things are needed; a plan, and
    not quite enough time.
    - LEONARD BERNSTEIN

    View full-size slide

  59. LETS HAVE FUN
    WITH THIS THING!
    JARED PONCHOT
    @jponch on twitter & dribbble

    View full-size slide

  60. 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

    View full-size slide