Vancouver Words & pixels workshop

We've brought it all home, folks. Learn how a content and design together approach can transform and augment your content and launch your messages into space.

Transcript

1. PIXELS
   WORDS+
   

   View Slide

2. Rachel Gertz Travis Gertz Kenneth Ormandy
   @TheStrayMuse @TravisGertz @KennethOrmandy
   @louderthanten
   louderthanten.com kennethormandy.com
   

   View Slide

3. washrooms
   recycling/garbage
   exits
   buzzer
   food
   afterparty
   Housekeeping
   

   View Slide

4. Wifi
   Network
   PullFocus Auditorium-5G
   Password
   PullFocus8306
   

   View Slide

5. Agenda
   10 to 1:30 pm
   Part 1: Play it as it lays
   Part 2: Polishing content turds
   LUNCH (45 min)
   1:30 to 5 pm
   Part 3: After a little spruce
   Part 4: Extracting emotion
   BREAK (15 min)
   Part 5: Making content & design love
   QA
   5:15 to 7:30 pm
   After party at Revel
   

   View Slide

6. Anything you want us to cover?
   

   View Slide

7. Louder Than Ten wants to provide a fun, safe event experience
   for all of you regardless of your gender, gender identity and
   expression, sexual orientation, ability, physical appearance, body
   size, race, age or religion. We won’t tolerate harassment of
   participants. If you break these rules, you may be asked to leave
   and barred from future events.

   

   Need help?
   Talk to Travis, Rachel, or Anna directly, or email us at
   hello@louderthanten.com
   Code of conduct
   

   View Slide

8. heroimages.com
   

   View Slide

9. craftcms.com
   

   View Slide

10. teamgantt.com
    

    View Slide

11. teampassword.com/words
    

    View Slide

12. fairgoods.com
    

    View Slide

13. get.cushionapp.com/louderthanten
    

    View Slide

14. webflow.com
    

    View Slide

15. Let’s begin
    

    View Slide

16. you?
    Who’s
    

    View Slide

17. Gathering
    Curating
    Maintaining
    Content
    Strategy
    Content
    

    View Slide

18. Express
    information
    Design
    

    View Slide

19. Content
    nightmares
    

    View Slide

20. Content first.
    

    View Slide

21. Play it as it lays
    15–20 minutes
    Part 1
    

    View Slide

22. Example
    

    View Slide

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

    View Slide

24. Part 2
    How to polish a
    content turd
    45–60 minutes
    

    View Slide

25. Example
    

    View Slide

26. What did you struggle with?
    How did it feel to strip things down?
    How did it go?
    

    View Slide

27. Show & tell
    

    View Slide

28. Research
    Content
    Design
    Development
    

    View Slide

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

    View Slide

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

    View Slide

31. Define your
    GOALS
    

    View Slide

32. Collaborate on content
    Write your draft
    

    View Slide

33. LUNCH
    BREAK
    45 minute
    

    View Slide

34. View Slide

35. View Slide

36. EVERYTHING
    LOOKS
    THE SAME
    

    View Slide

37. EVERYTHING
    SOUNDS
    THE SAME
    

    View Slide

38. Our product is boring.
    We create terrible experiences
    Every Company
    

    View Slide

39. Web content is boring.
    We create terrible experiences
    Every Company
    Stop reading this crap we’ve produced
    and sign up for our crappy newsletter
    so you can receive more crap.
    

    View Slide

40. Web content is boring.
    We create terrible experiences
    Every Company
    Stop reading this crap we’ve produced
    and sign up for our crappy newsletter
    so you can receive more crap.
    I see you didn’t buy
    our crap.
    Do you need help
    trying our crap? I’m
    here if you need me
    to go over any crap
    with you…
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

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

    View Slide

46. But what if we did?
    

    View Slide

47. Content first.
    

    View Slide

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

    View Slide

49. Content
    Design
    

    View Slide

50. Content
    Design
    Do we even
    need boxes?
    

    View Slide

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

    View Slide

52. Content &
    design
    working
    together
    

    View Slide

