The document discusses using a content-first design process where content is developed before visual design and structure. It emphasizes that content should be the starting point since content is the user experience. Developing content first involves discovery work to understand audiences and goals, helping clients develop draft content, and iteratively designing page structure and layout around real content instead of placeholders. This process leads to better designed experiences that are optimized for the actual content.
9. 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.
10. 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
11. 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.
17. 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.
18. 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.
19. Challenges
• Most clients don't understand what we
mean by content or page elements.
• The client's mental model and yours are
different.
20. 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.
21. 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.
22. A Little About Content Strategy
• Use your strategy to guide decisions
about content throughout its lifecycle,
from discovery through deletion.
31. 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?
32. 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.
33. 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)
34. Tell them the benefits of
content-first design.
• Better structure of the information:
– content becomes more efficient (reduced
redundancy)
– better wayfinding/navigation
35. Tell them the benefits of
content-first design.
• Better branding:
– clear and consistent tone throughout
– targeted messaging
– reduction in conflicted messaging
36. 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
37. 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
38. Ease their nerves.
• explain the content-first process you plan
to follow
• show them the collaboration tools you
plan to use
39. 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
40. 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
41. Promise to support them through
the content creation.
Talk directly with their content people if
you can.
42. Winning their confidence in this plan
depends upon you explaining the process
sufficiently in layperson's terms
without getting overly in-depth.
43. 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.
46. 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
48. Defining Goals: Users
• What problems do they need to solve?
• Why do they want what you have?
49. 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?
53. Helping the Client
Develop Content
We need to determine:
• what content types are needed?
• how are they related to each other?
54. 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?
55. Helping the Client
Develop Content
Many use analytics and Google keyword
research to guide content creation.
57. 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.
58. 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.
59. First Drafts to Final Drafts
Instruct the content creators to:
• keep content unformatted
• ignore page structure and flow
• keep it flexible, lean, and concise
60. Beyond the Static Page
• forms and interactions
• write for every interaction
• metadata and microdata
66. Working with Early Drafts
• Work with the earliest drafts you can
access
• AKA “proto-content”
• This will help you begin…
67. 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.
68. If you can't understand the content,
the user never will.
69. 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
70. Organizing the Content
• Prioritize the content
• Your goals: clarity and access
• Card sort/post-its: what content is related
to what other content?
71. 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?
72. 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
73. 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?
74. Problem Solving for
Optimal Structure
This can’t be done without real content.
And again: involve your back-end
developer in the process.
75. 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?
76. 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
77. 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.
