Content-Driven Design
3 likes260 views
The document discusses the principles of content-driven design presented at the UX Camp Hamburg 2018, emphasizing the need for integration of art and copy in design processes. It critiques the prevalent template-driven approaches in modern design tools, advocating for collaboration and a focus on content curation. Key points include the importance of seamless teamwork among designers and the transformative potential of real data and collaboration.
Content-Driven Design
- 1. Content-driven Design UX Camp Hamburg 2018, 11th August
- 2. Content-driven Design UX Camp Hamburg 2018, 11th August Copy
- 3. Niclas Hellberg Currently FIND ME ON TWITTER: @NHELLBERG interactiondesigner ↪︎ XING at
- 5. Aspects of this talk Being the product Selling the product Being part of the UI Part of the design process
- 6. –Eden Vidal, Relate „We live in an era when our design tools enforce form over content, while the medium we are designing for embraces the exact opposite.“
- 7. CONCEPT / WIREFRAMES VISUAL DESIGN ↰ ↴ ↖ ︎ MIX ART AND COPY ↱ ↖ ︎ CONTENT ↖ ︎ ↰ RESULT
- 8. CONCEPT / WIREFRAMES VISUAL DESIGN ↱ ↰ ↴ ↖ ︎ MIX ART AND COPY CONTENT ↖ ︎ ↰ RESULT↺
- 9. CONCEPT / WIREFRAMES VISUAL DESIGN ↱ ↰ ↴ ↖ ︎ MIX ART AND COPY CONTENT ↖ ︎ ↰ RESULT↺ ↺ VISUAL DESIGN
- 11. Art and copy should sit in the same room.Image: http://adcglobal.org/hall-of-fame/bill-bernbach/
- 12. The Volkswagen “Think Small” campaign
- 13. CONCEPT / WIREFRAMES VISUAL DESIGN ↱ ↰ ↴ ↖ ︎ MIX ART AND COPY CONTENT ↖ ︎ ↰ RESULT↺ ↺ VISUAL DESIGN It’s all design…
- 14. “If you are a poet, you will see clearly that there is a cloud floating in every sheet of paper. Without a cloud, there will be no rain; without rain, the trees cannot grow; and without trees, we cannot make paper. The cloud is essential for the paper to exist.” –Thich Nhat Hanh
- 16. „One of the key differences between our new site and the old Guardian site is the way we approach content curation and presentation.“ https://medium.com/guardian-ux/the-container-model-and-blended-content-378d1a8b839d
- 17. Templates
- 18. Templates
- 20. https://medium.com/guardian-ux/the-container-model-and-blended-content-378d1a8b839d
- 21. https://medium.com/guardian-ux/the-container-model-and-blended-content-378d1a8b839d
- 24. „We visited them at their homes and got to know them. Then we asked them broad questions about how the the news fits into their day — or doesn’t.“ https://open.nytimes.com/a-faster-and-more-flexible-home-page-that-delivers-the-news-readers-want-1522ff64aa86
- 29. https://styleguide.mailchimp.com/https://styleguide.mailchimp.com/
- 30. https://styleguide.mailchimp.com/https://styleguide.mailchimp.com/
- 32. slack.com v1 (2014) slack.com v3 (2015) Article by Herbert Lui: https://medium.com/swlh/slack-copywriting-what-they-say-to-9-6-million-pageviews-every-month-4351888f1c2c
- 33. slack.com today
- 34. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other VISUAL DESIGN CONTENT ↖ ︎ RESEARCH
- 35. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other VISUAL DESIGN CONTENT ↖ ︎ RESEARCH pair working⟷⟷⟷ ⟷⟷⟷
- 36. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other VISUAL DESIGN CONTENT ↖ ︎ RESEARCH pair working⟷⟷⟷ ⟷⟷⟷ pair working ⟷ ⟷
- 37. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other Critiques VISUAL DESIGN CONTENT ↖ ︎ RESEARCH pair working⟷⟷⟷ ⟷⟷⟷ pair working ⟷ ⟷
- 38. We’re all designers — our work should be seamless. Define „how you do things“ Bring copy to the kickoff Do pair working, prototype together No one’s work is more important Show real data Real collaboration is transformative Don’t be defensive Non-stop shuttling between scales of abstraction
- 40. Thank you. Questions? @nhellberg How do you work?