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.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

August 28, 2014
Tweet

Transcript

  1. FIXING LOREM IPSUM with CONTENT PROTOTYPING ! — ! Marko

    Dugonjić FrontendConf • Zurich • 27. 08. 2014. +
  2. @markodugonjic

  3. Creative Nights

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

  5. 3.000.000 MONTHLY VISITS 4.500.000 POPULATION OF CROATIA

  6. MENU • Designing in the Blind Ge ing the Initial

    Content Content Prototyping Designing the Content
  7. DESIGNING in the BLIND 4

  8. “We are the industry leaders.” “We are commi ed to

    excellence.” “Our customers are our greatest value.” logo.gif 3 months before…
  9. Night Shi 1 week before…

  10. Site Index Quick Guides Infographics Process Description Terms, Conditions, Guarantee

    Terms Explanations Customer Support Content About the Company 3 days before…
  11. UNKNOWN CONTENT = GENERIC DESIGN

  12. “ 80% of a website’s development is spent talking about

    what links go in the navigation. — Dave Rupert Paravel
  13. LOGO COLORS CORNERS SHADOWS

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

  15. The Fear

  16. Everybody Unhappy

  17. GETTING the INITIAL CONTENT 3

  18. Google Alert Brochures and Reports Find the FAQ Ask Questions

    Ask friends to Ask Questions Steal the Competition Content Bring your Camera
  19. CONTENT PROTOTYPING 2

  20. Unstyled CMS

  21. Share Responsibility

  22. Facilitate Authoring

  23. Content Lifespan

  24. PERMANENT CONTENT

  25. Enter Everything you Already Have ! ! !

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

    !
  27. Gradual Disclosure ! ! ! ! [–]

  28. None
  29. Gradual Disclosure Beginners’ Guides ! ! ! [–]

  30. Step 1 Step 2 Step 3 Step 4 Step 5

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

  32. 1 2 3 4

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

  34. 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
  35. Gradual Disclosure Beginners’ Guides Purchasing Process Glossary Company History [–]

  36. 1880 1920 1950 2000 1990

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

    Profiles [–]
  38. 3 3 3

  39. Enter Everything you Already Have Create Content Templates [+] Hi-Res

    Photos Trim the Strings Deadline
  40. TEMPORARY CONTENT

  41. Publishing Schedule Recurring Seasonal Activities A List of Topics 3

    Articles per Category Deadline
  42. DESIGNING the CONTENT 1

  43. Typography Key Facts Layout Based on Information Density Image Variations

    and Ratios Revise Main Navigation
  44. Development Agency Zagreb | raza.hr Home Entrepreneurial Guides Business Glossary

    Education (Seminars) Services for Entrepreneurs Action Grants Support programs Development projects
  45. Typography Key Facts Layout Based on Information Density Image Variations

    and Ratios Revise Main Navigation Homepage Hierarchy
  46. A A B C B C

  47. containerist.org

  48. ❤ BONUS

  49. Expectations are Set Early On The Client Understands the User

    Accessibility > Aesthetics Structure and Consistency Form Follows Function Interesting Information
  50. “ […] we improved the overall communication with our customers

    and learned how to explain complex concepts in simple words. — Frane Šesnić CEO, Development Agency Zagreb
  51. @markodugonjic

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