Design Better Websites with Content First

Design Better Websites with Content First

Date /

April 25th, 2015

A Presentation by /

Travis Totz 20 1 5

Hello, I’m Travis Totz @travistotz

@westwerkdesign @travistotz

@TheEcoTravelers

Hello, I’m Travis Totz @travistotz


I’m a partner at Westwerk

WESTWERK.COM // @WESTWERKDESIGN


WESTWERK.COM/24-HOURS

http://westwerk.com

http://westwerk.com/24-hours

goo.gl/zQ0mra

goo.gl/zQ0mra

goo.gl/zQ0mra

goo.gl/zQ0mra

http://goo.gl/zQ0mra

I’m also the director of Press75

PRESS75.COM // @PRESS75


This talk is about designing with content first.

PREFACE


Fair warning.


How to approach your design process with content first.

LET’S CHAT ABOUT


Content is the single most important aspect of your site.

FIRST OFF


Content is king.


Language influences behavior.


Content is user experience.


Content seems to be one of the last things taken into consideration.

BUT THE ISSUE IS:


Remember that content should drive design, not the other way around.


But how does this happen?


Content right off the bat.IDEAL SITUATION


Client is writing the copy themselves. And you’re waiting…

ACTUAL SITUATION


And waiting…

And waiting some more…

ACTUAL SITUATION


So let’s get started designing the website, right?


It’s time to reverse that thinking.


Get buy-in from your client up-front on content first.

1


Ask the right questions.

2


What are the top questions you hear from your customer base now?

ASK THIS


What are your user’s complaints with your current site?

ASK THIS


Understand what you should be designing.

TAKE-AWAY #1


You learn where the gaps are in their current site/experience.

TAKE-AWAY #2


If your client is still not listening to you…


Leading a project without content first, can lead to spiraling timescales and budgets.

LET THE CLIENT KNOW


Still not happening? Take matters into your own hands.


Sounds great, I’ll just use Lorem Ipsum.”

- SAID MOST OF US IN THIS ROOM

“


The case against Lorem Ipsum


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


VERSUSLOREM IPSUM ACTUAL CONTENT OR TEXT

By adding Lorem Ipsum to the design you are essentially dressing your king before you know his size.”

- KYLE FIEDLER, SMASHING MAGAZINE

“


Lorem will not kill your designs, but…


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


v

Don’t use Lorem just because it’s easy.


Design with proto-content as early as possible.

SO WHAT SHOULD YOU DO…


Huh?PROTO-CONTENT


If you’re redesigning a site, use the site’s current content.

PROTO-CONTENT 11


Write your own content. PROTO-CONTENT 22


Write your own content. PROTO-CONTENT 22


Design with text from competitors websites.

PROTO-CONTENT 33


You do not need to have final website content to begin designing.


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

“


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


Why, you might ask? Seeing vs. reading, that’s why.




Alright, alright. I’ve made my point.


Be willing to write first and structure second.

HOW DO YOU GET STARTED?


Open up a text editor. It’s one of your most valuable tools, start using it.

HOW DO YOU GET STARTED?


Write everything out. Everything.

INCLUDE ALL HEADLINES, PARAGRAPH TEXT, AND TITLES

INCLUDE CALLS TO ACTION

INCLUDE BUTTONS

INCLUDE SIDEBAR CONTENT

INCLUDE WIDGETS


Keep it simple.


A written content document will make your life easier.


Resources for collaborating.


Google Docs.


Draft.DRAFTIN.COM


http://draftin.com

Penflip.PENFLIP.COM


http://penflip.com

GatherContent.GATHERCONTENT.COM


http://GatherContent.com

Thank you. Any questions?



Want to work here? Come chat with us.