Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fixing Lorem Ipsum with Content Prototyping @ FrontendConf in Zürich

Fixing Lorem Ipsum with Content Prototyping @ FrontendConf in Zürich

Don'€t know what content to expect from the client and how long it will take them to deliver it? Hate designing with Lorem Ipsum? Learn how to set up a framework for content development to help facilitate the delivery of concise and useful information.

Marko Dugonjić

August 28, 2014
Tweet

More Decks by Marko Dugonjić

Other Decks in Business

Transcript

  1. FIXING LOREM IPSUM
    with
    CONTENT PROTOTYPING
    !

    !
    Marko Dugonjić
    FrontendConf • Zurich • 27. 08. 2014.
    +

    View full-size slide

  2. @markodugonjic

    View full-size slide

  3. Creative Nights

    View full-size slide

  4. Source: h p://blog.njuskalo.hr/brojke-koje-pricaju-pricu

    View full-size slide

  5. 3.000.000
    MONTHLY VISITS
    4.500.000
    POPULATION OF CROATIA

    View full-size slide

  6. MENU

    Designing in the Blind
    Ge ing the Initial Content
    Content Prototyping
    Designing the Content

    View full-size slide

  7. DESIGNING
    in the
    BLIND
    4

    View full-size slide

  8. “We are the industry leaders.”
    “We are commi ed to excellence.”
    “Our customers are our greatest value.”
    logo.gif
    3 months before…

    View full-size slide

  9. Night Shi
    1 week before…

    View full-size slide

  10. Site Index
    Quick Guides
    Infographics
    Process Description
    Terms, Conditions, Guarantee
    Terms Explanations
    Customer Support Content
    About the Company
    3 days before…

    View full-size slide

  11. UNKNOWN CONTENT
    =
    GENERIC DESIGN

    View full-size slide


  12. 80% of a website’s development
    is spent talking about what links
    go in the navigation.
    — Dave Rupert
    Paravel

    View full-size slide

  13. LOGO COLORS
    CORNERS
    SHADOWS

    View full-size slide

  14. Editing is easier
    than creating from
    scratch.
    TWEET THIS

    View full-size slide

  15. Everybody Unhappy

    View full-size slide

  16. GETTING
    the
    INITIAL CONTENT
    3

    View full-size slide

  17. Google Alert
    Brochures and Reports
    Find the FAQ
    Ask Questions
    Ask friends to Ask Questions
    Steal the Competition Content
    Bring your Camera

    View full-size slide

  18. CONTENT PROTOTYPING
    2

    View full-size slide

  19. Unstyled CMS

    View full-size slide

  20. Share Responsibility

    View full-size slide

  21. Facilitate Authoring

    View full-size slide

  22. Content Lifespan

    View full-size slide

  23. PERMANENT CONTENT

    View full-size slide

  24. Enter Everything you Already Have
    !
    !
    !

    View full-size slide

  25. Enter Everything you Already Have
    Create Content Templates [+]
    !
    !

    View full-size slide

  26. Gradual Disclosure
    !
    !
    !
    !
    [–]

    View full-size slide

  27. Gradual Disclosure
    Beginners’ Guides
    !
    !
    !
    [–]

    View full-size slide

  28. Step 1
    Step 2
    Step 3
    Step 4
    Step 5

    View full-size slide

  29. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    !
    !
    [–]

    View full-size slide

  30. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    Glossary
    !
    [–]

    View full-size slide

  31. A E
    C D
    B F
    J
    H I
    G K
    O
    M N
    L
    P
    T
    R
    S
    Q
    U V W X
    Z
    Y

    View full-size slide

  32. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    Glossary
    Company History
    [–]

    View full-size slide

  33. 1880
    1920
    1950 2000
    1990

    View full-size slide

  34. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    Glossary
    Company History
    Employees’ Profiles
    [–]

    View full-size slide

  35. Enter Everything you Already Have
    Create Content Templates [+]
    Hi-Res Photos
    Trim the Strings
    Deadline

    View full-size slide

  36. TEMPORARY CONTENT

    View full-size slide

  37. Publishing Schedule
    Recurring Seasonal Activities
    A List of Topics
    3 Articles per Category
    Deadline

    View full-size slide

  38. DESIGNING
    the
    CONTENT
    1

    View full-size slide

  39. Typography
    Key Facts
    Layout Based on Information Density
    Image Variations and Ratios
    Revise Main Navigation

    View full-size slide

  40. Development Agency Zagreb | raza.hr
    Home
    Entrepreneurial Guides
    Business Glossary
    Education (Seminars)
    Services for Entrepreneurs
    Action Grants
    Support programs
    Development projects

    View full-size slide

  41. Typography
    Key Facts
    Layout Based on Information Density
    Image Variations and Ratios
    Revise Main Navigation
    Homepage Hierarchy

    View full-size slide

  42. containerist.org

    View full-size slide

  43. Expectations are Set Early On
    The Client Understands the User
    Accessibility > Aesthetics
    Structure and Consistency
    Form Follows Function
    Interesting Information

    View full-size slide


  44. […] we improved the overall
    communication with our
    customers and learned how to
    explain complex concepts in
    simple words.
    — Frane Šesnić
    CEO, Development Agency Zagreb

    View full-size slide

  45. @markodugonjic

    View full-size slide

  46. DANKESCHÖN!
    !
    Marko Dugonjić
    @markodugonjic
    +
    +

    View full-size slide