European Iced Coffee Smackdown.

After all the hard work of last week, I thought a light-hearted end of the month with a look at European iced coffee brands and how they compare to each other would be nice. Every travelling geek needs his cafeïne kick, and iced coffee is one of my favorite drinks to stay sharp and enjoy the taste of arabica.

I’ve picked three brands that are mostly available. As a weigh-in, I’ve taken Emmi’s “Choco Latte” swiss chocolate milk, because Emmi’s renowned for it’s cafeïne-containing drinks beyond just the coffee-flavoured ones. I will judge the four contestants by ‘coder’s value’ (Cafeïne, general effects on your mental state), ‘taster’s choice’ (overall flavour), graphic design, and ‘interface’ design (meaning the end-user friendliness of the package).

From left to right in the header image you can see;

So, how do the contestants weigh in terms of cafeïne? It’s easy to match the drinks, given the numbers are out there. When consulting the packaging of the drinks, we can find out that contestant 2 (Mövenpick’s Caffé Espresso Fredo) does do justice to it’s name. It contains about six percent total in coffee extract, placing just above contestant 4 (Swiss chocolate milk Emmi’s Choco Latte) when it comes to cafeïne percentages. Top ranked is contestant 3 (Emmi’s Caffé Latte Espresso) - it contains a whopping 13% of coffee extract. Closing the gate is Café Fresco, with a minute 1,1% of coffee extract.

Conclusion for the ‘coder’s value’: Picking an Emmi’s or Mövenpick might be the best idea if you are going for a more clear state of mind.

Moving on to general flavour. Although it’s hard to pass judgement on something so personal, I can say I like a round but tangy taste in iced coffee; it shouldn’t slap you in the face with bitterness but it should also remind you you’re drinking coffee instead of aromated chocolate milk.

The absolute winner of flavour is Emmi’s Caffé Latte Espresso. It’s very tangy, has a strong taste that doesn’t make your cheek muscles contract and it sits nicely on an empty stomach. Second is Café Fresco; although it’s meager cafeïne percentages wouldn’t indicate for it, it has a rich flavour that sticks around, while not being fast in it’s deterioration into a milky after taste. Mövenpick can easily be ranked last; it has a watery flavour and doesn’t bring a special aroma or detail worth remembering to the table. I will keep out the Emmi’s Choco Latte from this part of the review because it’s not worth weighing it up against all-coffee flavoured drinks.

Graphic and end-user interface design are also important. While being a matter of opinion, I can definitely say that Café Fresco takes the award. The posters advertising it around my city are fantastic to look at;

Strong, truly Dutch design sticking up it’s head in our streets. There is another poster with metro graphics; I suggest you take a search around the internet if you like them, there’s some pretty high-res imagery of it out there. A runner-up is Emmi’s, for having a tight, unified style, albeit somewhat heavily leaning on design cliché’s.

That’s graphic, however. The ‘interfacing’ with Café Fresco iced coffee (and all others, really) is a bit of a nuisance. First of all, there’s always two steps to opening your package; there is some sort of plastic cover on top that breaks too easily and is prone to cut open your second drink cover, and there’s the plastic cover that you pull off (a ‘freshness seal’, if you will). The second, I have no problems with, but it’s the first that’s really purely aesthetic. You can’t convince me that you should use it to re-seal your drink because it does a shitty job about that.

Mövenpick has an interesting feat, however; their drink is encased in something which seems to be shaped to a standard model of a human hand. Which means your fingers kind of fit ‘into’ the drinking cup, which is a bit freaky, cool, and useless at the same time. I’m not going to give out points for that, and based off my previous observation about the top covers of the drinks, they’re all getting an “F” for not being able to innovate.

Conclusion

For overall value for coding geeks, and pure taste and simple design I think Emmi’s is a clear winner. Café Fresco is a runner-up, while it has good design, it fails to deliver when it comes to the desires of people like me.

That was it for this month. Expect some words on the new Cocoia Main on here, perhaps, and of course, blogging into July this night. Stay tuned and thanks for reading :).

Cocoia.com on a genuine iPhone.

A good friend has helped me out with this; as a lucky owner of a great brain and an iPhone, he’s shot these images for me;

