February 28, 2010 say something

Type designers “Coming Together” for Haiti; hopefully Chile too

Coming Together font - Font Aid IV for Haiti earthquake victims

Coming Together is a font consisting entirely of different ampersands designed created by 400 artists and designers to help the Haiti earthquake victims. It’s available for $20 from leading font distributors and all proceeds go to Doctors Without Borders.

The “Coming Together” font contains over 400 glyphs and is supplied as a single, cross-platform OpenType font. All glyphs are accessible using OpenType-savvy applications, Unicode-savvy utilities, the Character Map utility on Windows, and FontBook on Mac OS X.

This is the fourth Font Aid initiative by the Society of Typographic Aficionados, the first one in 1999.

While it’s a bit late to write about this, it’s never too late to help Haiti out. What is unfortunate, however, is that another major earthquake has struck, this time in Chile. Tsunami warnings have been hoisted across the Pacific as well. I hope the Type Society and other groups extend their help for this particular disaster too.

January 13, 2010 one reply

The League of Movable Type asks: how important is open source typography to you?

Onomatopoeia comic spread

I’ll get straight to my answer: very.

More specifically, I’m quite excited about what this league is doing for a branch of typography which seems almost mythical. We know about paid fonts and free fonts, but what’s buzzing big right now is the use of fonts on the web with the emergence of @font-face embedding, webfonts, and services like TypeKit. But what about usage and modification of fonts in general?

The open source debate is always tricky when creative works are in question, but the case shouldn’t be different for typefaces. The League is going beyond that debate, but still has some tough questions to be answered:

Is open source typography important enough to fight for? Are we all brave enough to do something to change the status quo? Is the status quo okay, do we really need to change anything at all?

What is the status quo? If this 3-year old post is any indication, it looks like a sleepy town that needs some jazzing up. The Open Font Library is more closely linked to the open source software community than with the open source design community, but they mentioned Lettercase being a Github-like tool, so it looks like they’re taking steps towards that already.

Should we fight for open source typography and change the status quo? It could potentially compete alongside the hosted font embedding services and create a fine alternative for web designers using custom web fonts. Options are good.

Sound off with your thoughts there!

December 14, 2009 say something

Design & development advent calendars for the holidays!

Haven’t gotten into the holiday spirit quite yet? Perhaps these design and development focused advent calendars will do the trick. Come to think of it, it should do even more than that; you get a treat every single day for 24 days straight. Sounds even better than Christmas day? Almost.

24 ways

24ways

This site may not have started the “geeky” advent calendar trend, but it has certainly built an excellent reputation and tradition for web designers everywhere. The design continues to be cutting edge and inspiring as well.

PHP Advent

PHP Advent

All PHP, all holiday season long. See also the Perl Advent Calendar. (There’s a Rails one too, but the original post seems to be missing now.)

SitePoint Christmas Advent Calendar

SitePoint Christmas Advent Calendar

Few things are better than a holiday sale, and this advent calendar themed bazaar by SitePoint looks great. The format is pretty clever too: each offer lasts for only 24 hours, and you won’t know what products come on next.

WP Engineer WordPress Advent Calendar

WP Engineer WordPress Christmas Advent Calendar

Here’s one for the WordPress lovers, made by no less than WP Engineer. I hope that next year this becomes a community-wide effort as with the PHP Advent Calendar. Archive here.

Social Media Advent Calendar

Social Media Advent Calendar

A great crash course, if you will, into everything about social media. Not quite for designers or developers, but a great resource nonetheless.

Lists done better?

Writing this article made me realize this could actually be a way to create better list articles. Instead of cramming everything in and bombarding your readers with one long, heavy post, create a series. Exercise patience and restraint on your part and theirs. Keep them coming back for more.

Once you’ve reached your quota, do a round-up, and store the past articles in a safe place. They can even be realigned or revisited (hopefully not like recycled fruitcake, mind you) when the holidays come around again. Of course you can write all year long, but the idea is also avoiding predictability and knowing when to make things special.

And speaking of which, may you all have a special holiday season this year!

November 20, 2009 one reply

Entering the art direction arena

There’s some hullaballoo over this insanely long and diversely designed article on the death of the blog post. Jason Santa Maria, one of the first to talk about this, calls it “art direction in web design”. Smashing Magazine calls it the “blogazine” trend.

And while many people, like me, are thankful this discussion has reached mainstream status, since Smashing Magazine is one of the hottest web properties out there, and their word is basically gospel for a lot of people, others found problems with its actual message.

Let’s start at the very beginning. The title and first paragraph alone make the likes of Shaun Inman cringe:

ugh, I don’t think @smashingmag could have missed the point more. http://shaun.in/g/3j Design for content’s sake, not design’s sake.

Although original talk of art direction laments the lax in creativity that has stemmed from the death of hand-coded personal pages and the rise of automated content management systems that power blogs, I don’t think you should attack the blog post format just because it looks boring. Unfortunately that’s how most people understand the purpose of design—to make things look more interesting, and little else.

Pushing yourself to create original layouts and designs customized to the content of each post is a fascinating and entertaining way to build a blog. [...]

