June 2009 Archives
Tim Van Damme is a designer, writer, public speaker and superhero, based in Machelen.
Van Damme’s meticulously crafted web sites for, amongst others, Atebits and 24 Ways, have helped establish him as an emerging talent with a solid understanding of interaction design coupled with the traditional skills of grid systems and typography.
Van Damme’s beautifully designed business card web site, launched in late 2008, is credited with re-igniting an interest in the business card web site, sparking something of a comeback for the format. It inspired many to create their own, gathered on the Wall of Fame, sadly it also inspired numerous, less ‘inspired’ copies, gathered, just as helpfully, on the Wall of Shame.
When not designing elegant web sites, Van Damme can be found writing under the alias of his superhero alter ego Maxvoltar.
We asked Mr Van Damme a dozen questions.
Where did you learn your craft?
I’m self-taught. I’ve learnt a lot from books I’ve bought that were recommended by others. I’ve also learnt a great deal by dissecting other people’s work, and experimenting in Photoshop or with HTML and CSS.
At school there was only one class I can remember where I actually learned something useful. It was given by a great designer who introduced me to typography, colour principles and the basics of layout.
Who inspires you?
There are thousands of great designers out there, my favorites include: Andy Clarke, John Hicks, Josh Pyles, Matthew Smith, Sam Brown, Dan Mall, Dan Cederholm, Naz Hamid, Jason Santa Maria, Elliot Jay Stocks, Ryan Sims, Wilson Miner…
What are your influences?
My influences range from beautifully designed Macintosh applications to grungy pictures of old Penguin books and everything in between. I’m a sucker for minimalism, bold designs and details hidden inside designs.
There’s been a great deal of discussion recently about how HTML 5 might signal the death of Flash. As a designer who is known for delivering rich, interactive experiences based on standards, we’d value your views on this.
It might, and I certainly hope it will, but it won’t be happening within the next ten years. The complexities of our industry and the various key players unfortunately combine to ensure that launching new technologies often takes a huge amount of time.
I’ve heard that a forthcoming version of QuickTime player will support .flv files, and hope that some of the video sites will jump on that train, saving us from that processor hogging, piece of shit software called Flash.
Is Typekit going to save the world?
Only Chuck Norris can save the world, but Typekit’s gonna make it a prettier place.
You divide your output across three different personas - Tim Van Damme, Maxvoltar and Made by Elephant - which is your preferred persona?
Maxvoltar, for sure. He’s the guy that says whatever he wants without caring about the consequences, because he doesn’t really exist. The result is that people come complaining to me about him, while I can’t even control him. Let’s just hope it doesn’t kill him.
Maxvoltar is a “superhero sans disguise.” Every superhero has a backstory, how did Maxvoltar gain his superpowers?
As a young child he was abducted by aliens and given a special radiation treatment. Ever since, he’s been bullet- and criticism-proof.
If you had to pick one design Made by Elephant, which would it be and why?
24 Ways. I don’t think it’s the ‘prettiest’ design I’ve ever made, but it got people discussing CSS3 properties and trying out new layouts inside web browsers which, in the end, is the best response a design can get. It also helped a lot of people realize that we still haven’t reached the point where we can’t come up with something new and refreshing.
You recently wrote an article titled ‘Why You Can’t Teach Web Design’ which generated some interesting discussion. Has your opinion on this topic changed and what would you consider essential learning for the aspiring web designer?
What I tried to say (but didn’t really make clear), is that with the current mindset of the people running schools, it’s impossible to learn web design at school.
There are a lot of really great books out there - didn’t you guys recently write one? ;-) - but their content is very rarely covered in school curricula. More often than not you’re on your own, figuring out what’s important and what’s not.
What’s your favourite typeface?
I’ve had some fun with Gotham lately, but I think it’s time to move on as it’s now popping up all over the place, being used and abused in every conceivable way.
What’s your favourite plain text editor?
Espresso, hands down.
What’s your favourite tea?
I only drink tea when I’m sick and prefer mint or black tea.
With “no (copyright) restrictions” and a desire to create an “experimental playground” that explores HTML 5’s
<audio> tags fully, The Video Bay - launched in “Beta Extreme” - wears its heart on its sleeve:
Don’t expect anything to work at all.
They’re nothing if not honest.
Given the importance we attach to the creation of well-structured, semantic markup you might wonder why we’d advocate the use of Markdown as a means of generating clean and well-formatted markup. (Markdown, for creating markup? A contradiction, surely?)
The reason is that we use it day in, day out to make the process of content creation and writing markup easier. Once you have an understanding of how markup works, you’ll love Markdown’s simplicity; it makes the writing in writing markup a breeze.
To quote Mr Gruber, Markdown’s creator:
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).”
The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.
Put simply, Markdown enables you to focus on creating well-crafted content in your plain text editor before converting it into valid markup. Sounds perfect. So, how does it work?
Show and Tell
The easiest way to introduce the principles of Markdown are to run through some examples.
If you’re not familiar with Markdown’s syntax you might be forgiven for thinking that the examples below look just like plain text. That’s because they are. To explain the foundation of this emphasis on simple, clear text-like formatting Gruber states:
While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
So, let’s jump straight in and get started by looking at some examples.
Writing a paragraph is as simple as writing a paragraph:
This is a paragraph. Admittedly a very short paragraph that comprises nothing more than two sentences.
Parsing this results in the following:
<p>This is a paragraph. Admittedly a very short paragraph that comprises nothing more than two sentences.</p>
Typing the following will give you an
<h1> followed by an
An H1 Heading ============= This is an H2 -------------
Running it through the Markdown parser transforms the above, easy to read plain text, into perfectly valid markup as follows:
<h1>An H1 Heading</h1> <h2>This is an H2</h2>
Headings can also be designated with a
# (hash) marker, where the number of hashes indicates the corresponding level of heading, as follows:
#H1 Heading ######H6 Heading
Phrase emphasis is simple, by wrapping content in either asterisks or underscores to indicate spans of emphasis, adding
__strong emphasis__ (asterisks -
**strong emphasis** - are functionally equivalent).
Lists are equally simple. Unordered lists employ asterisks, pluses, and hyphens (*, +, and -) as list markers (as with phrase emphasis, you’re free to choose your preferred list marker). The following is an unordered list:
+ Bedtime for Bonzo + King Kong + Every Which Way But Loose
Changing this list to an ordered list is as simple as changing the list markers to numbers followed by a period, as follows:
1. Bedtime for Bonzo 2. King Kong 3. Every Which Way But Loose
As the preceding examples suggest, the beauty of Markdown is the ease with which it makes the creation of readable and editable content. Back to Mr. Gruber:
Markdown is not a replacement for HTML … The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format.
This emphasis on ease-of-writing is one reason why Markdown has been embraced as a lightweight markup language for several content-management and blogging systems, including WordPress, Movable Type, Drupal, Expression Engine and many more.
Embracing a Content Out Approach
In Transcending CSS: The Fine Art of Web Design, Andy Clarke introduces the idea of a content out approach as follows:
You should always start writing a document by first using only structural elements such as headers, paragraphs, lists and quotations.
With its plain-text-like syntax, Markdown is a perfect medium for adopting a content out approach. What makes it so appealing is the way in which it makes writing well-formed, structured markup so easy.
By default it produces lean, structured and well-formed (X)HTML, ready to be expanded into a clean and efficient web page or added to an existing one. This approach results in nothing but structured markup, ready to receive some CSS goodness, not a needless div or span in sight.
By enabling you to write easy to read content that can be converted quickly and painlessly into valid (X)HTML, Markdown allows you to generate well-formed content with the minimum of fuss. The easiest way to get a feel for it is to try out the Dingus at the Markdown site.
Getting Jiggy With It
Although HTML is relatively easy to craft by hand, Markdown is often easier and faster to write. Also, just as important, it’s easier to read. Mr Gruber outlines the philosophy behind Markdown as follows:
Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else.
Let’s look at a quick comparison, here’s a block of markup, in Markdown:
Markdown ======== Markdown is a lightweight markup language designed to ensure maximum readability of both its input and output forms. John Gruber, Markdown's creator, states: > Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). Originally implemented in Perl, Markdown is now included with, or available as a plugin for, several content-management systems. Basics ------ Getting started with [Markdown] is easy. The language takes many cues from existing conventions for marking up plain text in email. ###Further Reading 1. [Markdown Syntax] 2. [The Markdown Dingus] 3. [Wikipedia] : http://daringfireball.net/projects/markdown/ "Markdown Overview" : http://daringfireball.net/projects/markdown/syntax "Markdown Syntax Documentation" : http://daringfireball.net/projects/markdown/dingus "Something whose name is either unknown or forgotten." : http://en.wikipedia.org/wiki/markdown "Wikipedia"
And the same, this time in HTML:
<h1>Markdown</h1> <p>Markdown is a lightweight markup language designed to ensure maximum readability of both its input and output forms. John Gruber, Markdown's creator, states:</p> <blockquote> <p>Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).</p> </blockquote> <p>Originally implemented in Perl, Markdown is now included with, or a vailable as a plugin for, several content-management systems.</p> <h2>Basics</h2> <p>Getting started with <a h ref="http://daringfireball.net/projects/markdown/" title="Markdown O verview">Markdown</a> is easy. The language takes many cues from existing conventions for marking up plain text in email.</p> <h3>Further Reading</h3> <ol> <li><a href="http://daringfireball.net/projects/markdown/syntax" title="Markdown Syntax Documentation">Markdown Syntax</a></li> <li><a href="http://daringfireball.net/projects/markdown/dingus" title="Something whose name is either unknown or forgotten.">The Markdown Dingus</a></li> <li><a href="http://en.wikipedia.org/wiki/markdown" title="Wikipedia">Wikipedia</a></li> </ol>
Looking at the two examples above, the former is clearly cleaner and easier to read, yet both achieve the same end result. Therein lies Markdown’s beauty.
Getting Started Is Easy
Markdown is easy to configure and is supported by a number of popular writing platforms including, Movable Type and Wordpress. Should you be writing your well-formatted markup on a Macintosh, it’s also possible to integrate Markdown with our personal plain text editor of choice BBEdit.
TextMate has built in support, and there are plugins for many other editors including Coda and Vim. Ever helpful, Mr Gruber provides full instructions which will get you up and running in next to no time.
If you ever plan on doing any writing for the web - and if you’re reading this you probably are - Markdown is an indispensable tool to add to your toolkit.
Type-themed and type-inspired iPhone and desktop wallpapers for typenuts. Completely free; no strings attached.
There are certain situations when using a CSS Grid Framework might be appropriate, however, most frameworks are complex and, well, just a little bit bulky.
Tyler Tate’s 1KB CSS Grid adopts a simple, lightweight approach. It might not do everything you’ll possibly need, but if what you require is a simple, lean CSS Grid, it’s certainly worth a look.
Flying quietly beneath the radar earlier this year on April Fool’s Day, Fonstruct - FontShop’s beautifully crafted web application for the creation (and sharing) of modular typefaces - celebrated its first birthday.
Making up for the lack of fanfare, The FontFeed, is focusing its attention over the next few weeks on a number of FontStructors as a means of drawing attention to the vibrant and thriving community of type and design enthusiasts that have embraced FontStruct.
According to the press release, CheckMyColours is:
“a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.”
Using algorithms suggested by the W3C, the site calculates luminosity contrast ratio, brightness and colour difference on each element on your site and displays the rather technical results in a well considered, thoughtfully designed page. Overall, a very impressive beta release, not at least because they spell the word colour right.
Courtesy of the fine people at MailChimp, Pictaculous is a beautifully designed web-based colour palette generator. Feed it an image (in PNG, GIF or JPG format) and it supplies you with a set of recommended color palettes courtesy of Kuler and COLOURlovers. Lovely.
Rewind to 1982 and enjoy a host of emulated ZX Spectrum classics including Galaxians, Chuckie Egg and The Sentinel courtesy of Jan Bobrowski’s comprehensive ZX Spectrum emulator. All that’s missing is the archaic process of loading games from audio cassette tape (and the modem-like symphony that accompanied it).
The very talented Mr Shaun Inman launches Fever, a browser-based feed reader which promises to make the information overload associated with being subscribed to an avalanche of newsfeeds a little less painful.
By taking the temperature on what’s hot (and presumably what’s not) and displaying this via a beautifully designed interface, Fever promises to once again make feed reading a pleasure.
The talented Mr Osgerby, the co-founder of product and furniture design studio BarberOsgerby, is visiting Belfast on Thursday, 18 June to talk as part of the Ulster Festival.
BarberOsgerby’s award-winning work is found in many permanent collections including: the V&A Museum, London; the Metropolitan Museum, New York; and the Design Museum, London. With an enviable client list that includes Cappellini, Coca-Cola and Levi’s and a track record of speaking at design events worldwide, this is a great opportunity to hear one of Britain’s leading designers.
Tickets are still available (though going quickly). Get them from Mrs Gordon at the Art College.
Courtesy of Ji Lee, Creative Director of Google Creative Lab, Google asked 50 bypassers, “What is a browser?” The result is a fascinating array of answers. Apparently fewer than 8% of those interviewed knew what a browser was.
Ji Lee’s portfolio includes a number of other interesting projects, not least his Google Me Business Card and his media hijacking experiment The Bubble Project which has featured in, amongst others, WIRED, The Guardian and Boing Boing.
Welcome to Fire Meets Desire.
Bathed in irony, Burger King’s new FLAME™ campaign, fully-fronted by Piers Morgan, is taking the world of fragrances by storm. In its own words:
Introducing FLAME™, the new fragrance from Burger King®. FLAME™ is the world’s first perfume to contain the irresistible, sizzling overtones of the WHOPPER®. Behold the scent of seduction with a subtle hint of flame-grilled beef.
Flame will apparently be sold in Selfridges for a mere £4.99. (Burger King claims that it is the cheapest celebrity perfume on the market.)
Better still, it’s free to use for both private and commercial work. Thank you Mr Nettelbladt.
Its quarterly series of Exclusive Faces - typeface packages exclusive to Hype for Type - offers a refreshing and idiosyncratic typographic mix from a variety of well-established designers and illustrators.
Volume 1 features exclusive contributions by Alex Trochut, Si Scott, Jon Burgerman, Hellohikimore and Luke Lucas which range from Trochut’s Neo Deco, a fat face contrasting weightiness with finely-crafted filigree detailing to Si Scott’s Hunter, a baroque geometric monoline.
Both entries are well worth reading, shining a little more light on how Typekit might work, and - as with the original announcement, Introducing Typekit - sparking a discussion in the comments which is engaging and highlights both positive and negative opinions.
If you’re interested in typography on the web (and you should be), you should be keeping an eye on Typekit’s evolution.
As our loyal readers already know, we’re delighted to announce that our friends at friends of ED will be supporting us with a number of free copies of our book for the growing band of Standardistas following us on Twitter, a simple way of thanking you for your support.
Our carefully crafted pseudo-random-number-generator-system™ has already picked the first two winners - followers number 256 and 343 - and over the next few days we’ll be announcing winner number three, using a new algorithm to keep things interesting.
As before, the lucky follower will be notified within mere minutes of following @standardistas at the ‘magic number moment’.
If you know of anyone who might benefit from a copy of the book and would appreciate a daily dose of carefully selected web design inspiration via Twitter, we’d appreciate if you could point them towards @standardistas.
It’s all about the numbers.™
We’ll be taking the stage alongside some incredibly talented designers and developers including: Andy Clarke, who will present an ‘Extreme Typography Makeover’ and Drew McLellan, who will delve into ‘Making Your Content Discoverable with Microformats’. We’ll be talking about the importance of words as a design element in ‘
A Picture is Worth a Thousand Words’.
Tickets are limited and going quickly, get yours before they go. We’d love to see you there.
Admittedly off-topic, but impossible to overlook.
Art. Lebedev Studio - creators of the infinitely reconfigurable Optimus Maximus keyboard and, more recently, the Museum of Soviet Arcade Machines - have created the Swissarmius, a cutlery holder that is both elegant and functional, like the Swiss Army knife to which it pays homage.
Elliot Jay Stocks is a designer, author, public speaker, musician and Belgian beer geek based in Chester.
A regular public speaker at international design conferences, Stocks has been invited to share his experience at events worldwide including: An Event Apart, Chicago; The Future of Web Design, London; Twiist, Leuven; and Web Directions South, Sydney.
Stocks has an enviable portfolio of clients that includes: Automattic, The Beatles, Blue Flavor, Twiistup, EMI Records and Carsonified (where he worked as a Senior Designer before embarking on a freelance career). His work has also been featured in a number of publications, both online and offline, and is regularly showcased on ‘inspiration’ web sites.
His recent book Sexy Web Design, published by Sitepoint, is an excellent overview of the conceptual aspects of developing beautiful web interfaces and, rarely for a web design book, focuses on the importance of research, sketching and ideas.
We asked Mr Stocks a dozen questions.
Where did you learn your craft?
I’m largely self-taught. I got into art and design at a very early age because my dad is in the industry. I picked up some stuff from my time at university, but actually my degree - in Contemporary Media Practice at the University of Westminster, London - was very vague and we were left to make our own discoveries most of the time.
In terms of what I do from day to day, I picked up the majority of those skills from freelancing while I was at university, and then from my first job (as a web designer at EMI Records). I’m always learning, though; I don’t think I could ever pin it down to one particular place, institution, or period.
Who inspires you?
But I’m inspired by a lot beyond the web, and I’m generally more excited by design that blends the boundaries of art and design. Work like: Alfons Mucha (from the Art Nouveau movement 1); Dave McKean (in particular his early mixed-media Sandman covers 2); Scott Hansen (a contemporary designer-musician hybrid in the guise of either ISO50 or Tycho), and lots and lots of comic book illustrators.
What are your influences?
All of the above, and more!
You’ve been freelancing for about a year since leaving Carsonified, what are the upsides and downsides of being your own boss?
Upsides: Almost everything! I love being able to choose how, where, when, and on what to work.
Downsides: The sole responsibility for a bad project, handling money, and the occasional evil client. But I really have very few complaints.
Being my own boss is actually even better than I thought it would be.
Your portfolio includes work for Automattic, The Beatles, Blue Flavor, Twiistup, EMI Records and Carsonified. If you had to pick one design from your portfolio, which would it be and why?
That’s so tough because I might pick something I’m very proud of but wouldn’t be indicative of my work in general…
Perhaps I’d pick the site I did for Massive Attack as one of my best projects, but again, it’s not representative of what I do these days, since it’s an all-Flash site.
I don’t think I can pick one, really!
You’re about to launch a redesign of your personal portfolio site. As a freelance designer, how important is a portfolio site?
Very, very important. It’s where you tell people what work you’ve done, who you did it for, and how you did it. Your status essentially rests on the work you’ve done, so giving that work a public face is of the utmost importance.
However, it’s not the be-all-and-end-all; I’d place a similar level of importance on being active in the community: blogging about issues and leading the discussion.
Type on the web has been a hot topic of late. What’s your prediction?
Indeed, not least as result of the recent Typekit announcement.
I think Typekit’s definitely a step in the right direction, but until it actually comes out, we can only speculate about what service it will actually offer. I certainly have some concerns that would need addressing for me to use it in my web design tool set, but - like I said - I think it’s generally a good bit of progress.
Ultimately I’m sure we’ll eventually achieve typographic enlightenment in the standards-based world, but whether that will be soon or in the distant future is anybody’s guess. I imagine the latter.
You just published a book, Sexy Web Design, tell us all about it….
It’s a book about designing in the nude! It’s very liberating, especially with all this hot weather we’ve been having recently…
No, not really. It’s a book dedicated to the creative process of web design. There’s almost no mention of code in there at all because it covers everything right up to the point where you’d actually start building. So things like getting a brief, responding to that brief, conducting research, planning sitemaps, sketching wireframes, working with graphics tools, presenting mock-ups to the client, and getting ready to export the finished files for the actual build.
As the title suggests, the main crux of the book focuses on aesthetics, and there’s a fair bit of design theory in there about what makes a great design. I tried to include absolutely loads of screenshots of inspiring sites as well, so even once you’ve read it, you should be able to look through it as a source of inspiration for some time to come.
You list ‘Belgian Beer Geek’ amongst your many talents at your Twitter bio. If you had to recommend one Belgian brew which would it be?
What’s your favourite typeface?
You like doing this, don’t you? ;) Right now, I’m a big fan of FS Clerkenwell from Fontsmith.
What’s your favourite plain text editor?
This one is easy: TextMate.
What’s your favourite tea?
Twinings Chai, with a splash of milk and a generous helping of honey, please!