As you can see, that looks totally gorgeous. I’ve also seen some pictures of my mail and my personal work, but I won’t bore you with this further. I just thought this was pretty awesome.

Apple.com adjusted for iPhone already…

Well, if you ever wanted some higher-res images of the arrows in the iPhone or were wondering what Apple will do to integrate Apple.com and the iPhone, here’s a scoop;

Also, as you can see in the Downloads section, all rollovers are disabled when you use an iPhone. Obvious, but clever that they’ve got it all in line. Speaking of which (this is unrelated to the post’s topic), Apple Downloads…

I was put on it overnight, this time around (thanks guys!) and, as the day is progressing, I have already transferred about 5 gigabyte of icon material. That’s neat! An excellent reception of the icon set and something that will definitely encourage me to make a second one. As I said, pass on requests and icon ideas in the last post.

Thanks, everyone at Macthemes and Apple.com - the input and downloads are appreciated. More cool unveilings very soon.

Icon requests. What to do?

Hello readers. I’ve gotten quite a few people who have requests for a specific icon, whether it be a replacement or original icon, or a system icon, some people have some good ideas and want to see more icons pushed out.

I got vacation, and although I work a lot of client work and the second pack of the War on Bad Design icons is already underway, I want to see some requests. I might, if the amount of requests is sufficient, make a “Month of Icons” following the “Month of X” convention of making a new release each day. So, what do you want to see? Let me know in the comments or via email. As I said, sufficient requests means that you’ll get what you want.

War on Bad Design: Icon Set is a go!

A set of quality freeware icons by Icon Designer.

If you like this icon set, please comment, write a blog post, or drop me an email (see Icon Designer for contact details).

Download

“Classic”; Security in Leopard goes leaps and bounds.

It’s a word we’ve been associating with OS 9. OS X has a ‘Classic’ mode to run legacy OS 9 applications, but we’re looking at a whole new ‘classic’ now.

Security in Leopard has had a roadmap of its own - after several developer builds in 2006, it became apparent that there was a lot of attention from Apple to invest in security; perhaps following the Month of Apple Bugs, but, most likely, to prove that now OS X is gaining is it’s user base, is still ‘the most secure desktop operating system’.

After WWDC ‘07, a few things have become more clear to me. What first was a loosely affiliated set of securing elements, has become an extremely intuitive addition to the standard way of doing things. A good example of how flawless these new security-improving additions are, I’ll take an example that’s just freshly new. In Tiger, we get a dialog when we open an application for the first time. It’s an informative dialogue, but it’s not really helping us in terms of finding out where the hell we got it. In Leopard, as you might have seen, there is a new downloading system. Downloads are placed in a new ‘downloads’ folder and in a download stack in the Dock, and even cooler, once you open a downloaded application for the first time, it pops up the same familiar dialogue. However, this time, it also shows where you downloaded it, and when. With a minimal addition, the user’s ability to stay secure has gained a lot.

Another good example are InputManagers. The ‘classic’ Tiger hacks that allow you to modify code at runtime, are disabled by default in Leopard. However, placing an InputManager file in the correct folder prompts you if you want to enable them. Safe by default, perhaps quite to the contrary when you compare it with Tiger.

Overall, there are a lot of things I don’t want to mention or cannot mention because they haven’t been shown in the SteveNote or otherwise broadly carried by the blogosphere. Some of these are so non-obvious that people just don’t bother to find out, I guess. But I can guarantee you that you’re in for a completely new experience once you switch from Tiger to Leopard. And it won’t be like going from XP to Vista; you’ll actually feel like you’re more in control, all the while clicking less buttons to achieve that feeling.

Apple has a very clear message; I think that once Apple is around to releasing Leopard, you can go ahead and write malware; see if it works. In an OS that has code-signing, sandboxing, and other fantastic new hardening efforts all built-in, we’re safe. I think I’ll have some vacation instead of having to write a new “A more secure OS X before 10.6″ ;).

Tutorial: Toolbar buttons.

