Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Content-Driven Design

222 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Content-Driven Design

  1. 1. Content-driven Design UX Camp Hamburg 2018, 11th August
  2. 2. Content-driven Design UX Camp Hamburg 2018, 11th August Copy
  3. 3. Niclas Hellberg Currently FIND ME ON TWITTER: @NHELLBERG interactiondesigner ↪︎ XING at
  4. 4. Our current workflows foster a template- driven design. twitter.com/jongold/status/694591217523363840
  5. 5. Aspects of this talk Being the product Selling the product Being part of the UI Part of the design process
  6. 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. 7. CONCEPT / WIREFRAMES VISUAL DESIGN ↰ ↴ ↖ ︎ MIX ART AND COPY ↱ ↖ ︎ CONTENT ↖ ︎ ↰ RESULT
  8. 8. CONCEPT / WIREFRAMES VISUAL DESIGN ↱ ↰ ↴ ↖ ︎ MIX ART AND COPY CONTENT ↖ ︎ ↰ RESULT↺
  9. 9. CONCEPT / WIREFRAMES VISUAL DESIGN ↱ ↰ ↴ ↖ ︎ MIX ART AND COPY CONTENT ↖ ︎ ↰ RESULT↺ ↺ VISUAL DESIGN
  10. 10. Image: http://adcglobal.org/hall-of-fame/bill-bernbach/
  11. 11. Art and copy should sit in the same room.Image: http://adcglobal.org/hall-of-fame/bill-bernbach/
  12. 12. The Volkswagen “Think Small” campaign
  13. 13. CONCEPT / WIREFRAMES VISUAL DESIGN ↱ ↰ ↴ ↖ ︎ MIX ART AND COPY CONTENT ↖ ︎ ↰ RESULT↺ ↺ VISUAL DESIGN It’s all design…
  14. 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
  15. 15. „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
  16. 16. Templates
  17. 17. Templates
  18. 18. Templates Container
  19. 19. https://medium.com/guardian-ux/the-container-model-and-blended-content-378d1a8b839d
  20. 20. https://medium.com/guardian-ux/the-container-model-and-blended-content-378d1a8b839d
  21. 21. „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
  22. 22. https://open.nytimes.com/a-faster-and-more-flexible-home-page-that-delivers-the-news-readers-want-1522ff64aa86
  23. 23. https://open.nytimes.com/a-faster-and-more-flexible-home-page-that-delivers-the-news-readers-want-1522ff64aa86
  24. 24. The Times’s treatment of the Orlando shooting https://www.nytimes.com/2016/06/15/insider/this-gif-shows-the-evolution-of-a-breaking-news-story.html
  25. 25. https://styleguide.mailchimp.com/https://styleguide.mailchimp.com/
  26. 26. https://styleguide.mailchimp.com/https://styleguide.mailchimp.com/
  27. 27. 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
  28. 28. slack.com today
  29. 29. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other VISUAL DESIGN CONTENT ↖ ︎ RESEARCH
  30. 30. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other VISUAL DESIGN CONTENT ↖ ︎ RESEARCH pair working⟷⟷⟷ ⟷⟷⟷
  31. 31. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other VISUAL DESIGN CONTENT ↖ ︎ RESEARCH pair working⟷⟷⟷ ⟷⟷⟷ pair working ⟷ ⟷
  32. 32. CONCEPT / WIREFRAMES VISUAL DESIGN CONTENT RESULT↺ Talk to each other Critiques VISUAL DESIGN CONTENT ↖ ︎ RESEARCH pair working⟷⟷⟷ ⟷⟷⟷ pair working ⟷ ⟷
  33. 33. 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
  34. 34. Thank you. Questions? @nhellberg
  35. 35. Thank you. Questions? @nhellberg How do you work?

×