“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.
Did You Like This Post?
- Author: Ross Johnson
- Date: Thursday, August 6, 2009
- Comments: 23 Comments
- Categories:
About This BLOG
Since inception, this blog has covered a plethora of topics. Excited by all things design, I spent six years with out a focus. A year ago I discovered my true passion... designing with psychology (primarily as it related to the web). Many thanks to my Web Design Agency, 3.7 DESIGNS that gifts me time to publish my findings.
The Latest Buzz
You should follow us on twitter here.
Popular Posts
We recommend
This is very cool, thanks for sharing!
Nice post. Really this tool is good presentation tool..
Keep up posting more about this type of tool…..
Thanks
Rajnish Parihar
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)?
This is really cool & innovative tool. I also would like to see Jump tp page feature.
Cheers,
Chamara
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!
[...] “Mockup Present” – A Tool for Designers & Developers Mockup Present is a simple, rapid tool for integrating your design concepts into a brandable, browser rendered presentation. It’s an excellent free tool so download it and check it out. [...]
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.
Great tool. Thanks for sharing both the tool and your concept for presenting.
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.
[...] 2, 2009 · Leave a Comment 3.7 designs has created a tool that attemps to tackle the challenge of presenting creative for the web. “Mockup [...]
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.
This is very cool, thanks for sharing!
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
Nice thanks…
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!
Great post….Tools and the concepts are great
keep posting
[...] 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. Read full article » [...]
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.
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.
Wow – just what I needed.
Thanks for sharing this simple but very useful tool.
It is much appreciated!
[...] Mockup Present [...]
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!
Looks awesome Joshua, I will have to give it a try.