$30 off During Our Annual Pro Sale. View Details »

Words & pixels go better together

Words & pixels go better together

On the web, everything looks the same. Let’s fix that. Instead of a first or last approach, let’s look at design and content in tandem.

We’re going to take you through a hands-on design and content approach that bites its thumb at boring trends without compromising the effectiveness of your UIs. Learn the business case behind flexible content and design systems that you won’t need to sell to your clients. We’ll partner up and play the roles of writer and designer, break out the pencils, and source, gather, position, and improve your content. Then, together, we’ll demonstrate how design can create stronger microcopy, editorial messaging, and calls to action. By the end of this workshop, you’ll be dying to trade your Open Sans and coffee cup headers for something a little bolder. Prepare your marketing team. They might not be ready for this.

There is a big disconnect between design and content development on the web. The technology and the organizations powered by it have built silos around the roles in our industry… especially around design and writing. We want to break those barriers and improve collaboration on our teams in pursuit of a more expressive and diverse digital culture. Doing so will hopefully extend our relevance well into the age of automation and artificial intelligence (and make our jobs a lot more fun in the process). What better way than to demonstrate how to do this in a safe, hands-on, exploratory way.

Louder Than Ten

June 27, 2016
Tweet

More Decks by Louder Than Ten

Other Decks in Design