Okay, I thought it was time for a concise tutorial. We all know the Safari toolbar icons; they are, basically, buttons. To design these properly, you want some elements to be in order; a texture, basic shading, the beveling of the glyphs inside. In this tutorial, you aren’t only going to learn good design practices - the good design practices that you will learn, will guarantee that the toolbar button you will make is ready for Leopard’s resolution-independent UI.

Here’s an example of toolbar buttons in Tiger:

In Leopard, however, this style has been abandoned, in favor for a more dark, unified and bezeled look;

Whichever one you like better doesn’t matter, but we’re going to make a Leopard button now. You can adorn your Finder with it later on, or do whatever you want. It’s a good idea, however, to start thinking what kind of a button you want to make. Let’s say we want to make a whole new button that, when pressed, opens iCal.

What this means is that you’ll want to find an appropriate glyph. iCal is an easy example; we already have a convention for an ‘iCal’ or calendar glyph in OS X. No, really, check it out;

As you may observe, these buttons resemble Leopard’s quite a bit. They also have that nice bezel. Let’s make a screenshot (take this one, if you want to follow along) or make a new glyph if there is no convention. “But wait, Sebastiaan!”, I hear you say, “why remake a button that’s already there?”

Well, here’s good design lesson number one; imitate to learn. You want to learn how to make buttons like this? A good idea is making an attempt to remake it. Lesson two: Design for the future. Be thoughtful in your designs. Before you kick up your favorite image editor, think what you want to make, but also how long you want to use it. Are there future requirements for the graphic you are making? For normal work, you might consider making things at a high resolution so you can print beautifully, but in this case, Leopard needs some high-res resources for buttons.

And you can even set your working size to be infinite. Yeah. That’s right, you can make your resources as big as you want them if you make them from scratch. With Photoshop? Yup.

Follow along. If at some point you stop getting it, just keep reading and at the end there’s a nice PSD to try it all out for yourself. Let’s start with our calendar glyph screengrab. It’s not too big…

Let’s make it a bit bigger. Select “percent” from the image size dialog.

Then proceed to resize to to 400% it’s original size. Select “Nearest Neighbor” from the resample dropdown.

Okay, now that you’ve got it in the size it should be minimally for Leopard in bitmap, you can start making a vector out of it. Use the Pen Tool in Photoshop to trace its lines. Be sure to select Shape when making it and sample its color.

After a bit of working the lines and tweaking the edges to be exactly 90 degrees, this is the result. Your mileage may vary, depending on your Pen Tool skills, but just keep tweaking with the white and black arrow tools to tweak the shapes. There are plenty of Pen Tool tutorials out there.

If we were to overlay this to it’s original background now, it looks like this;

That’s not too funky; it doesn’t really work this way because it looks like a graphic slapped on a gradient. It’s just too flat, you know? Let’s add a bezel. Although this ‘pixeled’ icon contains only sharp edges, you can apply the same method for round shapes, in vector, to make bezels that actually work (instead of working at the small size with 1 pixel ‘outer bevel’ layer effects, that really get messy).

As you can see, you can, without resorting to layer styles, make a white form behind your existing vector shapes. At this level, you can see it’s a white form. At our classic size, however…

As for the background of the button, some people insist on fussy practices of sampling colors. In this case, take a 1 pixel wide selection to rapidly ‘prototype’ the button background without having to create a whole gradient;

Take this selection, copy it to a separate layer and scale it about 20 times wider. Once you are happy with your glyph, you can take the shape of the button, make a vector and apply the proper gradient on it.

As you can see from the PSD, you can export this as a ‘regular’ size (as the button was before, thus, 25% of our current image) and as 4x to comply with the Resolution Independent guidelines laid down in the now public session at WWDC ‘06. You can also, as the buttons we see here are easy to make in the new Interface Builder under Leopard, export them as PDF’s. Be sure to fit the path in an ‘image’ of appropriate pixels, though, or your shape might be placed quite oddly in the NSButton.

Now that you know the basics of putting together these kind of buttons, go make an alternative set to Safari’s! Or perhaps some new toolbar buttons for Mail? Preview? Let’s see what you can come up with in some spare time!

If you enjoyed this tutorial, you can take some time to comment, share with delicious, or digg it. Kind words over email are also appreciated ;).

4 Comments