Designing a creative layout for each new blog post, based on the content itself, requires skill, patience, dedication to the content and, most of all, effort on the part of the designer!

Those are pretty good reasons for pushing a custom layout reminiscent of magazine design, but there needs to be more. That’s why it’s important that the term “art direction” should be the term used. It’s more than just a trend. It’s actual understanding of how content—text, images, video, numbers—can be arranged so that it is consumed effectively.

Ironically, many have complained that the article itself is difficult to read. Throwing chunks of content around and away from the typically linear layout for the sake of demonstrating your point is not going to cut it. If people have more trouble reading this way, your design failed and you’re better off dropping the embellishments.

I think overall, Smashing Magazine did a noble deed in introducing the concept to the masses, but it needed to be a little more refinement than your run-of-the-mill list article. The upside is, their topics are certainly leveling up, as with a lot of things in web design these days.

Is this art direction/blogazine “trend” the future? Maybe, maybe not. It’s great to look at the long history of print design and try to apply some part of it to web design, but the best thing about the web—its dynamic nature, from clicking and scrolling to serving API calls and database queries—should be factored in too.

November 5, 2009 2 replies

The list article backlash

It’s begun.

Actually, since list-style blog posts on design trends and other pretty things have been popular for a few years now, I’m sure the backlash has been happening for a while.

Now, it does make sense to organize your a complex article into easily digestible chunks, especially in a not exactly 100% comfortable to read environment such as the Web. It’s good to keep tabs on great new typefaces and graphics in your arsenal.

However, list articles have gained a bad reputation for other reasons because quality is put on the backburner. And there are a number parties responsible:

  1. The marketers: It’s easy to thank SEO for this phenomenon. A significant portion of internet marketing involves social media, and high-traffic sites like Digg just love the list format. It’s killer linkbait.
  2. The readers: The problem is lists don’t always contain what people need to truly learn. A lot of these people don’t know any better, and the explosion of lists distracts them from laying the foundations first.
  3. The internet: Why? There are great lists out there; people will need to separate the wheat from the chaff. But maybe, it’s the very nature of the Web that mutates the need to find the good stuff into the need to find as much stuff as possible or the quickest, easiest solution to a problem.
November 3, 2009 say something

Laika, font of the future?

Meet Laika, a dynamic font that throws out typographical conventions out the window. Serif, sans serif, bold, italic, old style, or new—Laika can be anything you want it to be. Check out the video below or play with it yourself!

There is such a rigid and finite nature to typography that it is staggering to imagine what the implications of a “dynamic font” would be. Is this how future fonts will be made and how they will behave?

October 13, 2009 say something

Web Trend Alert: Virtual business card sites

Jacob Gube of Six Revisions has compiled 30 visually-stunning sites which are all formatted like virtual business cards. Tim Van Damme, whose dot-com of the same name sparked this trend, also maintains a list as well.

Tim Van Damme Screenshot

There’s little else on each page except a rectangular area found dead-center, filled with icons representing the tons of new ways we can be contacted, befriended, stalked. We have the Web 2.0 era and all the insanely creative social media icon designers to thank for this phenomenon. (Sometimes blogs and other related sites are linked to in these cards, but who has time for those anymore?) If you don’t have the chops to whip up your own, services like Card.ly come to the rescue.

But that’s just the visual side of the metaphor being brought online. Business cards are meant to be exchanged because of the information they contain, so what good would these sites be without technological mojo? We have great frameworks like vCard, hCard, and perhaps the open identity systems like OpenID and oAuth. We also have companies working in the mobile space or have devices of their own (more here).

Then there are the lifestreaming apps, like FriendFeed, Tumblr, and chi.mp, which blur the lines between keeping one’s social accounts in one place and keeping up-to-date with said person at the same time.

How does one unassuming professional looking to establish an online presence actually choose from these possibilities? Social media evangelists pretty much recommend we get on everywhere, as many as and as much as we can help it. The goal is to be ubiquitous rather than obscure.

I have to wonder when we’ll ever reach true unification. Home phone. Work phone. Fax. Mobile phone. Email address. IM handle. Static homepage. Blog. MySpace page. Facbeook profile. LinkedIn profile. Facebook Fan Page. Twitter username. Then this—all of this.

How do you identify yourself offline and online? Do you pick one, or unload a bunch of URLs, aliases, and digits on your potential new client/drinking buddy/love-of-your-life? Is this whole business card business even a suitable metaphor, or yet another idea startups can cash in on? And we’re not even bringing up identity theft here.

September 3, 2009 3 replies

Facebook chooses consistency over rounded corners

Facebook

Just about the time it’s become almost trivial to create rounded corners, Facebook suddenly decides to go back to its originally boxy, “razor cut” look. In the announcement, the Facebook design team reveals its priority:

Since we introduced rounded corners to Facebook, their consistent use has been spotty at best. The corner radii vary, and it sometimes feels arbitrary which corners are rounded and which are not. Additionally, they add an extra layer of complexity to the code (note: IE, please add support for border-radius).

As part of the effort to simplify our visual style, the design team recently decided to go back to our square corner roots. In doing so, we hope to champion cleanliness and the razor cut look that Facebook is known for.

