Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Content-First Prototyping

Content is the core commodity of the digital economy. It is the gold we fashion into luxury experience, the diamond we encase in loyalty programs and upsells. Yet, as designers, we often plug it in after the fact. We prototype our interaction and visual design to exhaustion, but accept that the “real words” can just be dropped in later. There is a better way.

More and more, the digital goods we create operate within a dynamic system of content, functionality, code and intent. Our products and services drift and spill into partner websites, social media feeds and myriad electronic aggregators, all seeking to shape visitor behavior and understanding. Systems build on systems, and, in short order, we’ve cobbled together a colossus the breadth of which sends minds a-boggling.

Though we’ve been pretty good at figuring out simple systems in the past (think static websites and intranets), it turns out that large dynamic systems are quite a bit more complicated — and quite a bit less predictable. As systems grow, they become exponentially more complex, and as they increase in complexity, their behavior becomes increasingly nonlinear and difficult for us, poor monkeys, to anticipate. In large systems, rounding errors at the thousandth decimal point can radically change outcomes (Mitchell 331). As the Internet approaches a trillion nodes, this is the world for which we all now design.

Those simple systems that we’re used to, however, can provide a key to designing for more complex spaces. As systems theorist John Gall puts it2, “A complex system that works is invariably found to have evolved from a simple system that works.” In the space of digital design, if we ensure that our simplest dynamic systems of content, structure and meaning-making work as intended at a foundational level, then we can lay the groundwork for larger, more complex systems that also work as intended.

One way we as designers can keep our complexity ducks in a row is to bring our content into the prototyping process at the beginning. A content-first approach encourages us to confront the constraints and opportunities of our content earlier, and to functionally test our proposed solutions with real-content-hungry users before major design decisions have been made.

In this article, I will show you how to use a simple set of open-source tools to introduce real, dynamic content into your prototyping process from day one. This approach allows you to focus on how users understand your content from the very start of a project and to subsequently build structural, visual and technical elements atop that foundation of understanding.

A White Box Model For Content Link

One of the tools that systems researchers use to understand the behavior of dynamic systems is called a “white box” model. Systems scholar Gerald Weinberg writes3 that, whereas the behavior of a black box model is “perfectly hidden,” the behavior of a white box model is “perfectly revealed.” For complex systems, this transparency is important: Weinberg further notes that “even the simplest systems sometimes contain surprises for their builders” (172).

The goal of content-first prototyping is to create a white box model for our content, its internal structure and its supporting information architecture. This will allow us to discover early in the design process how our end users build meaning from the structured content that our digital systems offer. By taking the time to get the structure of our content systems correct at their core, we set the stage for these simple systems that work to be integrated into larger, more complex systems that work.

In order to create a white box for digital content, we need to account for three things:

  • the content itself, composed of content packages4 of varying levels of granularity, depending on the content’s type and purpose;
  • structure, both at the local page or screen level and at the global website or application level;
  • user involvement in the context and posture (desktop, tablet or phone) in which our content will ultimately be consumed.

In order to remain “perfectly visible,” this model also needs to be transparent in its functionality so that members of the design team can understand why the model behaves as it does. This last piece — transparency, in combination with user involvement — is crucial to the white box model: We’re not building a prototype simply to demonstrate functionality, but rather to learn, revise and refine our underlying content structure based on how the words and structure we use are interpreted by their intended audiences.

A content-first prototyping approach is useful when you’re designing for existing content, but it’s also a good way to engage an editorial team in the process of content creation. Getting real words, images and assets in front of users early in the project allows everyone time to fine tune, adjust or pivot in order to meet the project’s goals. If your project plan is to follow a fill-in-the-words-later strategy, content-first prototyping gives you the chance to get a few content variations in front of users — and then get user reactions in front of stakeholders.

A Content-First Prototyping Framework Link

Taking the principles and goals described above, I have put together a starter framework for creating this kind of prototype. Much in the spirit of systems thinking itself, this tool relies on a loose coupling of simpler systems that each performs a simple primary task well.

