Candy, A Journal by a James

Colourful crescendo

The art­work for Simon Jobling’s One Phat DJ August 2008 pod­cast: Colourful Crescendo. It’s a com­bin­a­tion of Illustrator and Photoshop work mis­use of filmgrain filters.

Originally made for the July Crescendo, a month and a few name changes later, the pod­cast and accom­pa­ny­ing art­work go live today.

It’s quite fun to do pod­cast art­work; well recom­men­ded. Thanks for the chance Si!

Bye bye liquid layouts!

Yes, I am pre­dict­ing the death of liquid lay­out of web pages. Not all mind you, some web apps will still be liquid, but for the rest of the web: liquid is dead. This is a nat­ural next step after declar­ing elastic lay­outs dead, so no sur­prises here.

There are three main ways to define your lay­out in web design: fixed, elastic & liquid. Having writ­ten about the dif­fer­ences between them before, I’ll suf­fice with stat­ing that fixed lay­outs are defined in “px” (pixels) and liquid ones in “%” (percentages).

Using a fixed lay­out means your web page is the same width irre­spect­ive of the view­ers’ screen width, like so:

Fixed layout.

Using a liquid lay­out how­ever, means your web page scales along with the view­ers’ screen width, like so:

Liquid layout.

Liquid lay­outs used to have an edge over pixel lay­outs in the sense that they increased use of the screen real estate, thus provid­ing more room if the viewer increased their text-size. Line-lengths are hard to con­trol with liquid lay­outs, because of vary­ing screen-sizes obvi­ously, but also when the viewer increases (just) the text-size. Jason Kottke pos­ted a good warn­ing about line-lengths in liquid lay­outs a while back:

Attention liquid design­ers: take a gander at this por­tion of an ancient Egyptian parch­ment on papyrus from the Louvre. Even the ancient Egyptians knew not to make columns of text too wide.

Now, how­ever, most browsers have adop­ted full-page zoom­ing over text-size zoom­ing. Most provide both, but full-page zoom­ing is the new default. Full-page zoom­ing gives users with a wider screen (for example) the chance to increase the size of text and images, while still pre­serving the ratios of fixed lay­out pages, like so:

Fixed design with full zoom.

As you can see, full-page zoom­ing means fixed lay­outs also provide increased use of screen real estate, but only when needed. In addi­tion fixed lay­outs keep line-lengths rel­at­ively stable, and are easy to work with as they are based on pixels, just like images, videos and other objects you may have on your web page.

Px vs Em: Is it still relevant?

You used to have to choose. Choose between an easy, but inflex­ible, px-based lay­out or a hard to con­trol, but flex­ible, em-based layout.

Now with full-page zoom being imple­men­ted (as default!) in Internet Explorer 7, Firefox 3 and Opera 9*, it’s a dif­fer­ent story. Full-page zoom­ing means your easy px-based lay­out will be fully flex­ible. Even more flex­ible than most em-based lay­outs in fact, as images will scale along too.

So I’m ask­ing myself, why bother with hard-to-keep-from-breaking em-based layouts?

[update] I don’t think liquid lay­outs are rel­ev­ant any­more either.

[update 2] * And now Safari too! That’s all of the major browsers.

PS. This still leaves percentage-based lay­outs of course, but they max­im­ise screen real estate. Which is very dif­fer­ent from max­im­ising read­ab­il­ity (line-lengths and all that jazz). As far as I can see, %-based lay­outs are good for some web-apps (like gmail) but aren’t optimal for other uses.

Fun smoke

Smoke, in pubs, res­taur­ants & clubs is abso­lutely awful. However as a designer it may be neces­sary at times to recre­ate it. And lucky me, Joen of Noscope has just the way to do so in a very fun way!

smoke

This is my first attempt at the method, and it’s not too shabby, is it! So many thanks to Joen for shar­ing his wis­dom with me (and you).

On a related note, you should check out his pro­jects and port­fo­lio — I hear he’s avail­able for design work and I know he’s very good.

Fat nano?

There’s a bunch of mock-ups going around the web (inspired by “pho­tos”) of wide iPod nanos. I don’t think that form factor is appeal­ing, and I’m sure plenty people at Apple don’t think that too. That’s why I think the fol­low­ing form factors are more likely, or at the very least, bet­ter. But who knows, they may need the “fat­ness” for the intern­als, mak­ing my mock-ups impossible!

UpdateBlimey! I got it wrong appar­ently. They still shouldn’t have made it fat in my opin­ion. Who knows what’ll hap­pen in the next update! (And who knows how well this line of nano’s will sell!)

Update 2Wha-hey! I got it right! Only took apple a year to catch up ;)

iPod Nano with bigger screen, sideways.
iPod Nano mock-up with screen and clickwheel sideways.


London 2012 branding

Respected design­ers Armin from Speak Up and Bryan from Coudal actu­ally defend the London Olympic 2012 brand­ing. They list a num­ber of reas­ons, but they all boil down to one thing: The world hates it, but at least it’s ori­ginal! Thing is, not only is the logo hor­rible and the brand­ing just plain wrong for the games, it’s not even close to being original.

Take the ‘innov­at­ive’ epi­lepsy indu­cing new-look brand­ing film (I’m not kid­ding about the epi­lepsy attacks, beware!). Is it really that innov­at­ive? Hmmmmmm. Let’s have a look.

Graphics flow­ing through a city all squiggly-like has been done in a num­ber of ads and music videos, includ­ing “Shitty Bum by C-mon & Kypski” (2004 or earlier, by the way). Okay, so that part isn’t original.

What about the psy­che­delic col­our changes? Overused through­out the eighties, the best known example prob­ably being the MTV Launch video (1981).

However, there’s a quote in the aforlinked BBC art­icle which makes me believe it’s not all bad:

“The logo came up on TV and I was think­ing about the 2012 Games and then I was out,” said [Christopher Filmer, who needed to go to hos­pital after a seisure].

Because thank good­ness, at least it’s on message.

Amazing Cityscape

Here’s a fant­astic city­scape by Craig Mullins. I love the mix­ture of Ancient Greek, “Gotham” and “Roaring Twenties” style. The mood, the angle (even if the per­spect­ive of the street is a little bit off), the superb light­ing and details in the archi­tec­ture really make this piece amaz­ing to behold.

City Scape by Craig Mullins

A city­scape by Craig Mullins

Once you real­ise that it’s quite an achieve­ment to make the afore­men­tioned melt­ing pot of archi­tec­ture all come together and you can see why I think it’s even more amaz­ing than it looks.

If you check out the rest of Craig’s Gallery you’ll find even more amaz­ing images.