That’s choosing consistency over the popular choice to go with rounded corners just because it’s a recommended design pattern. Not everybody would have the guts to do that.

Heck, it takes guts for Facebook to keep tweaking its interface, because at each turn it’s spurned so many protesting groups that keeping track of which one is against which feature becomes futile. For all we know, new groups protesting this rollback will surface yet again.

facebook addicted

But Facebook always knows what it wants, it seems, and always sticks to its guns. Given the current design trends—from “Web 2.0″ gradients, candy colors, large fonts, and rounded corners, to Apple-inspired interfaces, to the highly detailed grunge and Victorian textures—would you, as a hypothetical head of the Facebook design team, have come up with something like its current look? Or would you have changed it? Save for the already-gone rounded corners, people wouldn’t have pegged this site for a spawn of the Web 2.0 era. It didn’t feel the need to look like one. Its features already spoke volumes.

Let’s talk feature redesign. The most controversial one so far, which put the status updates on the homepage, has also redesigned the social networking design pattern as a whole. It’s not just a copycat of the Twitter or FriendFeed (which it just acquired) interface, but emergence of the Real Time Web had a lot to do with it.

Back in the glory days of MySpace and Friendster, Facebook had a chance to copy its ability to ultra-customize profiles with custom CSS and background images. And there was a time when FB’s apps messed up profiles that things almost looked as horrible as any MySpace or Friendster page, but Facebook once again swept in and prioritized consistency. Over total freedom.

Facebook always seems to be choosing the unpopular, unconventional path, but it’s now the most popular social network on the planet, and the 3rd most popular site in the world second only to Google and Yahoo! They must be doing something right.

August 31, 2009 one reply

The ugliest websites in the world

CSS Hell

Welcome to hell.

Still on the subject of the dark side of the web: I found a contest for the ugliest website held last June. The winner, which turned out to be mytastynuts.com, won a free redesign package worth $1800. Now this could have been a little more buzzworthy if the contest and company site itself looked like there had been thought put into the design. Heck, if you ask me, the current mytastynuts.com looks better, and don’t really have the right to be doing redesigns.

Of course, there’s really no harm in entering a contest where a free redesign is up for grabs—even if it ends up being not much of an upgrade at all—but that’s the problem with web design: the threshold’s too easy to cross.

The ugliest website contest would also have gone viral if the site were designed in the ugliest manner possible. Something that looks like this (without looking like they’re ripping you off). But that’s the other problem with web design: not everybody “gets” good design.

  1. Many have high tolerance for badly designed sites and bad design in general. Put bluntly, they wouldn’t know if something looks ugly even if it hit them in the face. Sometimes design can depend on a person’s instinct and taste, but it can also suck
  2. Combine that with “it’s just a lowly website”, not something cooler like architecture, fashion, or an ad campaign, and it’s a steep, uphill battle.
  3. And to top it all off, there’s the thin line between design and decoration, which is the absence of purpose and real content. A website, more than any other designed entity, is nothing without content and function.

Don’t be such a downer

Okay enough with the pessimism. How do we get rid of said problems? Eliminate ignorance, for starters. Buckets of inspiration from CSS galleries and image bookmarking sites are always good to have, but it’s also important to know exactly what we should avoid.

I recommend grabbing some eyedrops before clicking any of the links below:

The next step is figuring out why said sites are on the list. But that’s for another (ugly) day.

July 29, 2009 say something

The day Twitter lost its personality

Twitter homepage redesign with search

Twitter definitely upped its game as its new homepage rolled out today (viewable only if you’re logged out). Now its greatest strengths are featured front and center: real-time search and trends. A wise upgrade no doubt, but there’s something off about the design.

On any other website I wouldn’t have been bothered by this. A fair amount of blue, green, gradients, rounded corners, and overall sleekness reminiscent of a certain OS: these are all “acceptable” characteristics of good web design these days. The problem is, this is not what Twitter is about.

Twitter old homepage

To me, Twitter is warm, organic, friendly—all because of the homepage (and the Fail Whale, of course). Sure, it used stock illustrations instead of commissioning original ones, but they were distinct enough. None of the cliche sunbursts and clouds, or the decidedly safer shades of blue.

Yiying Lu :: Fail Whale

And just as Twitter exploded in popularity, so did its branding. There’s an official Twitter bird, but whenever I see any other illustrated bird—hawk, owl, or any other kind—I think of Twitter. Heck, when I see that almost distinct light shade of blue (forget Tiffany & Co.!) or a rounded typeface, I think of Twitter. And while LOLcats have cemented their meme-dom for a while now, it’s really Twitter that shot them to stardom when they were used as error messages on the site.

Sure, all these inside jokes, cutesy mascots, and pastel hues may seem immature to some, and maybe the higher-ups thought it was time to get Twitter a personality makeover. What did they replace it with, exactly? tweaked Web 2.0 slash Apple design elements? Try again.

The old design elements fit Twitter’s image of sheer simplicity, of 140-character answers to the question “what are you doing?”. And today, with the homepage redesign, that image has started to slip away.