For this framework, I’ve assembled Excel, Jekyll, ZURB Foundation and Browsersync, and linked them all together with a Gulp script. I chose these particular applications and frameworks because they are widely available, are open source (mostly), have active support communities and have excellent documentation.

A content-first prototyping framework5
A content-first prototyping framework (View large version6)

You can download a copy of the example project7 discussed below and a content-first prototyping framework starter kit8 from the project page on GitHub. Let’s go over how the pieces fit together and what each of them does.

Excel Link

Excel — or any spreadsheet program that saves to the XLSX format — is used to create and edit structured content and categorization systems. Each time you save the document, each package in your content set (represented by a row in the spreadsheet) is exported as both a Jekyll page and a JSON document. This allows you to execute both page and global operations on your content and to propagate changes in content to the entire website with a single “save” command.

Jekyll Link

Jekyll is an open-source static website generator and is used to articulate the dynamic structure between content packages, pages and categories. Jekyll represents the content you save in the spreadsheet as variables and allows you to perform operations on those variables to create structure. Jekyll also provides “if/then” tags for applying conditional logic and for loops for cycling through and filtering content sets.

Foundation Link

ZURB Foundation, an open-source mobile-first front-end framework, is used to articulate information hierarchy and to structure responsive behaviors. Foundation’s grids, style definitions and responsive behaviors allow you to create just about any standard web layout pattern simply by applying classes to your HTML elements.

Browsersync Link

Finally, Browsersync serves your prototype to the browser and updates CSS and pages as you make changes. Browsersync also allows you to access the prototype from any device connected to the same network. This means you can see automatic updates on a phone and tablet as you’re making edits on a laptop.

Linked together, these tools allow you to build prototypes in an environment similar to the dynamic systems that will make up your eventual production environment, but without having to suffer the databases, cloud services and network latency that would slow you down when you need to move quickly to try out ideas.

If You’re Panicking Because This Involves Code… Link

Don’t panic. These tools are designer-friendly and have excellent support communities. You don’t need to be a front-end developer to bring your ideas to life. You do need to know the basics of HTML and CSS. These languages are not hard — and learning them will not destroy your ability to do good design work. In the words of type design legend Erik Spiekermann9, “You have to learn if not to code at least to appreciate code, to understand code. Because code is what nuts and bolts were a hundred years ago.” The best way to get started is to dive in.

A Content-First Prototyping Example: The Green Lake Community Center Link

To get a better sense of what content-first prototyping looks like in action, let’s take a digital content collection from the real world.

Here’s the scenario. The Green Lake Community Center offers classes, programs and events to community members in the Green Lake neighborhood. Unfortunately, all of its current class, program and event information is available online only via PDF, which in turn is available only from the center’s fixed-width desktop-optimized website. Behold:

Green Lake Community Center course listings10
Green Lake Community Center’s course listings (View large version11)

In an effort to reach community members who are increasingly trying to access class, program and event information via their mobile phones, the center has decided to launch a mobile-first programs website. This initiative will eventually serve as a catalyst for a city-wide responsive website for parks and recreation.

Like any other design project, I’ll begin with heuristic and competitive analysis and by looking at available traffic and user data. If stakeholders and end users are available, I’ll be sure to talk to them as well. Once I feel like I have a good sense of the website’s purpose, I’ll explore some basic high-level information architecture and user interface ideas on paper.

Sketchbook explorations12
Sketchbook explorations (View large version13)

As an initial design approach begins to take shape, I can use a content-first prototyping workflow to get my initial ideas — and, more importantly, the content those ideas are meant to serve — into the context in which they will ultimately be consumed — in this case, the browser. Let’s go over what this process looks like in detail.

Capture Content Link

In this example, you can see how the structured content I capture in a content-first prototyping framework spreadsheet is automatically written to a page template each time I save my _data file. Here I’ve used the “catalogue” sheet to structure the content. “Title,” “description,” “category” and “tags” variables are already included in the page template, so those values update right away. You can add as many other columns to a content row as you’d like — just be sure to include the corresponding variable in the template (more on this below).

