Optimal web page layout width

Monday, May 5th, 2008

The 960 Grid System CSS framework website, offers a nice explanation on why using a 960-pixel page width:

All modern monitors support at least 1024 × 768 pixel resolution.
960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
This makes it a highly flexible base number to work with.

I’ve been designing web pages with a default width of 955 pixels for a long time, and I always had a hard time dividing the width in useful modules, since this number isn’t a joy to play with.

Perhaps this might be obvious to some, but struck me as a very useful tip.

The Visual Rhetorics of the Supreme Being

Wednesday, April 16th, 2008

Dutch publisher Onomatopee has in their catalog this interesting poster/pamphlet:

Cover of the pamphlet

The logos face of the poster

Text by Max Bruinsma and design by the Strange Attractors.

I find it interesting how the attributes of each of the companies which logos are mimicked highlight a few of the many characteristics attributed to the concept of God: Lego brings up God’s aspect of kindness, perhaps, while IBM suggests an all-knowing, designer-of-huge-things God.

Oddly enough, I’m not sure of exactly how Google’s God echoed upon me. I think the logo design itself isn’t as strong as the brand name for Google as it is for older companies, or companies that rely in a heavier way to the visual presentation of their names (as Coca-Cola most certainly does).

I hope this is isn’t offensive to anyone. : )

* The simple header in Onomatopee’s website is nice; very ‘soundful‘ in a strictly typographic fashion.

Da design and coda rap

Friday, April 4th, 2008

My friend Nancy sent me a link to this video:

Poetic Prophet (aka The SEO Rapper) has a few other marvels like ‘Link Building 101′:

Totally Amazing Posters

Friday, April 4th, 2008

Illustrator and designer Bob Staake is kind enough to keep this outstanding collection of early- to mid-twentieth century posters collection.

A small sample with a few of my favourites

Great for inspiration and just plain old contemplation.

On Explaining Priorities

Thursday, April 3rd, 2008

“…when everything (background, structure, content) is emphasized, nothing is emphasized; the design will often be noisy, cluttered, and informationally flat.

—Edward Tufte, Visual Explanations

Why it’s so hard sometimes getting this through to clients? It’s for their own good, you know?

The site with no content and all the content

Thursday, March 27th, 2008

A friend sent me today a link to the just-redesigned website of Boston, Massachusetts base advertising agency Modernista.

This is an actual screenshot from Modernista’s website

All of the content of their website is actually off-site: text in Wikipedia, videos in You Tube, stills in flickr; the site is just a tiny red JavaScript-based menu with an iframe behind it.

Creative director Gary Koepke says in an interview to Creativity:

“There’s such a challenge for ad agencies to be known as digitally savvy and understand what’s going on the medium. We wanted to prove to people that we understand a way that we can have a transparent, open source and highly successful site.”

Well, I think they nailed it.

This approach has at least two great qualities:

  • It absolutely expresses how up-to-date the company is, not in terms of visual communication (which should be a commodity in their playing field), but in respect to deeply understanding the way information finds it’s way around nowadays and how open to comments and participation any enterprise must be to succeed in this community-driven world.
  • This is a unique solution to their problem, which can’t quite be ‘borrowed’ or ‘be of inspiration’ to the competition. I mean: there’s nothing that can be similar to it: it’ll be either exactly the same or something entirely different. Anything in the middle would be seen as a blatant rip-off. Achieving this in an environment in which stuff is copied all over fast and easily is quite an accomplishment.

I look forward to see how this echoes around the web.

Detail awareness

Wednesday, March 19th, 2008

Apparently, yesterday’s Big Thing was the Awareness test:

Pretty interesting, right? This made me think about the level of thought and craftsmanship we, designers, frequently put into some details. That may be too much sometimes.

Charles Eames said: “The details are not the details. They make the design.” Who am I do disagree with him? Really, how could I ever go against this? The thing is, love details. I truly believe the dedication to seemly minimal things can more than often be the one way to really get a design right; I think the same way when deciding programming approaches to some problems:

But one other thing I do believe, however, is that sometimes designers get to the detail phase before everything else is done. It’s not rare to find a website with great finish, but lacking some essential item in the menu, or perhaps a design that doesn’t make it clear what’s the goal of that site is.

There’s some groundwork that often get left behind in the race for perfect details. And achieving overall beauty should not, under any circumstances, get in the way of detailed usability, legibility and purpose-filling considerations. My point is to suggest that details can and should be prioritized: never ignored, but always contextualized in the flow of a project, coming up when all functionality is right.

Because the result, sometimes, can be in some ways similar to the video: you may do a great job drawing and animating a break-dancing, moonwalking bear, and the user ends up never appreciating the level of work you put into it, because she simply needed to count passes.

Book: Don’t Make me Think

Saturday, March 8th, 2008

Photo of my copy

(This is the first of what I hope becomes a series of posts on books I finish reading. I hope any of this ends up being useful to someone.)

I don’t plan to review Steve Krug’s Don’t Make Me Think: A Common Sense Approach to Web Usability in any new way; 411 people have done it so far in Amazon.com alone. Considering at least 100,000 people have already read this, you can take it for granted that it’s a good book. I guess I’m writing to convince you to read it as soon as possible (if you don’t have already, of course).

Upon receiving it at home, I was surprised to see how thin it is: the Brazilian edition which I bought (I’ll get back to it shortly) is only 127 pages long; it seemed like a very introductory, superficial book. I guess I’m more used to judging a book’s by it’s length than I thought, and got punched in the face with that unfair assumption later on. In fact, the author himself aimed to conceive something ‘that could be read in a single airplane trip’.

Let me just tell you this: just 50 pages on, I was already quoting Krug all day long in discussions at work. His ideas are so simple, make so much sense and are so generic that, if you’re designing/developing interfaces (web-based or not) you’ll see yourself constantly in situations where Krug can help you. His common sense approach just becomes something you take with yourself, and put before the many obscure considerations people end up having when discussing project details.

It’s also interesting to see how the examples in the book—which are only two years old in many cases—are already outdated, while the principles he shares are more up-to-date than ever. His ideal definition of a home page has become the standard template of Web 2.0 sites (big, clear company statements with big call-to-action buttons and links); and even though Krug barely mentions web-apps in the text, everything he writes just fits in perfectly to them.

Summing up: huge recommendation, for anyone involved in sites/software design/development/management/conception.

* Note on the Brazilian edition: if you’re a fellow Brazilian, avoid the AltaBooks edition at all costs. Really. Run from it like you’d run from the devil. Page layout is terrible, with no margins whatsoever, reaaaaaaaaaally long sentences, the footnote references are all screwed up, a lot of bad translations. In many cases the book tears apart the usability principles Krug is explaining in that very page. I’m thinking of warning him about this, if can manage to get in touch.

If you can read the English in this blog, you deserve a good edition—as I believe the original one is. So go for it.

If Star Wars had it’s opening titles designed by Saul Bass…

Tuesday, March 4th, 2008

… it could probably look like something this:

(It’s a homage/exercise by an art student, by no means comparable to Saul’s work, but definitely worth watching.)

I am a huge fan of the design of movie titles, so much my graduation project was actually a book (some 250 pages long) on this subject. It never went on to publishing, but is one of the most joyful things I’ve ever worked on; I hope someday I can get back to it.

Be sure to check the ‘related’ videos list in this video’s page, which showcases some of his work, including my favorites—Anatomy of a Murder and Ocean’s Eleven (1960).

While at it, try to watch ‘Why Man Creates‘, a short film made by Saul and his wife Elaine Bass about creativity, which won the 1968 Academy Award for short documentary.

Order of fields in a contact form

Thursday, February 21st, 2008

Wenetus Interactive, a brazilian web development company reversed the usual order of fields in a contact form:

Wenetus contact form

Instead of the usual name, e-mail, message order, the form first asks what the visitor wants to say (something that is in her mind, for sure) to only later ask for contact information.

It’s a really simple point, but I believe it makes a big difference on how the visitor perceives the interest the company has on what she has to say.