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

@westwerkdesign @travistotz

I’m a partner at Westwerk

WESTWERK.COM // @WESTWERKDESIGN

@westwerkdesign @travistotz

WESTWERK.COM/24-HOURS

goo.gl/zQ0mra

goo.gl/zQ0mra

goo.gl/zQ0mra

goo.gl/zQ0mra

I’m also the director of Press75

PRESS75.COM // @PRESS75

@westwerkdesign @travistotz

This talk is about designing with content first.

PREFACE

@westwerkdesign @travistotz

Fair warning.

@westwerkdesign @travistotz

How to approach your design process with content first.

LET’S CHAT ABOUT

@westwerkdesign @travistotz

Content is the single most important aspect of your site.

FIRST OFF

@westwerkdesign @travistotz

Content is king.

@westwerkdesign @travistotz

Language influences behavior.

@westwerkdesign @travistotz

Content is user experience.

@westwerkdesign @travistotz

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

BUT THE ISSUE IS:

@westwerkdesign @travistotz

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

@westwerkdesign @travistotz

But how does this happen? 

@westwerkdesign @travistotz

Content right off the bat.IDEAL SITUATION

@westwerkdesign @travistotz

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

ACTUAL SITUATION

@westwerkdesign @travistotz

And waiting…

And waiting some more…

ACTUAL SITUATION

@westwerkdesign @travistotz

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

@westwerkdesign @travistotz

It’s time to reverse that thinking.

@westwerkdesign @travistotz

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

1

@westwerkdesign @travistotz

Ask the right questions.

2

@westwerkdesign @travistotz

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

ASK THIS

@westwerkdesign @travistotz

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

ASK THIS

@westwerkdesign @travistotz

Understand what you should be designing.

TAKE-AWAY #1

@westwerkdesign @travistotz

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

TAKE-AWAY #2

@westwerkdesign @travistotz

If your client is still not listening to you…

@westwerkdesign @travistotz

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

LET THE CLIENT KNOW

@westwerkdesign @travistotz

Still not happening?  Take matters into your own hands.

@westwerkdesign @travistotz

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

- SAID MOST OF US IN THIS ROOM

“

@westwerkdesign @travistotz

The case against Lorem Ipsum

@westwerkdesign @travistotz

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

@westwerkdesign @travistotz

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

“

@westwerkdesign @travistotz

Lorem will not kill your designs, but…

@westwerkdesign @travistotz

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

@westwerkdesign @travistotz

v

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

@westwerkdesign @travistotz

Design with proto-content as early as possible.

SO WHAT SHOULD YOU DO…

@westwerkdesign @travistotz

Huh?PROTO-CONTENT

@westwerkdesign @travistotz

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

PROTO-CONTENT 11

@westwerkdesign @travistotz

Write your own content. PROTO-CONTENT 22

@westwerkdesign @travistotz

Write your own content. PROTO-CONTENT 22

@westwerkdesign @travistotz

Design with text from competitors websites.

PROTO-CONTENT 33

@westwerkdesign @travistotz

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

@westwerkdesign @travistotz

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

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

@westwerkdesign @travistotz

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

@westwerkdesign @travistotz

@westwerkdesign @travistotz

@westwerkdesign @travistotz

Alright, alright. I’ve made my point.

@westwerkdesign @travistotz

Be willing to write first and structure second. 

HOW DO YOU GET STARTED?

@westwerkdesign @travistotz

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

HOW DO YOU GET STARTED?

@westwerkdesign @travistotz

Write everything out. Everything.

INCLUDE ALL HEADLINES, PARAGRAPH TEXT, AND TITLES

INCLUDE CALLS TO ACTION

INCLUDE BUTTONS

INCLUDE SIDEBAR CONTENT

INCLUDE WIDGETS

@westwerkdesign @travistotz

Keep it simple.

@westwerkdesign @travistotz

A written content document will make your life easier.

@westwerkdesign @travistotz

Resources for collaborating. 

@westwerkdesign @travistotz

Google Docs.

@westwerkdesign @travistotz

Draft.DRAFTIN.COM

@westwerkdesign @travistotz

Penflip.PENFLIP.COM

@westwerkdesign @travistotz

GatherContent.GATHERCONTENT.COM

@westwerkdesign @travistotz

Thank you. Any questions?

@westwerkdesign @travistotz

@westwerkdesign @travistotz

Want to work here? Come chat with us.