japser's blog

Synergy

2007-03-26T17:00:00.000+02:00

noun
The interaction or cooperation of two or more organizations, substances, or other agents to produce a combined effect greater than the sum of their separate effects : the synergy between artist and record company.

In the past I have referred to the relation between the name or text label of an icon and the actual icon. It's a relation that is of great and yet under-appreciated importance.

Application Icons
When it comes to product creation all developers should be aware of the fact that giving a name to a product has a lot of consequences. Names are far to often chosen based on their coolness, based on a hype such as using numbers in a name, or abbreviations. Guy Kawasaki wrote an excellent simple guide, called The Name Game, to find a name for your company or product, I'd suggest everyone to read that.

A name is THE thing people will remember you by. Users will share their experiences to your other potential customers based on you applications name, they will search on google using the name to find reviews, you are going to see your product name plastered all over the web and other places. Choosing a name doesn't have to be hard, but it's a hurdle that when failed taking could have bad consequences in the future.

The name of an application should in my opinion be a summary of what the subject and functionality of your application are. The exercise I would suggest is to summarize the applications ability in just a few words. I do that every time I work on a new icon project to acquire the essence of the application, it's not easy but it's an enormous help to find a visual metaphor.

Above are some good examples of application icons and names that have no or a very thin relation. And when looking at the combinations unbiassed I don't think anybody would be able to tell what the applications did based on their name, icon or the combination.

In a previous article called Obviousness, I wrote the following about the level of difficulty to create an icon.

In most cases the name and the functionality of the application will be the main clues where to start. One thing I can tell in advance is that it will be far easier to create an icon for a small app then for a big bulky feature saturated application. And the reason is simple: if you have to convey "subject and functionality" and the application is able to do a lot with a lot, you will have to make some good decisions. For a one trick pony it will be a lot easier to find the appropriate visual metaphor.

Ideally the name and icon of an application should repeat each other to enforce impact.

Although starting of by finding a name and icon that convey the "subject and functionality" of your application, it definitely won't imply success or ease of recognition. If your icon or name is one of many within a generic category you will want to be different on purpose. But creating a brand based on something non-obvious will take you more time and more energy to get across, simply because things such as originality and repeated exposure are then required.

Either way, when building a brand it's important to communicate a single strong message. Disco is an example where we made the conscious decision to be different, but the name and icon convey one message together and repeated exposure was used to make the icon and name meaning well known.

Toolbar Icons
The relation between a toolbar icon and it's text label are of arguably even greater importance for a user. Most applications contain over a dozen of toolbar icons and users tend to interact a lot with them. One thing we as Mac developers should be very happy with is that fact that "almost" everywhere where there is a small icon there also is a text label attached to it. In many of the Windows applications available, there are interfaces littered with tiny icons that have no explanatory text label. I can assure you that from an interaction point of view it's one of the worst things you can throw at your user. The assumption that icons are THE solution for everything is just absurd, they can be of good help though.

When an icon is chosen badly they can either not say anything and cause confusion, or say the wrong thing and cause mistakes. Even if they are well created there is no guarantee that they will convey your intended message perfectly. Especially the smaller icons (14/16/24/32 pixels) have a very limited set of messages they can convey, even more so when used without a text label.

They say "an image can say more then a thousand words" and that's exactly the problem. We tend to interpret an image based on a lot of things, culture and experience are just two of them. And icons, no matter what size they are, will say more then a thousand words when used on their own.

Deciding what toolbar items you are going to put in your interface isn't as easy as most people think. You have to ensure that your application shows "what is needed when it's needed". Since the amount of toolbar items you can show by default is limited, deciding what icon and what 1 or 2 text labels to pick that describe it's potential complicated function is very important.

Icon text labels need to be brief and there for need to be chosen carefully. As seen above a single icon text label often doesn't even come close to explaining what action it will execute. Same goes for a standalone icon. That's not bad, that's just how things are. The magic happens when you know the limitations and make sure the two, the icon and the text label, convey a single message.

Conclusion
An image can say more the a thousand words, and a word can say more then a thousand images. When used together in the right way they can be a powerful filter to convey one targeted message.

Pixel Bits

2007-03-23T13:17:00.000+01:00

For those reading my blog and interested in interface and icon design there are two websites I have been wanting to refer to for quite a while.

Jorn is our intern at madebysofa, he has been with us since the middle of february and he will stay with us until the summer. He is a studies interaction design at the Willem de Kooning academy in Rotterdam, and has joined us in our quest to create better software experiences. As part of his internship he is (trying) keep his weblog updated with some articles about the things that he does with and for us.

Hugo is a good friend and colleague at madebysofa who has since recently been very successfully doing a lot of icon design projects for a variety of clients.

We at madebysofa are very happy and glad that we have such an experienced team when it comes to visual and interaction design.

Night Sight

2007-03-22T14:30:00.000+01:00

This time I won't apologize for the fact that I haven't written any post in the last few months. But I will briefly give an overview of what I have been doing.

madebysofa
Late last year 2 friends and I set up a new mac software company called madebysofa. We then also released our first product called Checkout, a brand spanking new and easy to use point of sale for the mac. The product is a result of about 2 years of active development. We now work 5 days a week on further developing this product.

The other side of madebysofa is based on consulting and collaboration. Due to the composition of our group we are capable of providing professional interface and interaction design as well as marketing and technical consulting for software developers. We have done this and still do so for a large variety of small and large software companies around the world.

Disco
Disco is the roller-coaster project I initiated with Austin Sarner half way last year. Re-inventing disc burning wasn't easy but the result is something we are proud of.

jasperhauser.nl
In the near future my website and the services I provide will go through a change. It will basically mean that I will no longer provide the services under my own name and company, instead they will be moved under the madebysofa label.

Pixel vs Vector

2006-11-13T14:13:00.000+01:00

Last week Daniel Jalkut (Red Sweater Blog) touched some of the more practical challenges of resolution independent user interfaces. This weekend Sven-S. Porst (Quarter Life Crisis) wrote a more in depth and interesting post on this, slightly confusing form some, topic.

And even with all the new technology we have, the basic facts about low-pixel count situations remain true: Graphics in which those few pixels are carefully and consciously placed will look better than those created from generic vector graphics. Only in a few lucky situations we will be able to get equivalent results from cool vector graphics tricks.

Sven-S clearly understands what he is writing about. It's not about the system being able to show bigger icons and interface elements, it's mainly about providing more detail in the same screen area using high density displays in the future.

While some objects such as buttons and simple graphics will indeed be good to create using vectors, creating application and toolbar icons in vector is generally speaking a bad idea. Not only because drawing vectors requires a lot of GPU cycles, but also because some things just can't be done with vector compared to pixels.

Edit: The iconfactory posted some great additional information for developers. Make sure you also read their previous post on the subject. And while you are at it don't forget to read my previous post.

Fire Starter

2006-11-07T15:30:00.000+01:00

This summer when Austin and I started talking about Disco, Disco was just a Disc Copy application, hence the name. Born out of the wish to create an app that made some burning tasks easier, Disco soon became more the just some app that could copy discs.

I always had the hope that the name "Disco" would be an internal work name. But as the project came along we all realized the strength of the name. Especially in light of the effort we made to make the app "fun" to use. But he prospect of having to create an icon for an app with that particular name wasn't going to be very easy.

Obviously the corny stuff like just a disco ball, colored lights, just about the whole Saturday Night Fever prop department passed our thoughts. At some point we thought about changing the name to something simple and descriptive such as Inferno, AfterBurn and what not to make it easier to create a visual identity. But instead of making it easier on me, that side track only made it harder to create something interesting and unique. With all respect, making yet another "disc with fire" icon wasn't going to be a real challenge.

Clearly, choosing a name for your project isn't easy. I think many developers underestimate the importance of choosing a good name for an application. There are many things to keep in mind, such as choosing something that is not yet in use, or choosing something that is copyright- or trademark-able. Choosing a name that is catchy and sticks to your mind, or one that is completely unused and very descriptive is hard. A combination is obviously best, but certainly not easy.

Back to the icon. So as is clear by the above I did not want to create the obvious for the stated reasons. Disco is not an average app, so we didn't want an average or corny icon. Which left me with quite a challenge.

Early on, even while we where researching and deciding on the final name, I sketched down a version that combined both the name and the functionality. Normally I would only focus on conveying the functionality, but as pointed out earlier I wasn't convinced that would result in something that would embody what Disco stands for.

So a disco ball with flames it was. I asked, my good friend and colleague at Madebysofa Hugo van Heuven, to create a 3d model of a disco ball for me as a starting point for the icon. He created an amazing photorealistic model and rendered over 10 differently lighted versions that we then combined in photoshop to create the basis of what was going to be the Disco icon.

3 months later, on a trip in France, I finally sat down to work on the final look of the icon. I had been doing a lot of research into how to approach the flames, and initially I wanted to do realistic flames, but for some reason that didn't feel good. It was too easy. I also spent a lot of time sketching out the directions of the flames, I wanted the flames to be very vivid and alive as if they where trying to grab the ball. I worked 2 days on getting the flame shapes to look like I wanted them to, when finally deciding the 3 flame was simply best.

Because I didn't want to create realistic red/orange/yellow flames, I already decided that the flames where going to be look like plastic, partially inspired by the Speed Download icon. I found myself choosing between a dark blood red color or just going with the black I used to set up the flames with. And I think looking back, choosing for the black flames fits best with the whole black/white theme of the application.

So there you have it. A very butchy dark rock and roll icon if I may say so. An icon that, even when used small, stays remarkably easy to recognize. And best of all, because it's such a simple and intricate (read unique) shape it was very easy to create a 2 color logo version for the website and print materials. I especially like how the basic shapes could just as well have been a disc with fire. It's funny to see how an object shape can be filled up with something that is entirely different from what one would expect.

The icon is just one piece of the puzzle. It's one very important part of the over all branding that makes Disco so unique. If you want to make a difference in the Mac software scene these days, focusing only on complying to interface guidelines and feature sets will no longer cut it. We are certainly not advocating the creation of applications that lack in functionality but look beautiful, creating an app that has great functionality is and should always be step one. With Disco, we tried very hard to make the application as simple to use as possible while adding tons of new and existing features under the hood. For some further reading, I'd suggest that you check out Jason Harris's post on balancing UI and features, available at MyDreamApp.com.

Edit: Some people have asked asked me why the icon "is so small", well the icon isn't. It uses the same canvas size as any other icon. It's just that compared to a circle or a rectangle the Disco icon will "seem" small. You can read more about this subject in my blog post about the creation of the Camino icon.

Finally

2006-11-01T10:19:00.000+01:00

Finally after a long time not taking time to write posts, this post should be the start of many to come soon. In the last 2 months a lot of things have changed on my side. Not only has Disco had a mind blowing kick start, but Checkout is also shaping up to become a very promising project to say the least. In the mean time we are also starting up a new company called madebysofa, which on itself takes bucket loads of time as well.

In the coming weeks I will do by utter best to write some posts on the creation of the Disco interface and icon. And I will also spend some time writing up something on the development of Checkout at madebysofa.com. So come back soon!

The Xtorrent icon

2006-09-12T11:59:00.000+02:00

A while ago David Watanabe announced he was working on a new application. Soon after that announcement he contacted me for the design of a new icon.

Now I'm never going to pretend to have created "the" best icon for an application, I always create what I believe in and what the client likes as well. The amount of users for an application such as this one will be so diverse that I will never be able to satisfy them all. Having said that, Xtorrent is the kind of application where you just can not easily depict the application's subject and functionality because what the app does just isn't simple. So creating an icon for this app was challenging both because of the attention it already had because of Davids previous applications and because of the nature of the application.

Not so long ago I wrote an article about Obviousness of an icon where I said the following:

...in a lot of cases (the bigger apps, complex technologies) there simply isn't any easy or simple way to visualize what the app does. In those cases you might just have to come up with a more logo or pictogram like image. Those are the icons that heavily rely on their style.

So the treatment of this challenge was pretty clear from the start. First I looked at the already existing bittorrent icon landscape and quickly realized it was one that hadn't had much attention yet. The bittorrent project logo wasn't very usable in my opinion. Secondly I decided early on that I wanted to stay close to the look and feel of the Acquistion icon.

Bittorrent is a file sharing technology. Mostly people see that as being able to download files (leech), but one also has to make a file available to download (feed). One of the key strengths of bittorrent how ever is that every downloadable file consists of small pieces, and as soon as you have successfully downloaded one of the pieces of a file it can be shared to others. Dramatically increasing the speed at wich people can share something.

Fairly quickly I bumped into the thought to just stick with a simple arrow kind of logo type. I have always been a big fan of the iPod shuffle adds and the shuffle pictogram. And finally saw a way to create something slightly similar.

So from the above bits and pieces I deducted 3 aspects I wanted to be in the icon. 1) feed, 2) leech, 3) pieces. The result of this combination is the X logo type. I then combined that with a modular object that displays the Xtorrent pieces status view to create an actual appealing icon.

Disco News Update

2006-09-08T19:30:00.000+02:00

Yesterday morning Austin arrived from the USA to stay here in Holland for a couple of months to work on Disco and other mutual projects.

We immediately started work on Disco and are looking forward to launching the beta and other pre release services soon. Until then, we encourage you to check out the recently released blog at http://www.discoapp.com, which will provide you with frequent updates on how things are going.

Next week we will be traveling to Paris for the Apple Expo to meet up with fellow developers but also to do some business.

Maczot Disco Pre-Order

2006-08-18T22:03:00.000+02:00

While we can't tell you much about Disco yet, we already have a special deal for you. You can now pre-order Disco for only $4.95 (one time only price) and you will receive it as soon as it is released (Fall 2006). In addition to the discount, you will also be admitted to a pre-beta that will open soon.

The only catch is that Maczot can only sell 2,000 of these pre orders. So buy fast before they run out!

Still have no idea what it is? We're not surprised. So here's what we can tell you:

Like AppZapper, it is a simple and sexy utility

It has 3d particle effects
It can take advantage of the motion sensor on a laptop
It can detect when you blow in the microphone
The above 3 features are totally unrelated to the core function

Edit (20-8-2006): All copies are sold out.

Bigg Ass Icons?

2006-08-15T09:20:00.000+02:00

During the World Wide Developer Conference last week Apple quietly made some announcements concerning the future of icon design and interface design. We all read the articles (1, 2, 3) about resolution independence but in my opinion nobody really explained the consequences for software developers.

In short, every icon or image resource contained in an app will be 4x more detailed. Yes every icon and resource. The good news is that Apple indicated not to expect screens that support high resolution before 2008.

So what does this mean in detail? To start with app icons, support will grow from the default size of 128 pixels now to a huge 512 pixels in square. And for all the other icons (toolbar and list icons) the same will happen. 32 pixel icons will support 128 pixels, 24 pixel icons will support 96 pixels, and 16 pixel icons will support 64 pixels.

The bad news is that this change will cost an enormous amount of money and time for developers. I know for a fact that Apple themselves are hard at work at updating and recreating a lot of icons to conform to their own standard as we speak. And I doubt that they will be done by the release of Leopard.

Basically what it means for a designer like me is that everything is going to take about 2x to 4x longer to create. Especially for the toolbar and list icons. But even creating 512 pixel application icons is going to be a very costly undertaking for small developers.

So what to do? My advice would be to just stick to the current standard. A lot of people are very confused by the resolution independence thing while in fact it's really simple. A 32 pixel icon is 0.4 inch by 0.4 inch, the new 128 pixel variant will be squeezed in that same 0.4 inch rectangle. Because by that time we will have screens that have a higher resolution then 72 dots per inch (dpi), you will be able to see more detail in that same 0.4 inch rectangle. So the icon will not grow in size, but instead will grow in detail and dpi. If you don't provide a more detailed 128 version it will just show the 32 version, meaning you will just see the icon as you see it now on your current display. Nice an pixelated, no harm at all. So this high resolution support is not created to allow zooming in on the interface, but is contrarily implemented to allow more detail at the same size.

Within the same visible screen area, the density of pixels will be raised to provide room for 4x more pixels.

A note of interest; the 72 dpi standard was chosen based on the capability of the human brain to smooth the pixel roughness at that resolution. Similar to how the human brain smoothes the motion in between 24-30 frames per second video material. So technically speaking average users do not need these high resolution screens. It's an invention that will allow visual professionals to finally proof their material on screen instead of on print.

As far as those beautiful new screens are concerned. Apple has indicated they will start appearing in 2008, and from what I can tell those screens will not be for Joe average. Those will be high end visual post-production (photographers, graphic designers, movie makers) screens, and will most probably cost quite a few dollars.

But as it stands Apple hasn't released much technical documentation on this subject, so we have no idea how they will technically implement these changes. My guess would be that they will upgrade the .icns file format to support larger icon resources. Developers will then need to start using .icns files everywhere so that the system itself can select the correct sized resource just like it does now for application icons in the various file views. Or Apple could further support multi page .tiff files for toolbar icons, maybe a combination like now. The only big question that remains is how we have to handle other image files. I guess we will just have to wait and see.

Obviousness

2006-07-29T21:45:00.000+02:00

All art is subject to the subjective thought of the viewer. What one person full-heartedly loves will be completely disliked by another. This fact makes it hard to create art for commercial purposes. A commercial instance will always want a creation that will positively support and promote their product and will be liked by all of their customers. In some cases they even want proof. A creator will always want to make something creative and original while also trying to please the customer. Every visual communicator will recognize these challenges and will struggle with them.

So the question arises, how does one make sure that an icon properly conveys the application's subject and functionality while also being generally liked? Unfortunately, I haven't yet found the answer to this question, and I doubt I will ever find the one answer, but I will keep looking for it.

There are however some subjects, some technical some theoretical, that are very useful to talk about in order to better understand how to create a good icon. Previously I wrote about icon differentiation, and I intend to write about a variety of similar related subject the coming month. For those in search of more technical articles I found these that go into some of the details of icon design: Bitmap vs. Vector in icon design, Scalable Icons, Icon Design Tip: weight, Creative Bits: OSX Toolbar Icons.

This time I want to talk about obviousness, which is a strange word in the context of design. It's something you would normally want to stay away from, as the consensus is that art is about innovation and being original. But I'm not talking about the "negative" obvious, I'm talking about the positive one. I treasure the books, websites and gadgets that are easy to figure out while having a distinct look and feel of their own. It's the obvious where you think: "how could it ever be anything else".

Some good examples of where the icons have, in my opinion, the perfect visual metaphors.

For any kind of interface with humans, obviousness is of great importance. Decreasing the amount of time it takes for a user to understand what you are trying to say, should be the goal of any good interaction/interface designer and, therefore, any icon designer.

One of the hardest, if not the hardest, part of designing icons is finding strong enough visual metaphors that explain everything in one single image. A lot of designers I meet think designing an icon is easy, and technically it most certainly is nothing more than styles and render tricks. Just try to copy an icon from A to Z and you will see how easy it is. After you have done that try and create a new original icon for any of the applications you use daily. You will quickly discover how hard it actually is, even when you exactly know what the app does, to design a new original icon for them. Apart from coming up with something new, there is a lot more to it than just good looks.

In most cases the name and the functionality of the application will be the main clues where to start. One thing I can tell in advance is that it will be far easier to create an icon for a small app then for a big bulky feature saturated application. And the reason is simple: if you have to convey "subject and functionality" and the application is able to do a lot with a lot, you will have to make some good decisions. For a one trick pony it will be a lot easier to find the appropriate visual metaphor.

But in a lot of cases (the bigger apps, complex technologies) there simply isn't any easy or simple way to visualize what the app does. In those cases you might just have to come up with a more logo or pictogram like image. Those are the icons that heavily rely on their style.

Some examples where it was obviously hard to find a good simple visual metaphor, style was used to compensate. But they were smart enough to leave clues in both the name and the icon.

But between these two extremes, simple/obvious and complex/abstract, there is a fascinating area of opportunities. And from experience I have learned that in that work space the most interesting icons are created. As mentioned in my brief interview with Gil Turnbull for MacDevCentre:

I guess there are two extremes in icon design: photo realism (Aqua) and abstract. Then there is the middle area, more a fantasy area; that is where the fun stuff happens, like the Adium or Docktopus icon. No-one in their right mind would make it or think about it; the sport is to do it nonetheless.

To be honest I do have to advise everybody to first and for most try and create an icon that simply tries to depict the applications subject and functionality. But just depicting what an application can do is not always that sexy, can even be dull, and can be impossible in some cases. The danger however of the middle area is that the icon can loose any connection with the actual application. In some cases only the applications name can be recognized in the icon, and sometimes there isn't a single clue.

It's funny how all of these icons have animals incorporated in them, but that is besides the point. Originality is not an issue here nor is recognizability. But based on the icons not a single human being could be able to tell what the application does. Even if you provide them with the application name people wouldn't get much farther then a guess.

Years ago Jeff Raskin wrote in his book "The Human Interface":

Instead of icons explaining, we have found that icons often require explanation.

So where do we draw the line? Is there even a line? Everybody has their own opinion on what icon they like and which not. It seems that users that have been using computers for a while no longer care if an icon explains anything. Probably because they have become used to the fact that a lot of icons are really bad, and so they no longer expect them to explain anything, and just rely on their visual recognisability. Or maybe they don't care because explanatory icons are not sexy or fun. Those icons don't really stand out, but in stead only support the app. But for novice computer users icons and application names such as the ones shown above are of no help what so ever.

It's for this group of people where obviousness is of great importance. But if it's so important for them it should be just as important for everybody else. Icons were introduced to replace combinations of words and sentences, but if the meaning of an icon or an app name isn't visible how is one supposed to understand anything?

Icons are objects that have to be constructed based on what their goal is: visualize meaning. Step by step you should decide what works, what doesn't, how things can be improved and what step to take next. Rarely if ever is designing an icon something that is successful in the first few steps. The result might look good, but that should never be a goal. Icons should always have a natural balance between being functional and decorative.

Always do what "works best", guidelines are not there to rule but to guide you. Even though the Docktopus icon doesn't follow the above guides it's still my personal favorite icon.

State of Affairs

2006-07-25T09:45:00.000+02:00

I haven't had much time in the last weeks to write any new posts dues to the enormous amount of people that came over for work, and the enormous amount of work that resulted from that.

First Austin and Brain where here for two weeks, and Austin will return in September to stay here for another three months to further work on upcomming projects. We have a post almost ready about that little trip. Meanwhile I'm neck deep in another software project with local friends Koen and Dirk. Then the Cultured Code guys (Jurgen and Oliver) decided to come over to also start working on a new project I promised to work on, we worked a full week on that setting up the basic interface ideas. The mekentosj guys (Alexander and Tom) also came over for a quick meet and greet, perhaps we will do something together in the futured.

(Austin, Dominik, Brian, Martin, Koen, Jasper) A picture of our road trip visiting the CodingMonkeys in germany a couple of weeks ago.

The results of all the projects have been more than satisfying so far. But it's been a bit busy and I'm glad that I can go on holidays next week. It's been a "CocoaDevHouse" like no other, and I'm sure Blake would be proud :D. First I have to help out some developers who insist on releasing their apps round the Apple WWDC.

When I get back from holidays there are a bunch of project awaiting as-well. The project described above will all continue, I will also embark in a pretty big project with Phill Ryu. More on that later.

Yesterday Gil Turnbull from O'REILLY macdevcenter posted his story about what makes a good icon for which he did an interview with me and Jon Hicks a week ago. It's a bit short for such a relatively complex subject, but good non the less. Interestingly I have been working on several separate posts about icon design which I hope to finish and post during the holidays. Check back for that soon!

Autobahn Disco

2006-07-03T01:00:00.000+02:00

Straight off the Autobahn... another preview

I've been working away with Austin and Brian on our new project and we're prepared to show off a bit more of it. This week we're heading down to meet up with some of our German developer friends, including The Coding Monkeys, the The Xylescope Guys, and Boinx Software. So while we've been working away in the back seat of a fast going car on the way to Southern Germany, I've put together a nice little preview of our progress seen above.

Amsterdam Disco

2006-06-29T15:00:00.000+02:00

Last thursday I welcomed Brian and Austin (AppZapper team) to the Schiphol airport. They are staying in Amsterdam for two weeks working on several new projects. Check out this preview:

Besides that we are trying to have as much fun as possible while cranking out all the projects on time.

Bits and pieces

2006-06-16T23:45:00.000+02:00

During the last months I have slowly been collecting interesting articles, weblogs, and websites related to UI design and mac development. Since there aren't many people that write about these subjects anyway I thought it would be interesting to share them. I'd also like it invite any of you who have related links not in my list to share them by commenting about them.

David Weiss: Very interesting weblog from one of the MacBu members working on mac Office, he offers a great and hard to find look into high end mac development.

Jensen Harris: Yet another very valuable weblog from Microsoft. It goes into great detail about the user interface changes for the new version of Office. It contains many in depth articles about a variety of interface changes, I learned a lot from reading the posts written not only by Jensen but also by other Office team members.

Daniel Wilson: Daniel doesn't post often, but when he does he writes about interface problems on the mac and provides visualized solutions with good argumentation.

John Gruber: Once in while he will spend some of his writing on general mac usage and interface issues, and when he does it it's done with great detail.

Susan Kare: Any interface or icon designer should know who Susan is and what she does/did. And she has the best icon t-shirts around.

Folklore: Is a web site devoted to collective historical storytelling about the development of the original Macintosh. It captures and presents sets of related stories that describe interesting events from multiple perspectives, including some that detail on the development of the original mac interface and icons.

Wil Shipley: Was one of the people behind OmniGroup and now the man behind Delicious Library. His weblog is a must read for any mac developer.

Steven Frank: One of the guys behind Panic. Great articles about mac software in general and once in a while about their own software and the history of it.

Cocoa Radio: When Blake Burris has time he does awesome interviews with mac developers around the world, I learned a lot from just listening to his podcasts. And with his new initiative CocoaDevhouse he is really doing some great things for the mac development community.

The Iconfactory: These guys are the ones behind a lot of the Mac OS X icons and the look and feel of the WinXP icons. I'm in particular a big fan of the icons by Dave Brasgalla. It was an honor to design some of the graphics for the MacThemes insider with Dave.

Jon Hicks: Anybody interested in design and mac software should stop by here at least once in a while. If only developers would turn to people like John to let them do the design, software would have a much better image.

Firewheel Design: Particularly specialized in web "2.0" icon and interface design, I particularly like the post on pixel vs. vector icon design.

Resolution Independent UI: I'm not entirely sure why but I don't think anybody has yet pointed to this Apple page that clearly outlines what the current state of Resolution Independent UI is. And also allows to make reliable guesses on what to expect in the future. Only question I have is what image format Apple will use to store multiple sized UI elements in, I'd guess multi page tiff's for now.

Some other links: Apple Human Interface Guidelines, Windows Vista User Experience Guidelines, Windows XP Visual Guidelines, Java Look and Feel Design Guidelines.

Daniel Jalkut: Former Apple employe who now has his own buisness. Regularly writes articles on interface design and the importance of it.

Coverflow part 2

2006-05-28T21:45:00.000+02:00

Last friday Andrew Coulter, the designer and "inventor" of Coverflow, did two great posts on the future visual presentation of Coverflow.

He created a custom disk image icon and a custom disk image background to give the application a much more proffesional look and feel. He also did a great more in depth post about the creation of the icon and the cover art he created for the icon, showing high resolution versions of his art. Andrew is clearly a gifted graphic designer.

I really hope the guys will further improve and develop their already wonderfull application.

Differentiation

2006-05-26T16:00:00.000+02:00

Apple products are rarely leaked, so I was a bit surprised to see Dashcode being distributed on the web. It's not a big surprise to see this app, as there have been screenshots of it on the web for very long already.

In the early days of 2005 I was working with Austin Sarner on a project called WidgetKit, which was intended to be similar to the then non-existent DashCode. Austin decided to stop actively developing it as he figured it wasn't an app that would sell well enough. Never the less, the application icon for WidgetKit was made.

I just can't keep myself from being a bit surprised by the fact that the Dashcode icon from Apple resembles the WidgetKit icon I made closely. I'm not accusing anybody here, since I have no idea when the icon was created, and it really doesn't matter, but the similarity is striking none the less.

One of the most important things I learned while creating application icons is to use visual differentiation. When starting on a project I always take some time to look at similar applications and their icons to see what I could and should not create. I tend to look at strong visual elements I can use, and I look for key attributes I should stay away from. The important thing is to ensure that your icon doesn't resemble a competing application's icon, but there is no need either to reinvent the wheel for every icon. It is important to stay away from a situation where users could become confused about about what application they are looking at. That also explains why it's so difficult to create a "new" icon for applications such as word processors and image editors, since there must be hundreds already.

working on the Camino application icon I was confronted with a similar situation. On the one hand, I wasn't one of the biggest fans of the Chimera icon, but I knew that I couldn't make yet another globe/sphere-ish or compass like icon. Too many other browsers already used that style, which meant that using it would create a situation where users no longer would be able to distinguish it from the other browsers.

The same applies to the work I did on the Camino toolbar icons. The goal was to enable users to differentiate the application not only from the application icon but also from the toolbar icons. Users that have requested for Camino to use more Safari/OmniWeb/FireFox like icons don't understand the underlying problem.

When creating icons and an interface for any project, you want the ensure that what you make will fit within the system's look and feel, but will also differentiate the application from other applications.

A group of applications that would all use the same toolbar icons, window style, and window layout would be very annoying as users would no longer be able tell at a glance what is what. It's a difficult balance to maintain, and it's one of those things that make icon design so much harder than people think.

The differentiarion rule also explains why Apple isn't afraid of trying new interface looks every time they release a new version of their Mac OS or iLife suite. They know that visual differentiation between applications allows the user to find his/her way through the system. Too many people think that that the User Interface Guidelines are a law, but in reality it's nothing more then a "guideline" or a rather good starting point.

Update: I just uploaded an screenshot of the UI of WidgetKit. Some have asked me if we ever released WidgetKit, the answer as written in the text is no. Oh and please do not hesitate to comment on grammer and spelling improvents ;)

Update 2: Perhaps I should have clarified two things from the start. On the one hand Apple could have known that I created an icon that looked similar to Dashcode because it's been on my icon website since last year. But I don't expect them to check every website to see if anybody made something similar and like I indicated, it doesn't matter because WidgetKit never came out as a product. On the other hand I do think that Apple did less of a good job at differentiating the Dashcode icon from the xCode icon. I for one added a big page curl, I used a tool that clearly has a different shape, angle, and placement. But I left it out because I didn't think it was interesting.

CoverFlow icon

2006-05-20T01:00:00.000+02:00

In the summer of 2005 I first read about the CoverFlow project, a colaboration between Andrew Coulter and Jonathan del Strother. The arcticle sounded very promising and so I was immediatly intrigued.

Andrew did a blog post in December 2004 describing his idea for a new way to go trough an iTunes digital music library. In what I would call a perfect colaboration Jonathan decided to write the application Andrew described. The result is simply astounding, and it's potential still remains to be discovered by many I believe. The idea of being able to visually and easily flip trough your album collection covers, in a way that's completly in sync with how we do it in real life, is just amazing.

As you might know I enjoy helping out project with potential (Camino, Adium, GNUstep) to ensure that their visual representation re-enforces the product as a whole. In the case of CoverFlow their wasn't any work needed on the prestine interface Andrew and Jonathan created, instead the application really lacked a very good application icon. So that's what I went and made for them.

Given the fact that it's just a tool enabling you to find things in a visual way, the icon needed a similar simple approach. It needed to be something that was as visually appealing and smart as the whole applications mataphor and interface. The descision to do the DJ record flight case was made quickly, mainly because that's where the project inspiration came from in the first place.

While working on the icon I came up with the idea to dynamically load the users currently playing albumm cover and composit it on the icon in the dock. It's a small detail but in the bigger picture it just lifts application to a whole new level of sophistication. This is something Jonathan is looking into, it's not yet implemeted sorry, but it should come soon.

Another nice detail is that while normally I do all the work on the icon, I invited Andrew to create all the album cover designs for the icon. Andrew is a graphic designer and so I thought it would be a nice idea to merge some of his work in the icon aswell. And I must say that I really like the way it turned out. Collaborations like these should happen more often.

I'd like to thank Jonathan and Andrew for creating such a wonrderfull application. And I would like to urge them to further develop it. I have the destinct feeling that this way of browsing visual instances is more powerfull then they thought.

For those who can't wait for the Jonathan to update the build with the new icon I prepared a .icns file you can use to use the icon now! Have fun.

A history of the Camino application icon

2006-05-11T23:44:00.000+02:00

In continuation of my previous article on the history of the camino interface I thought it would be interesting to write a bit about the application icon. The visual point of recognition of every icon. Every once in a while a burst of critique arises from the Camino user groups concerning the Camino application icon. Heck the critique has been there from the start. Goes to show how well people like even the slightest change ;)

I just landed jasper's updated icon set, available to all the next time we get a working nightly (still prodding people about that, progress is being made).

Thanks again to Jasper for all his hard work and openness to comment. I sent him back to the drawing board (literally) more times than I could have handled were I in his shoes. Nevertheless he stuck with it and produced something that I think everyone can agree is a huge step in the right direction. Just try to keep that in mind when you're thrashing the new look :) - Mike Pinkerton

Based on feedback the main issue seems to be that people think the icon "is too small". But fact is that that's just a perceived issue. The icon uses the full 128/128 pixels canvas. As shown in the images below all 3 use the same square 128 pixel canvas, non the less the first icon seems to be much smaller. The issues is caused by the spikes, resulting in a smaller surface actually being used by the icon.

This also shows why so many icons either have a square or circle as their base shape. Those shapes just make very good use of the canvas, that's for sure something of great importance for an icon. On the other hand it does create a situation where the Camino icon stands out in the Dock because it appears to be smaller. We can argue that this is an issue or we can say that it's unique property of the Navigator/Chimera/Camino icon shape.

When, 2 years ago, I started working on creating the new look of what is now know as the "Camino 1.0 theme" redoing the application icon was a major part of the effort. Early on I also had the same problems with the icon, I argued we could use the canvas much more efficient. But the main problem in creating a new and unique icon for a web-browser lies in the fact that so many have already been made. And most of the obvious visual metaphors had already been used. Prior to the release of Apple's Safari, I had already made a compass icon for Camino. It was very bad and was certainly not the first. But it was the only really good visual metaphor left for a browser. Finding a new icon metaphor or logo for such a common application is really really hard. Since Apple had already released Safari we didn't have much choose other sticking with the icon Ugo Dantas De Santana made for Camino back when it was called Navigator.

To be honest I had really hoped I could come up with a stunning new icon for Camino but that thought was quietly smothered by Mike Pinkerton. Initially I had my doubts about his arguments, but looking back I think it was the best way to go.

You have to keep in mind that Navigator/Chimera was the first amazingly fast browser for the then very young Mac OS X platform. Most of the people who used Mac OS X in those days knew or used Navigator/Chimera one time or another. The application had a reputation and was well known. And that application had always had the same globe/compass combo icon.

When you have such an established picture mark you just don't switch to something else, especially considering the fact that nobody else used such a unique icon shape. Changing would be like McDonalds choosing a new font for their M that would have spiked arches instead of round ones. Or Apple taking out the bite of their apple logo. You just don't change the unique shape attributes that create the distinct visual identity of the logo. Accept of-course if the logo is so bad you just don't have any other choose. But that wasn't the case. So instead we choose for redoing the icon from scratch keeping only the unique shape as a base.

We tried a lot of things before we came to what we have now. We wanted a style that looked more like the style Apple introduced for Tiger (Mac OS X 10.4). We also wanted to get rid of the America's centric globe, and instead we choose for something that vaguely looks likes continents. (yes there here actually people who really didn't like america being in the icon). We also borrowed the .Mac globe look to emphasize the internet/network aspect of the application because only a small amount of people actually saw a compass in the icon. And finally most work went into creating all the sizes we needed of the icon. We actually have 1024 all the way down to a 16 square pixels versions of the icon. That is a pretty huge size difference. And the hard part is making sure the 16px version looks/feels the same as the 1024px version.

Only recently I introduced a monotone version of the icon. I created this icon mainly to have a simplified version that could be easily used on very small and solid colored canvases. Just using the base shape and an extra circle for the globe did the trick. It's so simple and yet works amazingly well, while still being recognizable as the camino icon. This version of the icon can be seen as the website icon, and on the .dmg icon and .dmg background image.

So you see how a thing that is perceived by some as a weakness, is actually the main strength of the icon. You just need to see and use it. There is always room for improvement but I think we succeeded quite well.

The Mighty iMac

2006-05-06T20:00:00.000+02:00

It was only 3 days after the presentation of the new Intel based iMac that I placed my order. Why so soon I guess one could ask? Normally I tend to wait for a 2nd generation before I buy it, just like we should all do, but I took a chance knowing that Apple is very good at making reliable hardware.

Ever since Apple said they would swicth to the intel processor I wanted to get my hands on one. The main reason for that was that I guessed I would finally be able to free myself of my dull litle box. I figured that the day I could run my windows system on the new intel imac where closing in. Especially since apple didn't do anything ground breaking to prevent it to be done technically. It was just a question of some one finding the way to hack it in.

I gues you can imagine I was pleasantly surprised when Apple came out with Boot Camp. I'd almost say I knew it was coming. I supported the WinXpOnMac effort alongside many others, but it was clear that it needed a lot of work before I would sacrifice my mac to that hack. And let it be heard that this mac hardware runs XP extremely well and fast. It's all I wished for and more.

The Intel iMac is an amazing machine with even greater speed (I have the 20" version with the 256mb graphics card, and plenty of ram). Especially considering the fact that this is a consumer product and not a proffesional product, even thought in some cases it out performes the current pro products. That fact on itself makes the iMac all worth it.

I had only 3 nuances with the machine, 2 have been fixed by Apple trough software and firmware updates.

Slow airport connection speed. For some unclear reason the airport connection speed on the intel iMac was heavily weighed down. Many many users complained about it to apple, they never officialy responded. But non the less they fixed the problem in the recent 10.4.6 upgrade of OS X. It would have been nice if they told us what it was and how they fixed it.
The very first hour of usage the keyboard and mouse showed eratic behaviour. Now and then the mouse and Volume keys on the keyboard would stop responding. Fortunatly that issues somehow solved itself early on. Non the less Apple recently released new keyboard and mouse software.
For some reason the security screen that I have set to appear after a wake from sleep tends to have some render issue, showing the window pixels all scatttered and smeared over the top part of the screen.

Particularly issue one bugged me as I had to transfer files to my iBook once in a while. But since it has been fixed, I really don't have any other "real" issues anymore.

I'm still very excited about the machine! The sound qualty is surprisingly good and loud for such a compact housing. It looks awesome, the 20" screen is simply fantastic and OS X runs like a real tiger. What else could I wish for apart from an Intel native Adobe CS suite? To bad I need Boot Camp to run that at an acceptable speed ;) Bravo Apple for providing such a good product and such good service.

Some other good reviews of the Intel iMac from: Arstechnica, Macworld, Macintouch.

CocoaDevHouse Amsterdam

2006-04-25T19:00:00.000+02:00

Initiated by Blake Burris from CocoaRadio and organised by Katie from MacTones, last Friday and Saterday there was a cocoa community meeting here in Amsterdam. Normally that's not my cup of tea, those geek meetings ;) Non the less I went as it was an opertunity for me to meet some of the rare to find cocoa developers in my home town.

I met with StuffMc from the PomPomPom podacts, who's a great guy who does a lot of fun stuff. We might do a podcast on icon and interface design in the near future.

I also met Dirk Stoop, I saw him do a presentation on a project called Etalage he has been working on with a friend, it looked really interesting. I could see the project needed some icons and perhaps some UI consulting. So I walked up to him and we had a really nice talk the next day, perhaps we will work together in the future.

All in all it was a nice happening, nothing ground breaking. And considereing the fact that I was only able to stick around for 3 to 4 hours, due to work, I had a great time. I'd be all for developing the CocoaDevHouse Amsterdam into a more productive happening with more clear goals, instead of it being a geek hang out.

Some pictures of the event can be found on flickr.

Tags: cocoadevhouse - cocoadevhouseamsterdam

No Comment?

2006-04-24T12:23:00.000+02:00

I was preparing a post on how i was surprised that I had so little comments on by posts. I mean I seriously thought it was something strange. And then today I accidentally found a preference on blogger called "Comment moderating" which I turned on, as I asumed this would allow me to edit comments if needed. This caused the comments not to show up on the blog until I allowed it manually. Argh I suck. So I turned that off, and like magic I had dozens of comments I didn't even know existed. I think I'll stop asuming things about blogger now :D

So I'd like to apologize for that funkiness, I made sure they are now always shown. And I will try and post some answers to some of the comments that where made.

On another note I'd like to say that I'm preparing a whole bunch of blog posts, of which some are about the creation of icons and UI.

Stay tuned for more.

New look

2006-04-13T15:19:00.000+02:00

So as you can see I just uploaded a new look for my weblog. Nice fresh, and very simple (on the outside). There still are some issues, mainly with the comments section. I should be able to fix that at the end of today.

Other sections like the header need some work. But I just wanted to get something up so I could easily continue working on the next few days.

Camino 1.0

2006-02-15T22:22:00.000+01:00

Yesterday the launch of Camino 1.0 went surpisingly well. I'm really proud of all of us that have worked so hard these last months getting everything done on time.

In particular I worked a lot on the "new" website, ensuring that all content needed for this 1.0 release was created and looked good. Kudos to Sam, Wevah and Smokey for also putting buckets of time in getting it right this time.

So with this release out the door we can finally focus on the future, and it has a lot of great stuff in store! I hope we can do the release of 1.1 well befeore the end of the year, making it a rather "small" update instead of waiting for a years progress again. Well see how it goes.

I hope you all enjoy this release asmuch as I do.

Appzapper inside

2006-02-12T20:30:00.000+01:00

It doesn't happen often that the general public gets an insight in what it takes to create software. I know I really appreciate it when they are offered, I learned a lot from the few I encountered. I might note that CocoaRadio, which started just "recently", is a great resource for behind the scenes interviews of mac developers.

This is my humble attempt to give an insight in my seamingly small and complicated part of the process.

Late 2005 I was contacted by Austin Sarner, a member of a small development company called Neomtric Software I had worked for before, for a new and exciting project.

He and Brian Ball, a talented guy who had worked for MacWorld magazine and who came up with the project idea, teamed up to create a really nice little application called AppZapper.

As one can read on the AppZapper website the application enables users to easily get rid of any file associated to any application you ran and installed on our mac. Like they rightfully say, Apple should have added this tool to Mac OS X all a long. Heck, Microsoft Windows has had a software uninstaller for decades now.

I knew the creation of the icon would be tough as the name of the app and it's function would be very hard to capture in one single image. The name of most applications give a clear indications of what real life like object to use for representation.

I tried a variety of approaches. Non seemed to be very appealing, nor did they convey the fun the AppZapper name contains. In the back of my mind I was thinking of doing a laser gun but what bothered me about that idea was that there didn't seem to be any existing generic representation of a laser gun that I could use! Apart from maybe doing something with a red ray of light. For a brief second I even thought about a taser. Fortunatly I encountered an image of a 60's comic book cover, and then it hit me. I didn't have to look for an actual existing object but instead I had to make it look like a 60's science fiction laser gun, I'm pretty sure we all have a rough idea what that looks like.

It took a lot of sketches before I finally had a shape that appealed to me. Designing 3d eargonomical objects aint easy. After doing some trials in Photoshop I soon enough realized that Photoshop alone wasn't going to get the work done. So I employed a friend of mine, Koen Witlox, who told me he was pretty good with 3d modeling using Maya. We teamed up one night to get the shape modeling done. We started creating what I had sketched but it didn't work aswell as I had hoped. On the spot I sketched some other possibilities and the modeled result, as shown below, was better then we had both hoped for.

3d is a wonderful thing. But it's way to labour intensive if you'd ask me. Not so much the modeling, thats something I will probably teach myself sooner then later. But it's the lighting and texturing that really requires a lot patience and knowledge. If anybody has any tricks or knows somebody that is a master at it, let me know :D

Next step was to get the coloring right in Photoshop, as I decided that doing it in maya was going to be much to complicated. It was harder then I thought, as we had only used one light in Maya. The icon had to be 60's comics style, which I thought I had already achieved with the shape. So I leaned towards using more aqua real life coloring but that didn't work at all. So I went for the more extreme 60's coloring and it worked amazingly well. I know red and green is a bold color combination, but I tried a variety of alternatives and non worked as-well as the final combination.

Even for a relatively small icon like a 128 pixels icon, details make the icon. Lighting direction, highlights, shadows, textures, all have to be looked at. If you don't, the icon will just not be as rich and vibrant. With this icons 40+ layers I was able to tweak any part I wanted. That's why I always tend to create the icons at 256 or in this case 512 pixels so I could scale it down, ensuring that at the final 128 pixels the icon has nice details that can all be controled.

Austin and Brian gave me a lot of time and trust in making this icon, and I worked on it longer then I normally do. But the result of it is a very unique icon in both it's shape, styling, and coloring. And with the effects, the zap sound and white screen flash, Austin added it has become a one of a kind applications with an amazing user experience.