Web Design & Web Strategy

“Mockup Present” – A Tool for Designers and Developers

I have always found that the design approval process can be extremely easy or extremely hard depending on how you approach it. Sometimes the most difficult part is ensuring that your clients understand everything that is critical when evaluating a mock up.

The problems with traditional mockup presentation

When I first started 3.7 DESIGNS we did everything from e-mailing JPG mock-ups to printing them out and mounting them. While these methods can work fine, they often cause problems and issues. The major fault for presenting mockups this way is that it does not give the client a clear understanding of how the concept will look in a browser on a computer.

How we have improved

To improve on this problem we started creating “holder” pages that just had the mockup as a large background image in an HTML document and putting that on a staging domain for the client to review. This improved the process in a lot of ways:

  • The client could be instructed on how to view it at different resolutions
  • The client could see the fold and what content would / wouldn’t be visible
  • The client could get a real expectation for relative sizing, legibility, etc..

It still isn’t perfect

Despite getting much better results working this way we ran into a few issues.

  • Creating 5 – 6 “mockup pages” and stitching them together was cumbersome
  • We had to send instructions with every new client and navigation wasn’t completely intuitive
  • There was no clear idea of how far you were through the concepts, how much concepts there were, etc…

Introducing “Mockup Present”

Spending a little time with CSS and JQuery we have developed “Mockup Present” a simple and rapid tool for integrating your design concepts into a brandable, browser rendered presentation. Fully equipped with an auto populating navigation bar, mockup counter and indicator. After download it should only take 5 – 10 minutes to get your mockups into the framework and online.

I already have a handful of ideas to improve on the concept, but I would love to hear any more thoughts or ideas.

  • Share/Bookmark

Share This


The 3.7 BLOG

3.7 BLOG is the web design and web strategy blog provided by Web Design Agency 3.7 DESIGNS

The Latest Buzz

Why invest large sums of money on a website when you are going to use photos taken with a $200 camera? 2 days ago &mdash 3PointRoss

You should follow us on twitter here.