11
Feb
2009

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.

iPhone Mockup Toolkit

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

Creative Commons License.

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.

119 Responses to “Fireworks toolkit for creating iPhone UI mockups”

  1. kuwamoto.org » Blog Archive » Fireworks toolkit for creating iPhone UI mockups

    [...] toolkit is fairly complete now, so we’re sharing it with the world. You can use it to create your own mockups of iPhone [...]

  2. metaspark.com - complete iphone Fireworks PNG template « Alan Musselman

    [...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]

  3. Juan Sanchez

    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!

  4. Sarthak

    This is awesome. I am sure iPhone designers will love this.

  5. sectore

    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/

  6. Thomas Joos

    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

  7. Quentin

    Very nice work, folks!

  8. RIA Development with Adobe Flex and Flash » Fireworks Toolkit for iPhone Design

    [...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ Apple iPhone Mockup [...]

  9. Flex ID – Fireworks Toolkit for iPhone UI Mockups

    [...] 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 [...]

  10. FIREWORKS ZONE | Adobe Fireworks tutorials - Fireworks CS4

    [...] iPhone toolkit addthis_url = ‘http%3A%2F%2Fwww.fireworkszone.com%2Fiphone-toolkit’; addthis_title = [...]

  11. marion

    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

  12. sho

    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…

  13. Teddy

    This is awesome!!!
    I love designing with Fireworks, and this mockup is great for my job!
    Thanks Sho!

  14. Good Design Faster - 迅速なプロトタイプ製作のセミナーに参加しました。 | Let's talk about Dreamweaver & Fireworks

    [...] make sure you’re giving & getting the right feedback. グループワークで使ったiPhoneのFireworks CS4用のテンプレートは、metaspark.comのShoさんが作った物です。 [...]

  15. Matthijs

    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/

  16. Alex

    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

  17. Mo

    Thanks for this great work!

  18. How to build an iPhone User Interface prototype that follows Apple Guidelines - Surgeworks Blog

    [...] 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 [...]

  19. iPhone UX Reviews » Blog Archive » iPhone Sketching & Drawing Tools

    [...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]

  20. Geddesign

    Awesome! Just what I was looking for. Thanks a million.

  21. 5 Free Resources for iPhone App Development | John Wang

    [...] Fireworks toolkit for creating iPhone UI mockups by MetaSpark [...]

  22. iPhone Mockup Toolkit for Adobe Fireworks - Web Development Resources

    [...] iPhone Mockup Toolkit for Adobe Fireworks presented by Metaspark, creators of Notespark is available for download. [...]

  23. Geoff Teehan

    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.

  24. Mike Locke

    This is nice. This really shows the power of Fireworks. Thanks for sharing.

  25. iPhone UI elements to use « Mobile Journalism: class blog

    [...] fireworks [...]

  26. Kyle Gach

    Thanks so much for this. It was an enormous help.

  27. Joshua Mauldin

    Guys, thanks so much for posting this! So glad someone made these for Fireworks.

  28. ナレッジノート|HomePageShop ホームページショップ | iPhone用パーツ配布サイト «

    [...] Fireworks toolkit for creating iPhone UI mockups iPhoneをつかっていれば良く見かけるパーツがズラリはいっています。 [...]

  29. The Ultimate Adobe Fireworks Toolbox - Noupe Design Blog

    [...] 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. [...]

  30. An Explosion of Adobe Fireworks Resources - Noupe Design Blog

    [...] Fireworks Toolkit for Creating iPhone Mockups [...]

  31. Building a great user experience for your app

    [...] 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: [...]

  32. iPhone App Sketching Tools | Touchy Talk

    [...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]

  33. Des outils pour concevoir les écrans de vos applications IPhone et IPad | DigiConsult

    [...] Fireworks : http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]

  34. Iphone Application UI Mock Up for free! » xdotcommer

    [...] From TeehanLax and Fireworks from MetaSpark Filed in Uncategorized « Fast way create a secure centos 5 [...]

  35. Getting Started in iOS User Interface Design | Bitmag

    [...] Fireworks toolkit for iPhone UI [...]

  36. Getting Started in iOS User Interface Design | Web-Busines.com

    [...] Fireworks toolkit for iPhone UI [...]

  37. George

    This is not a vector file, so it’s not editable in Illustrator. It’s just a .png (bitmap) image.

  38. sho

    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.

  39. Getting Started in iOS User Interface Design | Lucas Garvin

    [...] Fireworks toolkit for iPhone UI [...]

  40. Online Software Training and Industry News » Fireworks Toolkit for iPhone Design

    [...] (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 [...]

  41. Getting Started in iOS User Interface Design | Momoto Design

    [...] 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 [...]

  42. Patrick Rushton, Interaction Designer & Flash Developer, Amsterdam » Heineken UEFA Trophy Tour iPhone App

    [...] 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 [...]

  43. Laru

    Thanks! Really great work and many thanks because it is made in FW. Way better then PS.

  44. Vijay Mudivedu

    Absolutely great piece of work!! Reduced my work by several hours.
    However, a few improvements are required in maintaining bevels

  45. 11 Great Free iPhone 4 GUI PSD Templates For Designers - Ntt.cc

    [...] iPhone Mockup Toolkit (CS4) by Meta*spark [...]

  46. Getting Started in iOS User Interface Design | Preukson

    [...] Fireworks toolkit for iPhone UI [...]

  47. iPhone GUI « studio nx

    [...] Fireworks Source Files [...]

  48. 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development

    [...] Project Page [...]

  49. Prototyping for the iPhone using Fireworks – UNITiD | Interaction Design & Usability

    [...] 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 [...]

  50. The Power of Adobe Fireworks: What Can You Achieve With It? - Smashing Magazine

    [...] 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 [...]

  51. John

    Thanks for sharing the work. Cheers!

  52. iPhone & iPad Prototyping « Chris's little Blog

    [...] here you can get a collection of vector iPhone UI elements for Fireworks CS3 and CS4 [...]

  53. Flash CS5 / iPhone | LG Laboratorium

    [...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]

  54. PandaDesignRo.com » Graphical User Interface (GUI) resources for mobile devices

    [...] Fireworks toolkit for creating iPhone UI mockups [...]

  55. Sean

    Do you have an updated version with the iPhone 4 retina display and Fireworks CS5?

  56. 開發 iPhone App 實用 Protoyping / Mockup 參考 | Apps 手機生活導航

    [...] Project Page [...]

  57. Segunda parte de la serie Recursos imprescindibles para la web móvil | Blog oficial de video2brain

    [...] 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/ [...]

  58. Recursos imprescindibles para la web móvil: segunda parte | Blog oficial de video2brain

    [...] 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/ [...]

  59. Wo war eigentlich Pipo? Plus: Eine App-Empfehlung | senäh

    [...] 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 [...]

  60. Diseñar aplicaciones para el iPhone, iPod touch e iPad, parte III: El prototipo « AlephBlog

    [...] Fireworks toolkit for iPhone UI [...]

  61. Recursos para desarrollo en Móviles | adictos.pe

    [...] 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/ [...]

  62. A Website Designer

    Thanks for that, awesome post, very handy.

  63. Luna

    Very helpful…great that it’s in fireworks – so much easier then Photoshop. Thanks for sharing.

  64. Luna

    Do you have an Ipad version?

  65. 55 Free User Interface Kits per Web e Mobile Designers

    [...] iPhone Mockup Toolkit [...]

  66. Nat

    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

  67. 55 Free User Interface Kits per Web e Mobile Designers

    [...] 39. iPhone Mockup Toolkit [...]

  68. Mae

    Thank you!

  69. Aditi

    Thanks!! This is really helpful!!

  70. ProAssist

    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?

  71. iPhonized list of mockup tools for iOS development at I.D. Design

    [...] Project Page Graffletopia Stencil Kit for Omnigraffle [...]

  72. Getting Started with Mobile App Development | Life On Lars

    [...] Metaspark: Fireworks Toolkit for Creating iPhone UI Mockups [...]

  73. Getting Started in iOS User Interface Design « IM Web Solution

    [...] Fireworks toolkit for iPhone UI [...]

  74. sho

    @ProAssist: We are not actively working on an iPad Fireworks toolkit, but maybe one of these days…

  75. 18 PSDs For Mobile Phones UI Design - EnterDays | Daily Forex and Stock | EnterDays | Daily Forex and Stock

    [...] Fireworks toolkit for formulating iPhone UI mockups [...]

  76. Abdul Hameed

    Thank you so much – has saved me sooo much time.

  77. Fireworks iPhone OS library | Taphill Studios Ltd

    [...] would be rude to not give credit to Blogspark who created the original template that i based this file on, so thanks very [...]

  78. 移动设备界面开发: 专业Android, iPhone, iPad, Palm Pre设计工具箱 | 数字媒体艺术空间

    [...] 2. iPhone Mockup Toolkit (CS4) by Meta*spark [...]

  79. Quora

    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…

  80. Free Mobile Devices Prototyping Templates – Best Of

    [...] 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! [...]

  81. Free Mobile Devices Prototyping Templates – Best Of « fbguide.info

    [...] [...]

  82. Free Mobile Devices Prototyping Templates – Best Of - Facebook life

    [...] 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! [...]

  83. Free Mobile Devices Prototyping Templates – Best Of | Best Web Consulting company in Nashik, India with Creative and Professional Website Design, Content Management Systems, Wordpress Experts, Ecommerce SEO, and more..

    [...] 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! [...]

  84. Free Mobile Devices Prototyping Templates – Best Of | Corbid Studio

    [...] 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! [...]

  85. Free Mobile Devices Prototyping Templates – Best Of | Ruturaj Pradeep Kohok | Your Web Advisor

    [...] 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! [...]

  86. Amy N Boon » Free Mobile Devices Prototyping Templates – Best Of

    [...] 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! [...]

  87. Photoshop VIP ☞ モバイル用サイト作成に便利、無料モックアップ用デザイン素材まとめ

    [...] Fireworks Toolkit for Creating iPhone UI Mockups [...]

  88. 10 psd исходников для Apple устройств | webkladez - Полезные уроки для photoshop, wordpress, joomla

    [...] элементов, которые можно встретить в iPhone 3GS 10. А этот набор будет полезен для тех, у кого на компьютере установлен [...]

  89. Free Mobile Devices Prototyping Templates – Best Of | VapvaruN | Wp Experts

    [...] 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! [...]

  90. Low-fidelity prototyping tools | Interaction Design Studio

    [...] Fireworks Toolkit [...]

  91. フリーで使えるiPad、iPhone、Android、Windows PhoneのUIエレメント | Basic Design

    [...] iPhone UI Mockups (Fireworks) [...]

  92. Best tools for iPhone mockups | Demian's Blog

    [...] Fireworks toolkit for creating iPhone UI mockups by MetaSpark [...]

  93. Design & Usability Testing Resources for Mobile « The EchoUser Experience | Thoughts and stories from our work and otherwise. Enjoy.

    [...] Fireworks template for iPhone – http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]

  94. Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials

    [...] [...]

  95. Web Development articles, tutorials, help » Blog Archive » Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials

    [...] Fireworks toolkit for creating iPhone UI mockups [...]

  96. 最佳的免费移动设备的原型模板文件下载 | Larens Design Notes

    [...] iPhone用户界面的实体模型。 [...]

  97. Object Synergy

    I am sure iPhone designers will love this.so much easier then Photoshop. Thanks for sharing.

  98. Michael

    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

  99. Toolkit Design graphique iPhone pour Fireworks et Photoshop | Ergonomie iPhone

    [...] Source : blog.metaspark.com [...]

  100. Free Mobile Devices Prototyping Templates – Best Of | HowDoDesign

    [...] 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! [...]

  101. PNG para diseño de interfaces de usuario de iPhone - Guia Fireworks

    [...] →  Blog*Spark, Fireworks toolkit for creating iPhone UI mockups [...]

  102. iPhone Mockup, Wireframe and Prototyping tools for iPhone Developers | MobiGeni

    [...] Project Page [...]

  103. iPhone app Sketching Tools

    [...] http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ [...]

  104. iOS Device Prototyping Templates Free Download

    [...] iPhone UI Mockups (Fireworks) [...]

  105. Sune

    Thanx – very useful.
    All hail Fireworks!

  106. Clark, Josh. Diseño y usabilidad de aplicaciones iPhone (2011) « biblioteca eci

    [...] 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 [...]

  107. relaxiapps

    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.

  108. 移动图形界面(GUI)开发 | 心动,不如行动

    [...]  iPhone Mockup Toolkit (CS4) by Meta*spark [...]

  109. Tapworthy Apps | sayem islam / blog

    [...] elements for Fireworks: http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/ Uncategorized ← Learning iOS blog comments powered by Disqus [...]

  110. 25 Awesome Adobe Fireworks Resources for Web Designers

    [...] [...]

  111. Tools and Links to Help You with Mobile Web-App Development | Stan Bogdanov

    [...] Fireworks iPhone UI Toolkit by the creators of Notespark (http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/) [...]

  112. The Power of Adobe Fireworks: What Can You Achieve With It? | Smashing Fireworks

    [...] 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 [...]

  113. iPhone Toolkit for Fireworks « Heathrowe

    [...] Download Toolkit for Fireworks CS3/CS4 here. [...]

  114. Explosion of Adobe Fireworks Resource | The News Block

    […] Fireworks Toolkit for Creating iPhone Mockups […]

  115. The Power of Adobe Fireworks: What Can You Achieve With It? | Internet Business

    […] 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 […]

  116. twitter

    I absolutely love your blog.. Very nice colors & theme.
    Did you develop this web site yourself? Please reply back as I’m hoping
    to create my very own website and would like to
    find out where you got this from or what the
    theme is called. Cheers!

  117. Irish

    I don’t know if it’s just me or if perhaps everybody else experiencing issues with your site.
    It appears as if some of the written text in your content are running off the screen.
    Can somebody else please provide feedback and let me know if this is happening to
    them too? This could be a problem with my internet browser because
    I’ve had this happen previously. Appreciate it

  118. download the quiet ones

    Ridiculous story there. What occurred after? Thanks!

    Feel free to surf to my page – download the quiet ones

  119. download for no good reason

    I for all time emailed this website post page to all my friends, as if like
    to read it after that my links will too.

    My homepage download for no good reason

Leave a Reply