The Design Cocoon

Over the last few years, another transition has happened. The world of web design has gone from a static environment to a fully responsive one. We now design for numerous devices with different screen sizes. To make matters even more complex, there are new ways in which we can interact with those devices.

So, how do I move from a sitemap into building prototypes for a new website? By wrapping my head around the number of prototypes I am going to create, the various pieces of content which will be on each, and what the hierarchy of that content will be. Not only do I need to have a holistic understanding of the work that has already been completed in the project, but also the foresight to accurately map what is needed to fully capture the requirements of the project. My friends, this is no simple task.

The first thing I do is define the prototypes I’ll need to create using Basecamp’s Writeboards to capture these lists. With larger projects, it’s likely that prototypes will represent multiple pages, so it’s a good idea to keep the labeling of these as generic as possible where appropriate. I use names like “Section Landing” instead of “About Us,” or “Basic Listing” instead of “Search Results,” and “Standard Entry” instead of “Blog Detail.” This naming isn’t an exact science. The goal is to create labels that can represent multiple page types on the site. Some pages of the site such as the “Home” page may truly be unique. Capture those key pages as prototypes to be created, as well. Furthermore, it is also likely that there are multiple areas to the site. Maybe there is an investor relations component, or a control panel that serves its members. It’s a good idea to create unique writeboards for each of these lists to help differentiate them and keep things as simple as possible.

Next, I refer back to the sitemap and place all of the pages found on it under one of these generic prototype buckets or identify them as unique (requiring their own prototype). I feel a great sense of relief once I have completed this. I know that I have defined a solid list of prototypes and I have completely captured the sitemap. High five!

Now that I have the initial list of prototypes and the pages they represent, I flag one page under each of the generic prototypes that I will use for the content of the page. As I list this content, I try to arrange it hierarchically by asking myself: What are the most important pieces of content on the page? What will live at the top, the middle, and the bottom of the page? What is primary content and what is secondary?

Believe it or not, at this point I am already designing. Not in Photoshop, and not with CSS, but I am designing with text in a writeboard. It’s simple and awesome.

At last, I’ve got my list of prototypes ready to go and their textual content hierarchically organized. I’m prepared to make a smooth transition into my HTML prototypes. I can now recreate the list of prototypes as HTML templates, import their textual content, and begin designing more robustly in the browser. The moment has arrived when the cocoon starts to shift and crack, and the beautiful butterfly that is the new website in all its redesigned splendor begins to emerge. The world is at last our butterfly garden.

What other methods or ways have you found to make the transition into prototyping seamless?

Back to Top