Using a Content-First Design Process
-
Upload
dawnsbrain -
Category
Design
-
view
544 -
download
0
Transcript of Using a Content-First Design Process
![Page 1: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/1.jpg)
Using a Content-First Design
Process
WordCamp Sacramento 2016
slideshare.net/dawnsbrain
![Page 2: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/2.jpg)
Hi! I’m Dawn Pedersen.
• Web designer since 2000.
• Web design teacher since 2004.
• WordPresser since 2005.
![Page 3: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/3.jpg)
Hi! I’m Dawn Pedersen.
• Webmaster at Sacramento
City College.
– WordPress multisite
– 200+ subsites
– 300+ editors
![Page 4: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/4.jpg)
WHAT IS CONTENT-FIRST
DESIGN?
Part 1
![Page 5: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/5.jpg)
Content is…
What the user came to
• Read
• Learn
• See
• Experience
• Do
![Page 6: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/6.jpg)
Content Might Be…
• Text
• Images
• Video
• Audio
• Downloadable files
• Forms
• Interactions with other people or a game
![Page 7: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/7.jpg)
Content-First Design is…
Creating and organizing content as the
first step in the design process.
![Page 8: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/8.jpg)
Content is user experience.
![Page 9: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/9.jpg)
Wait. What Are We Doing Now?
• The traditional method is structure-first
design.
• It usually starts with static mockups.
• Lorem ipsum may be in charge.
• Real content comes later when is ready.
![Page 10: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/10.jpg)
What’s Wrong with
Structure-First Design?
Shoehorning content into layouts not
designed for it:
• length of headlines that span multiple
lines
• page layouts that are too long or short
• tacking on bits and pieces that are
afterthoughts
![Page 11: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/11.jpg)
What’s Wrong with
Structure-First Design?
CSS not carefully crafted for content types
we didn’t expect:
• Galleries
• Captions
• Word wraps
• Tables
• Blockquotes
• Lists
• Etc.
![Page 12: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/12.jpg)
What’s Wrong with
Structure-First Design?
Lots of reworking the mockups, trying to
adjust the design for repeated content
changes.
![Page 13: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/13.jpg)
What’s Wrong with
Structure-First Design?
And when the site is finally finished, you’ve
got inconsistent
• Messaging
• Formatting
• Wayfinding
![Page 14: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/14.jpg)
Content comes in many forms and flavors.
We need to know what we’re actually
working with.
![Page 15: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/15.jpg)
Because we are designing experiences.
![Page 16: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/16.jpg)
Consider Responsive Design
Our content must flow across various
viewports.
![Page 17: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/17.jpg)
Designing Inside-Out
• Designing inside-out is from the detailed
to the organizational level.
• Content-first is generally also inside-out.
• Working content-first is better for
Information Architecture (IA).
• And maybe you should design the home
page last.
![Page 18: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/18.jpg)
Why Lorem Ipsum Won’t Cut It
• Lacks context.
• Says nothing about relationships
between content elements.
• Doesn’t challenge our design
assumptions like real content does.
![Page 19: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/19.jpg)
Challenges
• Most clients don't understand what we
mean by content or page elements.
• The client's mental model and yours are
different.
![Page 20: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/20.jpg)
Challenges
• They seem to think we’re magicians or
button pushers. Or magical button
pushers.
• But usually, they simply don’t know how a
website gets made.
• They don’t know the first steps.
![Page 21: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/21.jpg)
A Little About Content Strategy
• Define how you’re going to use your
content to meet your goals.
• Define how you’re going to use content to
satisfy users’ needs.
• Set benchmarks for success.
![Page 22: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/22.jpg)
A Little About Content Strategy
• Use your strategy to guide decisions
about content throughout its lifecycle,
from discovery through deletion.
![Page 23: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/23.jpg)
Case
Study
![Page 24: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/24.jpg)
Case
Study
![Page 25: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/25.jpg)
Case
Study
![Page 26: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/26.jpg)
Case
Study
![Page 27: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/27.jpg)
Case
Study
![Page 28: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/28.jpg)
![Page 29: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/29.jpg)
![Page 30: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/30.jpg)
CONVINCING THE CLIENT
Part 2
![Page 31: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/31.jpg)
Give them analogies
• Would you ask an architect to design a
house without specifying number of
bedrooms and bathrooms?
• Would you ask an engineer to design a
car without ever having seen a human?
![Page 32: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/32.jpg)
Tell them the benefits of
content-first design.
• Most obvious benefit: content isn't shoe-
horned into an existing, inappropriate
layout.
• The content needs to be designed too.
![Page 33: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/33.jpg)
Tell them the benefits of
content-first design.
• Better structure of the information:
– you are able to identify structural patterns
within content types (modular)
– on the other end of the spectrum, you can
see the "big picture" organization that the
content suggests (relationships between
modules)
![Page 34: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/34.jpg)
Tell them the benefits of
content-first design.
• Better structure of the information:
– content becomes more efficient (reduced
redundancy)
– better wayfinding/navigation
![Page 35: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/35.jpg)
Tell them the benefits of
content-first design.
• Better branding:
– clear and consistent tone throughout
– targeted messaging
– reduction in conflicted messaging
![Page 36: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/36.jpg)
Tell them the benefits of
content-first design.
• Easier to keep project on time and on
budget:
– if content is carefully considered and
produced, the "design" process will go
quickly afterwards
– won’t have a website go live with incomplete
content, or miss a critical deadline
![Page 37: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/37.jpg)
Sometimes clients are nervous.
• they are nervous about the project and
are hoping you will do most of the work
for them
• break the “bad news” to them gently
![Page 38: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/38.jpg)
Ease their nerves.
• explain the content-first process you plan
to follow
• show them the collaboration tools you
plan to use
![Page 39: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/39.jpg)
Get to know their content needs.
• ask how the content will be maintained
• review their existing site or a
competitor's
• explain a couple of content challenges
that can come up with it
![Page 40: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/40.jpg)
Let them know that the content
will take lots of time and effort.
• suggest they prioritize their content
production
• set realistic milestones
• can the project be published in phases?
• suggest they might consider hiring a
copywriter
![Page 41: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/41.jpg)
Promise to support them through
the content creation.
Talk directly with their content people if
you can.
![Page 42: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/42.jpg)
Winning their confidence in this plan
depends upon you explaining the process
sufficiently in layperson's terms
without getting overly in-depth.
![Page 43: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/43.jpg)
Build content-first design into your
contract schedule.
Explain how delays in content creation will
result in delays in design production, and
perhaps additional charges.
![Page 44: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/44.jpg)
You have already begun
the discovery process.
![Page 45: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/45.jpg)
DISCOVERY
Part 3
![Page 46: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/46.jpg)
Defining Audiences
• who needs what we have?
• why do they need it?
• how will they access it?
• personas: fictitious people you're
designing for, conceptualized from real
users
![Page 47: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/47.jpg)
Defining Goals: Site Owner
• entertain
• educate
• persuade
• convert
• etc.
![Page 48: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/48.jpg)
Defining Goals: Users
• What problems do they need to solve?
• Why do they want what you have?
![Page 49: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/49.jpg)
Interacting with the User
• What story can we tell them?
• What conversation can we have with
them?
• What editorial voice should we employ?
• Are there any existing editorial style
guides we need to follow?
![Page 50: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/50.jpg)
Interacting with the User
Be sure to have your developer at the
meeting!
![Page 51: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/51.jpg)
Thorough discovery ensures the quality of
our content,
our structure,
our presentation, and
our functionality.
![Page 52: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/52.jpg)
CONTENT CREATION
Part 4
![Page 53: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/53.jpg)
Helping the Client
Develop Content
We need to determine:
• what content types are needed?
• how are they related to each other?
![Page 54: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/54.jpg)
Helping the Client
Develop Content
The client needs to figure out:
• what are the top questions and
complaints from our audience?
• what is valuable to our users?
![Page 55: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/55.jpg)
Helping the Client
Develop Content
Many use analytics and Google keyword
research to guide content creation.
![Page 56: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/56.jpg)
Helping the Client
Develop Content
Sourcing content:
• repurposing existing
content
• new, original content
• bought/third-party
content
• curated content
• curated content
• crowdsourcing/
conversation
• competitor content
![Page 57: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/57.jpg)
Helping the Client
Develop Content
Identify the Person in Charge on the
client’s end.
• They see that things get done according
to the approved content strategy.
• They must be allowed to say “no” to
content.
• They do not need to create all content.
![Page 58: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/58.jpg)
Helping the Client
Develop Content
Identify the Person in Charge on the
client’s end.
• They identify the content experts who
will write the content: who will "own"
each piece of content.
• Ideally, this person is your single point of
contact.
![Page 59: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/59.jpg)
First Drafts to Final Drafts
Instruct the content creators to:
• keep content unformatted
• ignore page structure and flow
• keep it flexible, lean, and concise
![Page 60: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/60.jpg)
Beyond the Static Page
• forms and interactions
• write for every interaction
• metadata and microdata
![Page 61: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/61.jpg)
The Iterative,
Collaborative Process
Tools for collaboration:
• Google Docs
• Evernote
• spreadsheet to collect and organize
• GatherContent.com and the like
![Page 62: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/62.jpg)
The Iterative,
Collaborative Process
Very important:
Agree on an approval process.
![Page 63: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/63.jpg)
Case Study:
¡Bienvenidos!
![Page 64: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/64.jpg)
Case Study:
¡Bienvenidos!
![Page 65: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/65.jpg)
DESIGNING FOR THE
CONTENT, DESIGNING THE
CONTENT
Part 5
![Page 66: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/66.jpg)
Working with Early Drafts
• Work with the earliest drafts you can
access
• AKA “proto-content”
• This will help you begin…
![Page 67: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/67.jpg)
Understanding the Content
• Read the text thoroughly.
• Read it again and ask questions if it is
unclear.
• When you comprehend what needs to be
communicated, the appropriate layout
tends to suggest itself.
![Page 68: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/68.jpg)
If you can't understand the content,
the user never will.
![Page 69: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/69.jpg)
Rewriting Content as Allowed
• Become a better designer by learning
copywriting basics
• Write simply: short words and phrases
• Limit yourself to one idea per paragraph
• Short chunks of text
• We want each page to be scannable
![Page 70: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/70.jpg)
Organizing the Content
• Prioritize the content
• Your goals: clarity and access
• Card sort/post-its: what content is related
to what other content?
![Page 71: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/71.jpg)
Organizing the Content
For each chunk of content, consider:
• What kind is it?
• Categories
• Tags / Key phrases
• Does it go in a sidebar?
• Does it deserve its own page?
![Page 72: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/72.jpg)
Creating scannable content:
it takes time and effort
• Put the most important stuff at the top
• Put a quick summary at the top
• Format lists as lists
• Use headings and subheadings
• Again, you can't do this well unless you
understand the content well
![Page 73: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/73.jpg)
Problem Solving for
Optimal Structure
• How will you visually group related
content?
• How will you incorporate white space?
• How will you create a focal point on each
page?
• How will you utilize repetition?
![Page 74: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/74.jpg)
Problem Solving for
Optimal Structure
This can’t be done without real content.
And again: involve your back-end
developer in the process.
![Page 75: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/75.jpg)
Problem Solving for
Optimal Structure
• How will the content flow for differing
screen widths?
• Where are there opportunities to hide
info until needed?
• Where are there opportunities to use
iconography in place of text?
• How will you make it all accessible?
![Page 76: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/76.jpg)
What About Wireframes?
• They might no longer be part of this
process
• Try working straight in the browser or
use paper prototyping
• Progressive enhancement:
text > HTML > CSS > interactive coding
• Test content prototypes with real users
![Page 77: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/77.jpg)
Yes, the final design must be flexible
enough to adapt to new content,
but it will never truly get there without real
content to design from.
![Page 78: Using a Content-First Design Process](https://reader034.fdocuments.net/reader034/viewer/2022052606/587df4e61a28abab7e8b5879/html5/thumbnails/78.jpg)
Thank you.
slideshare.net/dawnsbrain