« Faster website
word visualization of blogspark »
 
11
Feb
2009

Fireworks toolkit for creating iPhone UI mockups

adobe, fireworks, notespark, ui by sho

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.

comment feed | del.icio.us

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

  1. kuwamoto.org » Blog Archive » Fireworks toolkit for creating iPhone UI mockups (February 11th, 2009 at 1:24 pm)

    [...] 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 (February 11th, 2009 at 3:12 pm)

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

  3. Juan Sanchez (February 11th, 2009 at 3:53 pm)

    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 (February 11th, 2009 at 8:18 pm)

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

  5. sectore (February 11th, 2009 at 11:30 pm)

    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 (February 12th, 2009 at 1:06 am)

    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 (February 12th, 2009 at 1:40 am)

    Very nice work, folks!

  8. RIA Development with Adobe Flex and Flash » Fireworks Toolkit for iPhone Design (February 12th, 2009 at 5:46 am)

    [...] 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 (February 12th, 2009 at 12:08 pm)

    [...] 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 (February 13th, 2009 at 6:02 am)

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

  11. marion (March 3rd, 2009 at 7:32 am)

    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 (March 3rd, 2009 at 2:55 pm)

    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 (March 24th, 2009 at 8:17 am)

    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 (April 7th, 2009 at 10:47 am)

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

  15. Matthijs (April 26th, 2009 at 4:14 am)

    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 (May 18th, 2009 at 12:48 pm)

    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 (June 1st, 2009 at 11:16 pm)

    Thanks for this great work!

  18. How to build an iPhone User Interface prototype that follows Apple Guidelines - Surgeworks Blog (June 7th, 2009 at 2:57 am)

    [...] 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 (June 8th, 2009 at 2:09 pm)

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

  20. Geddesign (June 22nd, 2009 at 8:24 pm)

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

  21. 5 Free Resources for iPhone App Development | John Wang (June 23rd, 2009 at 12:54 pm)

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

  22. iPhone Mockup Toolkit for Adobe Fireworks - Web Development Resources (June 23rd, 2009 at 11:03 pm)

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

  23. Geoff Teehan (July 9th, 2009 at 5:59 am)

    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 (October 1st, 2009 at 11:02 am)

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

  25. iPhone UI elements to use « Mobile Journalism: class blog (October 7th, 2009 at 1:36 pm)

    [...] fireworks [...]

  26. Kyle Gach (October 13th, 2009 at 10:31 pm)

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

  27. Joshua Mauldin (October 19th, 2009 at 5:26 pm)

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