“Directory” and “feed” sheets are also included in the starter kit and include different categories (columns) for their respective content types. Each sheet exports content to its own folder (in these cases, “catalogue,” “directory” and “feed”) and to its own JSON file. You can add as many other sheets as you need — just be sure to update your Jekyll configuration file so that it knows to pull them in (see the “Jekyll Data Pages Generator14” plugin documentation for full details).

Add More Content Packages Link

As I add content packages (rows in the spreadsheet), new pages are automatically added to the prototype. Each row represents a single page, and each column in that row represents a variable that Jekyll is filling in in the template as it builds a page. In this example, the content from the “Community Center” catalogue is fairly uniform, but if the item descriptions varied wildly in length, you could easily see (and experience) how that variation would affect the layout of the page. Perhaps you might then decide to chunk15 the content differently or add new elements, such as summaries or slugs.

This system also lets you easily experiment with labels, categories and tags. By changing the values in the “category” column, you can test how different architectural approaches affect the user’s ability to easily find a given piece of content. In this example, for instance, I’ve created organizational systems based on class type and on a participant’s age group. This allows me to easily test different navigational approaches in the menu and on the home page as the prototype takes shape.

Add Structure and Hierarchy With HTML Link

Once I am happy with the content in place, I’ll begin wrapping that content in markup so that its structure makes sense to users. Treat the variables here like text, and mark them up as you would mark up text in a “flat” HTML file. The results here should look pretty predictable (that’s a good thing).

Jekyll’s templating system will take the page templates you’ve created and wrap them with a global template containing the header and navigation icon. This is what the “layout: default” means: We’re calling the “default” template as this template’s wrapper. You can nest templates as deep as you want, although more than one or two levels of templates is usually unnecessary. To accommodate repeated elements, such as page lists and global links, you can also use “includes,” which insert a particular piece of code in the template when the website is rendered. Check out Jekyll’s official documentation16 for more about templates and includes.

Add Logic With Jekyll’s Markup Tags Link

Jekyll lets you add basic logic by including basic tags that are specific to its templating system. Here, I use a for tag to cycle through the Green Lake Community Center’s class list (which was created when I added the multiple content packages above), and I render each community center class in the list as a link:

You can also use if statements to create conditions. Here, I’m using an if statement to hide the link to the class page I’m currently on:

If your head just exploded, please don’t panic. Adding logic is kind of an advanced feature. Your prototype will work just fine if you stick to content variables and HTML. Jekyll’s templating system is, however, very human-readable and easy to pick up. Check out the quick introduction17 by its creators on how the basic pieces work.

Add Style and Responsive Behavior With Foundation’s CSS Link

Once a first draft of the HTML structure is in place, I can add style to the prototype simply by including CSS classes and saving the document. ZURB Foundation’s front-end framework, which is already linked up in the starter kit, provides style classes for a wide range of web and native application patterns. In the example shown here, simply by dropping in two different classes, I’ve given my mobile prototype a more “tappable” feel and introduced a much clearer sense of visual hierarchy. These changes automatically propagate to all of the content that uses this template.

Foundation also makes it easy to include mobile-first responsive behavior and to use dozens of prebuilt layout, container and media components. Because it’s all CSS, you can modify and fine tune everything to your own taste. For these examples, I’ve modified Foundation’s base color palette to a “monochrome wireframe” style, but you can adapt Foundation to any style you like. Learn more about using Foundation by browsing its documentation18 or tutorials19 or by taking a class20 (the classes are excellent, by the way).

Get Feedback Early and Revise as You Go Link

Once the content is in place, creating and testing multiple variations of the structure is easy. Labels, categories, keywords and other metadata can be changed directly in the content spreadsheet. Likewise, variations to page structure, flow and display are just a matter of creating alternate versions of your Jekyll templates. All of these changes will cascade instantly across the prototype the moment you hit “Save.”

Alternate versions of the Green Lake Community Center mobile home screen21
Alternate versions of the Green Lake Community Center’s mobile home screen (View large version22)

To finish off a first version of the Green Lake Community Center’s prototype, I’ve created three variations of the mobile home page. In this case, all I needed to do was rearrange elements in the home page template and swap data sources for the two navigation elements (i.e. the full-width buttons and the image tiles).

