Fireworks toolkit for creating iPhone UI mockups
While designing Notespark, we did a lot of UI mockups. As it turns out, I prefer using Fireworks for this kind of work over Photoshop, because it’s easier to manipulate objects on the screen. After doing some Google searching, it appeared there weren’t any good templates for doing iPhone mockups, so we built our own.
The file is pretty complete now, so we’re sharing it with the rest of the world. We started out with a combination of bitmaps and vectors, but we found that vectors were easier to edit, so every single item has been redrawn as a vector [*], which should make it easier to edit to your heart’s content.
[Download the CS3 version]
[Download the CS4 version]
You may use this file freely for “normal” use. That is to say, you can create mockups, show clients, work with team members, etc. That’s what it’s for.
If, however, you are planning on distributing a modified version of this more broadly (e.g., on your blog, or with your book), we ask that you follow the conventions of the Creative Commons Attribution-Share Alike 3.0 License. Please include an attribution to metaspark.com along with a link to the URL for this post (http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/). The attribution should be in the file itself, as well as on the blog post or wherever you reference it.
Hat tip to Teehan + Lax for giving us the idea. We probably would have just used theirs if we didn’t prefer Fireworks over Photoshop!
* Except the picture of the iPhone itself and the background of the start screen. We’re not that crazy.



[...] toolkit is fairly complete now, so we’re sharing it with the world. You can use it to create your own mockups of iPhone [...]
[...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]
This is great! A colleague of mine at EffectiveUI is just about done making something like this all as rich symbols, so we may borrow a couple elements from this to complete it. We’ll let you know. Thanks for sharing!
This is awesome. I am sure iPhone designers will love this.
I’ve already tried some free Photoshop templates for creating iPhone UIs. However, your mockup toolkit rocks – thanks for sharing this cool stuff!
-Jens
http://www.websector.de/blog/
I collected a few assets you can use as well. Feel free to check it out here:
http://vilebody.wordpress.com/2008/08/22/iphone-interface-design-elements/
greets,
Thomas
Very nice work, folks!
[...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ Apple iPhone Mockup [...]
[...] for creating mockups (as I do), and have any need to create mockups for iPhone apps, you need this free Fireworks toolkit of iPhone UI elements from the folks who created [...]
[...] iPhone toolkit addthis_url = ‘http%3A%2F%2Fwww.fireworkszone.com%2Fiphone-toolkit’; addthis_title = [...]
I have tried to download the cs3 version but it’s a PNG file. can’t edit it… How do I get to the vector images.
sorry I am new to this!
thanks
Are you sure you grabbed the right version? Click on the text that says “download the CS3 version”. You should get a ZIP file. Unzip that file, and you should get a CS3 PNG. I just tried it myself and it seemed to work for me…
This is awesome!!!
I love designing with Fireworks, and this mockup is great for my job!
Thanks Sho!
[...] make sure you’re giving & getting the right feedback. グループワークで使ったiPhoneのFireworks CS4用のテンプレートは、metaspark.comのShoさんが作った物です。 [...]
Great work. We use this stencil frequently and adding elements to it, which we will post back when it is substantial. We also changed most buttons to symbols and using the 9 slice scaling tools so we can easily, well, scale them. But…
we took it one step further and have written some code to easily export prototypes and view them on any iphone. Check it out: http://unitid.nl/2009/04/prototyping-for-the-iphone-using-fireworks-cs3/
Hi thanks for this great effort – you’re making our life much easier with this. Can you please post which fonts you have used? It seems i don’t have all of them. I’m a big fan of Fireworks too – especially for its simplicity over Photoshop. thanks again
Thanks for this great work!
[...] really comprehensive libraries of iPhone interface items and elements are available here and here. It’s a pretty heavy file with all the items divided in layers and layer groups. If you have [...]
[...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]
Awesome! Just what I was looking for. Thanks a million.
[...] Fireworks toolkit for creating iPhone UI mockups by MetaSpark [...]
[...] iPhone Mockup Toolkit for Adobe Fireworks presented by Metaspark, creators of Notespark is available for download. [...]
Thanks for the hat tip. We just released an updated version that include a few more elements, including more landscape support. Available here: http://www.teehanlax.com/blog/?p=1628 A PSD for the Palm Pre was also just posted.
This is nice. This really shows the power of Fireworks. Thanks for sharing.
[...] fireworks [...]
Thanks so much for this. It was an enormous help.
Guys, thanks so much for posting this! So glad someone made these for Fireworks.