This month marks the beginning of our fifth year in business and to mark the occasion we've launched the fourth redesign of our website. This time we did things a little differently. Rather than heading into Photoshop or sketching out wireframes from the start, we opened a blank file in a text editor and started writing. We used writing to inform our design and it was the best decision we've ever made.
Our previous redesigns took forever. We spent a ton of time looking at layouts and design elements on sites we liked and eventually used them as inspiration for our own site. This was a very long and time consuming process. It took weeks to decide on the design of a single page and when we finally implemented it we realized that we didn't have the right content to make it work or it didn't fit our brand personality.
This time we wrote the content for each page before designing it starting with the homepage which was the hardest. It started with a paragraph summing up who we were and what we offered. Maybe four or five sentences at most. Once we had that opening paragraph we started on down the page writing lists of frequently asked questions, lists of services we offered, and even single line calls to action which would eventually turn into buttons.
With the homepage content more or less written, only then did we open up photoshop and start to design. We knew what pages we needed for our navigation and had a lot of content to draw from for the body. It was at this point that we started to draw inspiration and ideas from other sites to incorporate into our design.
In our previous iterations of the site we would make a list of the pages we needed to build and then begin sketching out mock ups for each of them. We realize now that this wasn't always the best approach. It led to misplaced priorities. Rather than making the information our clients wanted a priority we ended up focusing on making each page unique and pretty instead despite knowing better.
The homepage was actually developed by asking questions that our clients might ask and placing the answers into a design element on the page. A lot of what was written for the homepage was never used but if we didn't have so much to draw from the process would have been much harder and taken far longer. Plus we were able to reuse some of that content for the inner pages.
Designing with code
Once the homepage was mocked up in Photoshop and we had written the code to display it in development, the inner pages were a breeze. At that point the only decisions you need to make concern how to lay out your body content. So with that we began writing content for the inner pages. The content informed our design but we didn't need to mock these pages up in a graphics editor.
If you have a clear and focused message and you know exactly what content you need to publish then in most cases code can be more expressive and much faster. So we leveraged our existing grid system to design each inner page directly in code rather than going through a mockup phase. Luckily, they were all primarily text based so all we needed was a sidebar and main content area. This worked well for our main inner page template but we do need to revisit our pricing page and possibly do some more conceptualizing in a graphics program.
Writing before designing helped us launch quicker. The entire site was built in 3 weeks as a static website. We leverage Grunt during the build phase to make everything consistent and have a machine do things that are likely to be looked over by humans. While our build script is pretty complex it's not much more complex than a lot of static site generators out there. We could have used one of those but we think the benefits we gain in customization outweigh the costs of managing a custom build script and the DRYness of a generator.
Next time you're designing a site, try writing your content before thinking of a design. Use it to organize your message and let it inform your site’s design.