The Save Metaphor
I’ve designed and pixel-pushed more “Save” icons than I can remember, and they were all floppy disks. I haven’t held a floppy disk since the first time I drew one, but I will always remember what they look like thanks to all the icons signifying “save this document”. Apple ditched the format in 1998 when they launched the first generation of iMacs. No computer I’ve seen in the past five years contained a floppy drive. Few documents I create these days fit on a floppy disk, actually. Only the documents I write (plain text files) stay below the 1.44 MB limit, but file size, well, it hasn’t been an issue for years now. For “carrying around data”, I use Dropbox, which automatically syncs my most important files to my two computers and my iPhone, and includes, for free, a web interface to these files. And “Save” is still a floppy disk.
This is different from, say, “Print”, “Settings” or “Phone number”. These are three wholly different categories, but they, all three, still carry roughly the same set of three visual clichés, maximum. I’ve collected a few examples of Print, Settings and Save icons to illustrate.
Print metaphors
From left to right, here, we see an icon from the Tango Icon Library, the printer icon in Windows XP, an older Windows icon, a random Google hit which amuses me to no end, and the icon for the Print function in Floorplanner, as drawn by myself. No matter what the perspective, as long as it’s not too colourful and seems to be a big grey box that outputs a sheet of something, it’s a printer. Comforting, to be honest. Maybe you’ve never seen a printer like that fourth one, but you know it’s a printer and not a box of tissues.
Printers are a generic product anyway. They’re not a product you want to show off with, so it has to be toned down. The grey box is a printer. Straightforward.
Settings metaphors
Left to right: the same Tango Icon Library, the settings in Mac OS 10.5 and upwards, the Windows XP settings icon, the settings icon in an open-source project Webmail (it’s hard to tell which branch or distro) and, again, the icon I drew for Floorplanner. Windows is the odd one out by not being about tools and gears. The guys at the Iconfactory may have a point here: the tick mark looks much more friendly and actually resembles the controls most settings apps use anyway. The switch is a nice variation, but suffers from fidelity problems. Scale it down a bit more and it becomes mushy. The only association at that point is “hey, that white-ish thing with the stuff in it”.
Tools as the metaphor seem to be understandable for a lot of people: you change the thing you’re using. Here too, however, colour is dangerous. Tools and gears are always grey and blue in the eyes of the icon designer.
Save metaphors
Left to right, once more. The Tango Icon Library goes out on a limb. The second one has been in at least three different Windows versions. The third is my approach for Floorplanner. And… that’s it. There might be more variations on the theme, but they’re all floppies or arrows-to-disks (and those are really only common in Linux distributions, and do not make any more sense than a floppy in web applications). Fascinating.
A good way to learn about new ideas in interface design is by checking out the vanguard of the field. Let’s take a look at the way the iPhone and iPad solve this.
They have none! Whereas the iPhone at least has the convention to label the Save function with just the word, the iPad has nothing of the sort. Nothing at all. None of the applications seem to do.
An entire generation already knows “Save” only as the square thing with the stuff in it. Click the square to save it. It’s not a floppy disk, it’s Save. Now Apple is slowly moving away from that metaphor. They’re removing the clunky idea of saving — who ever “saved” a document he was writing on (by hand, that is)? — and making it the foundation of the products. There’s no save. As an icon designer, a burden might slowly lift from my shoulders.
The fixed design
I’ve built probably a dozen portfolio sites by now. Every time I grew tired of them after a week or two. As a result, I ended up neglecting them and after three months, the work in my portfolio was three months behind. That wasn’t what I had in mind.
So I wrote about my design-focused blog before, and linked to an article on how to build a flexible layout. The content would be scaled according to the screen size, but with a built-in “lock”, a minimum and maximum width. This width, based on typographic units, was optimised for legibility and would scale according to the size of your type. So if you wanted the site to fill up the screen, you would just expand the window and increase the font size. It would fill up your screen and still remain legible, all without horizontal scroll bars. Since that article in 2004, I’ve built a few websites according to that logic and it has remained with me as an important part of my philosophy regarding the web.
It makes a lot of sense, I think, to build websites this way. To think about the canvas as flexible and the viewer as powerful. A website is just a poster image if it sits there in the middle of the page, surrounded by a sea of whitespace. Or worse, when it doesn’t fit in your browser window, and you end up having to scroll around to see the whole of it. While this might work, it hardly takes advantage of the fact that this machine you’re using right now is a very powerful computer. It can recalculate a layout thousands of times per second, it can calculate for you whether the image will fit or not and do something accordingly. It can do anything! Even iPhones, tiny computers in your pocket, are phenomenal at doing these things. It would be a waste not to use it, especially if it can improve your message. So I started thinking.
The iPhone makes rescaling invisible and ubiquitous. Most users probably don’t even notice that their window changes size and aspect ratio.
The design sticks to the window
The content and interface are entirely based on the size of the browser window. That’s the premise of this website. It will always fit. It will always be a useful portfolio, whether you’re on an iPad, a small laptop, a mobile phone or on a 30″ display at work. The work will always fit and the content is always available. This is a luxury. I consider it an enormous luxury, because I can finally stop worrying whether my design will fit to the computer my possible client might be using.
Aesthetically, things are toned down deliberately. A flashy design would detract from my work and would not show what I believe work should be, i.e. empowering content, not obfuscating it. The typography is particularly “classic”. I use a few classics in the same font stack, a bit of a travesty but nobody will see the difference. The nameplate is set in Roger Excoffon’s Antique Olive, a display favourite of mine (you can see it in use on this sandwich board and on my photo blog), and I intend to rotate, in the near future, some of my own typefaces there.
So is this the Portfolio to End All Portfolios? Probably not. I’ll iterate and refine as time goes by, and it might change drastically at some point, but right now, it can expand and it can work. It’s a new thing, and I like it.
Inaugural banter and an explanation of what is going on here
Here we go again.
Even my mom knows I’ve had more blogs than birthdays by now. First there was the Zooiblog, a once-popular venue where I could write about fancy CSS ideas and people would actually use them. Jina Bolton used the drop shadows on a previous design and it sent people my way for years after. At its apex, the blog received about 2,000 unique visits per day, something I haven’t been able to rake up anywhere since. I made friends thanks to that little blog there, real friends, friends I still see, friends who went on to do great stuff, too. It got me my first design clients. And I let it die. I probably let it die on purpose. I lost interest in writing about CSS tricks, web standards and whatever it was that actually pulled people in there. I wrote for myself for a short while and closed it officially a year ago.
Tumblr grabbed my attention for a while, and I still maintain “Rob’s Brain” there. It’s degraded into a test bed for silly ideas, a dump for funny nonsense from the web and links to things I like. It’s hardly a real blog, and I don’t put my heart in it. I noticed that, and decided to start something which required a lot of heart and even more discipline.
rbmntjs was the result. It’s my photo blog, updated Mondays and Fridays, and I’m very proud to say I’ve consistently updated it for over one hundred and fifty photos now. I don’t plan on ceasing its operation: it’s been a very solid push to keep me shooting photos at least once a week. There have been many highlights.
So why this new blog on this new domain with this new site? I like to focus. I can’t write about type design on a photo blog, and writing in-depth about visual metaphors just feels awkward on Tumblr. And I absolutely won’t Twitter about it.
What’s going to happen over here?
As the front page states, I mainly work on type, typography and user interaction. Every now and then something sparks me to talk about it, and I haven’t had the proper podium for it. This is that podium from now on. My own work, my methods, my inspirations and other things that I feel are entirely relevant to what I do. A proper blog once more, you could say.
