People constantly ask me what the best prototyping or mockup tool is. My standard answer is “whichever tool you are most comfortable/experienced with.” But just to cover all the bases and make sure that I’m not missing out on the “silver bullet”, I decided to do a review of all the tools that I’m aware of. You could (and probably should) distinguish between pure mockup tools (e.g. “Pencil”) and tools for creating interactive prototypes (e.g. Adobe’s soon to be released product code named “Thermo”), but for the purposes of this matrix, I lumped them all together, and I noted which have interactive capabilities and which don’t.
My picks:
1) Low fidelity mockups for idea exploration and communication: Balsamiq
2) Interactive prototypes to test and communicate interactions: Adobe Flex (Thermo may change my mind)
3) High fidelity drawing tool: Adobe Illustrator or OmniGraffle
Review:
| Balsamiq | Pencil | OmniGraffle Pro | Visio Pro | |
| One liner | Cool! | This can’t really be a Firefox addon! | Amazingly simple and powerful drawing | Practical and business-like |
| Ramp up time | none | minuscule | small | small |
| Other expertise required | none | none | none | none |
| Supports interactivity | nope | nope | nope | nope |
| Full lifecycle product (rough to spec) | rough only | rough only | yes | somewhat |
| Fun to use | absolutely! | yes | yes | somewhat |
| Ease of creating a mockup of tree navigation | drag and drop and populate | no tree stencil! | had to download Yahoo stencils | straight-forward |
| Time to build mockup of tree navigation | 15 min | 1 hr | 1 hr | 30 min |
| Quirky? | nope | somewhat | nope | nope |
| Cost | $79 | free | $199.95 | $559.95 |
| Photoshop CS4 | Illustrator CS4 | Fireworks CS4 | Dreamweaver CS4 | |
| One liner | Gold standard for bitmap tools | Gold standard for vector tools | Bitmap + Vector but I still don’t get it… | Yes, there are countless HTML toolkits out there, but I still love it |
| Ramp up time | very large | very large | medium | large |
| Other expertise required | knowledge of bitmap tools | knowledge of vector tools | none (for this) | html, javascript, css |
| Supports interactivity | nope | nope | nope | yes |
| Full lifecycle product (rough to spec) | professional | professional | yes | yes |
| Fun to use | somewhat | somewhat | rendering is poor | yes |
| Ease of creating a mockup of tree navigation | from scratch | from scratch | no default tree! | had to find javascript tree control and figure out how to use |
| Time to build mockup of tree navigation | 1 hr | 1 hr | gave up | gave up |
| Quirky? | difference between Illustrator and PS can be confusing | difference between Illustrator and PS can be confusing | average | nope |
| Cost | $699 | $599 | $299 | $399 |
| Flash CS4 | Flex 3 Pro | Thermo (codename) | Powerpoint 2007 | |
| One liner | You can do whatever you want - total interactive flexibility | With some programming experience this rocks! | Not released yet - but from experience on the beta I have high hopes | Great prototyping tool for the earnest product manager |
| Ramp up time | huge | medium | large | negligible |
| Other expertise required | programming | programming | none | none |
| Supports interactivity | oh yes! | oh yes! | yes! | okay… yes |
| Full lifecycle product (rough to spec) | yes | rough - not really a visual tool | sort of | rough only |
| Fun to use | yes | subjective, but for me yes | yes! | no |
| Ease of creating a mockup of tree navigation | no built-in tree | easier than flash because of built-in tree, but still not automatic | medium | no tree |
| Time to build mockup of tree navigation | gave up | 1 hr | 1 hr | 2 hr |
| Quirky? | not really | nope | nope | nope |
| Cost | $699 | $699 | ? | $299 |
| Axure | iRise Pro | Microsoft Expression Blend 2 | Microsoft Expression Design 2 | |
| One liner | Why? | Think process, large teams, … but why? | Microsoft’s Flash | Microsoft’s Fireworks |
| Ramp up time | very large | very large | very large | large |
| Other expertise required | none | none | a little more than Flash | a little more than Fireworks |
| Supports interactivity | I think | I think | yes | nope |
| Full lifecycle product (rough to spec) | yes | yes | yes | professional |
| Fun to use | no | no | no | no |
| Ease of creating a mockup of tree navigation | didn’t find tree immediately | didn’t find tree immediately | didn’t try - too tired to go on - opened the interface and started clicking around and just closed it | Stopped with Blend 2 - I hope the argument for these tools is not “MS Office integration |
| Time to build mockup of tree navigation | gave up | gave up | gave up | didn’t try |
| Quirky? | not really | not really | don’t know | don’t know |
| Cost | $589 | $6,995 | $499 | $699 (for Studio - couldn’t find individual) |
Thank you Russell! A very usefull post indeed - I’ll be directing interested parties to this page in future. (curious about Thermo)
Nice write up!
My picks are:
1) Low fidelity mockups for idea exploration and communication: paper, whiteboard
2) Interactive prototypes to test and communicate interactions: Axure, XHTML and Javascript
3) High fidelity drawing tool: Visio
Hello Russell,
There is an inexpensive tool called MockUp Screens. It costs $79 for a single copy and around $400 for a corporate license. It is quirky, and not interactive, but you can create wireframes easily and create HTML printouts of a sequence of screens. You might want to add it to your list.
http://www.mockupscreens.com/
Thanks,
Chauncey Wilson
Glaring omission! I forgot a row for “platform” (had intended to include it). Here is the data for platform for each:
Balsamiq (cross platform - Adobe AIR)
Pencil (cross platform - Firefox Addon)
OmniGraffle Pro (Mac)
Visio Pro (Win)
Photoshop CS4 (Mac, Win)
Illustrator CS4 (Mac, Win)
Fireworks CS4 (Mac, Win)
Dreamweaver CS4 (Mac, Win)
Flash CS4 (Mac, Win)
Flex 3 Pro (Mac, Win)
Thermo (Mac, Win)
Powerpoint 2007 (Mac, Win)
Axure (Win)
iRise Pro (Win)
Microsoft Expression Blend 2 (Win)
Microsoft Expression Design 2 (Win)
MockUp Screens (Win)
Russell, I think you need to stick w/ Fireworks longer.
1) it DOES do interactivity. it has state management and can export to HTML or SWF.
2) Its unparalleled multi-levelled layering is an amazing design process tool.
There is a reason why Adobe couldn’t “kill” fireworks. its very loyal users have fought hard because it is truly the only UI High fidelity graphics tool out there. Everything else is just pretending.
on Blend, I think the real reason to use Blend is b/c your development environment is .NET3 based. otherwise, there is no reason to ever go there.
The one tool you are missing is Denim in the digital space, and then you have nothing in the analog space. Pencil/paper is till the best low-fi tool ever!
– dave
My picks:
1) Lo-Fi: Paper, Balsamiq
2) Interactivity & demonstrations: Axure
3) Hi-fi drawing: OmniGraffle Pro
Ramp up time on Axure isn’t “very large.” If you want to do really fancy RIA stuff, yeah, that takes a bit of learning. But doing simple HTML prototypes is pretty easy to figure out.
just some other options:
- raw HTML, supported by libs such as YAML and YUI (see b&a article http://boxesandarrows.com/view/prototyping-with
- I like to use htmlb, but requires a sap netweaver platform … (: indeed all these platforms are good for prototyping if that is also the target platform (websphere, netweaver, .net/moss …)
- for detailed design, I am one of those who like a REAL control on the visuals, so Illustrator&Fireworks are fine, but then I have to promote Inkscape: http://www.inkscape.org
it produces fine svg files which can be linked together to form a prototype using the <a xlink:href=… tag in svg
Nice article. I agree though with Fred that Axure ramp-up is not large. I found it pretty quick to learn (see here for links to tutorials: http://evolvingworker.com/2008/9/19/graphic-user-interface-design-with-axure)
Yay!
Another great ap from Adobe I just love giving those guys all my money to let me use buggy software all day long I hope they leave lots of bugs in Thermo it wouldn’t feel like an Adobe product if it just worked…
I have found that InDesign has worked well for high-fidelity mock-ups as well. It has most of the vector tools I would want from Illustrator, and for creating multi-page annotated mock-ups or wireframes.
It’s a “use what your comfortable with” thing. I imagine most interactive-based designers don’t usually get InDesign, instead getting the Web Suite (if they’re using Adobe apps). So probably not a standard option for $700 stand-alone. But if you happen to have InDesign and aren’t currently using it for mock-ups/prototypes, it’s worth giving it a spin.
Being able to set up re-usable character, paragraph and object styles makes things pretty convenient. And you can even have objects hyperlink to other pages, so you can make a ‘clickable’ prototype PDF.
Also, someone pointed me to ProtoShare. Have yet to use it, so I’m not recommending it. Curious if anyone has given it a try? It’s a hosted web prototyping tool.
http://www.protoshare.com/
- Chris
What about Visual Studio. The express version is free, all the control’s you need (for windows apps)
If you want interaction, VB is easish to learn.
matching your other tasks - tree in seconds.
for just the windows without interaction the ramp up is easy. If you don’t want to spend the time learning basic coding, use images within a powerpoint
Just wanted to show a bit of support for Axure. It’s a great way to quickly put together an interactive mock which you can share with others.
I think it would be helpful to note your experience as that will dramatically color your evaluations, as it clearly did. Based on your reviews, I can pretty much guess you love Adobe products and have used them for years.
Other folks who are maybe less of an Adobe fan or have used, say, Microsoft products more might find them more productive and would at least give them fair play in a review and not just open, click around, and close.
Anyways, I agree Blend is difficult but doubtless it is better for a UI designer than Flex and certainly more productive than Flash for those not already steeped in the Adobe world.
But there is definitely room for improvement across the board, IMO.
Ditto what David Malouf said about Fireworks. It supports interactivity probably better than most applications. The pages and layers are both very helpful, which puts it above Illustrator or InDesign for UI design of a multi-page flow or site.
And you have complete control over look and feel of components, which for a design agency is pretty important (maybe not so much for company doing internal mockups).
1) Lo-Fi: Paper, Axure
2) Interactivity & prototyping: Fireworks (simple interactivity, exports to PDF + HTML), Axure (complex interactivity, HTML protos)
3) Hi-fi drawing: Fireworks, Illustrator
4) Site maps & flowcharts : Axure, MindManager
Like David Malouf said, you need to spend more time with Fireworks as you got pretty much about it wrong. It does support interactivity and its rendering is purposefully set to 72ppi onscreen as its output is the Web and nothing else. It also has a full library of OS and browser widgets that make rapid prototyping a lot easier than with apps like Illustrator or Photoshop. And with version CS4, depending on how you build your file, its exported code is rather decent and not throwaway as it used to me (at least for me).
Can anyone recommend a good tutorial/book/website for Fireworks? (and please don’t send a link to Adobe docs) — I *want* Fireworks to be a great tool — I would be one of its greatest proponents… *IF* I could figure out the magic that everyone else seems to have discovered. When I play around with it my mockups look pixelated (not smooth) and I can’t seem to get any extra value out of it… admittedly I haven’t gone through a class or worked through serious examples/tutorials yet. But I haven’t done that for the other products I use either…
And to the point J. Ambrose made — I have become very Adobe-centric, and that’s where a majority of my experience is right now. In the past I have used .NET to develop Windows based apps, but not really in a UI design role. I’m sure Blend/Expression is a nice suite of tools, but I can’t help but wonder “why do we need it?” At best it’s playing catch up to Adobe’s suite right?
I think Fireworks has some use as far as importing items directly into Flash (I haven’t actually exported to HTML)… but just because it can do it, doesn’t mean it’s the best way to get the job done. To me, Fireworks does a subset of what Flash can, but why not just do it in Flash anyway. For example, you can take an item, convert it to a symbol, and give it some states, but it’s a little different than Flash, kind of quirky, and not very intuitive. So why wouldn’t you just import the item into Flash and convert to a symbol and edit it there?
Also, I personally like Fireworks a little better than Photoshop… the reason being that I’m usually taking a mockup, pulling individual UI pieces and making them functional. To me, Fireworks is great in that respect, but I just don’t use the more advanced functionality.
@Russell,
In the case of Blend, I would suggest it is actually Microsoft leading the way. Thermo is like Adobe’s Blend in terms of purpose at least (and also in some of the interactions from what I’ve seen).
In any case, to answer the question (of “why?”), both platform vendors need to have effective tools for their platforms. Expression and Visual Studio for Microsoft; Flash, Flex Builder, now/soon Thermo, and others for Adobe.
No need to get partisan. I think a better approach is to pick the right tool for the job and also to help your tool vendors improve where you think they should.
I must admit, I do enjoy fireworks…
Especially the kind you can aim at your friends, blow stuff up, or I guess possibly shoot in the sky exploding into a million beautiful colors (if you are into that sorta thing). As a kid I remember really looking forward to the 4th of July because I would save up all my money for the entire year and buy the craziest damn assortment of gun powder you could legally purchase as a 10 year old and then sitting mindlessly for hours lighting things that would most definitely leave black scorch marks on my parent’s driveway (which was a big no-no at our house), make giant holes in the front yard, or blow off my hand,. And of course, as a kid, there was always talk of that one mythical firework stand a little further than what you could ride your bike to that had one of those insane "12 for 1" fireworks deals. You know the one, you went to the stand and actually paid for thirteen, but for some reason it felt really good to buy one and get twelve free.
I don’t really know what it is, but fireworks are mindless, probably a waste of money, completely dangerous, while ironically being totally patriotic. USA #1!!! Now that I’ve grown up (this might be an arguable point to some) I get what fireworks are about. but with Adobe Fireworks, <a href="http://www.youtube.com/watch?v=msq8_npdkkg&feature=related" rel="nofollow">I just don’t get it</a>. I really want to like this product and Adobe wants me to like this product (they make Fireworks the default program to open images). Now I’m not a smart man, I will readily admit this, but to me, Fireworks is like the designer version of the "12 for 1" stand. I save my money all year long to buy the latest Adobe products and I get this wacky Fireworks program for "free" which I should be excited about, even though in reality I really paid for it.
I’m already familiar with Flash, Photoshop, and Dreamweaver and I can "blow stuff up" with them pretty easily, but all I hear is people talking about how awesome Fireworks is and I feel like I’m definitely missing something. You know it kind of feels like I’m stuck with some <a href="http://www.davesfireworks.com/brev_files/blackcats.jpg" rel="nofollow">Black Cats</a> and everyone else is playing with <a href="http://www.cpsc.gov/cpscpub/prerel/prhtml98/98149b.jpg" rel="nofollow">M-80s</a>.
Can someone please explain to me why Fireworks is so awesome? I would be really excited to rapidly blow prototypes up with it or even light my own wonderful face on fire as some kind of exported image/interactive presentation, but until then I’m going to be shooting bottlerockets at the Wilson house. Wait, he doesn’t get it either, but it will still be fun!
Poor Adobe Director, a language (Lingo) much easier than Actionscript, Flex MXML, Silverlight, etc.. yet equally as powerful for high fidelity prototyping.
http://www.adobe.com/products/director/
Layer Magazine web site has great list of Fireworks tutorials.
http://www.layersmagazine.com/category/tutorials/fireworks
@Russell
Check out AdobeTV under the Fireworks category. That is a great place to start. You’ll see me announce the Fw beta which is way old, but check some of these vids out:
Adobe Fireworks Home on Adobe TV:
http://tv.adobe.com/#pd+Fireworks
These are videos produced by Fireworks users that are passionate about the product.
Here’s a few vids I would recommend in terms of prototyping:
Rapid Prototyping:
http://tv.adobe.com/#vi+f1498v1659
Creating Interactive Prototypes:
http://tv.adobe.com/#vi+f1498v1660
The complete design process:
http://tv.adobe.com/#vi+f1498v1658
Information and Interaction Design:
http://tv.adobe.com/#vi+f1498v1661
Why cooper uses Fireworks:
http://tv.adobe.com/#vi+f1498v1638
Hope that gets you started. If you want more you can explore the videos on Layers magazine:
Layers Magazine - Fireworks:
http://www.layersmagazine.com/category/tutorials/fireworks
Hope this helps ya for now Russell!
@ Ron Norman
I use Fireworks to create prototypes surprisingly enough for prototyping new features in Fireworks.
A useful integration tip is copying objects from Fireworks into Flash is super easy. If you used Pages to create a click-thru mockup that exports to HTML, then you have the option to Open the PNG in Flash and decide which pages get imported, do Pages get converted to Frames or do you want them converted to Scenes in Flash? How bout to Layers? The choice is yours. The PNG importer has a lot of robust features for taking your prototypes to the next level of IA in Flash.
99% of the time I can simulate everything with Fireworks, but there are times when Flash can perform advanced Interactions that are better suited to be created in Flash and not in Fireworks. A timesaver for me is the ability to create and use a button symbol in Fireworks, but when you need to do more advanced interactions say in Flash, copy the button in Fireworks and paste into Flash and the button symbol will retain all states even the hit state so you dont have to re-create it again!
Thanks for the handy breakdown.
I use Flash for sketching, lofi prototypes, hifi prototypes and interactive prototypes.
In my experience, it’s the ideal tool because it can do every type of prototype and you don’t need to know very much about Flash to use it very effectively.
I do workshops on rapid prototyping in Flash and here are my course notes that go into more details…
http://skyrize.com/2008/07/31/course-notes-from-the-rapid-prototyping-workshop/
[...] User Interface Prototyping Tools Russel Wilson of Dexo Design has done an excellent review of available UI Prototyping tools and provided tables comparing attributes including how fun they are to use, time to ramp up, and [...]
Thanks. Interesting. I wouldn’t say Axure is that bad as you have implied (One liner: “Why?”). We have created some rich, interactive, mockups using it. I admit doing a tree is a pain, though! Its certainly not for high quality prototypes, and that is fine for us…
Definitely think you gave Fireworks short shrift. Although I am admittedly biased as a long time user, it seems to me like “I don’t get it” sort of disqualifies you from reviewing it. There is indeed a difference in working in FW vs other tools if you are used to them, but spending the time to sit through a lynda.com tutorial should clarify how things work.
Also I didn’t understand the “rendering is poor” comment. That seems out of date to me - I wonder if your review is based on an earlier version…
[...] Review: 16 User Interface Prototyping Tools | Dexo Design: Design for Web Sites and Applications (tags: prototyping) [...]
In my nearly 14 years as a professional designer I’ve used Dreamweaver, Fireworks, Flash, Director, iRise, Visio, Photoshop, Illustrator, and of course Powerpoint.
Recently, my team took a fresh look at what was available. Here are some of the dimensions that were important to us:
1. It provides wireframing, IA and prototyping capabilities.
2. All stakeholders can use it. For me, that means my human factors engineers, interaction designers, product managers and developers. To succeed, it needs to be considered "better than powerpoint" in ease of use, speed and portability.
3. It forces low-fidelity, promoting rapid iterations and disposability. Key, because what we really want is paper-prototyping, with the efficiencies of digital workflow.
4. It’s low enough cost that all stakeholders can justify owning a copy. (That’s dozens of people.) Remember, paper is our competition!
5. It can be used for any UI platform–not just web/HTML, but embedded/handheld products too.
In the end, we chose Axure, and we’re quite happy with it. It has proven to be an excellent competitor to Paper, Visio and Powerpoint.
My dream tool would be one that integrates a Style Guide tool as the UI control library. The default style-guide would be all of the standard UI controls in low-fi, wireframe format. Then you could drop in your skin/customized controls and with the flick of a switch, flip between low and hi-fi versions of your spec.
Hi,
very nice article, I love the one-liners.
BTW I have just started an petition to Omni to get them considering (at least) if it would be possible for them to develop an app for interactive prototyping.
Maybe it helps, if other people sign it.
http://forums.omnigroup.com/showthread.php?p=51014#post51014
@Chris Gielow
Your Style Guide idea for Axure is fantastic. Did you pass it on to the Axure people? If you post in their forum, Victor will certainly respond and take the idea into account for a future version.
I use Axure myself, after using Visio and Powerpoint for a while.
Also @Chris Gielow and @Stéphane Bergeron, if I’m understanding you right their already is that feature. It’s called the Style Editor and appears on the far left side of the text formatting toolbar (with Axure RP 4.6 that is)
[...] Wilson of Dexo Design has done an excellent review of available UI Prototyping tools and provided tables comparing attributes including how fun they are to use, time to ramp up, and [...]
[...] Russell Wilson of Dexo Design put together a handy review of 16 prototyping tools. [...]
Wotcha
Nice post, thanks, but you forgot two great freebies that are well worth a look. The first is Denim (http://dub.washington.edu:2007/denim/) which is a sketching tool, works great if use a pen/tablet has interactivity and exports a rough HTML version of your prototype.
The other is the fantastic Serena Prototype Composer which used to cost big bucks buit is now free at http://www.serena.com/products/prototype-composer/home.html
It does great prototyping, interactivity, sitemapping, is network collobarative and generates documentation as well. I’ve used it successfully on sevral big projects and left behind me a legacy of client-converts.
Cheers!
Rob
I find visio tool a lot of wasted potential. Compared to this i find PPT much quicker if you are a little organized and know some tricks of grouping, cutting, pasting
My choices:
Low fidelity/Wireframes: Indesign
Interactive prototypes: Indesign (interactive pdf)
High fidelity: Fireworks
[...] Wilson from Dexo Design recently did a quick comparission between 16 different mockup/prototyping software which included Pencil, Omnigraffle Pro, Visio Pro, Photoshop, Illustrator, Fireworks, Dreamweaver, [...]
OmniGraffle does produce interactive prototypes, with image maps and hyperlinks. It’s pretty cool for that. I like it for low fi prototypes then export them as PNG’s so i can give the high fidelity finishing in Fireworks, and i can even export the high fidelity version over the pngs to get the prototype with high fidelity look : )
[...] Review: 16 User Interface Prototyping Tools [...]
Nice article, thanks.
I’ve often used powerpoint (now use OOo Impress in the same situations) but don’t usually bother sorting out the interaction there. Instead, I print to PDF and use acrobat to add links and annotations.
I usually work in lo-fi black-and white as I find the nicer the graphics, the more that decision makers will worry about colour and aliasing and the like instead of focussing on navigation and usability- I mean, we are talking wireframes, right?
Since moving to a Mac, I tend to use OmniGraffle (I <3 OG and http://graffletopia.com/) for both lo and hi-fi mockups and leave the final design to the designers
I used to <3 Visio, when it was still owned by Shapeware and was capable of interacting with your networks. I was halfway through constructing a database-backed system monitoring tool (which was quite awesome in beta) in Visio that would monitor all the PCs and printers on my network (50-70) for faults in real-time when Microsoft bought it and the next version didn’t connect in __quite__ the same way, buggrit! Now, I find Visio insanely complex and over-engineered and doesn’t do half as much.
Tried Axure, didn’t light my fire either. Keep hearing about Pencil but I don’t think I’ve used it yet.
Thanks for the list!
Very interesting to read your comments.
I always thought Axure is great to use, but then ive never used it for a navigational tree.
I prefer MindJet MindManagaer Pro 7
cheers
I’d like to add my voice to the folks above recommending Indesign for wireframes, mockups and basic interactive mockups. I’ve found that I can do these tasks much faster in Indesign than other tools, but you need to make sure you don’t start veering into visual design if you’re doing wireframes.
Illustrator and Photoshop are great tools for intense detail implementation phase, but very slow for early phase design tasks. You can get really bogged down in technical details quite quickly using these applications.
I use Visio for sitemaps, user task flows, that kind of thing. Anything with boxes and arrows is the Visio sweet spot.
Of course, the problem comes when you need several people to work on the same set of documents. Indesign access and skills seems to be a little uncommon, so that can set up some barriers.
Hi, I’ve been looking for some articles about Hifi-Test. I can see that you too have the same interests. Your post on “16 User Interface Prototyping Tools | Dexo Design: Design for Web Sites and Applications” is a good example so I hope that you can keep providing information. I wish you every success.
[...] a comment » This posting gives a quick overview of the top-playing tools available to User Experience [...]
Perhaps you would also be interested in the tool I have developed:
http://wireframesketcher.com
It’s an Eclipse plugin for creating wireframes, screen mockups and UI prototypes. It’s still in its early stages but it should stack up pretty well against some of the tools listed here.
Anyone know of a more lightweight option to Fireworks/Photoshop that can support layers?
I have used Viso a lot for sitemaps, so it will do in a pinch for a wireframe…but there are easier and better tools for that..even powerpoint if you need to share with lots of people, or balsamiq, because it is fun to use.
But I also like to annotate using a different tool - Snagit’s editor is a really nice and simple way to add callouts,etc onto an image. But I wish I could store those callouts on a layer, so I can put them on top of a new image as part of the iterative dev process.
Great review, I enjoyed reading it and even found some new tools to try!
Important thing I miss though is whether the tool is usable by non-techie people. In our company we have several system analysts doing such prototypes and most of them simply can’t use half of the mentioned tools.
Btw I mostly stick to MockupScreens, and new release seems even more promissing:
http://mockupscreens.com/index.php?page=What_s_New
Cheers,
Mario