Content-Driven Design
A talk I gave at UX Camp Hamburg 2018 Speaker notes: 6 – Focus on bridging the gap between design and code 10 – Bill Bernbach, founder of DDB 11 – An idea in the 1960s. Sounds not that innovative today but at this time it was. And if we look at product and design processes in many companies it is still not very common. 12 – People working in advertising or knowing Mad Men probably know some of DDB’s iconic and radical ads from the period 14 – Thich Nhat Hanh is a writer, activist and teacher and calls this concept "interbeing". Nicole Fenton brings this quote up because it helped her to understand what makes a design project successful and even possible in the first place 15 – Major Guardian redesign in 2014 16 – This was the first sentence when talking about the major redesign of the Guardian 17 – They did several ideation workshops with colleagues in editorial and worked together with the agency iA (Oliver Reichenstein and Konstantin Weiss) 19 – „With the container model we move away from thinking about specific pages on the site and how they might be filled with content, instead we start first with the content and each page is simply seen as a series of containers“ 20 – The order is what makes most sense to the business and our audience (priority). It was discovered by testing. 23 – Announced NYT Redesign August 2018 25 – Wireframes showing how feedback influenced content presentation 26 – Variations of so called "story packages" 27 – GIF shows how the Orlando shooting story evolved over 4 days. On one hand it’s amazing how the NYT works on the other hand it’s amazing what the website is capable of. 28 – Mailchimp content style guide 29 – Principles & Voice. Mailchimp is giving its employees clear and extensive guidelines 32 – V1: fundamental sales and marketing idea: selling the benefit. V3: Selling a feature. Take greater control of how people described Slack?. “a messaging app,” not a chat tool 34 – Pretty rough, no details and not complete process. It's all about communications. Content first, ideas first. Inspiration and further reading: "Art and copy: bridging the gap between UX, design and content" by Lauren Pope https://www.slideshare.net/la_pope/art-and-copy-bridging-the-gap-between-ux-design-and-content-invision-design-talks "Words as Material" by Nicole Fenton https://www.nicolefenton.com/words-as-material/ "Slack Copywriting: What They Say to 9.6 Million Pageviews Every Month" by Herbert Lui https://medium.com/swlh/slack-copywriting-what-they-say-to-9-6-million-pageviews-every-month-4351888f1c2c "Design and develop better together" by Eden Vidal https://medium.com/relate/design-and-develop-better-together-a955b075d209
Recomendados
Más contenido relacionado
Similar a Content-Driven Design
Similar a Content-Driven Design (20)
Último
Último (20)
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
- 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
- 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?