BlackEstate_01-large

A Beautiful Web

I promise, this won’t be YAWWR (Yet Another Weekly Website Roundup) – if only because I know I don’t have the time to put together something like this every week.

However, while browsing the tubes and collecting many good links on the topic of web design, I started gathering a filtered set of astonishingly good web sites. I think it’s time to reveal that secret list for the first time. In return, I ask only that you visit these web sites, because good web design cannot be captured in a single screenshot (you know, there’s that whole usability thing, right?)

Nay, the web sites are not organized in any specific order.

Black Estate

URL: http://www.blackestate.co.nz/

Often cited as one of the best examples of Dark Web Design, I’d rather describe this site as a good example of Minimalist Design, that happens to fall on the dark side of the spectrum. For those still collecting evidence that good design can be achieved with just Black, White, and a dash of Red, this site is certainly worth looking at.

Black Estate Web Site

The Black Estate Web Site

Perfection? Not quite. I find the outdoor images a bit distracting (especially the larger ones down the page), they interrupt the clean, simple, almost lyric design. The left-hand-side menu that sticks on the page is equally disruptive to my eye (and overlaps at times with the copy), but only after you start scrolling down the page. The map found at the bottom of the page is just too good to be relegated so far down the hierarchy. The first paragraph starts with a bold “A” call out, but no other paragraph does the same. There is a strong visual organization established at the top, but it is not respected throughout the rest of the page (although that’s not necessarily a Bad Thing).

Yet, even if you agree with me on these blemishes, I am sure you will recognize the Beauty of this one-page site. The stark contrast of the black background and white text makes a clear impression on the visitors, focusing their attention on the copy and almost nothing else. Single-page web site also means simpler navigation, and the user doesn’t have to spend any time in figuring out how to get to the information. The hovering menu seems almost like an afterthought. Actually, it fits perfectly in the top section, but it feels like the decision of letting it hover was a reaction once the copy of the page made it longer than expected. Be it as it may, the typography of the page is certainly a semi-silent hero. The logo of the product is clearly displayed at the top, with its peculiar font, but the rest of the page uses equally interesting options. For those that wonder why they used Red, if they needed it so sparingly… have you tried to click on “Find a stockist“, or “Order online” in the “Wines” section?

Dragon Interactive

URL: http://dragoninteractive.com/

Another Dark Design. There must be something good about this type of thing. Anyway, if you read other web design roundups, you may have seen this one before. There are actually a few tutorials around the web explaining how to replicate parts of this design step-by-step. In contrast to the Black Estate web site, Dragon Interactive uses a whole range of Grays, Blues and Oranges for accents. Developers may dive into their “Labs” section to read about some of the magic used on this site, but the site is first and foremost aiming at presenting a visual image.

Dragon Interactive Web & Design Agency

Dragon Interactive Web & Design Agency

The background image presents a metallic shelf (in this day and age you just have to have a glossy surface to produce some reflections, right? At least this one is innovative in its own right) by using 2 shades of Gray, a twisted line, shadows and highlights. Nothing complicated, really. The primary navigation menus implement a slow transition when hovered on, repeating and extending somehow the soothing effect of the Gray theme. The secondary navigation menu leads the visitor to the main content area by using the darker Gray background.

Things to improve? man, this is a tough one. The three sub-sections in the “Contact” area all present the same contact form (is it bad Design, or a copy issue?). The”Submit” button in the Contact form doesn’t mix with the rest as well as everything else on this site. I wish we had a big display for their logo, because I think it’s very nice (perhaps the home page could spare some space for it?). Finally, the really big problem: these guys need to get more work! If you’re not asking me to do your website, talk to them!

Cultured Code Status Page

URL: http://culturedcode.com/status/

I am actually linking a specific page on this web site. That’s not to say that the rest of the site isn’t worthy of your attention. On the contrary! Take a look around and you’ll see a very nice, clean modern design. However, the status page is the one that made me stop in my tracks.

Cultured Code Status Page

Cultured Code Status Page

