March 2009 Archives
Convertbot
![Convertbot [Detail]](/assets/convertbot.png)
Courtesy of the fantastically talented Tapbots, Convertbot is a “unit conversion robot” for quickly and elegantly converting currency, length, mass, time - and much, much more - all wrapped up in a beautifully crafted work of iPhone App goodness.
Follow these steps:
Simple.
Fubiz™
Established in 2005, Fubiz™, is a perfect stopover for a daily dose of design inspiration. The Fubiz™ Mosaic offers a visual overview of inspiration across a range of design disciplines guaranteed to kick start creativity.
(Their 404 page is lovely too.)
A Dozen Questions for Mr Stokes
Noah Stokes is a talented designer and developer, based in the San Francisco Bay Area.
Stokes attained internet notoriety when he launched www.noahstokes.com, a carefully crafted portfolio web site which perfectly captured the zeitgeist of the interwebz. Quickly picked up by the Twitterati the site rapidly went viral, cementing Stokes position as a designer worth watching.
Stokes isn’t a one trick pony, however, his other works, Dialed Tone (currently in the pipeline), Jeremy Cowart’s Blog and The Sold Project, demonstrate an admirable level of attention to detail and the craft of design.
Stokes states: “Contrary to what my portfolio says, my rates are far from $15 per hour. If anyone can get me backstage tickets for the U2 tour, however, I’ll make an exception.”
We asked Mr Stokes a dozen questions.
Where did you learn your craft? Where did you pick up your mad skillz?
I learned web development from viewing others’ source, web developers’ blogs (people actually used to blog about what they were learning back when CSS was becoming more and more widespread) and of course, Google.
Then it was just a bunch of trial and error. I’ve been doing it for nearly five years and I’m still learning something new every day.
Who inspires you?
Harold Emsheimer, Derek Nelson, Joshua Blankenship, Chuck Anderson, Si Scott, Garrett Murray, Ryan Sims, Team Airbag, Mark Jardine and Paul Haddad of Tapbots.
What are your influences?
God; smart, efficient design and functionality; and good music played really loud.
How important is language as a design element?
I’d say it’s clutch. I think that a design should emphasize the content, a good IA will create design that draws the eyes to that important language and engage the viewer and hopefully call them to action.
What were the inspirations and influences for www.noahstokes.com?
Design portfolios are a dime a dozen. All of them can be brilliant, but you’ll end up forgetting about them. I thought: Why not do anti-design? I wrote the content as I was coding it, more as placeholder text, then I was reminded of the <marquee> tag and it was all downhill from there. It took me about 15 minutes to make it and about two hours, from the point I Twittered it, for it to reach critical mass.
<blink> vs <marquee>?
<marquee>. <blink> doesn’t work in Safari.
Is Twitter important?
Twitter is such a massive hive of what’s current right now. I think it’s extremely important as far as information gathering and tracking goes. I really think the possibilities with Twitter are only just beginning to be explored.
In the context of my portfolio, it seemed to be stuck in a Twitter loop for several days. Where someone with a large number of follwers would re-tweet it and its traffic would spike, then an hour later the same thing would happen all over again. It’s really fascinating to see it make its rounds.
Is there a danger of being typecast as the ‘Kaa-Chow’ guy?
I’ll leave that for Lightning McQueen. With a little bit of AJAX, and an insane amount of luck, you too can code like me.
What else is in the pipeline?
I’m working on a project called Dialed Tone for musicians, specifically guitarists and bass players who use an effect unit called the M13 Stompbox modeler.
I’ve just put Clicoon into private beta, not sure what I’ll end up doing with that though. I’ve also got this Budget App that I originally built for my wife to use for our home budget, but it’s since grown into something much more; I’d like to make an iPhone app out of that at some point.
I’ve got a few other ideas up my sleeve, I just need more hours in the day to finish them all. One that leverages Twitter in a really innovative way. I’m excited about that one. Oh snap, I almost forgot, I’m working on a web app for anyone who prays. It’s called Fervent. Derek Nelson is doing the design, and it’s mind blowing.
What’s your favourite typeface?
At the moment Gotham Ultra.
What’s your favourite plain text editor?
I really, really want to be a TextMate guy, but BBEdit keeps calling me home. I’ve been using it since version six. I do all my coding by hand, and BBEdit fits like a glove.
What’s your favourite tea?
I’m not a tea drinker, I wish I was. What would you recommend?
Introducing Alkaline
![Alkaline [Detail]](/assets/alkaline.png)
Alkaline is a free application for the Mac that allows you to test your web site in a variety of Windows based browsers. Litmus’s lift pitch summarises its potential:
Alkaline tests your web site designs across 17 different Windows browsers right from your Mac desktop in seconds. No need for virtual machines, Windows licenses, or any messing around with Windows Update.
Alkaline works with the browser-based Litmus service which allows you to test your web sites in Firefox and Internet Explorer 7 for free, and with another 15 browsers, all available through a number of affordable, paid for options.
Watch the Litmus screencast for the lowdown on how Alkaline works. The screencast’s point - that testing across a range of browsers should be an iterative process, is a good one - and Alkaline makes this often tedious process very easy.
As with any screenshot service, the main drawback is that you can’t test how page interaction works, only check how your pages are rendered. That said, Alkaline looks like a useful addition to your web design toolbox. If, that is, you’re lucky enough to be working on a Mac.
XL
![Mrs Eaves XL [Detail]](/assets/xl.png)
A revision of John Baskerville’s eponymous transitional typeface Baskerville, Zuzanna Licko’s Mrs Eaves was first released in 1995. A perennial favourite - it has outsold every other Émigré font twofold - it now sits alongside classics including Helvetica, Univers and Bodoni as one of the world’s best-selling typefaces.
A carefully crafted serif, perfect for adding a little classicism to any web site, it has now been joined by Mrs Eaves XL, optimised for legibility at smaller sizes and where space is tight.
An extensive essay on the development of XL, which was four years in the making, is available at Émigré’s excellent web site. Perfect for typophiles or the more discerning reader.
Motherfuton
Noah Stokes is clearly not only a talented designer, but also has a deep understanding of what makes the interwebz go around. He’s, “finally got around to redoing [his] personal portfolio site” [sic] and it’s a beauty.
Showcasing his mad skillz and calling more than a few culprits along the way, Stokes unashamedly states:
I am the best choice for all your front end development needs.
Before going on to explain why, at great length. Whilst his front end skillz are undeniable, it’s his marketing skillz that are the key here. Mr Stokes understands the importance of marketing yourself in a connected culture and clearly has his finger on the digital pulse.
Questionable Characters
Courtesy of Ben Barry, a graphic designer and illustrator at Facebook (with some very interesting side projects) and Frank Chimero, a freelance illustrator and graphic designer (who also teaches at Missouri State University), Questionable Characters is a wonderfully designed site, showcasing the power of a good idea coupled with some solid XHTML and CSS (and just a dash of JavaScript).
Offering ongoing advice to an idiosyncratic range of queries, Ben and Frank, are guaranteed to have the answer to any question you’d care to throw at them. Indeed, it’s the sole reason they get out of bed every morning.
Recent questions include:
- Do you keep a sketchbook?
- Which one of you is the brains behind your operation?
- How do I give design feedback without offending?
NotForPaper
Subtitled ‘posts and observations on some of the most exciting design work for screen’, NotForPaper is designed, developed, and maintained by Robert Little, Art Director at Tuft and Co., an award winning studio with clients including Adobe, FedEx and Time Warner.
Little’s regular posts on “work best realized away from a printed surface” gather together a carefully curated cross-section of inspiring screen-based works well worth bookmarking for repeated reference.
The ___ Cards
The ___ Cards. One card. Infinite ways to express yourself.
Courtesy of “a bunch of regular folks who like to dabble with design and things that are out of the ordinary”, The ___ Cards’ supporting web site (and ‘real life, hold in your hands’ cards) are guaranteed to keep your creative mind occupied for quite some time.
See how others have used The ___ Cards at Flickr.
Cufón - Fonts for the People
Although there are many designers creating notable examples of beautiful web typography using default web safe typefaces alone (Coudal Partners, Jon Tan, Clearleft…), designers that might have wished to venture beyond the confines of Georgia, Arial, et al. have traditionally been faced with one of only two options: using images (of type) or using Flash.
With the rise of the web standards movement and the need to satisfy Mr Google’s need for easily indexed text, it soon became apparent that this scenario - replacing plain text with a Giant Whooping GIF™ or a standalone Flash movie - was a less than desirable solution to the typography problem.
Although accessibility for impaired users and non-desktop devices certainly had its role to play in re-assessing the effectiveness of the Giant Whooping GIF and standalone Flash movie approach, the primary reason for keeping your text as HTML was Mr Google. Semantically marked up HTML text can easily be found and indexed by search engines, Giant Whooping GIFs and standalone Flash movies cannot.
Several clever image replacement techniques using CSS have been developed over the years, however, they have all shared the same drawback: the designer has to manually create each image used for replacement. Whilst this is fine for a small site, it quickly becomes unmanageable on a larger scale and doesn’t work at all with dynamically generated content.
About five years ago, a solution of sorts evolved in the form of sIFR (Scalable Inman Flash Replacement) which offered a more sophisticated take on the image replacement conundrum.
Using a combination of Flash, JavaScript and CSS, sIFR allowed designers to specify their typeface of choice and dynamically replace HTML text with nice, shiny, custom type; allowing designers to employ rich typography on their web pages without sacrificing accessibility, search engine friendliness, or markup semantics.
The sIFR solution was almost ideal: any text could be dynamically replaced, even better, the text could be selected, copied and pasted - in other words, it behaved just like ‘ordinary’ text. However, sIFR had one distinct drawback: It required Flash.
Although we feel some sympathy for Mr Moll, who allegedly hasn’t had the need to open his copy of Flash for four years (and wishes to build on that record), the pain of having to use Flash to create your custom typeface file has possibly been a little exaggerated, the reliance on Flash is a more pressing issue for a device that doesn’t (and probably never will) support the technology… Did anyone say iPhone?
Good news. An alternative for font embedding might have finally arrived. Cufón, recently emerged on the scene, “aims to be a worthy alternative to sIFR” which is easier to set up and use, and eschews sIFR’s requirement for Flash in favour of a combination of JavaScript, HTML Canvas and VML. (Don’t worry, you don’t need to heavily research HTML Canvas and VML to use it.)
Using Cufón is remarkably easy:
Download the Cufón JavaScript;
Generate a font (you can use the hosted font generator or run a copy of your own);
Replace your text using a line of JavaScript (to give you an indication of the lack of complexity of this operation, replacing all of your
h1elements would simply require this line of code:Cufon.replace('h1');); andTake care of IE (should you choose to do so).
Easy as pie.
Cufón is a new kid on the block and there’s no denying that there are still a few issues that need ironed out if it’s to fully take hold. Not least the fact that, as it stands, the generated text can not be selected, copied and pasted, i.e. it behaves like an image and not like text. However, given time, one would hope issues like this will be resolved.
Another, more complicated issue, is that of the EULA (end-user licensing agreement) for the typeface you’d like to use on your web site. Traditional EULAs specify the number of machines you’re allowed to install a typeface on, whether using Cufón might break these EULAs is still a grey area. As the typeface is converted to a JavaScript file that is easy to copy (read ‘steal’), there are genuine and understandable concerns expressed by type foundries about this.
However, there are a number of well-designed typefaces available under generous end-user licensing agreements that you might consider using in the interim.
Towards the end of his very thorough article Exploring Cufón, Mr Moll hints of talks between type foundries and Cufón’s creator Simo Kinnunen, suggesting that they have been very positive thus far, pointing out:
Technologies such as this encourage the use of typefaces other than the standard set we’re all used to [and] inevitably could increase the demand for typefaces. Therefore, type vendors and foundries have a vested interest in seeing
@font-face, Cufón, and similar technologies flourish.
There’s no question that it would be in the interest of type foundries to work with projects like Cufón (and similar initiatives) to allow designers to legally use legitimately purchased custom typefaces on their lovingly crafted web sites. Positively, Kinnunen is ready and willing to make adjustments to Cufón as needed to facilitate this.
The web is growing exponentially. There are no shortage of designers seeking to bring the beautiful typography we’re accustomed to seeing in print to our screens. Cufón looks set to be a welcome step in that direction.
UnderConsideration Expands
In their continued bid for (well-deserved) world domination, UnderConsideration founders Bryony Gomez-Palacio and Armin Vit have launched Word It as a standalone site within the UnderConsideration Online Network.
UnderConsideration, described as “a growing network and enterprise dedicated to the progress of the graphic design profession … [intended] to question, push, analyze and agitate graphic design and those involved in the profession,” is home to an excellent cross-section of sites that deal with design in the broadest sense (both online and offline).
Joining Speak Up, Brand New, Quipsologies, and The Design Encyclopedia, Word It encourages creative diversity within the design community through monthly, one-word design challenges which are open to all.
Word it is your opportunity to express in any manner you wish and with as many (or little) other graphic elements as you need, what best describes each monthly word.
Why not browse UnderConsideration’s extensive archives whilst thinking about your entry for this month’s word: Transition?
So Simple
A wonderfully minimal, but hugely functional piece of information design, the Cologne Bonn Airport web site, designed by Intégral Ruedi Baur et Associés, encapsulates the airport’s ‘So Simple’ strapline perfectly.
Employing a beautifully crafted family of information-rich pictograms designed by Toan Vu-Huu, Cologne Bonn Airport presents a colourful face that effortlessly succeeds in its intention to “deliberately debunk the ‘grey airport’ myth” that plagues many other international airports.
Urtd
![Klimax [Detail]](/assets/urtd.png)
Slovak designer Ondrej Job’s portfolio site Urtd is a wonderfully well-considered web site. Job’s Klimax Bold - an exuberant, ultra-heavy display typeface - was awarded a Certificate of Excellence in the prestigious TDC2 2009 competition.
His Vlog is well worth exploring for off-screen inspiration.
Lovely Charts
Lovely Charts, courtesy of This is Lovely!, is a free, web-based diagramming application that allows for rapid development of beautifully crafted flowcharts, sitemaps and wireframes. This is Lovely! state:
Every single symbol available in Lovely Charts has been crafted with love, to enable you to create great looking diagrams that will impress, convince and seduce - even if you don’t have the slightest design skill.
Lovely Charts’ motto is “You think, we draw!” Try it (for free) and you’ll be creating beautiful charts in no time.
A Flexible and Accessible Fluid Grid
The Fluid Grid System is just what the name suggests: a resolution independent fluid web grid system which allows the designer to create a grid based layout which shrinks and grows with your browser window.
Fluid layouts are notoriously difficult to get right, but The Fluid Grid System, designed by Joseph Silvashy and his team looks like a great way of rapidly prototyping and deploying layouts based on a standard six column grid. You can even toggle the Show Grid button on the Fluid Grid site to get instant Gridification.
Simplicity seems to have been key when developing the Fluid Grid: the markup needed to create your grid based layouts is minimal and unobtrusive and should degrade gracefully, making sense both in Lynx and in the screen reader of your choice.
The Fluid Grid System is generously licenced under an Open Source MIT Licence, and branched versions are available at GitHub.
Key
LaCie’s new iamaKey 4GB and 8GB USB memory sticks are beautiful (an adjective rarely associated with computer storage products).
Designed by 5.5 Designers, an innovative Paris atelier founded in 2003 by Vincent Baranger, Jean-Sébastien Blanc, Anthony Lebossé and Claire Renard, LaCie’s latest line of memory sticks join the growing ranks of well-designed products offered by LaCie in an effort to improve the often overlooked area of computer storage solutions.
5.5 Designers follow in the footsteps of a stellar lineup of designers - Philippe Starck, Karim Rashid and F.A. Porsche - who have previously worked with LaCie to introduce some long-overdue aesthetics into computer hardware design and, like the other projects they’ve turned their attention to, the results are memorable.
Available in either 4GB or 8GB - get yours now.
Typography Served
![Typography Served [Detail]](/assets/typography_served.png)
Typography Served, just one of a growing number of Served sites courtesy of the Behance Network (including: Fashion, Industrial Design, Motion Graphics and Photography], offers a steady supply of typographic inspiration via an elegant and minimal interface. Sign up for the Served Newsletter for a custom summary of the best work delivered weekly or monthly by email.
TDC2 2009 Winners
![Optica Normal [Detail]](/assets/tdc_optica.png)
The Type Directors Club Typeface Design Competition (TDC2): 165 entries from 26 countries narrowed down to 18 winners.
Personal favourites include: Manuel Guerrero’s Optica Normal, a functionally challenging, but aesthetic (and systems inspired) tour de force; Henning Skibbe’s Haptic, a versatile sans serif designed for use at small sizes; and Ondrej Job’s Klimax Bold, an exuberant, ultra-heavy display typeface.
Typetester
Marko Dugonjic’s Typetester is a web-based application which allows for quick comparison of type on screen. With a three column display, Typetester allows you to compare and contrast typographic variations and, when you’re happy, one click supplies you with copy and paste CSS goodness.
With the ability to vary size, leading, tracking, alignment, word-spacing, decoration, color and background-color Typetester is the perfect tool for rapid typographic prototyping.
Ban Lorem Ipsum
Words are an essential part of the design process, indeed words - when written well - can be the design itself.
Well-written and well-crafted content can capture the attention of the reader, allowing words to speak. The recent emergence of typographically crafted web sites that rely on well-written content, styled beautifully with CSS - A List Apart, Seed Conference and The Grid System for example - underline the importance that well-styled words can play within the designers’ toolbox.
With the rise of the web standards movement and the focus it has brought to content, not least the welcome re-emergence of a real understanding of the benefits of semantic markup, the days of lorem ipsum - placeholder text used as a part of the design process - are, thankfully, numbered.
A Little History
Designers, in particular those trained in a print environment, have traditionally used lorem ipsum as a means of visually presenting text as a graphic element during the early stages of the design process.
Using lorem ipsum as placeholder text gives a feel for how words flow on a page without distracting the client (who often invariably reads the text, failing to see the design). Using lorem ipsum, a Latin text, solves this problem, serving as a visual representation of text - “The text will be positioned here and will be styled like this.” - that isn’t distracting (unless your client happens to be fluent in Latin).
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
A popular piece of placeholder text, lorem ipsum is derived from an early passage by the classical philosopher Cicero which has evolved over the course of design history, reaching its current, canonical form in the Letraset catalogues of the 1960s and 70s. As the web has evolved, lorem ipsum has, unfortunately, found a place in the web designers’ toolbox.
If lorem ipsum has served designers so well for so long, what’s wrong with it now? Simple…
It’s All About Semantics
In order to write effective, semantic markup you need to start with the content first. You have to start with words and meaning and work out from that, applying the appropriate markup where necessary.
This approach, often referred to as a content-out approach (a term coined by Mr Clarke in his excellent book Transcending CSS), puts meaning first and foremost. If it’s a paragraph, mark it up as a paragraph. If it’s a blockquote, mark it up as a blockquote.
Without the content, and relying solely on lorem ipsum, it’s impossible to create well-formed, meaningful markup. Placeholder text like lorem ipsum has no inherent meaning and as a consequence is impossible to markup semantically - the first, critical stage in the design process.
In order to embark on this phase, building a solid foundation of well-structured markup, you need to get the content.
Chicken and Egg
Clearly this presents something of a chicken and egg situation. Often the client wishes to see some ‘design’ before any content has been created, however, you need some content to create the design. It’s at this point that a little client education can go a long way.
Explain to your client that real words are a part of the design process and that without them you can’t even begin to start. Give them a look behind the scenes at some typical markup and show them the hierarchies of information you’ve put in place, explaining the role the content plays in the design process.
You’ll find that not only will they respect you for guiding them through the design process, but you’ll have saved yourself (and your client) a time-consuming stage along the way - the creation of web pages that mean nothing (except to Cicero).
Shhh...
The world’s smallest music player is also the first that talks. Introducing VoiceOver, Apple’s latest iPod Shuffle features a text-to-speech interface, enabling easy navigation amongst playlists and identification of songs. It’s also, as ever, a beautifully crafted piece of design. They kept this one quiet.
Beautiful and Elegant HTML Lists Using CSS
If you ever forget which browsers apply padding and which apply margin to your lists, Konstruktors offer a visual primer on how lists are rendered in standards aware browsers such as Gecko, Webkit or Opera as compared to Internet Explorer.
Using Conditional Comments to Unstyle IE6
Over at SimpleBits Mr Cederholm suggests that now is perhaps the time to treat Internet Explorer 6 the way that many web designers have long dealt with legacy browsers, for example Netscape 4. Serving IE6 a plain, unstyled site and not worrying about spending extra time and resources on this less-than-stellar browser, frees up time to concentrate your design and development effort on the many modern, standards compliant browsers out there.
If you’re working on a personal project or have the statistics to show that only a minority of your users still use IE6, this method, making use of conditional comments, might save you a considerable amount of design and development time. This variant, courtesy of Mr Hicks, which punishes IE6 users by serving them Comic Sans, seems just a little bit too cruel.
If you’d like to learn more, and build up your nerd-points while you’re at it, Perishable Press has an excellent article that covers all you ever needed to know about Downlevel Conditional Comments.
Good Design in Ten Commandments
Vitsoe present the ten commandments of good design, courtesy of design icon Dieter Rams. Amongst the gems: “Good design is thorough to the last detail.” (Illustrated by Rams’ ET Series calculators.)
Objectified Trailer
Get a preview of Gary Hustwit’s new film Objectified. While you wait for the release schedule to roll out, why not get a copy of Hustwit’s first, excellent, film Helvetica.
2008 Web Trend Map
![2008 Web Trend Map [Detail]](/assets/2008_web_trend_map.png)
The 2008 Web Trend Map, the third in a series of maps by Information Architects, highlights established and emerging online trends via a beautifully crafted tube map interface.
Featured by WIRED, Boing Boing and The Guardian, amongst others, a limited edition A0 print of the map is available, although - as of this writing - it’s selling out fast (664 have been pre-ordered). Get yours now.
Horror Vacui
Horror Vacui - a two-player, eight-bit game coming soon from Shaun Inman, developer of Mint.
