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.
[...] Fireworks toolkit for creating iPhone UI mockups iPhoneをつかっていれば良く見かけるパーツがズラリはいっています。 [...]
[...] Fireworks toolkit for creating iPhone UI mockups is another fantastic template gathering stop to make as you beef up your arsenal. After finding a lack of decent available iPhone templates for Fireworks on the web, the creator of these helpful mockups sought to solve this issue. Job well done. [...]
[...] Fireworks Toolkit for Creating iPhone Mockups [...]
[...] To give you an idea, here’s an example of a flow for a simple movie ticket app that I made using Illustrator and an iPhone Fireworks stencil: [...]
[...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]
[...] Fireworks : http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]
[...] From TeehanLax and Fireworks from MetaSpark Filed in Uncategorized « Fast way create a secure centos 5 [...]
[...] Fireworks toolkit for iPhone UI [...]
[...] Fireworks toolkit for iPhone UI [...]
This is not a vector file, so it’s not editable in Illustrator. It’s just a .png (bitmap) image.
Hi George.
Fireworks uses png as its native format, and as you probably know, fireworks is a tool that allows both bump and vector editing. The vector (and other) information is stored in a metadata layer within the png file.
I believe there are illustrator files out there for iPhone mockups. some of the trackbacks from this page may lead you there.
[...] Fireworks toolkit for iPhone UI [...]
[...] (creators of Notespark) just posted a completely editable PNG iphone mockup file created in Adobe Fireworks. They built the template for both CS3 and CS4 versions. This is a really tight graphic mockup with [...]
[...] as the screen resolution has beenupdated.iPhoneGUI PSD Version 4 iPhoneWireFrames & Stencils Fireworks toolkit for iPhone UI iPad GUIKit(PSD) iPhone PSDVector Kit by Smashing Magazine iPad vector GUI ElementsThese are just [...]
[...] using Adobe Fireworks and Metasparks excellent iPhone UI toolkit, I was able to quickly put together a click-through prototype in which the details of the [...]
Thanks! Really great work and many thanks because it is made in FW. Way better then PS.
Absolutely great piece of work!! Reduced my work by several hours.
However, a few improvements are required in maintaining bevels
[...] iPhone Mockup Toolkit (CS4) by Meta*spark [...]
[...] Fireworks toolkit for iPhone UI [...]
[...] Fireworks Source Files [...]
[...] Project Page [...]
[...] great way to start is getting the iPhone UI elements from Metaspark (thanks for this guys!). Open Fireworks and create a new file setting the canvas to 320 by 480 [...]
[...] a vector application, development for the iPhone is easy and effective in Fireworks. There exist a variety of toolkits and rich symbol libraries for Fireworks iPhone development and they can speed up your [...]
Thanks for sharing the work. Cheers!
[...] here you can get a collection of vector iPhone UI elements for Fireworks CS3 and CS4 [...]
[...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]
[...] Fireworks toolkit for creating iPhone UI mockups [...]
Do you have an updated version with the iPhone 4 retina display and Fireworks CS5?
[...] Project Page [...]
[...] http://www.vgrishin.me/android_gui.html http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ http://www.teehanlax.com/blog/2010/12/10/ipad-gui-psd-version-2/ [...]
[...] http://www.vgrishin.me/android_gui.html http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ http://www.teehanlax.com/blog/2010/12/10/ipad-gui-psd-version-2/ [...]
[...] in die Verlegenheit kommen ein Wireframe für iOS-Geräte in Fireworks zu entwickeln, dem kann ich folgende Sammlung an iOS-typischen UI-Elementen wärmstens empfehlen. Sie sind in einer sehr guten Qualität und einzeln in Fireworks [...]
[...] Fireworks toolkit for iPhone UI [...]
[...] http://www.vgrishin.me/android_gui.html http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ http://www.teehanlax.com/blog/2010/12/10/ipad-gui-psd-version-2/ [...]
Thanks for that, awesome post, very handy.
Very helpful…great that it’s in fireworks – so much easier then Photoshop. Thanks for sharing.
Do you have an Ipad version?
[...] iPhone Mockup Toolkit [...]
Hi,
I downloaded both CS3 and CS4 versions. Could you please tell me what is the difference? (I am on Fireworks CS5).
When I open any of the files, I get a message saying that “text in this document uses fonts not available on your system”. In fact, the same thing happened with Teehan+Lax files.
Apple uses Helvetica in the iPhone 3 and Helvetica Neue in the iPhone 4. I do have Helvetica LT Std (21 fonts) and Helvetica Neue LT Std (51 fonts), bought from Adobe.
I can’t figure out why this is happening. It could be a tiny font naming difference, which could (maybe) be explained if I am opening the files in a different OS than the OS in which the files were created (I am on Windows 7 with Adobe CS5).
Anyhow, could you please tell me exact variation of the fonts used so I can type my text using the appropriate font?
Thanks a lot, and kudos for the great product and for sharing it with us!
Nathan
[...] 39. iPhone Mockup Toolkit [...]
Thank you!
Thanks!! This is really helpful!!
Thanks for sharing! Tip to you guys hwo need the Retina version; scale the whole PNG to 200%, and you have the Retina resolution. Simple as that.
Are you planning on releasing any iPad GUI for Fireworks as well?
[...] Project Page Graffletopia Stencil Kit for Omnigraffle [...]
[...] Metaspark: Fireworks Toolkit for Creating iPhone UI Mockups [...]
[...] Fireworks toolkit for iPhone UI [...]
@ProAssist: We are not actively working on an iPad Fireworks toolkit, but maybe one of these days…
[...] Fireworks toolkit for formulating iPhone UI mockups [...]
Thank you so much – has saved me sooo much time.
[...] would be rude to not give credit to Blogspark who created the original template that i based this file on, so thanks very [...]
[...] 2. iPhone Mockup Toolkit (CS4) by Meta*spark [...]
What are the pros and cons of using Fireworks for iOS design?…
Pros * Vector based, so easy scaling to retina * Easy slicing * Pixel perfect precision * Prototype tools available (www.unitid.nl/tap) * Great stencils available (http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/) * D…
[...] iPhone UI Mockups (Fireworks). Want to prototype iPhone app but only got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections! [...]
[...] [...]
[...] iPhone UI Mockups (Fireworks). Want to prototype iPhone app but only got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections! [...]
[...] iPhone UI Mockups (Fireworks). Want to prototype iPhone app but only got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections! [...]
[...] iPhone UI Mockups (Fireworks). Want to antecedent iPhone app though usually got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for we and a best of all, a pack is one of a many finish collections! [...]
[...] iPhone UI Mockups (Fireworks). Want to prototype iPhone app but only got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections! [...]
[...] iPhone UI Mockups (Fireworks). Want to prototype iPhone app but only got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections! [...]
[...] Fireworks Toolkit for Creating iPhone UI Mockups [...]
[...] элементов, которые можно встретить в iPhone 3GS 10. А этот набор будет полезен для тех, у кого на компьютере установлен [...]
[...] iPhone UI Mockups (Fireworks). Want to prototype iPhone app but single got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections! [...]
[...] Fireworks Toolkit [...]
[...] iPhone UI Mockups (Fireworks) [...]
[...] Fireworks toolkit for creating iPhone UI mockups by MetaSpark [...]
[...] Fireworks template for iPhone – http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]
[...] [...]
[...] Fireworks toolkit for creating iPhone UI mockups [...]
[...] iPhone用户界面的实体模型。 [...]
I am sure iPhone designers will love this.so much easier then Photoshop. Thanks for sharing.
Fabulous assets – I really rate Fireworks and your visual assets are great. I will introduce my students to these and give you full attribution. Cheers and thanks for a wonderful effort.
Michael
[...] Source : blog.metaspark.com [...]
[...] iPhone UI Mockups (Fireworks). Want to prototype iPhone app but only got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections! [...]
[...] → Blog*Spark, Fireworks toolkit for creating iPhone UI mockups [...]
[...] Project Page [...]
[...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]
[...] iPhone UI Mockups (Fireworks) [...]
Thanx – very useful.
All hail Fireworks!
[...] de iPhone para Fireworks: http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ Valoración Crítica: si bien es cierto que Apple se basa en ciertas reglas de diseño que [...]
I’ve always done our editing on Fireworks, to me its a clearer, simpler version of PS and does everything I need it to do. So good to read that you’re also a devotee! Thanks for this, I’ll download and have a play now, I’m sure it will be very useful.
[...] iPhone Mockup Toolkit (CS4) by Meta*spark [...]
[...] elements for Fireworks: http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ Uncategorized ← Learning iOS blog comments powered by Disqus [...]
[...] [...]
[...] Fireworks iPhone UI Toolkit by the creators of Notespark (http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/) [...]
Thanks for sharing your thoughts about Flagge in der Werbung.
Regards