Creating IPhone Mockups using Adobe Fireworks

I’ve taken an introductory course in Human-Computer Interaction, and as part of it, I need to create paper prototypes of an IPhone app. We folks considered actually doing it on paper, as our instructor suggested, and decided it’ll be way too much of a pain. We found these rather useful links which told us how to use Adobe Fireworks for creating iPhone mockups.

First on is the link to download a trial version of Adobe Fireworks, or buy it, if you so wish. Here.

Then this toolkit by folks at Blogspark, where every element you need has been redrawn as a vector so that you can edit it to your heart’s content, copy-paste, drag-drop… here.

And finally, this video explaining how to go about making iPhone mockups using the toolkit. Here.

It’s really really easy. Even a total noob like me, who has no idea of what looks good and has no experience of designing goodlooking things on the Net could come up with rather slick-looking iPhone screens. It’s great that there’s a framework like Fireworks which is designed explicitly for web prototyping. Fifteen minutes into the video, and you should be able to figure out most things on your own.

Damn awesome. I’m using Fireworks much more often now.


About wanderlust

just your average books-and-music person who wants to change the world.

Posted on November 23, 2009, in websites and tips and tagged , , , , , , . Bookmark the permalink. 3 Comments.

  1. Hey good to know that you are using Fireworks! I’m a part of Adobe Fireworks team and it’s always exciting to see so many people liking the product you are working on. Lemme know if you ‘ve have any doubts or more importantly, bugs in Fireworks. I’m guessing you are using CS4, right?
    Anyway, here’s an extension by Mayur which let’s you preview your design on iPhone.
    Hope it helps. Happy designing!

    • ah, brilliant piece of software you folks have come up with 🙂 your link doesn’t work, btw. yeah, i’m using cs4. I’m more or less done with the course, so mightn’t be using fireworks that extensively. though… if i want to design webpages or something, i certainly shall use fireworks as my first option.

  2. oh hang on, the link does work. seems interesting.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: