07 Jan iWork / iLife ’09 UI Roundup

Of course, I watched the Macworld SF keynote yesterday, and apart from noticing the iWork.com icon, I also saw all sorts of nice UI changes and icons. I skimmed through Apple’s new online guided tours and walkthroughs and I’ve compiled a (far from exhaustive) roundup of all the fancy new UI stuff in the iWork and iLife ’09.

I’ve divided this post into areas of interest, and not by application, as I have no access to iLife ’09 yet, and I think that the changes and additions to the interface design serve themselves much better to being divided into logical groups that go beyond just the product itself.


iWork ’09, the software package that is available to me, has drastically altered the style of its toolbar icons. I downloaded the trial and took these screenshots of the old and new icon sheet of Keynote (images open in current page).

It’s quite clear to see by these images how Apple seems to have chosen a different style. It’s consistent between all apps; I also have some images of Pages’ old and new toolbar icon sets, but this side-by-side comparison of the Keynote preferences also shows the differences effectively (top icons are the new ones);

What I really like most about this all, though, is that the design team left nothing untouched. They even critically looked at the application icons and their low-resolution equivalents. I particularly enjoy them further improving Keynote’s smallest icon (Top is iWork ’09);

iLife ’09, especially iWeb, shows some other stylistic changes that go well with the changed toolbar icons; a very atypical (dare I say ‘non-Leopard like’?) folder icon and a globe that’s devoid of the highly saturated colors and gloss we’ve come to expect from Apple. I haven’t been able to extract these images from anywhere, so here are images of them that were taken from the guided tours:

I can’t say I dislike the new icons, I might actually prefer them if they push this whole style through. As you can see in the other changed widgets, the whole subdued stylistic direction of the UI in the new iLife / iWork apps works quite nicely. It does seem awfully strange to have a very glossy Dock to go with this style, though. Here’s to hoping they change that in Snow Leopard.

General widgets and styles

iWork’s got but a few drastic UI widget changes, but they’re enjoyable. I like the fresher ‘trial’ screen that’s presented on startup. Jan van Boghout noticed the button in this window actually has a different ‘clicked’ state than the system-standard ‘metal’ textured button. I wonder why.

Keynote’s presenter display has seen some gorgeous changes. I can’t name one element in this screenshot that I don’t love. Intensely. Very, very nice.

While I haven’t used the exporting features of iPhoto a lot in the past, I believe this very intuitive and nicely designed slideshow exporting sheet is new. It’s quite effective and looks great.

We had seen a few controls that used a lighter highlighted style in iLife ’08, but iPhoto ’09 goes the extra mile and applies it everywhere. I enjoy it, barring that the style remains consistent. It’s a less harsh and contrasting highlighted state that looks better in the subdued interface of iPhoto.

General UI changes

The two suites also saw some general interaction and UI changes, mostly in the animation department. The iWork apps, all showing a template picker on startup, now discretely animate a transition from the template thumbnail to a full application view. It’s subtle, not overpowering, or useless; quite a nice example of tasteful Core Animation usage. I really like it.

Skimming, the feature introduced in iLife ’08 for quickly ‘skimming’ large collections of photo’s or movies, has also turned into a veritable standard, being used in all the template pickers of iWork, and much more places like the new Places and Faces views of iPhoto. iMovie’s obviously also using a lot of skimming. I think it’s bordering on useless in the template picker of Keynote, but it does show more content in less space, I suppose.

HUD Panel changes

Last but certainly not least, the HUD overlay panels have seen some changes too. I’ll start off with iPhoto, which has some very sweet adjusted overlay panels. This little bubble that pops up when iPhoto asks you to confirm its facial recognition has a very nice highlighted and pressed state;

In general, the elements of the HUD panels have a different style. It’s completely in line with the other subdued elements I’ve presented so far. In two words: ‘Less flashy’. Here’s a screenshot (composed of multiple, smaller screenshots) of the demonstrated iPhoto slideshow settings overlay;

