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.

Most of the features are self-explanatory: landscape mode, adjustable text size, and search. One new feature, however, needs a bit of explanation.

Notifications

We added a feature called “notifications” that gives you a count of the notes that need your attention. This count shows up on the home screen as well as the app icon. Simple concept, right?

Well, even the simplest features have design challenges. Take a look at this annotated screenshot:

The numbers correspond to a number that is displayed on the app icon like so:

Why did we decide to show the total number of starred notes, but not the total number of all notes? And why do the unread notes show up in shared?

The war against clutter

We could have made a design that included both the total count of notes in each category as well as the count of urgent notes. Here are some quick mockups of what that might look like:

Of these four quick mockups, the last one is by far the best (to my eye, anyway), but they all have problems. And in the end, we just decided… Do people really need a count of how many notes they have in each category?

To us, the extra information wasn’t needed, and it was just cluttering things up. You might be wondering why the star count is there, and we’ll get to that later. But first…

Why it’s hard to de-clutter

People tend to judge products by what they can do, which ends up in a “feature war” where competitors try to add each other’s features. I can almost guarantee you that people are going to email us asking why we don’t show the total count of notes in each section.

People say they want all these features, and I’m sure that people make buying decisions based on which product has more features, but at the end of the day, a product that has everything is often worse than a product that makes the hard choices and only adds the right things.

So here is some of the thinking that went behind the notifications feature:

• We felt that knowing the total counts in a given section (e.g., “All”) was just not important enough to warrant the visual clutter.
• On the tags screen, we felt it was important to see how many notes you had for each tag. This helps you get rid of tags that aren’t being used very much, etc.
• We wanted to alert people to their unread notes. This happens when someone shares a note with you for the first time, or when they edit a note that was shared earlier
• We found that Notespark wasn’t working for some people who wanted to keep “urgent” notes. Normally, these people do things like stuff notes in their pockets or put sticky notes on their monitors to remind themselves to do something.

So the idea of notifications is to alert you to things you really ought to take a look at: unread notes, conflicts, and any notes that you mark as “urgent”.

Hey… I don’t think of “starred” notes as being “urgent”!

We played with the idea of adding an “urgent” mark in addition to the star. We might still do that at some point in the future. However, we are very very interested in keeping the interface simple (as if that weren’t already apparent from this long, rambling post) and we weren’t sure that we wanted to add yet another concept to Notespark.

For now, “star” means the same thing as “urgent”. If you want to use stars in a different way, you can turn off notifications for starred notes in the preferences.

In the future, we may split these two ideas apart if enough people care.