Cookie cutter web sites

10 Feb 2010

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

The other day, someone lamented,

“I can’t tell the difference from this site and the hundred of others I’ve seen. These days, more and more websites look the same.”

We’re all learning better practices in web design, and that’s a good thing. But designing a website isn’t a simple recipe, and while it’s important to make a website useful, they don’t have to all look the same.

Things are placed where they are because they make sense, and the user has expectations based on using other websites. That’s not a bad thing, but in order to create memorable websites, we need to look at the actual content and design consciously.

But it’s not just WHERE things are, it’s also WHAT they look like: Web 2.0 elements such as subtle drop shadows and gradients are rampant. Sure, the web is looking much nicer than it did a few years ago, but at the same time, websites have increasingly following the same patterns.

So, this is a mini challenge to designers out there (including me!) to take a look at their designs and make sure we get them to reflect the personality of the person, company or product.

The typical website

In order to determine which conventions we will challenge, we need a starting point. Let’s dissect a standard web 2.0 website and go through some ways that we can make our websites a little bit more unique.

It’s got the logo in the top left corner, navigation in the top right, a bit of generic text, and a boring footer. Steve Stevenson’s site isn’t bad, but it lacks originality, personality, theme or anything that would make him stand out as a great designer.

Let’s look at some websites that do things a little bit more uniquely, to get inspiration to bring our websites to the next level!

The typical organization

Why do you have to put your logo in the top left hand corner? Who says navigation has to go across the top and to the right? For a skilled designer, you can organise your website against convention and still make it easy to use and navigate.

HTML5 is proposing navigation and footer tags, which is good in some ways: it will make searching through your code easier to find things like company name, navigation and more. But it is a bit prescriptive in describing where these elements should sit. Break conventions at your own risk!

Logo goes in the top left corner

The top left corner is the conventional location of logos, and it works: it’s the first thing people will see. But you don’t have to put it there. With careful planning, you can put your logo elsewhere. Here’s a few people that have moved their logos successfully.

Christophe Herbinet dares to put his logo in the bottom right corner. Scroll through his portfolio. Its solidity there in the bar is quite strong (It also reminds me of print advertising, where the established brands put their logos in that corner because of the way people read: left to right, top to bottom).

The Silver Empire has a centered logo, with a highly structured navigation embracing it. What I like best about this approach is, if you go to their portfolio, the designer there has used the centered logos on a few other sites. It is obviously a personal preference for this designer, and being able to see a distinctive style for a designer is great. A centered logo has a different balance than a left aligned logo.

Made By Elephant’s logo is right aligned. In fact the entire layout is anchored onto the right. Right-aligned logos also work well with lots of white space.

Navigation is text, along the top, with hovers

Viewers use your navigation to move through your site. A boring navigation is a real shame. Sure, a simple style can sometimes be the most effective, but think carefully whether you are keeping it simple because you’re too lazy to push it to the next level, or if it is truly the best solution. Its placement and style can tie your whole website together.

The images on Eyebridge’s website are vaguely related to their contents, but what stands out is their seemless integration into the theme. They’re on nails, and they rock back and forth when you hover. The light at the end turns on when you hover on it.

This elegant example on Dan Joe Design’s site has an unusual layout, but it is still done elegantly, so that navigating is easy. The navigation is on the right, but it doesn’t seem unusual, and on the individual pages, he reinforces the selected navigation at the top(I also love his t-shirts!).

The navigation on Juan Diego Velasco’s site is on the left, and vertical, like a tab. This navigation is interesting because it’s not actually required, as it’s a one page website. What it does is offer a quick reference for those who are looking for something fast (it takes you down to the footer, which is also very well done!).

This is a brilliant example of a designer who has worked with a copywriter to make a distinctive navigation. The logo and navigation are all encorporated into the layout, and emphasized by the copy.

Red Velvet Art’s website is a great example of an illustrated navigation that matches its website very well. I think they could have done more to the images on hover though (the camera changes a bit, but that’s it).

The Mission Bicycle site’s navigation is bold, simple and beautiful.

Square factor’s one page site using its navigation to scroll down, but I love how it shows (using down arrows) how far down you’re going. This site is also beautifully illustrated as you scroll down, and has a very nice footer.

Flook is an iphone app about finding interesting places to go in your community. Their navigation reflects their whole brand: it’s fun and it’s about community.

Buttons should be bevelled and shiny

Yes, it’s important that buttons look clickable and, sure, a slightly 3-d button does the trick. Unfortunately, it’s easy to add a bit of gradient, drop shadow and bevel to a rounded cornered rectangle. But let’s face it: every other website has the same button. There’s a real opportunity here to make your website better, by creating distinctive (but still clickable!) buttons.

On obox’s blog, we are not freelancers, they’ve done a really good job connecting html objects using hand drawn items. Here they’ve made a button that not only matches their website’s style, but also looks like a button.

Here, on Yorkdale’s back to school site, the hover
scribbles in, like a school book.

Subtle style change on my nite life’s holding page keeps the arrow looking like a button, but is still unique and stylish.

Websites should be 960px wide

This width has become the standard recently, and there’s some great tools for setting up your grid at this width. Why don’t we go narrower? A little bit wider?

Only 2 Designers chose a width of 250px for their content, with the menu and extras peaking out of the sides. They’ve also decided to go without a traditional footer. The overall effect is unique and distinctive.

Vertical scrolling only, please!

Almost every website, when they have too much content for one page, has a vertical scroll bar. People aren’t used to scrolling any other way. Sometimes though, you can create a much more interesting experience by moving around the page in different ways.

Alex Fluera’s photography portfolio is a typical use of a horizontal layout. Many photography websites look very elegant scrolling in this way.

The box doodle’s website keeps their main message static and allows you to scroll through the various entries. The way that they are positioned encourage you to scroll. Unfortunately the down arrow doesn’t let you scroll across.

Synthetic’s website defies multiple standards: its logo is at the bottom and it’s got horizontal scrolling. But, somehow this all ties in to make it fun to go through their work. Each piece has some random black and white clipart item with it, and the constant rainbow at the bottom encourages you to scroll. They’ve kept the menu static, though, so you don’t get lost.

Tyler’s site doesn’t have a traditional navigation. There’s no scroll bars. What he does well is makes moving to the next screen an experience. It’s fun, as the shapes melt into one another.

New Orleans Creative Community is another website that’s fun to use, but not too hard to navigate around, even though there are no scroll bars. While they have a drop down menu to navigate to different sections, the good times is dragging around, exploring, and reading all the random things they’ve put in.

Wall swaps is a cork board. It doesn’t have an scrolls; you’re going to have to explore with the little boxes at the bottom or you hold down ‘ctrl’ and slide around with your mouse. Brilliant!

Details with personality

It’s hard to write copy that delights. It’s hard to add details that are fun to use. I’ve seen so many websites with the same general text (mine too!), which offer nothing unique or interesting. But here’s your opportunity to reflect your personality (or the product’s, or the company’s) in the website. You started this website because you found something interesting, so why shouldn’t the design reflect that passion? Make sure every viewer knows about that passion: take care with the copy, add something unique, and if you can think of something appropriate, make it delightful or entertaining.

Denise Chandler asks us if Phil sent us. He didn’t, but that’s okay. She’s got a lot of common webby items in there, but it’s got personality. Also check out her Team Fannypack. You would never accuse Denise of forgetting to add personality to her sites!

Jack Cheng has this great little graphic in the footer of his website. He’s prepared links to other items he works on, but has arranged them by length of attention required. Of course, twitter is at the far end.

Tinder is kinda fun for a landing page. You can change the colours, which I really like. They’re teasing us, just giving us the definition of their noun.

Hutch house doesn’t have the nicest typography, but it’s got a great graphic, and being able to change the theme is brilliant! They’ve also tied in the copy to match the various backgrounds.

Dustin Curtis has a different layout for every blog post he makes. What I like is this morbid timeline of his life, with his accomplishments so far, and potential death at the end.

Themes

Many well-loved websites have a theme, whereas the average web 2.0 website seems comparatively shallow. Just like someone who dresses like a punk but without the social/political context and knowledge, a website without a back story will often feel like a surface was just slapped on.

When a website has a solid theme, each element is carefully designed to match, and the overall experience is seamless. Here are some examples of websites who have implemented a fantastic theme.

Simon Collison’s website is both striking and a little bit weird. His animal sketches don’t necessarily relate to the sections they represent, and yet it works, because it’s consistent, and really seems to reflect his idiosyncratic personality.

Dollar dreadful is a collection of old stories. The site looks as if it’s an old newspaper advertising new books available. The hover effect on the available books changes to a large eye so you can download a preview pdf.

Nineteen 47 is all about sports clubs. They’ve thematically designed the whole site with sports memorabilia. The effect is nostalgic and comfortable.

While I think XHTML CSS Expert has done their theme up properly, making a ‘tailor-made’ work with their menu and examples (although their name lets it down a bit…it sounds like a generic ).

Twitter’s conference, Chirp is beautifully designed, and its style and theme is well executed throughout the entire site. I love that the night-time event (Hack Day) changes the background to night time. You can also tell who the web designer is by the style.

And now you…

The website examples given have taken the time to think about the reasons for doing things differently. It’s easy to create a traditional website for yourself, but I want to challenge you to think about what makes you different from other people, and how you can reflect that in your work. While there’s some ideas here, I encourage you to create a style for yourself, to create delight for those viewing your website that is uniquely you.