Design better websites with a content first design approach. Content should drive design, not the other way around
. Get buy-in from your client up-front on content first, and ask the right questions to help your design process succeed. This talk was given first at WordCamp Minneapolis, April 2015.

1. Design Better
Websites with
Content First
Date /
April 25th, 2015
A Presentation by /
Travis Totz 2

2. Hello, I’m
Travis Totz
@travistotz
@westwerkdesign @travistotz

3. @TheEcoTravelers
Hello, I’m
Travis Totz
@travistotz
@westwerkdesign @travistotz

4. I’m a partner at
Westwerk
WESTWERK.COM // @WESTWERKDESIGN
@westwerkdesign @travistotz
WESTWERK.COM/24-HOURS

5. goo.gl/zQ0mra

6. goo.gl/zQ0mra

7. goo.gl/zQ0mra

8. goo.gl/zQ0mra

9. I’m also the director
of Press75
PRESS75.COM // @PRESS75
@westwerkdesign @travistotz

10. This talk is about
designing with
content first.
PREFACE
@westwerkdesign @travistotz

11. Fair
warning.
@westwerkdesign @travistotz

12. How to approach your
design process with
content first.
LET’S CHAT ABOUT
@westwerkdesign @travistotz

13. Content is the single
most important aspect
of your site.
FIRST OFF
@westwerkdesign @travistotz

14. Content
is
king.
@westwerkdesign @travistotz

15. Language influences
behavior.
@westwerkdesign @travistotz

16. Content is user
experience.
@westwerkdesign @travistotz

17. Content seems to be one
of the last things taken
into consideration.
BUT THE ISSUE IS:
@westwerkdesign @travistotz

18. Remember that content
should drive design, not
the other way around.
@westwerkdesign @travistotz

19. But how does
this happen?
@westwerkdesign @travistotz

20. Content right off the bat.
IDEAL SITUATION
@westwerkdesign @travistotz

21. Client is writing the
copy themselves.
And you’re waiting…
ACTUAL SITUATION
@westwerkdesign @travistotz

22. And waiting…
And waiting some
more…
ACTUAL SITUATION
@westwerkdesign @travistotz

23. So let’s get started
designing the website,
right?
@westwerkdesign @travistotz

24. It’s time to reverse
that thinking.
@westwerkdesign @travistotz

25. Get buy-in from your
client up-front on
content first.
1
@westwerkdesign @travistotz

26. Ask the right
questions.
2
@westwerkdesign @travistotz

27. What are the top
questions you hear from
your customer base now?
ASK THIS
@westwerkdesign @travistotz

28. What are your user’s
complaints with your
current site?
ASK THIS
@westwerkdesign @travistotz

29. Understand
what you should be
designing.
TAKE-AWAY #1
@westwerkdesign @travistotz

30. You learn where the
gaps are in their current
site/experience.
TAKE-AWAY #2
@westwerkdesign @travistotz

31. If your client is still not
listening to you…
@westwerkdesign @travistotz

32. Leading a project
without content first, can
lead to spiraling
timescales and budgets.
LET THE CLIENT KNOW
@westwerkdesign @travistotz

33. Still not happening?
Take matters into your
own hands.
@westwerkdesign @travistotz

34. Sounds great, I’ll just use
Lorem Ipsum.”
- SAID MOST OF US IN THIS ROOM
“
@westwerkdesign @travistotz

35. The case
against Lorem Ipsum
@westwerkdesign @travistotz

36. The problem with Lorem
is that it conveniently fits
the space that we want it
to fit.
@westwerkdesign @travistotz

37. VERSUSLOREM IPSUM ACTUAL CONTENT OR TEXT

38. By adding Lorem Ipsum to the
design you are essentially dressing
your king before you know his size.”
- KYLE FIEDLER, SMASHING MAGAZINE
“
@westwerkdesign @travistotz

39. Lorem will not kill your
designs, but…
@westwerkdesign @travistotz

40. …it takes away your
resources to solve the
client’s problem and
find a solution.
@westwerkdesign @travistotz

41. v
Don’t use Lorem just
because it’s easy.
@westwerkdesign @travistotz

42. Design with proto-content
as early as possible.
SO WHAT SHOULD YOU DO…
@westwerkdesign @travistotz

43. Huh?
PROTO-CONTENT
@westwerkdesign @travistotz

44. If you’re redesigning a
site, use the site’s
current content.
PROTO-CONTENT 1
1
@westwerkdesign @travistotz

45. Write your own content.
PROTO-CONTENT 2
2
@westwerkdesign @travistotz

46. Write your own content.
PROTO-CONTENT 2
2
@westwerkdesign @travistotz

47. Design with text from
competitors websites.
PROTO-CONTENT 3
3
@westwerkdesign @travistotz

48. You do not need to have
final website content to
begin designing.
@westwerkdesign @travistotz

49. My client hasn’t given me any copy
to work with, I’m not a writer, I
don’t have the budget to hire a
copywriter, but they still want me
to produce something. What now?”
WHAT ABOUT THIS SCENARIO
“
@westwerkdesign @travistotz

50. Use a Wikipedia page or
actual text content as
filler (instead of Lorem).
@westwerkdesign @travistotz

51. Why, you might ask?
Seeing vs. reading,
that’s why.
@westwerkdesign @travistotz

52. @westwerkdesign @travistotz

53. @westwerkdesign @travistotz

54. Alright, alright. I’ve
made my point.
@westwerkdesign @travistotz

55. Be willing to write first
and structure second.
HOW DO YOU GET STARTED?
@westwerkdesign @travistotz

56. Open up a text editor. It’s
one of your most valuable
tools, start using it.
HOW DO YOU GET STARTED?
@westwerkdesign @travistotz

57. Write everything out.
Everything.
INCLUDE ALL HEADLINES, PARAGRAPH TEXT, AND TITLES
INCLUDE CALLS TO ACTION
INCLUDE BUTTONS
INCLUDE SIDEBAR CONTENT
INCLUDE WIDGETS
@westwerkdesign @travistotz

58. Keep it simple.
@westwerkdesign @travistotz

59. A written content
document will make
your life easier.
@westwerkdesign @travistotz

60. Resources for
collaborating.
@westwerkdesign @travistotz

61. Google Docs.
@westwerkdesign @travistotz

62. Draft.
DRAFTIN.COM
@westwerkdesign @travistotz

63. Penflip.
PENFLIP.COM
@westwerkdesign @travistotz

64. GatherContent.
GATHERCONTENT.COM
@westwerkdesign @travistotz

65. Thank you.
Any questions?
@westwerkdesign @travistotz

66. @westwerkdesign @travistotz

67. Want to
work here?
Come chat with us.