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.

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 ! ! ! ! [–]
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 + +