I like it, and hope to see it in more third-party apps. Same for this titlebar tab control. Interestingly, this one is actually glossy. I think it would have looked equally nice if it’d been in the same subdued gradient style as we’ve seen so far.

And finally, while not really being a HUD overlay control, this autocomplete field has some very nice styling. The gray selected style has something quite unique. But I noticed Lucida Grande being used at the bottom of the autocomplete list, and Helvetica in the list itself. Make up your mind, people!

And that concludes my roundup. As I mentioned in the beginning of this post, it’s hardly an exhaustive list of all UI changes and additions, but these stood out to me and I felt like sharing them with the world. Godspeed to all those developers about to dive into Xcode to make some custom controls!


    Snow Leopard UI roundup

    It's that time again: A new big cat is upon us, and while it hasn't brought about the rumored ‘Marble’ aesthetic, there's been a lot of...

    iPhone OS 3.0: The details

    There's been so many iPhone OS 3.0 feature roundups that I'm not even going to bother doing a roundup of UI changes, as most users are quite...

    Safari 4 UI breakdown

    Well, another day, another major browser beta; Safari 4 went public beta today, with a lot more UI changes and additions than we'd all expected...

    Designing Classics

    I didn’t intend to write a single letter on my blog before the impending redesign of all my websites, but here I go anyway; today, Phill...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

