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

Fixing Lorem Ipsum with Content Prototyping @ SmartWeb in Bucharest

Marko Dugonjić
September 23, 2014

Fixing Lorem Ipsum with Content Prototyping @ SmartWeb in Bucharest

Are you building a website focused on providing news and announcements that should be published on a regular basis, but still don’t have any real articles? Lots of products and services that should be organised into meaningful categories and multiple content types, but still don’t know which, how many and how deep? 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?

Fortunately, there is something you can do about it. Learn how to set up a framework for content development to help facilitate the delivery of concise and useful information that will turn your client’s visitors into confident and engaged customers.

Marko Dugonjić

September 23, 2014
Tweet

More Decks by Marko Dugonjić

Other Decks in Design

Transcript

  1. FIXING LOREM IPSUM
    with
    CONTENT PROTOTYPING
    !

    !
    Marko Dugonjić
    SmartWeb • Bucharest • 23. 09. 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
    (visits)

    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 writing from
    scratch.

    View full-size slide

  15. VISUAL DESIGN
    FRONT-END DEVELOPMENT
    CONTENT
    CMS INTEGRATION

    View full-size slide

  16. Everybody Unhappy

    View full-size slide

  17. GETTING
    the
    INITIAL CONTENT
    3

    View full-size slide

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

    View full-size slide

  19. CONTENT PROTOTYPING
    2

    View full-size slide

  20. Unstyled CMS

    View full-size slide

  21. Share Responsibility

    View full-size slide

  22. Facilitate Authoring

    View full-size slide

  23. Content Lifespan

    View full-size slide

  24. PERMANENT CONTENT

    View full-size slide

  25. Enter Everything you Already Have
    !
    !
    !

    View full-size slide

  26. Enter Everything you Already Have
    Create Content Templates
    !
    !

    View full-size slide

  27. Enter Everything you Already Have
    Create Content Templates
    !
    !
    Gradual Disclosure
    !
    !
    !
    !

    View full-size slide

  28. Gradual Disclosure
    Beginners’ Guides
    !
    !
    !

    View full-size slide

  29. Step 1
    Step 2
    Step 3
    Step 4
    Step 5

    View full-size slide

  30. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    !
    !

    View full-size slide

  31. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    Glossary
    !

    View full-size slide

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

  33. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    Glossary
    Company History

    View full-size slide

  34. 1880
    1920
    1950 2000
    1990

    View full-size slide

  35. Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    Glossary
    Company History
    Employees’ Profiles

    View full-size slide

  36. Enter Everything you Already Have
    Create Content Templates
    Hi-Res Photos
    !
    Gradual Disclosure
    Beginners’ Guides
    Purchasing Process
    Glossary
    Company History
    Employees’ Profiles

    View full-size slide

  37. Enter Everything you Already Have
    Create Content Templates
    Hi-Res Photos
    Trim the Strings
    Deadline

    View full-size slide

  38. TEMPORARY CONTENT

    View full-size slide

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

    View full-size slide

  40. DESIGNING
    the
    CONTENT
    1

    View full-size slide

  41. Typography
    !
    !
    !
    !

    View full-size slide

  42. Food
    DANGER!
    SEX
    SPORT
    movies
    Gardening

    View full-size slide

  43. Typography
    Key Facts
    !
    !
    !

    View full-size slide

  44. NEW CPU SPEED

    View full-size slide

  45. MILLISECONDS IMPROVEMENT
    500

    View full-size slide

  46. Typography
    Key Facts
    Layout Based on Information Density
    !
    !

    View full-size slide

  47. Typography
    Key Facts
    Layout Based on Information Density
    Image Variations and Ratios
    !

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  51. PRODUCTS
    PRODUCTS
    SERVICES
    ABOUT
    SERVICES ABOUT

    View full-size slide

  52. containerist.org
    @KonstantinWeiss

    View full-size slide

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

    View full-size slide


  54. […] 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