Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using a Content-First Design Process

Sure, you could do a lot of guesswork at the beginning of a website design project. Let’s build a template and throw in some placeholders, and see what becomes of it! Only to discover when the text and media come rolling in from your content creators that half the template needs to be rebuilt, and the menu structure you had in mind was way off-base.

This happens a lot, costing everyone involved valuable time and energy — especially you. Learn how to put content first in the sequence of design steps.

This talk will cover:

- Defining your audience and goals
- How to convince your client to provide content in a timely fashion
- Understanding, organizing, and prioritizing content
- Brainstorming ideas for optimal site and page structure

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

Using a Content-First Design Process

  1. 1. Using a Content-First Design Process WordCamp Sacramento 2016
  2. 2. Hi! I’m Dawn Pedersen. • Web designer since 2000. • Web design teacher since 2004. • WordPresser since 2005.
  3. 3. Hi! I’m Dawn Pedersen. • Webmaster at Sacramento City College. – WordPress multisite – 200+ subsites – 300+ editors
  5. 5. Content is… What the user came to • Read • Learn • See • Experience • Do
  6. 6. Content Might Be… • Text • Images • Video • Audio • Downloadable files • Forms • Interactions with other people or a game
  7. 7. Content-First Design is… Creating and organizing content as the first step in the design process.
  8. 8. Content is user experience.
  9. 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. 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. 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.
  12. 12. What’s Wrong with Structure-First Design? Lots of reworking the mockups, trying to adjust the design for repeated content changes.
  13. 13. What’s Wrong with Structure-First Design? And when the site is finally finished, you’ve got inconsistent • Messaging • Formatting • Wayfinding
  14. 14. Content comes in many forms and flavors. We need to know what we’re actually working with.
  15. 15. Because we are designing experiences.
  16. 16. Consider Responsive Design Our content must flow across various viewports.
  17. 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. 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. 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. 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. 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. 22. A Little About Content Strategy • Use your strategy to guide decisions about content throughout its lifecycle, from discovery through deletion.
  23. 23. Case Study
  24. 24. Case Study
  25. 25. Case Study
  26. 26. Case Study
  27. 27. Case Study
  29. 29. 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?
  30. 30. 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.
  31. 31. 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)
  32. 32. Tell them the benefits of content-first design. • Better structure of the information: – content becomes more efficient (reduced redundancy) – better wayfinding/navigation
  33. 33. Tell them the benefits of content-first design. • Better branding: – clear and consistent tone throughout – targeted messaging – reduction in conflicted messaging
  34. 34. 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
  35. 35. 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
  36. 36. Ease their nerves. • explain the content-first process you plan to follow • show them the collaboration tools you plan to use
  37. 37. 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
  38. 38. 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
  39. 39. Promise to support them through the content creation. Talk directly with their content people if you can.
  40. 40. Winning their confidence in this plan depends upon you explaining the process sufficiently in layperson's terms without getting overly in-depth.
  41. 41. 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.
  42. 42. You have already begun the discovery process.
  43. 43. DISCOVERY Part 3
  44. 44. 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
  45. 45. Defining Goals: Site Owner • entertain • educate • persuade • convert • etc.
  46. 46. Defining Goals: Users • What problems do they need to solve? • Why do they want what you have?
  47. 47. 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?
  48. 48. Interacting with the User Be sure to have your developer at the meeting!
  49. 49. Thorough discovery ensures the quality of our content, our structure, our presentation, and our functionality.
  50. 50. CONTENT CREATION Part 4
  51. 51. Helping the Client Develop Content We need to determine: • what content types are needed? • how are they related to each other?
  52. 52. 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?
  53. 53. Helping the Client Develop Content Many use analytics and Google keyword research to guide content creation.
  54. 54. 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
  55. 55. 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.
  56. 56. 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.
  57. 57. First Drafts to Final Drafts Instruct the content creators to: • keep content unformatted • ignore page structure and flow • keep it flexible, lean, and concise
  58. 58. Beyond the Static Page • forms and interactions • write for every interaction • metadata and microdata
  59. 59. The Iterative, Collaborative Process Tools for collaboration: • Google Docs • Evernote • spreadsheet to collect and organize • and the like
  60. 60. The Iterative, Collaborative Process Very important: Agree on an approval process.
  61. 61. Case Study: ¡Bienvenidos!
  62. 62. Case Study: ¡Bienvenidos!
  64. 64. Working with Early Drafts • Work with the earliest drafts you can access • AKA “proto-content” • This will help you begin…
  65. 65. 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.
  66. 66. If you can't understand the content, the user never will.
  67. 67. 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
  68. 68. Organizing the Content • Prioritize the content • Your goals: clarity and access • Card sort/post-its: what content is related to what other content?
  69. 69. 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?
  70. 70. 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
  71. 71. 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?
  72. 72. Problem Solving for Optimal Structure This can’t be done without real content. And again: involve your back-end developer in the process.
  73. 73. 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?
  74. 74. 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
  75. 75. 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.
  76. 76. Thank you.