58 Responses

  1. Very good writeup. Lots of changes appearing in the user interfaces, most likely in preparation for Snow Leopard.

    Also, don’t forget Garageband, which has opted for a much darker look. Looks more like a pro app now.

  2. 2
    Ali B. 

    Very silk indeed. I’d have to use them to judge the usability, still looks amazing.
    Now all I have to do is get me a mac ;)

  3. Fantastic roundup Sebastiaan – it’s interesting to see the depth they have gone into in improving and tweaking the interface and icons, considering for instance that 90% of users will not notice something as minor as the low res app icon for Keynote but will benefit nonetheless.

    It seems clear that, at least in these consumer focused apps, Apple is aiming for a much cuter, more cuddly feel to their icons. Personally I think it looks great, and most are much clearer and easy to determine than before.

    Fantastic to see Apple continuing to innovate in the interface department and showing so much care for the details. People notice.

  4. 4

    I hope some of these changes make their way into Snow Leopard! I would prefer a subdued look to the gloss of Leopard.

  5. 5
    Dave Arter 

    Great write up, I wonder what else might be discovered when iLife ’09 is released.

    It’s worth mentioning that the ‘export slideshow’ panel you highlight is actually copied from iMovie ’08, more or less.

  6. Definitely some sexy changes. Thanks for documenting these! The HUD and Keynote Presentor tools are the most striking changes to me.

  7. Great article. I agree with Dalton: Let’s hope some of these elements and subdued pieces find their way into snow leopard (as with Gruber’s “Marble” prediction). These scrollbars have got to go…

  8. 8

    Looks nice! I sure prefer the new look to that awful iTunes appearance everyone is clamoring for in Snow Leopard, although I don’t like the Leopard look much better. The dark, flat but still shiny buttons here look beautiful AND subdued, which I like.

  9. 9
    Scott Guelich 

    Great writeup.

    One question: Does anyone else find it odd that the bubble popup (“Is this Ali?”) has its confirmation button on the left, and the cancel button on the right?

  10. 10
    Luis Alejandro Masanti 

    “It’s quite clear to see by these images…”
    It was hard to me to “enlarge one, see detail, enlarge the other, compare detail…”
    Maybe a side-by-side (or above-below) placement of icons would be better presentation for a comparison.

  11. 11

    Great roundup! Just out of curiosity, what app did you use to style your screenshots, to give them that bended page look? It’s a nice effect – goes well with the design quality of the rest of your blog.

  12. 12

    Interesting that Helvetica still makes weird appearances. After it appeared in the Leopard beta I assumed that Lucida Grande would be disappearing in favor of a more iPhone-like UI. Weird that the Helvetica sprinkled throughout the Leopard beta stayed there in the release version — it seems to appear only in “new” items like Time Machine, Stacks, etc.
    I can only imagine that Apple is working its way toward replacing Lucida Grande SOMEDAY, and are laying the groundwork now so they don’t have to revise so much. Snow Leopard, perhaps?

  13. 13

    Nice roundup! And may I just add my two cents on your final observation:

    “But I noticed Lucida Grande being used at the bottom of the autocomplete list, and Helvetica in the list itself. Make up your mind, people!”

    I think it’s intended: the list itself is in Helvetica because that’s the font used for the other data in that dialog window (album name, date etc.), and Lucida Grande for the command buttons (i.e. New place… and Done).

  14. 14

    Great article Sebastiaan, incidently you’ve just been grubered! ie linked up from daringfireball..
    Good going on only week two of blog redux.

  15. 15

    I thought the context popup menu in iMovie looked fantastic:


  16. 16

    Pretty good article! I noticed you talked a lot about the positive aspects, but you neglected to point out some of the “mistakes” Apple made. For example, iMovie has some of the worst buttons (black buttons with a white outline, Vista-Like blue fills) to come out of Cupertino in recent memory. The four various scroll bar among the suites (Aqua, iTunes, black iTunes, black iTunes w/blue scroller) are terrible, since any of the latter three would be fine in most places.

    And of course, all of the inconsistency throughout the iApps and the current Leopard apps is not the best thing either.

  17. 17

    I agree for the most part except i don’t like the last one (Pumpkin Patch). I see that texture getting old fast and complained about much like the brushed metal look done away with in Leopard.

  18. 18

    I also noticed that in the iWork ’09 template chooser, the scroll bars are in the style of iTunes 8. I would not be disappointed to see those system-wide.

  19. Thank you for taking the time to scrutinize the new UI, features, and such. But I guess that comes as second nature to you. ;)

    One thing though … I *really* like that new folder perspective alot, I’m going to try and recreate it. And, reiterating what was already said, the subdued tones/look is really nice. Any chance of Apple announcing Snow Leopard next month? They seem to launch more things shortly after a keynote.

  20. 20

    Damn! Bring back the gloss! I think Panther was the epitome of glossiness, and that’s what I want.

  21. 21

    Great article. I’m disappointed though that the facial recognition confirmation buttons appear to have the “default” button on the left rather than the right, as is the HIG recommendation.

  22. 22
    Bob Thedino 

    Excellent article! (The only thing that rankles is the ‘09 instead of ’09 in the title!) Any ideas about what the new style for the toolbar icons is, and why it’s better?

  23. It would make side-by-side screenshot comparisons easier for your readers if your image viewer javascript didn’t ignore the browser’s new-tab/new-window keyboard shortcuts. I realise you’re using an off-the-shelf wordpress plugin for this (and fixing it is non-trivial because of the way the onclick handler has been written) but it’s a rather irritating and needless limitation.

  24. 24

    Great roundup! Gotta love Apple’s attention to detail. If they’re already refreshing a UI that’s relatively new, I’ll be shocked if the 7-year-old Aqua prevails in Snow Leopard.

  25. 25

    As a tool for writers, Pages remains insufficient – despite the addition of full-screen mode and outline mode (which shows that Apple is trying to make it a tool for writers, at least at some level.) Just basic UI stuff isn’t there – the outlining templates don’t include anything that mix letters, numbers, and roman numerals, for example (very standard in the outlining world.) Yes, you can roll your own template – but it won’t work well.

    Even the standard editing mode – where you see a full page – isn’t right. You can’t get the page to center on the screen. Instead, it hangs to the left. The lack of symmetry is annoying and to me, fouls up the orderly page metaphor. And why doesn’t the inspector window dock with the screen, at least as an option? The list goes on.

    The problem with Pages is that it doesn’t know what it is. A word processor? A page layout program? OK, so we’re getting into my pet peeve/rant territory. The best word processor for Mac, sad to say, was Office 2004 – except that it was craptastic as a work of coding, and got even worse in Rosetta. Nisus comes close, but the developers have never been able to get it to outline, and seem not to care. The other word processors have their points, but are just too idiosyncratic, at least in my view. Don’t even get me started on Open Office – even 3.0 seems to suffer from an intentional lack of simplicity and a too-many-cooks level of bloat that rivals or even exceeds Microsoft’s.

    Which all circles back to my disappointments with Pages. What we writers need – and I’m speaking for several Pages wannabe users here – isn’t a lot of features; just some conscientious tweaking of what’s there: some careful attention to the way the program is designed so that the interface can be adjusted to make it a good tool for us, just as the interface can be adjusted now to make it a good tool for those who want to do page layouts and other stuff. I mean, great – you can easily embed a Quicktime into a Pages document. How many people actually do that? But you can’t create an outline in most of the standard formats used in advanced writing, research, and graduate school work?


  26. 26

    I like that they’re using Decora light switches now ;-)

  27. 27

    Very nice, thank you!

  28. 28

    You know what really bugs me is that Apple is mixing the Aqua, matte and glossy look all together. It looks good in some cases — like in iPhoto — but for some apps, like iMovie, it is a complete failure.

    The scrollbars are in the matte grey-blue look whereas most of the apps still have the standard glossy ones. Furthermore, there are some blue scrollbars in blacks HUD windows which should obviously be black as well.

    Table headers in iTunes and iMove are in glossy black, where other parts (such as buttons) are matte.

    Makes me sad :-(

  29. 29

    “While I haven’t used the exporting features of iPhoto a lot in the past, I believe this very intuitive and nicely designed slideshow exporting sheet is new. It’s quite effective and looks great.”

    It is a good UI, but this is basically the same as the movie export panel in iMovie ’08, which makes sense since it is exporting a movie. I think iMovie is single-select though, so it uses radio buttons instead of checkboxes.

  30. 30

    Great writeup – I enjoyed reading this, thanks!

  31. 31

    Excellent writeup! I really like the new “Export slideshow” sheet. Very compact display of options. Thanks for posting.

  32. 32
    Roope Rainisto 

    Each of the new individual screen shots, icons etc. look really nice, but when I think of having all of them together in one device, it really… begs the question that why the lack of consistency. Every team seems free to do what they feel is cool – and they do do cool things, but the end result is a huge soup of different elements.

  33. Great write up, thanks Sebastiaan.

    I think that one aspect that was missed by you and other commenters is how much easier the new icons are on the eyes of middle aged men like me. I have commented on that aspect here:


    Designing icons for high density displays is going to become increasingly important.

  34. 34

    Hisham: absolutely. I think this may partially be because the icons could be designed with upscaling in mind (in the light of resolution independance).

  35. 35

    “large collections of photo’s or movies” should be:
    “large collections of photos or movies”.

  36. 36
    Ian C. 

    The subdued controls remind me of OpenSolaris…

  37. I like how in the iWork apps in the Save Dialogue there is a tickbox that allows you to save copies of the file in other formats for example Pages has a tickbox for saving as Word/Pages ’08 files.

    This removes the need to go to the menu for export (now hidden under the menu called “Share” like in iLife apps).

  38. 38

    Hmm… Maybe they are revamping the GUI for Snow Leopard too, that’s why they didn’t say anything about it at Macworld. Anyway, I like it.

  39. I’m curious about the fact — or is it just my perception? — that most of the comments about the new UI are about style. Glossy vs matt; hard-edges vs cuddly; what typeface is used. There’s very little about, say, the meaning of icons and how people might interpret them.

    One example is the new icon for auto-correct, which is a liquid white-out bottle. How many people these days actually know what that is? Will people think it’s nail polish?

    How about the image for “buy”: the kind of sturdy, well-designed branded carry-bag that is only seen in up-scale Western department stores and boutiques. OK, that’s part of the image Apple has, but for most of the world that’s not how they buy things.

    I find all this fascinating more for what it says about the ideals and aspirations of Apple and its customers than it does about making complex software easier to understand and use.

    The point is made that some of the new stuff is better for middle-ages eyes, but that’s about it. Curious.

  40. 40

    Great writeup.

  41. 41

    I just want to add my opinion on the scroll bars:
    – Aqua: too shiny
    – iTunes: good
    – iTunes black/blue: looks like it doesn’t have a clue what it’s doing.

  42. 42

    great post, as usual.

  43. 43

    Hi sebastiaan,
    Great writeup!
    By the way, can you guide me how to make a picture that has shadow at the left and right corner like in your article, its look great, kinda love it! ^.^ Picturesque cant do that :((
    Thanks mate!

  44. 44

    I so have to agree with Stilgherrian about the whole icon meaning issue, I mean yeah not many people still use white-out. I would have to say that Apple usually does a good job with picking icons that best fit the meaning of their apps/programs/features but as for auto-correct, I think they were more focused on bring the recreating the past rather than having one that better describes what the feature actually means. I mean the white-out bottle looks neat and all but that’s pretty much it. I do have some non-English friends who have said that the reason it seems that Apple is so popular is #1 their stuff just seems to work and #2 they try their hardest to make their stuff easy to navigate, especially with the help of their icons. I’m not harsh on Apple for their new auto-correct icon but I do wish that they would go back to the ’08 icon or at least make something similar. Also about the whole issue of the scroll bars, I just don’t see why they keep the aqua bars around when it sure seems like they are trying to get away from aqua (probably aqua takes up too much space and for Snow Leopard they want to reduce the overall footprint). The iTunes bars are so nice looking and they really look sharp upon the iPhone themed OS and so if they could merge those together with their current darker non-aqua/non-metal theme that would be awesome, would sure beat Microsoft Vista/Windows 7′s theme. Even though you might think that overall appearance isn’t important, well what would you rather look at, something that looks professional and well thought-out with style to it or something that is an eye sore?

  45. I will eat someone if Snow Leopard doesn’t include iTunes-style scroll-bars. Literally.

  1. [...] write-up from Sebastiaan de With on the changes Apple made to the UI in iLife and iWork ‘09. Everything seems to be less glossy, more streamlined, and much more [...]

  2. [...] Cocoia put together a great compilation of UI shifts in iWork and iLife ‘09. [...]

  3. [...] Blog Sebastiaana. [...]

  4. [...] of changes to iWork ‘09, Sebastiaan de With pours over a large number of changes, updates, and other little tidbits of the new iWork and iLife ‘09 application [...]

  5. [...] blog has posted a UI roundup of iWork and iLife. The new icons are mostly awful. The HUD improvements are mostly good, but I [...]

  6. [...] not talking about that. Here I just got a good review of User Interface changes found Cocoia Blog, iWork / iLife ’09 UI Roundup (via [...]

  7. [...] de With provides a nice roundup of the UI design changes in iWork 09, newly released by [...]

  8. [...] this week Sebastiaan de With posted a really nicely done iLife UI Roundup in which he use a cool curved drop shadow on his images. Soon after that Gus Mueller released a [...]

  9. [...] interessante feita pelo designer de interfaces holandês Sebastiaan de With, tratando das mudanças visuais feitas pela Apple nos aplicativos das suas duas suítes. Ele destacou apenas os refinamentos na interface por [...]

  10. [...] vou usar como base uma análise muito interessante feita pelo designer de interfaces holandês Sebastiaan de With,  nas alterações visuais feitas pela Apple nos aplicativos das duas suites. Ele destacou apenas [...]

  11. [...] Blog Sebastiaana. [...]

  12. [...] interface of iWork / iLife ’09 gets a thorough going over at Cocia (found this via Daring Fireball a while back). The image that Phase put up looks similar to the HUD [...]

  13. 58
    Cocoia Blog » iPad UI Roundup (via Pingback)

    [...] also takes the scrubbing we’re familiar with from iMovie and iLife (see also: my iLife UI roundup) and applies to it to a photo album, to allow for easier and visual navigation of images. I think [...]