About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

Archive for December, 2003

Design and Usability: Part 1

Wednesday, December 24th, 2003

Not surprisingly, as a designer I value aesthetics highly. However at a certain
point aesthetics clash with functionality – or more specifically usability.
Sometimes I wish I were a painter. No constraints, no font size issues, no low
contrast color combination problems, no accessibility or usability concerns
and no angry users to face. You either like my work or not, no strings attached.
But I’m not a painter, I design websites.

The difference between a painting and a website will be obvious to most. A
painting does not require interaction, at least not on a functional level. I
can not use a painting. I can nevertheless enjoy or dislike
a painting (the same analogy is to some extend applicable
to motion pictures
). A website, on the contrary, has a function that carries
beyond its visual attractiveness. Websites generally require (functional) interaction
of some form. The most feared and tenacious embodiment of interaction being
the homo interneticus.

You know what? Humans are nasty mammals. Humans developed to perfection their
aptitude to bitch, whine, moan, complain, nitpick, nag, criticize, grumble,
protest and disapprove. Ironically though, without users (thus interaction) my job
is rather useless. Designing websites is (unfortunately?) not exclusively about
visually pleasing users, it is also about limiting interference to effectively
deliver content and enable efficient interaction. The latter is of course a
simplified statement; the process is more complex and constituted of more factors
and elements.

In “Design and Usability: Part 2” I will dig a
little deeper and try to discern some of the factors and elements related to
usability and functionality. Last but not least, providentially, humans can
also adore, cherish, care, appreciate, value, understand, realize and love.
It is with these thoughts that I leave you and wish you a Merry Christmas and
a Happy New Year. See you in 2004!



The Art of Navigation

Thursday, December 18th, 2003

When building a website there’s an inevitable moment when it is required you think hard about navigational elements. I’m not talking about information architecture here. Information architecture usually helps answering the question: “How will this function?” (among others). Nope. I’m trying to answer the question “How will this look?” – purely from a graphic design perspective.

The above mentioned stage of the design process is one that I spend a considerable amount of time on and particularly enjoy within any project. In this post I want to share my latest experiment on navigation design.

CSS based navigation!In my quest for elegant, clever and nice navigation design I decided to let go of certain requirements. In this case I decided to ignore a few usability (and accessibility) best practices (note: this should of course be avoided in real life implementation).

However, I’ve set myself a few constraints which make perfect sense, even in an experiment. This design should of course be constructed using the sounder XHTML and CSS combination, as opposed to tables. Furthermore, once CSS is disabled, a nice unordered list should remain. Other than that the sky is the limit.

The main purpose of this design experiment is to see how far we can push CSS. Is it possible to create the most complex navigation (in terms of graphic design) and have it marked-up as an unordered list? The answer of course is “Yes!”. And there are a few designers who elegantly proved this point in the past.

As said and proved by many before – CSS can handle your wildest dreams. Unfortunately we are currently only limited by the pace of web standards implementation in modern browsers (specifically one browser, no names of course). This small experiment should work in most modern browsers, but your mileage may vary. Comments are more than welcome, but keep in mind that this is only a trial in design, not in practical implementation as such.