updated: August 26th, 2009 / Ross Johnson / 23 Comments

“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.

23 thoughts “Mockup Present” – A Tool for Designers and Developers

  1. This is very cool, thanks for sharing!

  2. Nice post. Really this tool is good presentation tool..
    Keep up posting more about this type of tool…..

    Thanks
    Rajnish Parihar

  3. This is great and seems like it would be very useful.

    Maybe some sort of “Jump to page…” functionality would be good, so you don’t have to scroll through all of them (especially if you have more than 5 to show)? 🙂

    Caitlin
  4. This is really cool & innovative tool. I also would like to see Jump tp page feature.

    Cheers,
    Chamara

  5. Thanks for the feedback everyone, and great suggestions on the jump to feature. I will add that in and have a new version online shortly!

    Ross Johnson
  6. Pingback: Weekly Web Roundup: The RSS Edition #13 | Hi, I'm Grace Smith

  7. I really like the concept. You should expand on this, create an administrative layer with user capability’s. You then should give the user ( your client ) the ability to comment on each composition, ultimately speeding up workflow and approval times.

  8. Great tool. Thanks for sharing both the tool and your concept for presenting.

  9. Great tool Ross. Would be nice if there was a way to tile the concepts so clients could compare concepts on a single frame. But excellent as is.

  10. Pingback: Trying to tackle a big challenge « Design Matters

  11. Nice approach, I Find newfangled’s prototyping process very interesting, maybe others will too, http://www.newfangled.com/web_development_prototyping_process
    It makes sense.

    Rob
  12. This is very cool, thanks for sharing!

  13. Great idea and could be very useful. My current presentation method includes a ‘Links’ introductory page, with the client having to use the back button on their browser to return in order to view other layouts.

    One minor issue i have is that the nav bar feels a little intrusive. Ideally, i like clients to view the mock up as the final product would appear in the browser, and the branding and navigation could be distracting.

    Maybe if you were able to toggle the bar on and off somehow? Or show and hide on mouse on/off??

    This has definitely got me thinking though thanks.

    Chris

  14. Excellent tool. Excellent beginning.

    This tool can be expanded upon, but I like it simple.

    Most users like to see a mockup on the web and surprisingly enough, download images, presenting in a PDF, using basecamp, etc. actually confuses users.

    I have no suggestions, it’s perfect as of now!

    Thank you!

    Stephen Harris
  15. Great post….Tools and the concepts are great
    keep posting

  16. Pingback: “Mockup Present” – A Tool for Designers and Developers :: Web Designer Notes

  17. This is an interesting approach but would it not make more sense to just code the site in it’s simplest form so the client can actually get a feel for how the site will function?

    I know that adds a little more work before previewing but getting the basic elements laid out in code is going to have to be done at some point in the development. Unless there is a very unusual layout I can’t see a reason not to get the header, nav, columns, footer laid out and functioning. That way you can still go back and tweak the master design file and resave the images.

    I realize not everyone designs in the browser but I know that most of my clients would be a little confused by a setup like this for their site preview.

    Just my two cents.

  18. Great tool Ross. Would be nice if there was a way to tile the concepts so clients could compare concepts on a single frame. But excellent as is.

  19. Wow – just what I needed.

    Thanks for sharing this simple but very useful tool.

    It is much appreciated!

  20. Pingback: Top Web Design Bookmarks of 2010 | Paper Leaf Design | Edmonton Graphic Design & Web Design

  21. Ross, I just wanted to say that your post “It’s Not Just What You Present, But How You Present It” and this tool inspired me to build something similar for my company and share it with others. It’s a WordPress theme called Design Presenter. Thanks again!

  22. Looks awesome Joshua, I will have to give it a try.

    Ross Johnson

Comments are closed.