Transcript

  1. go better
    together
    &
    PIXELS
    Words

    View Slide

  2. Digital PM Trainer and Consultant
    Partner Louder Than Ten
    @louderthanten
    Travis Gertz
    Designer and Front-end Developer
    Partner Louder Than Ten
    Rachel Gertz

    View Slide

  3. Gathering
    Curating
    Maintaining
    Content
    Strategy
    Content

    View Slide

  4. Express
    information
    Design is how you

    View Slide

  5. Nightmares

    View Slide

  6. Content first.

    View Slide

  7. Part A
    How to
    polish a
    content turd
    45–60 minutes

    View Slide

  8. Exercise 1
    Play it as it lays
    15–20 minutes
    Part A

    View Slide

  9. View Slide

  10. What did you struggle with?
    What’s it like to work with content first?
    How did it go?

    View Slide

  11. Exercise 2
    After a little
    spruce
    30–40 minutes
    Part A

    View Slide

  12. How did the copy change?
    How did this exercise affect the design?
    How did it go?

    View Slide

  13. Tips?
    5 minutes

    View Slide

  14. Take a
    BRE AK

    View Slide

  15. View Slide

  16. EVERYTHING
    LOOKS
    THE SAME

    View Slide

  17. EVERYTHING
    SOUNDS
    THE SAME

    View Slide

  18. Web content is boring.
    We create terrible experiences
    Every Company

    View Slide

  19. You won’t believe how
    stupid this is…
    People certainly like articles like these, but it’s nonsense that it’s anything new or novel. What isn’t
    nonsense is that the proliferation of these lists — which used to be limited to the covers of glossy
    magazines in the grocery store — are dumbing down society.
    Why Listicles Are Bad For You
    You may not realize it, but consuming too many of these kinds of articles while you’re surfing the Internet
    is actually bad for your brain, and for your life in general. Since you’re probably here because you’re
    addicted to listicles, I’m going to make this article a listicle to help your brain out. May this be your one,
    last listicle ever.
    1. Listicles May Lead to an Unhealthy Brain
    The worst danger that listicles pose is to your brain. They do all of the mental heavy lifting, so you don’t

    View Slide

  20. 7 Reasons Listicles Are The Worst!
    People certainly like articles like these, but it’s nonsense that it’s anything new or novel. What isn’t
    nonsense is that the proliferation of these lists — which used to be limited to the covers of glossy
    magazines in the grocery store — are dumbing down society.
    Why Listicles Are Bad For You
    You may not realize it, but consuming too many of these kinds of articles while you’re surfing the Internet
    is actually bad for your brain, and for your life in general. Since you’re probably here because you’re
    addicted to listicles, I’m going to make this article a listicle to help your brain out. May this be your one,
    last listicle ever.
    1. Listicles May Lead to an Unhealthy Brain
    The worst danger that listicles pose is to your brain. They do all of the mental heavy lifting, so you don’t
    Stop reading this crap we’ve produced
    and sign up for our crappy newsletter
    so you can receive more crap.

    View Slide

  21. 7 Reasons Listicles Are The Worst!
    People certainly like articles like these, but it’s nonsense that it’s anything new or novel. What isn’t
    nonsense is that the proliferation of these lists — which used to be limited to the covers of glossy
    magazines in the grocery store — are dumbing down society.
    Why Listicles Are Bad For You
    You may not realize it, but consuming too many of these kinds of articles while you’re surfing the Internet
    is actually bad for your brain, and for your life in general. Since you’re probably here because you’re
    addicted to listicles, I’m going to make this article a listicle to help your brain out. May this be your one,
    last listicle ever.
    1. Listicles May Lead to an Unhealthy Brain
    The worst danger that listicles pose is to your brain. They do all of the mental heavy lifting, so you don’t
    Stop reading this crap we’ve produced
    and sign up for our crappy newsletter
    so you can receive more crap.
    It looks like you’re
    writing a letter.
    How can I help you?

    View Slide

  22. View Slide

  23. We don’t care
    about content.
    We only care about what it can do for us.

    View Slide

  24. But what if we did?

    View Slide

  25. Content first.

    View Slide

  26. Content first.
    So we know how big to
    make the boxes.

    View Slide

  27. Content
    Design

    View Slide

  28. Content
    Design
    Do we even
    need boxes?

    View Slide

  29. Content &
    design
    working
    together

    View Slide

  30. https://www.youtube.com/watch?v=NcYcapokV9I

    View Slide

  31. Design with expression
    to augment the
    message of the content

    View Slide

  32. View Slide

  33. View Slide

  34. We can do
    this on the
    web…

    View Slide

  35. https://readymag.com/497331/

    View Slide

  36. Graphical media
    can work
    exclusively with
    the content.

    View Slide

  37. TyPe
    makes great graphics
    Interesting

    View Slide

  38. Play with
    size
    style
    and

    View Slide

  39. COLOUR

    View Slide

  40. CONTENT,
    DESIGN, AND
    A BLAST OF
    EMOTION
    60–80 minutes
    Part B

    View Slide

  41. Exercise 1
    Extracting emotion
    30–40 minutes
    Part B

    View Slide

  42. Exercise 2
    Making content &
    design love
    Part B
    40–50 minutes

    View Slide

  43. View Slide

  44. What were the challenges?
    What were the rewards?
    How do you think your audience would feel?
    How can this work for other projects?
    How did it go?

    View Slide

  45. Take a
    BRE AK

    View Slide

  46. Show & tell

    View Slide

  47. What’s the process?

    View Slide

  48. Set up
    great content
    1

    View Slide

  49. Talk about it…
    Content: creates value
    Writers: estimate & scope
    Contract: build writing in

    View Slide

  50. The writer starts the show
    Kickoff
    Research
    Design
    Strategy
    Launch

    View Slide

  51. 2Write great
    content

    View Slide

  52. WHY

    View Slide

  53. Do a content audit,
    analysis, plan

    View Slide

  54. Define your
    GOALS

    View Slide

  55. Collaborate on content
    Write your draft

    View Slide

  56. 3Design great
    content

    View Slide

  57. Prototype with
    content
    Good content that says
    something, but doesn’t
    need to be final.

    View Slide

  58. buildwithcraft.com
    livewires.io

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. Emotion
    freedom
    +
    =
    Content
    & design

    View Slide

  63. ?

    View Slide

  64. A tasty
    resource
    treat
    lt10.co/words-and-pixels

    View Slide

  65. THANKS
    louderthanten.com
    @louderthanten
    Rachel Gertz

    @TheStrayMuse
    Travis Gertz
    @TravisGertz

    View Slide

  66. Content
    myths

    View Slide

  67. Expensive
    Too much
    money

    View Slide

  68. Expensive
    Too much
    time

    View Slide

  69. not
    my job.

    View Slide