Though I’ve presented all of these steps in sequence, keep in mind that Gulp (the JavaScript task runner that links all of our simple systems together) updates changes every time you save a document. This means you can go back to any step at any time and make adjustments based on user response, stakeholder feedback or new discoveries about content or context.

This flexibility allows you to easily test different screen hierarchies and content treatments with users — and it allows you to use real content in those tests, content that your audience can experience (and react to) firsthand. Because the prototype’s final form is HTML, CSS and JavaScript, you can gather user feedback with whatever testing tool you’re most comfortable with (I like UserTesting23 and Lookback24).

The prototype’s format of HTML, CSS and JavaScript also means that your work will more readily inform parallel and subsequent efforts. If your eventual product will be built on an existing CMS platform, for instance, then the content, structure and display requirements you are able to articulate will help you evaluate CMS options. Likewise, your prototype can serve as a specification document for design decisions involving the grid, hierarchy, headings, link behavior and fonts for your front-end developers.

Don’t forget, however, that the goal of content-first prototyping isn’t simply to design in the browser: The goal is to use the browser and your users’ feedback to fine tune the organization of your content in order to build simple structures that work well.

This method’s strength is in allowing you to quickly modify the systems that your categories, labels and navigation paths create. This provides a distinct advantage over static content modeling. If you find that you’re using a lot of extra CSS in order to make your dynamic content work the way you want, go back to the source. Can you chunk the content differently to make it work better? Add (or remove) a set of classes or tags? Try different variations until you find the simple, elegant solution that makes everything else seem to fall into place.

Systems Thinking Beyond The Web Link

The basic example shown here illustrates how a content-first prototyping approach can help us create simple content systems that work — systems that, in turn, set the stage for larger, more complex systems that work. Content-first prototyping helps us discover places where minor adjustments in the content model, hierarchy, categories and labels can lead to cleaner, more elegant solutions for our users’ information needs.

Though this tool is built on web technologies, the way we structure content for understanding transcends individual tools, technologies and platforms. If your content in its most basic form, stripped of the requirements and constraints of particular implementations, makes sense to its audience and accomplishes your communication goals in simple, elegant ways, then you have already built a foundation that scales beyond individual technological implementations. You have built content that doesn’t need a particular platform or script to make sense; it is a content set that wants to be understood in a certain way.

When we place content at the core of the design process, we begin to solve not for a particular implementation, but for understanding. Everything else is an intermediary step. By recognizing that the final platform for which we design is the human mind, we can identify the simple structures that give rise to understanding and can work to strengthen those structures throughout the entirety of the design process.

Works Cited Link

(cc, ml, al, il)

Footnotes Link

  1. 1 http://www.amazon.com/Complexity-Guided-Tour-Melanie-Mitchell/dp/0199798109
  2. 2 https://en.wikipedia.org/wiki/John_Gall_(author)#Gall.27s_law
  3. 3 http://www.amazon.com/Introduction-General-Systems-Thinking-Anniversary/dp/0932633498
  4. 4 https://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/04/01-cfp_schema-opt.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/04/01-cfp_schema-opt.png
  7. 7 https://github.com/andybywire/cfp-example
  8. 8 https://github.com/andybywire/content-first-prototyping
  9. 9 http://pi.co/erik-spiekermann
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/04/02-gcc_current-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/04/02-gcc_current-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/04/03-sketchbook-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/04/03-sketchbook-opt.png
  14. 14 https://github.com/avillafiorita/jekyll-datapage_gen
  15. 15 https://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/
  16. 16 https://jekyllrb.com/docs/home/
  17. 17 https://www.youtube.com/watch?v=tZLTExLukSg
  18. 18 http://foundation.zurb.com/sites/docs/
  19. 19 http://foundation.zurb.com/learn/tutorials.html
  20. 20 http://foundation.zurb.com/learn/classes.html
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/04/04-gcc_homepages-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/04/04-gcc_homepages-opt.png
  23. 23 https://www.usertesting.com/
  24. 24 https://lookback.io/
  25. 25 http://www.amazon.com/Complexity-Guided-Tour-Melanie-Mitchell/dp/0199798109
  26. 26 http://www.amazon.com/Introduction-General-Systems-Thinking-Anniversary/dp/0932633498

