Swiss Interface Syndrome.
April 12, 2008 on 1:53 pm | In Apple, Interface Design, Popular, Ramblings, TypographyI have been noticing a disturbing trend in custom interface design of third party applications for Mac OS X. As it is no longer an exception for software developers to build interface elements that are entirely unique to their application, the threshold for customizing other, system-standard interface elements is also lowered significantly. The ghastly trend I am about to describe is in existence due to this lowered threshold. In fact, I think this particular deviation off the beaten interface path would have been far more frowned upon a few years ago, when Mac interface designers were more conservative in using custom UI elements in general, and Apple disapproved of it more fiercely. Today, however, it won’t even stand in the way of scoring a design award runner-up, as my examples will go to prove.
Helvetica (Documentary) on TV.
November 6, 2007 on 12:14 pm | In News, TypographyThe Serif reports that a shortened version of Helvetica, the eponymous documentary about the typeface, will be shown tonight. It will show on BBC 1 at 10.35 PM Greenwhich Mean Time. I haven’t seen it yet, but going from what I have heard, it’s very much worth watching.
Tutorial: Toolbar buttons.
June 27, 2007 on 4:51 pm | In Design, Graphics, How-To, Icon Design, TypographyOkay, 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 ;).
Nailed that poster.
April 15, 2007 on 9:42 pm | In Design, Graphics, TypographyWohoo, even more purdy images. I just had to show this one. It’s purrrrdy.
Dear iSight Expert and Praetorian Beta testers, there are some good things in the pipeline! I think I’ll do some updates tomorrow or in the next few days, perhaps release a definitive roadmap to releases.
My humble apologies for the extremely salt-less post I did yesterday, I really didn’t want to offend anyone with taste. It’s there for the stay. No more words on that.
Here is some homework I literally ‘let do’ in my sleep. Like I said to a classmate over IM; “it’s like a tiny Chinese fellow in a black box with Maya 6 and a keyboard shortcut for matrix extrude on fast-forward”. I’m taking suggestions to name this thing, I can’t seem to come up with anything better than the ‘Purdy-Image-O-Matic™”.
Without further ado, the poster;
It’s great to have the results of as little knowledge of these almighty tools we, as young coders of the ‘lazy’ generation, have — at least, I am just beginning. I haven’t ever used an Apple II. I didn’t write assembly on my 286. I did a lot of work with old stuff to compensate, longing for having been born in that age. It didn’t work out that way, so these days, I am just up in learning everything I think is great for expressing myself or making stuff work the way I want it to work.
Oh, before I forget, that’s a font I had to make for modular typography class. “Acreola”. I’m so carried away in this whole rant that I forgot all about that. What should I do with it? Burn it? Eat it? Give it with every odd copy of my software?
Heart-eating experiment continued.
April 13, 2007 on 9:41 pm | In Design, Graphics, OpenGL, Personal Work, TypographyBuilding further on my experiments with OpenGL.
As you can see, some color modulation and a post-process blur with additive blending does give it an edge. It’s nice, soft, and scenic. It can output a cool 40 images per minute, in it’s current, raw form. I may push it out, once I get things working like ‘true’ 3d scenics with shading.
Because xyz (Nate) asked for some details on this, I’ll happily disclose some. My ’script’ (it used Python first, now most of it is just bare C++ or Objective-C) receives random input from any source (say, you could pipe your chat log into it, or the contents of your favorite MP3) and processes it into various arrays of data. It then randomly selects values to assign to properties of a hard-coded array of 3d objects, e.g. cubes, planes, and lines and their X, Y, Z positions and distortions. Most data, not being really random, create interesting patterns from strange perspectives. It uses basic lighting for every (simplified), depth testing for overlapping shapes, and depth-of-field (limited and simple). Overall, it looks landscape-like, or like it’s some sort of room or space. I think most outputted images are pretty much industry-grade, I made a mock-up of one of the generated images as a book cover.
For now, it’s just an experiment. Some other cool graphic stuff from my classmate, Jelmar. He’s working on ‘Sixty Pounder’, a great characteristic ‘fat face’ for expressive messages. As quoted from Jules & co;
Jelmar, and me, of course, enjoy feedback like Nate’s. Please, let us know what you want to know, or what you want to see! I’ll upload some wallpaper-sized images (any idea on sizes? I already have 1920×1200 written down). Email me!
Typographic Wednesday; TDC Winners!
April 4, 2007 on 1:22 pm | In TypographyFor this small weekly, I wanted to put the spotlight on the heroes of this year in typography; the Annual Type Director’s Club selection, including one of my favorite, part-Dutch foundries; Underware. These very good designers bring out innovative and very pleasing typefaces in a steady pace, and their last superfamily lives up to their reputation. I think it deserves winning the TDC ‘07 more than any other (apart from perhaps Beorcana).
Apart from the brilliant runic Beorcana, the ‘Subtil’ typeface was an eye-catcher. Beautiful design and stylistic sample text made this a specimen my eyes lingered on for quite some time.
Doesn’t that feel big city-esque to you? It really reminds me of those Californian vista’s you often see on stock photo’s, with big highways set through a scene of high-rise buildings and a city park, the green of the leaves and grass in the park intermixed with a blending shade of dull grey in the air that is painted in the sky by the smog of the many thousands living and moving there. I think this font and it’s sample text captured exactly that for me.
I suggest you check out the winners of TDC ‘07 yourself. You won’t be disappointed.
Typographic Wednesday; Dreamfonts and redesigns.
March 21, 2007 on 5:26 pm | In TypographyIt’s wednesday again, time for the weekly type feature. Some people claim this weblog has no base to make typographic posts on, but I disagree; type design, by it’s very nature, is hacking the way we read.
I wanted to start this post with a font that was plaguing me in the streets. The movie ‘Dreamgirls’ has gotten quite large, and although I have no incentive to see it, the poster of the movie is a fine example of appealing design;
It’s avant-gardish, isn’t it? It’s not, but it has been designed by Herb Lubalin, orginally, the designer of the Avant-Garde logotype. Incipit is carrying exclusive rights to the digitized version, and it’s a beauty. I’ve highlighted some of my personal favorite glyphs.
Another eye-catching beauty I stumbled upon is Halvorsen, a very nice Sans-Serif font that has a very friendly atmosphere to it. I appreciate it’s delicate negative space.
In a time of many redesigns, cartoonist insider Cagle flames the recent L.A. Times redesign, counting 22 fonts. As a graphic designer, I have no idea who did this redesign, but they must surely be out of their minds. The other recent redesign, that of the Times, by pentagram, did great;
I really love the horizontal axis; it just works. Very nice redesign, keeping with the magazine’s roots, supposedly (once again, not American) and well, looking good.
In a slightly related note, Google acquired Trendalyzer. Trendalyzer makes pretty graphs, like so;
This is a trend (no pun intended); there is mounting interest in this market. Typographic representation of information and infoviz (visualization) are becoming very interesting markets for designers and coders alike. As technology progresses, both technically using a computer and it’s technology and designing new methods of representing information will become more and more interwoven, and will result in fantastic things.
I hoped to make an update with some glyphs of my own, alas, I’m afraid it will have to wait until the week-end; I am still digging into RADIUS and it’s dozen authentication protocols first. Bon bézier, au revoir.
Typographic Wednesday; Helvetica: The Movie, Wim Crouwel, and more.
March 14, 2007 on 10:38 pm | In TypographyIt’s Typographic Wednesday again, time for some nice insider news from the typography scene.
Helvetica; the movie has started showing! I am very excited and I will be sure to buy the movie as soon as it comes out. It’s already been dubbed ‘the most interesting movie on Graphic Design’, and has received general praise. Keep an eye on this movie, featuring the biggest star in typography to date.
The typographic blog Type for You has a nice interview with Wim Crouwel, a Dutch type designer who did works like the New Alphabet and Gridnik (both now for sale at the Foundry). He’s also, incidentally, from the same city - while I study in Groningen, he spent most of his life there. 
Fabrizio Schiavi is a great type designer. He’s just released a new, beautiful stencil font that redefines the look of stencil. Meet Siruca;
Fabrizio Schiavi’s font portfolio includes the beautiful Sys, and CP Company.
That’s it, for now, some smoky words,
image by fliegender on flickr.
Typographic Wednesday
March 7, 2007 on 11:03 am | In Design, Graphics, TypographyIt’s the first typographic Wednesday, a wednesday selection of what has been going on in typography last week. Two new releases, and some nice imagery - let’s take a look.
The biggest news, of course, was March second - the first glimpse at Meta Serif on Erik Spiekermann’s blog.
meta_serif.gif)
I found it somewhat disappointing to hear Erik isn’t designing the serif version of this splendorous sans-serif. It raises many questions. Did Erik do Officina Serif, or did he also outsource it? I really can’t be bothered to look that all up now, but still, it’s intriguing.
A little less known — but certainly not the least - Alejandro Paul has also come forward with a new font at Veer. It’s got a whole user guide (PDF) to go with it, with all the glyphs the greatmaster of ‘Letras Latinas’ put into it this time.
(simulated images depicted above)
On to the visuals.
Via TypeForYou, the Typography blog, some time ago featured “Text, Space, and Time”, from the “Chronotext” software expiriments. Programmer and designer Ariel Marka, who, as he says it, “doesn’t see a | between art and technology”. Well, heads up Ariel, me neither. Too bad your java code that make these pretty pictures work only on Windows PC’s, and art’s cross-platform in most of the cases.
Feh, It’s true, I am biased. I hate the amount of biblical content on that website, but it’s not for me to judge people for what they belief in. I just think we shouldn’t wear all of our religions with pride.
On a (slightly bouncy) sidenote, did you know American Creationists and general fundamentalists made their own wikipedia? It’s full of abberant lies and nonsense, like the dinosaur who really isn’t older than 4000 years. Scary, isn’t it? If you want to see how far this is stretching, check out Jezus Camp - a non-free movie. It’s quite gripping.
Anyways, back on topic. Keith Chi-hang Tam has a very nice collection of writings like ‘Digital Typography Primer’, ‘Baseline Grid’, and some other, very nice and important resources that any type designer should read. It’s excellent. He even has an interview with one of my typographic idols on there - Gerard Unger.
Other discoveries (eye-candy, software) of this week include my latest del.icio.us additions; Modanokia (beautiful dynamic site about Nokia, link to English version), the for OS X users essential TextExtras, which allow you a lot more control over fonts, text, indentation and other essential little tweaks for text fields and input fields.
That’s it for this typographic wednesday post. See you next week :>.