Look at that! Do you spend much time in airports (or train stations) ? I’m going to guess that some of the people at Cultured Code do exactly that: way too much time looking at the Departure/Arrivals boards. Way too much time, I tell you. And yet they manage to pull something valuable out of that seemingly useless hobby. Are you wondering what’s the status on Project X? Here, on this page you’ll quickly find out.

It’s a cute, fun way to present some limited information. It won’t revolutionize the world and God forbid if the whole web suddenly became a metaphor for transportation systems (although, why, yes the web does transport information all the time). It doesn’t have a search facility, but most browsers provide a built-in one (so, why would you want to spend time re-inventing that wheel?). perhaps we should have a legend, explaining the meaning of the icons used before each project’s name, and links to delve deeper into each project’s details. I’m going to say the lack of links is intentional since they may not need to give anyone more details than what you see right here – still, a link to a page introducing and describing each project would probably be a nice-to-have. All of that doesn’t make me love this page any less. I also think it has a certain iPhone-like feel that fits very well with the rest of their web site and their products; I can’t believe it’s coincidental.

Tim Van Damme

URL: http://timvandamme.com/

Right, Tim has been around a while, and this page is not new by any means. Actually, it has been around long enough for Tim to first set up a list of people inspired by it and taking it a step further, a page listing the people blatantly ripping this design off, and eventually giving up on the two lists.

Tim Van Damme Web Site

Tim Van Damme Web Site

What is so good about a single Contact page(*)  that it can spread like wildfire across the tubes? For one, it’s very very effective. Its Rolodex-inspired theme connects the visitor to one of the top-2 metaphors for “Contact” (the other being a business card). Secondly, it’s minimalistic, and as such enjoys the almighty benefit of all minimalistic design: no distraction! That being said, I think the page is so successful because of the designer’s skills and the care to attention (the slight effect when hovering on one of the social netowrk icons, the peaceful, and yet serious color scheme, the smooth transitions from one tab to the next).

Space for improvement? perhaps flip the “About” and “Networks” tabs, since the first should be more important than the latter. Give us more than one Rolodex card, too! The tabs within the single card break the metaphor. Yes, I’m really scraping the bottom here.

(*) I know, I know… after you look at the page a few minutes you will notice too that this is not exactly his Contact page, that the Contact information are in a separate tab… and yet, at first sight, what else did it look like?

Panic Blog

URL: http://www.panic.com/blog/

In “Web Design, from here on” I mentioned 4 basic trends for current Web Design. The first was Minimalistic Design, which is well represented by the other web sites in this list. Another trend that is just now being recognized is that which I called Page-Specific Design. The term that is becoming more commonly associated with this style is “blogazine“, since the designers behind this school produce periodical publications reminiscent of printed magazines (and blogazine sounds sooo much better than Page-Specific Design, right?). The design of each post, each article or page is quite unique, instead of being carbon-copied from one post to the next. One of the major problems with this type of design is that each page must be carefully crafted as a unique piece, and requires much more work before it can be published than your standard run-off-the-mill blog.

Panic Blog

Panic Blog

Panic Blog presents an interesting hybrid. Scroll down their front page and you will notice that each post has its own theme. They all share the same metaphor of being printed paper, but they each have a distinctive identity (the quick post-it note vs the graph paper vs the printer page, and so on). I mentioned Panic Blog as an hybrid between the standard blog design and the blogazine trend because they do repeat some of the themes from time to time. Oh, how I wish they never did, so that I could enjoy the work of their designers. However, we all have to deal with the reality of modern communications: you sneeze, you’re lost. Thus, if we need to ‘suffer‘ a certain repetition in order to keep these people in business, so be it.

Nonetheless, Panic Blog deserves a spot in my personal web gallery, because their design demonstrates creativity and high technical skills in a unique mix. Did the presentation on Panic Blog peek your interest? Did it keep you scrolling down ‘just one more turn page’, just to see how the next story was presented? Very Well, then. It did its job, without getting in your way, without becoming an annoyance. What more could you ask for?



I hope you enjoyed this quick run through my secret list. Don’t forget to drop me a line if you find other examples of A Beautiful Web, so that I can keep my list growing.