53. View Slide

54. AMPLIFIES
    Design
    the message.
    

    View Slide

55. We can do this
    on the web…
    

    View Slide

56. COLOUR
    

    View Slide

57. View Slide

58. TyPe
    

    View Slide

59. View Slide

60. size
    style
    and
    

    View Slide

61. View Slide

62. Media that rides with the content.
    

    View Slide

63. View Slide

64. INTER

    ACTIVITY
    

    View Slide

65. Kenneth!
    Show us how?
    

    View Slide

66. type
    

    View Slide

67. Web type specimens
    

    View Slide

68. Web type specimens
    are web type specimens
    

    View Slide

69. The web is
    not print
    

    View Slide

70. The web is
    not “not print”
    

    View Slide

71. The web is
    a medium
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. https://www.instagram.com/p/8iwizngVbJ
    

    View Slide

76. View Slide

77. View Slide

78. View Slide

79. moriston.losttype.com
    Design & Dev
    Type design
    Editing
    Distributor
    Kenneth Ormandy
    Riley Cran
    Danelle Cheney
    The Lost Type Co-op
    Moriston type specimen site
    

    View Slide

80. View Slide

81. You be the
    copy writer
    

    View Slide

82. View Slide

83. 1403.slantedhall.com
    Design & Dev
    Type design
    Distributor
    Kenneth Ormandy
    Jeff Kellem
    Slanted Hall
    1403 Vintage Mono Pro site
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. escafina.losttype.com
    Design & Dev
    Type design
    Additional design
    Distributor
    Kenneth Ormandy
    Riley Cran
    Danelle Cheney,
    Dan Gneiding
    The Lost Type Co-op
    Escafina type specimen site
    

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. tofino.losttype.com
    Design
    Development
    Type design
    Distributor
    Alanna Munro,
    Kenneth Ormandy
    Kenneth Ormandy
    Alanna Munro
    The Lost Type Co-op
    Tofino type specimen site
    

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. regina-black.losttype.com
     Design
     Development
     Type design
     Distributor
     Charles&Thorn,
     Kenneth Ormandy
     Kenneth Ormandy
     Charles&Thorn
     The Lost Type Co-op
     Regina Black site
     

     View Slide

102. View Slide

103. View Slide

104. View Slide

105. sadmag.ca/secrets
     Art direction
     Emoji design
     Design
     Development
     Pamela Rounis
     Kenneth Ormandy
     Pamela Rounis
     Kenneth Ormandy
     SAD Mag #sadsecrets
     

     View Slide

106. View Slide

107. View Slide

108. View Slide

109. Your medium
     

     View Slide

110. Copy process,
     not results
     

     View Slide

111. Have some fun
     with it!
     

     View Slide

112. Have some fun
     with it!
     Make
     

     View Slide

113. Extracting
     emotion
     45–60 minutes
     Part 3
     

     View Slide

114. EMPATHY
     is not a phase
     

     View Slide

115. MAKE IT
     SING
     

     View Slide

116. 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

117. Take a
     BRE AK
     15 minutes
     

     View Slide

118. Making content &
     design love
     Part 4
     60–80 minutes
     

     View Slide

119. Let’s re-humanize
     

     View Slide

120. 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

121. Show & tell
     

     View Slide

122. We have
     the tools
     

     View Slide

123. Build systems that
     anticipate variation.
     

     View Slide

124. Systems that augment humanity.
     Not replace it.
     

     View Slide

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

     View Slide

126. livewires.io
     

     View Slide

127. View Slide

128. craftcms.com
     

     View Slide

129. View Slide

130. View Slide

131. View Slide

132. View Slide

133. View Slide

134. View Slide

135. ?
     

     View Slide

136. louderthanten.com
     @louderthanten
     Rachel Gertz

     @TheStrayMuse
     Travis Gertz
     @TravisGertz
     Resources
     lt10.co/words-and-pixels
     

     View Slide

137. AFTER
     PARTY!
     Revel Room
     Across the street
     Upstairs
     

     View Slide