From zero to layout: A redesign process

When I began working on a one-page web project, my client asked about the process. How do you plan a single page? What leads from raw text to a finished product?

This post describes the thought process behind a redesign from scratch. The same methods could be applied to many projects, but this time it began with flowers and errant backslashes. The Volunteer Coordinator at the San Antonio Botanical Gardens hired me to help redesign their volunteer page. The HTML was problematic, causing the images to disappear in Safari and Mobile Safari; downloads weren’t linked; the design was “unappealing.”

At the time of this writing, we’re working on the final draft—using the same ideas below.

1. Gather the content

Given that this page wouldn’t change more than once per month, we started by removing all formatting from the text. Reducing it to headings and paragraphs, plus a quick copy edit, gave us a realistic idea of how much text we had to work with. The client also found several photos of volunteers at work.

Photos © the SA Botanical Gardens.

Images and text © the SA Botanical Gardens.

2. Plan for change

Next I started second-guessing. What if the content tripled in length? What if we cut half of it? What if we had six or nine photos instead of three? What if the page width shrank from 773px to 320px? What if we could have more than one page? The web is a flexible place. Change happens.

I’ve found that like design, clients and I work best with limits. So we set up some parameters:

• The goal is to educate readers about the subject. If necessary, other pages will contain content that supports the overview.
• The vital information is an introduction, a list of positions and ways for users to act (specifically, download an application form).
• The site’s template and CMS require a page width of 743px after padding, but an infinite length.

These facts created the framework from which I would design the page.

3. Imagine with pixels, explain in person

Using pencil and paper, I started doodling. One of my first ideas was for a detail: a new call to action button. (Visually, people volunteer by raising their hands. In every gardening photo I had, people wore gloves. It seemed to fit.)

The client liked my new title, “grow with us.” I assembled two designs in Photoshop and we discussed them with the client. Especially for early revisions, I like to show designs in person or via chat. Not only can I gauge their reactions, but I’m on hand to explain the process: One photo large will get attention; the intro paragraph is the most important text; the button colors were chosen based on the rest of the site.

But most importantly, I stress that these are drafts. A comp to me is a polished final revision to many clients. Understanding that these are rough ideas, no matter how official looking, is critical to my relationship with any client.

4. Revise the layout

Several problems became apparent. First, while the drafts had good hierarchies, none had a clear structure. Thinking in blocks—in this case, stacks—would allow one section to expand or shrink without affecting the others. I used one of the site’s common colors to create subheads for each section below the introduction and elaborated on the intro text.

In early drafts, I had the “volunteer!” button but nowhere to put it. It didn’t fit in the text, with a photo or in a column by itself. So I asked: What else do people need? We realized that we were neglecting other calls to action including an email newsletter signup and the opportunity to learn more. Two new buttons, using the project’s colors, completed the final section.

5. Next…?

The project is in progress, but the method of thinking “problems and solutions” applies at each phase.