Website Redesign Process: Mockup

Delivery of the mock up is one of the most exciting moments of a redesign. Designer Tom Hapgood’s mock up of the new Haden Interactive web design certainly created a stir for us, even though we’ve been through a lot of these experiences with clients.

A mock up is a picture of what the website will look like after it has been built. For Haden Interactive, a mock up is always the result of a lot of research, discussion, and thought.

Ours, shown here, is a stacked design which will provide multiple screens for visitors who scroll. The “What we do and how to get it” section is above the fold, followed by “Who we are and where you can read/hear/find us,” and then a pull-in from RebelMouse instead of the more typical Twitter or Facebook feed. All the way through, there are interactive opportunities. We all love it.new-HI

But we know that the delivery of the mock up, while exciting, can also be confusing for many clients. They try to push navigation buttons and they don’t work, they worry about what the interior pages will look like, and sometimes they want to wait and see what everything looks like on the real website before they make changes.

This is a mistake. Many web firms charge extra for any changes after sign off on the mock up, and all web firms will do so if the time investment goes far beyond the original agreement. Making changes to the mock up is much easier than making changes to the website after it has been built — think of making changes to the house plan compared with making changes to the house.new-hi-detail

Let everyone have a last conversation about the design at this point. Make decisions about navigation. Don’t get caught up in punctuation or little issues with content, because that isn’t settled, but your goal should be to avoid any design changes after this point.

You can see in the detail at right that some of the text is still lorem ipsum, the quasi-Latin designers use to replicate the effect of real text. We’ve had folks object, “I don’t understand why my home page is in Italian!” when they see this, but don’t be alarmed. A lot of things about the content can be undecided at this point.

We often send website content in a Word document, putting the home page text into the mockup and waiting for approval on the rest before implementing it all into the website. It’s easy to change words later — especially in a WordPress site.

Make sure you love the design, though, before the website is built. The mock up is your opportunity to make sure all is well first.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.