↑ Back to top Tweet itShare on Facebook

Andy is a user experience designer with a penchant for information architecture and interaction design. He has given talks and workshops worldwide and is fascinated with the vagaries of cognition and understanding. Andy blogs at language + meaning + user experience architecture and tweets from @andybywire.

  1. 1

    Content first prototyping is needed to provide one type of exposure to your web site. If you include proper content to your web site then it helps to make it index in search engine easily.

    -3
    • 2

      Ty Fairclough

      May 11, 2016 11:59 am

      I am wondering why you would use a prototype to promote SEO in this way?

      1
  2. 3

    This makes a lot of sense. Websites should not be “design homes for content”, but more like a glove to the content.

    The first thing clients will point to is an existing website saying “I want something like this”. We must give them tools to put their content in perspective and go “OK, let’s put your content in that site”. This will make discussions way more productive by showing something that matters to them: a finished website (well, it will _look_ like it ;)

    I also believe it’s possible to do, I’m actually working on it. I’m on Twitter @lipsumar.

    1
  3. 4

    3D Architectural Rendering

    May 11, 2016 1:21 pm

    Designing for content is something that everyone should be doing. Too many people take a ‘bells-and-whistles’ approach, focusing more on the ‘cool’ elements of the package instead of the content of said package.

    3
  4. 5

    why can’t we just add the content directly in the HTML file rather than doing it via a spreadsheet?

    overall, excellent tutorial!

    -1
    • 6

      Emmanuel Pire

      May 11, 2016 6:27 pm

      You can hand an excel file to a client for them to easily update the content. It’s gonna be a harder sell to hand them an HTML file!

      It also separates the content from the design. This way both can be worked on separately. For instance you’ll be able to “inject” the same content into many design variations at once.

      9
      • 7

        Hi Emmanuel,

        for the client to change content and the HTML file to update it still requires running commands on the terminal which may not be something the client would know about or even know how to set up to get their environment to read changes from the Excel sheet and update the HTML.

        0
        • 8

          Emmanuel Pire

          May 12, 2016 6:46 pm

          Hello! The client will of course never run this themselves, they will simply give you back the updated Excel sheet. You can then run all these commands and show them a website (or two).

          For the client to be able to update such early prototypes all by themselves, that would require a tool that doesn’t exist. yet ;-)

          0
          • 9

            Michael Yagudaev

            May 18, 2016 8:43 am

            Replacing content like that using a spreadsheet is a sort of light-weight cms. I’ve created a tool to convert between spreadsheets and json files called `switch-cli` (https://github.com/yagudaev/switch). I’ve actually created it to help free me from entering translation manually and dealing with the communication overhead of sending files all over the place. I also recommend using google spreadsheet for that reason, simply send the client the link and check if the spreadsheet updated periodically.

            Lately, I’ve been looking for the next step up from that. Letting the client edit the translations in-place without involving me in the process. For that we have Translations Managements Systems. PhraseApp was the one I’m currently experimenting with. But also considering building my own as I’m not too happy with what is out there.

            It is also worth to note that content in different languages may pose challenges with screen real-estate space. For example french often is longer than english, which means on a mobile device when a user is viewing things in french it might overflow the container.

            3
  5. 10

    Great article and really well thought out walk through.

    I especially like the principle that the purpose of a prototype is not to demonstrate functionality but to learn new things about you design (in your case focusing on content to achieve this). The rest of the article backs this up nicely.

    1
  6. 11

    robert linsky

    May 17, 2016 6:53 pm

    Most of my work involves variable data, transactional documents. This idea of content before design is something i’ve practiced for over 20 years. It is tough because all clients wan to see is the “pretty picture.” But, having the content determined upfront saves time and money and needless rework.

    2
  7. 12

    Judy Caroll

    May 17, 2016 7:14 pm

    This is a great article. Content for me is very important because this will be our guide whether we provided an interesting one to our readers or customers or not. We need to provide a appropriate content in order for the others to have an easy access to it. excellent post. :-)

    2

↑ Back to top