Cookie cutter web sites

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 seamless 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 any 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.

  • Do you have a theme?
  • Does it have a personality, or could it be any website out there?
  • How can you make every component work cohesively?
  • Is it easy to navigate?
  • Can you reorganize things (so they still make sense)?
  • Is it delightful, fun or interesting?
  • And finally… Are you just copying, or are you creating?

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

0 comments on “Cookie cutter web sites

  1. For my blog, I used my own design. It features Post-it’s, pencils and torn paper, among other things. The logo is at the top of my page, but in the center. Buttons are laid out as pencils on the left side of the page. On the right side, twitter messages are placed on a post-it.

    Sure, there’s more websites with a cluttered desk thing going on, but it suits me, so why not use it for my blog?

  2. A really interesting article and you gave us some great examples of sites putting these things into practice.

    You left us with some great points that we should all look over when designing our next site.

    Thanks

  3. Great first article Kat. It is always difficult to challenge convention because layouts have evolved around usability and user expectations. I think portfolio websites do need to show originality but other types of web sites may benefit from sticking closer to the norm.

    I think it’s about striking a balance between creativity and usability.

    • I agree that for some company websites you should do things like stick to traditional layout and style, but I’m sure those companies don’t want their website to look exactly like everyone else. The first rule in branding is that it should be memorable. If I can’t tell the difference between one company’s site and another, that company suffers.

  4. I actually read over 70% of this post, nicely written. The typical website is so true in regard to element placement, even names for pages in the menu seem super generic. I very much agree with finding unique ways of adding personality to your site, in theory it should be easy right? Everyone’s unique?

  5. I keep up with current trends by using rss feeds on user-submission design sites. After a while I got completely saturated with seeing the web 2.0 look. They look good don’t get me wrong, it’s just like you say Kate – they’ve become derivative.

    I’ve just finished http://www.supercake.co.uk and although I’ve kept my logo and navigation position standard, I’m happy to say – “I’m gradient free!”. I think designers need meetings to discuss common our addictions.

  6. Well done really. My website is quite minimalistic: it has navigation menu on the right, but I think this doesn’t make visitors feel uneasy. Maybe I should give a new look to the footer and here I found some useful tips, thanks!

  7. Well done really. My website is quite minimalistic: it has navigation menu on the right, but I think this doesn’t make visitors feel uneasy. Maybe I should give a new look to the footer and here I found some useful tips, thanks!

  8. Great article.

    In my site design I tried to do somethinga bit different with the nav… but then failed to do anything with the rest of the site. Will be redesigned this month, and this article’s definitely food for thought.

  9. Great article.

    In my site design I tried to do somethinga bit different with the nav… but then failed to do anything with the rest of the site. Will be redesigned this month, and this article’s definitely food for thought.

  10. This is a great post. It’s true that many sites look like they are built using the same starting point.

    It really does take a concerted effort to break away from this as, like mentioned previously, you see so many of them everyday and they begin to saturate your thoughts.

    It of course depends on the project and the client but I’m going to try my darndest to think about breaking the mould on the next design project I get.

    Thanks for the words

  11. Nice post. I love the way you explain every single of your points. I hope I can read more posts like this in the future. In the meantime, you’ve got a new twitter follower. Congrats!

  12. This is a great post. It’s true that many sites look like they are built using the same starting point.

    It really does take a concerted effort to break away from this as, like mentioned previously, you see so many of them everyday and they begin to saturate your thoughts.

    It of course depends on the project and the client but I’m going to try my darndest to think about breaking the mould on the next design project I get.

    Thanks for the words

  13. Nice post. I love the way you explain every single of your points. I hope I can read more posts like this in the future. In the meantime, you’ve got a new twitter follower. Congrats!

  14. Thanks for the great article. 100% agreed! Though sometimes its sad too see designers bashing out-of-box websites with unreasonable criticism. We should not freeze ourselves.

  15. Thanks for the great article. 100% agreed! Though sometimes its sad too see designers bashing out-of-box websites with unreasonable criticism. We should not freeze ourselves.

  16. As usual, it comes down to audience in terms of how much flexibility you have in “conventional” design decisions. The same is true for print projects.

    That said, you raise the excellent point that conventional usability features does not equal the exact same execution across every single website you do. And that by taking those things verbatim are making websites that are not memorable, and not interesting.

    Great read, and a much-needed reminder for all of us! =D

  17. As usual, it comes down to audience in terms of how much flexibility you have in “conventional” design decisions. The same is true for print projects.

    That said, you raise the excellent point that conventional usability features does not equal the exact same execution across every single website you do. And that by taking those things verbatim are making websites that are not memorable, and not interesting.

    Great read, and a much-needed reminder for all of us! =D

  18. I think it’s an interesting time for the web, standards have created more usable sites and the success of WordPress has made content management much easier but this has created a homogenized look.

    But now the basics are right, or getting there, designers have a great opportunity to stand out whilst being usable.

    Hate horizontal scrolling though!

  19. I think it’s an interesting time for the web, standards have created more usable sites and the success of WordPress has made content management much easier but this has created a homogenized look.

    But now the basics are right, or getting there, designers have a great opportunity to stand out whilst being usable.

    Hate horizontal scrolling though!

  20. I just skimmed the article but I have to say this is very true. A wordpress site is a wordpress site. They stick out like a sore thumb. Same with most CMS-based sites. Joomla, Drupal…they can be spotted a mile away; all following more or less the same idea.

    • That is why I prefer content management systems like ModX and Expression Engine where you have the flexibility to create a website outside of the box without so much unnecessary hacks.

  21. I just skimmed the article but I have to say this is very true. A wordpress site is a wordpress site. They stick out like a sore thumb. Same with most CMS-based sites. Joomla, Drupal…they can be spotted a mile away; all following more or less the same idea.

    • That is why I prefer content management systems like ModX and Expression Engine where you have the flexibility to create a website outside of the box without so much unnecessary hacks.

  22. Websites absolutely need distinctive design, yet almost all of the changes proposed in this article neglect to mention *why the standards are there* — almost all of them have to do with good usability and how humans scan and use websites. Breaking rules is good, but only if you are conscious of why the rule was there in the first place. Otherwise it’s an immature “let’s break shit” reaction. Mindfulness is what separates art from noise.

      • Have to agree with this comment also…

        I went to the authors site and completely missed the navigation as it simply blended in with the illustration.

        The sentiment in the article is noble but the execution very misguided…

        Plus, the web community is so inward facing these days, we think we’re the majority of web users but we really aren’t. “We’re bored, so let’s be different” for the sheer sake of it is only going to break the web, which isn’t looking too bad these days…

        How about less daily trawling of CSS galleries and more finding your inspiration from other sources. The problem is simply inbreeding of each others designs, and just ‘being different’ without a proper reason isn’t the answer.

      • Let me start off by saying: I love these sites. I agree they’re super fun.

        Yet I agree with the comments right above. So many of these unique design ideas are great … IF your audience is looking for and is open to exploration-like experiences. Many of these sites require people to be a bit patient and to have extra time on their hands.

        When people are searching for vendors, service-providers, talent, designers, etc… many don’t have the patience to ‘explore’ the various websites they visit during their research. Many do not wish to try and figure out how they’re supposed to return to the previous section they were reading. And plenty have no desire to take the time to learn how they should use these ‘super creative’ sites.

        The frustration that can occur from not being able to immediately find what one is looking for in a website can often be stronger than the initial wow-factor or coolness-factor that is felt upon arriving at a uniquely-laid-out site.

        As web designers we must not forget that business websites are for the SITE VISITORS and not for us. For example, if a web designer’s primary visitors are middle-aged managers, it may not be wise to go overboard on the unique factor and risk losing potential customers through confusion or impatience.

        In the end, if you review eye-tracking heatmaps, usability research, and clicking studies, you’ll find that throwing in unique creative elements and making designs super-fun and totally different gets applause and “yeahs!!” from those of us in the design world — but they confuse the hell out of regular web users. And if regular web users make up the majority of your site’s audience … you may want to reconsider whether all the pats on the back from your peers are worth the potential customers you may be losing from your site.

        And as a final note — yes, I understand our company’s website goes against much of what I’m saying here, but that’s why we’re in the middle of a massive website rework. :)

  23. Websites absolutely need distinctive design, yet almost all of the changes proposed in this article neglect to mention *why the standards are there* — almost all of them have to do with good usability and how humans scan and use websites. Breaking rules is good, but only if you are conscious of why the rule was there in the first place. Otherwise it’s an immature “let’s break shit” reaction. Mindfulness is what separates art from noise.

      • Have to agree with this comment also…

        I went to the authors site and completely missed the navigation as it simply blended in with the illustration.

        The sentiment in the article is noble but the execution very misguided…

        Plus, the web community is so inward facing these days, we think we’re the majority of web users but we really aren’t. “We’re bored, so let’s be different” for the sheer sake of it is only going to break the web, which isn’t looking too bad these days…

        How about less daily trawling of CSS galleries and more finding your inspiration from other sources. The problem is simply inbreeding of each others designs, and just ‘being different’ without a proper reason isn’t the answer.

      • Let me start off by saying: I love these sites. I agree they’re super fun.

        Yet I agree with the comments right above. So many of these unique design ideas are great … IF your audience is looking for and is open to exploration-like experiences. Many of these sites require people to be a bit patient and to have extra time on their hands.

        When people are searching for vendors, service-providers, talent, designers, etc… many don’t have the patience to ‘explore’ the various websites they visit during their research. Many do not wish to try and figure out how they’re supposed to return to the previous section they were reading. And plenty have no desire to take the time to learn how they should use these ‘super creative’ sites.

        The frustration that can occur from not being able to immediately find what one is looking for in a website can often be stronger than the initial wow-factor or coolness-factor that is felt upon arriving at a uniquely-laid-out site.

        As web designers we must not forget that business websites are for the SITE VISITORS and not for us. For example, if a web designer’s primary visitors are middle-aged managers, it may not be wise to go overboard on the unique factor and risk losing potential customers through confusion or impatience.

        In the end, if you review eye-tracking heatmaps, usability research, and clicking studies, you’ll find that throwing in unique creative elements and making designs super-fun and totally different gets applause and “yeahs!!” from those of us in the design world — but they confuse the hell out of regular web users. And if regular web users make up the majority of your site’s audience … you may want to reconsider whether all the pats on the back from your peers are worth the potential customers you may be losing from your site.

        And as a final note — yes, I understand our company’s website goes against much of what I’m saying here, but that’s why we’re in the middle of a massive website rework. :)

  24. Lovely write up Kat, uniqueness is becoming less and less common on the web but I think you did a good job of rounding up some creative alternatives in this post.

    Thanks very much for featuring We Are not Freelancers along with this collection. Much appreciated :)

  25. Lovely write up Kat, uniqueness is becoming less and less common on the web but I think you did a good job of rounding up some creative alternatives in this post.

    Thanks very much for featuring We Are not Freelancers along with this collection. Much appreciated :)

  26. Amazing work Kat, thanks for this great round-up.
    I think usability is quite important for corporate websites, brands, web agencies sites, high-end products, etc. But original concepts & brands, very creative companies should reflect their philosophy and core values creating websites differently, showing they are not following the norms, like their ideas.

  27. Amazing work Kat, thanks for this great round-up.
    I think usability is quite important for corporate websites, brands, web agencies sites, high-end products, etc. But original concepts & brands, very creative companies should reflect their philosophy and core values creating websites differently, showing they are not following the norms, like their ideas.

  28. Nice post, seen many of these sites before but it’s nice to have all of the design styles consolodated into one place to puruse. Particularly like Simon Collinson’s blog.

  29. Nice post, seen many of these sites before but it’s nice to have all of the design styles consolodated into one place to puruse. Particularly like Simon Collinson’s blog.

  30. This is such a delicate subject, being that it is true that people are used to seeing websites with common elements, and if you go away from these elements you may frustrate the user. But…

    I love the comment that are you designing a slick layout because it fits or are you just too lazy to push the envelope!

    Boy, if that don’t inspire you to kick it up a notch i don’t know what will.

    I personally don’t have a problem trying the ideas in my work but have recently been getting a lot of resistance from the client when it comes to sign of, with feedback like its not “web 2.0″ enough!, Which I love being that the people saying it aren’t designers, I wonder where they even got the buzz word from and what they think they mean when they say it.

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  31. This is such a delicate subject, being that it is true that people are used to seeing websites with common elements, and if you go away from these elements you may frustrate the user. But…

    I love the comment that are you designing a slick layout because it fits or are you just too lazy to push the envelope!

    Boy, if that don’t inspire you to kick it up a notch i don’t know what will.

    I personally don’t have a problem trying the ideas in my work but have recently been getting a lot of resistance from the client when it comes to sign of, with feedback like its not “web 2.0″ enough!, Which I love being that the people saying it aren’t designers, I wonder where they even got the buzz word from and what they think they mean when they say it.

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  32. These are great points you bring up, and clearly we need more unique voices and creativity in web design. However, most of these sites are for personal portfolios, or their audiences are much more adept to unique layouts that invite the user to explore and figure out how to go about doing something. In the mainstream, however, a lot of these layouts would (most likely) increase bounces and create user frustration, more than a positive experience due to the unique design. People are, for better or worse, creatures of habit, and have gotten used to a some norms, especially in web design. Making slow, gradual changes to sites is a good thing, and I’m all for pushing the envelope in terms of convention and creativity, but if users don’t get it, then the site is a fail.

    Nice post tho!

  33. These are great points you bring up, and clearly we need more unique voices and creativity in web design. However, most of these sites are for personal portfolios, or their audiences are much more adept to unique layouts that invite the user to explore and figure out how to go about doing something. In the mainstream, however, a lot of these layouts would (most likely) increase bounces and create user frustration, more than a positive experience due to the unique design. People are, for better or worse, creatures of habit, and have gotten used to a some norms, especially in web design. Making slow, gradual changes to sites is a good thing, and I’m all for pushing the envelope in terms of convention and creativity, but if users don’t get it, then the site is a fail.

    Nice post tho!

  34. Great post! I’ve always thought that for some websites you can do whatever you want with logos and navigation and still get a friendly website.

    The company I work for (Cítrica) has something like that. It doesn’t follow any patern neither in the home nor in the internal pages: http//www.agenciacitrica.com/

  35. Great post! I’ve always thought that for some websites you can do whatever you want with logos and navigation and still get a friendly website.

    The company I work for (Cítrica) has something like that. It doesn’t follow any patern neither in the home nor in the internal pages: http//www.agenciacitrica.com/

  36. While I agree with some of your observations, my experience is different in that my clients are pragmatic business people who don’t want the kind of “innovation” that you seem to be championing here. I call what you advocate being “over creative” and while it might be appropriate for a personal blog, I’ve found it to be detriment to making a living in the design and development business.

    What I try to do is be creative within the confines of what they expect and not throw things at them that make them believe that I don’t understand that they are in business to make money. In fact, I hear from clients all the time that they chose my company because, after consulting with multiple firms, they concluded that I was the only one who was business centric AND creative in a way that they could understand. In my mind, you have to be creative and linear at the same time if you want to design business sites (which is where the money is at) in the real world.

  37. While I agree with some of your observations, my experience is different in that my clients are pragmatic business people who don’t want the kind of “innovation” that you seem to be championing here. I call what you advocate being “over creative” and while it might be appropriate for a personal blog, I’ve found it to be detriment to making a living in the design and development business.

    What I try to do is be creative within the confines of what they expect and not throw things at them that make them believe that I don’t understand that they are in business to make money. In fact, I hear from clients all the time that they chose my company because, after consulting with multiple firms, they concluded that I was the only one who was business centric AND creative in a way that they could understand. In my mind, you have to be creative and linear at the same time if you want to design business sites (which is where the money is at) in the real world.

  38. Thank you SO much!!!
    I have entered the world of webdesign just in the past year or so. I used to design for print before and when I got into the world of webdesign I somehow lost faith. I guess it was exactly for the reasons you described in your lovely article. I thought there is no place for what I used to do before and that freedom was lost. Thank you so much for pointing out these unique examples and for lifting my spirit again! I know I’m about to become a better webdesigner thanks to that!

  39. Thank you SO much!!!
    I have entered the world of webdesign just in the past year or so. I used to design for print before and when I got into the world of webdesign I somehow lost faith. I guess it was exactly for the reasons you described in your lovely article. I thought there is no place for what I used to do before and that freedom was lost. Thank you so much for pointing out these unique examples and for lifting my spirit again! I know I’m about to become a better webdesigner thanks to that!

  40. Tons of great stuff in here! I think it’s easy to fall into that rut of design. But you’re right…most sites are starting to look the same.

    My current site is pretty standard layout. I am working on a new look now, so this is good food for thought.

    Thanks!

  41. Tons of great stuff in here! I think it’s easy to fall into that rut of design. But you’re right…most sites are starting to look the same.

    My current site is pretty standard layout. I am working on a new look now, so this is good food for thought.

    Thanks!

  42. Thanks for your fabulous article!

    I, like some of the others, am a freshly-hatched website designer, just starting out. I am excited that despite the abundance of VERY BORING websites, and even some terribly dysfunctional ones, there are so many inspiring and beautiful sites. Thanks for showcasing these!

  43. Thanks for your fabulous article!

    I, like some of the others, am a freshly-hatched website designer, just starting out. I am excited that despite the abundance of VERY BORING websites, and even some terribly dysfunctional ones, there are so many inspiring and beautiful sites. Thanks for showcasing these!

  44. Well you always have to start somewhere, and not everyone has the time to make something unique every day. But, I think most of the things you pointed out are just the “web 2.0″ standards atm.

    Things will change, new standards will be taken, and then it will repeat.

  45. Well you always have to start somewhere, and not everyone has the time to make something unique every day. But, I think most of the things you pointed out are just the “web 2.0″ standards atm.

    Things will change, new standards will be taken, and then it will repeat.

  46. Do we know how commercially successful the example website are? My guess is that some of them are performing sub-optimally commercially and they’ve gone a wee bit too far trying to be original at the expense of the people they’re trying to talk to?

    Although branding is really important as it establishes differentiation and unprompted awareness, all design must be subject to the needs of visual communication – if the design gets in the way of communicating with the audience then it has lost the balancing act between form and function. As you push the bounds of convention you must also be aware that you’ll take a hit in user task completion rates and conversion events.

    Innovation and creativity are what every designer and studio must have in abundance, but I’d caution unbridled execution for the sake of being different. Know your audience, know your commercial aim and business strategy. One can create character and differentiation without alienating the user. That’s what being a “commercial designer” is all about.

    Web conventions are there because boring marketers like me noticed that commercial imperatives such as conversion rates improve when we don’t make the user have to work too hard to figure out what’s going on.

    So for my two-cents I’d say be inspired and question design briefs sent your way, push-back and challenge them, but remember every website is designed for the audience, not the designer, so throw them a bone. What’s innovative and unique to you might be considered esoteric and confusing to the people you’re meant to be talking to. Your skill as a designer is to find the balance…

  47. Do we know how commercially successful the example website are? My guess is that some of them are performing sub-optimally commercially and they’ve gone a wee bit too far trying to be original at the expense of the people they’re trying to talk to?

    Although branding is really important as it establishes differentiation and unprompted awareness, all design must be subject to the needs of visual communication – if the design gets in the way of communicating with the audience then it has lost the balancing act between form and function. As you push the bounds of convention you must also be aware that you’ll take a hit in user task completion rates and conversion events.

    Innovation and creativity are what every designer and studio must have in abundance, but I’d caution unbridled execution for the sake of being different. Know your audience, know your commercial aim and business strategy. One can create character and differentiation without alienating the user. That’s what being a “commercial designer” is all about.

    Web conventions are there because boring marketers like me noticed that commercial imperatives such as conversion rates improve when we don’t make the user have to work too hard to figure out what’s going on.

    So for my two-cents I’d say be inspired and question design briefs sent your way, push-back and challenge them, but remember every website is designed for the audience, not the designer, so throw them a bone. What’s innovative and unique to you might be considered esoteric and confusing to the people you’re meant to be talking to. Your skill as a designer is to find the balance…

  48. As long as you’re designing your site for other web designers, these are some great tips. But if you’re trying to sell a product to a non-technical audience who doesn’t read Smashing Magazine or care about the difference between a PNG and PIG, you’ll likely confuse, frustrate, and ultimately push away your potential customers.

    For a lot of people, site designs like this are the equivalent of walking into a bike shop or coffee shop and seeing that everyone around you are cool-kid hipsters and you’re standing there in Mom or Dad jeans and a college sweatshirt: you immediately feel like you don’t belong and you’d rather be somewhere else.

    So go ahead and fight the man, express yourself, and be different, but just remember there are some real consequences for those who go such a route.

    Know your audience.

  49. As long as you’re designing your site for other web designers, these are some great tips. But if you’re trying to sell a product to a non-technical audience who doesn’t read Smashing Magazine or care about the difference between a PNG and PIG, you’ll likely confuse, frustrate, and ultimately push away your potential customers.

    For a lot of people, site designs like this are the equivalent of walking into a bike shop or coffee shop and seeing that everyone around you are cool-kid hipsters and you’re standing there in Mom or Dad jeans and a college sweatshirt: you immediately feel like you don’t belong and you’d rather be somewhere else.

    So go ahead and fight the man, express yourself, and be different, but just remember there are some real consequences for those who go such a route.

    Know your audience.

  50. Gotta say, I feel like I’ve just been slapped back into reality.

    “All those guilty of cookie-cutter designs, say aye…”

    Aye.

    Thanks for the post!

  51. Gotta say, I feel like I’ve just been slapped back into reality.

    “All those guilty of cookie-cutter designs, say aye…”

    Aye.

    Thanks for the post!

  52. Great article Kat! Sometimes it’s difficult to break out of rounded corners and gradients as a designer (especially when you are surrounded by it all the time) Thanks for the reminder!

  53. Great article Kat! Sometimes it’s difficult to break out of rounded corners and gradients as a designer (especially when you are surrounded by it all the time) Thanks for the reminder!

  54. Thanks for writing this! I for one am always looking to improve my web work (and my work definitely needs improvement!).

    I’ve never been a fan of cookie-cutter sites. I try to design mine individually to reflect what my client wants to say. The mission statement, and corresponding design, for a website of a fire department is obviously different from one which sells olive oil or DJs parties. (I’ve done all three). No way those three should be designed the same!

    When I worked in radio, one of my program directors told me, “remember we don’t care what the other (guys) do, this is where you’re working now, and we want to be number one.”

    Thanks again for posting, and reading. Have a great day!

    Mike

  55. Thanks for writing this! I for one am always looking to improve my web work (and my work definitely needs improvement!).

    I’ve never been a fan of cookie-cutter sites. I try to design mine individually to reflect what my client wants to say. The mission statement, and corresponding design, for a website of a fire department is obviously different from one which sells olive oil or DJs parties. (I’ve done all three). No way those three should be designed the same!

    When I worked in radio, one of my program directors told me, “remember we don’t care what the other (guys) do, this is where you’re working now, and we want to be number one.”

    Thanks again for posting, and reading. Have a great day!

    Mike

  56. Well written. I agree with this as well. I think everyone should add a personal touch to their site. I’m glad I did with mine but it’s hard to do so for clients sometimes/most times.

  57. Well written. I agree with this as well. I think everyone should add a personal touch to their site. I’m glad I did with mine but it’s hard to do so for clients sometimes/most times.

  58. While I agree with almost all the points raised in the article and the comments – especially w/r/t CMS-based sites – I think it’s also important to consider your audience. Most of the sites used as examples here are targeted at a young, NewMedia-friendly audience, the kind of people who actually understand the medium in the first place.

    But, all of this has to be balanced against usability. One of the sites I’m working on just now is for the sort of people who not only use IE6, but don’t know that IE6 is what’s called a “browser”. And, for them, some of these design clichés – and there’s no denying that they’re clichés – are immensely helpful because they ease the process of interaction.

    Horses for courses, I guess. But this article has at least challenged me to think how I can stick within convention but bring something a little fresh which doesn’t involve hovers and gradients.

  59. While I agree with almost all the points raised in the article and the comments – especially w/r/t CMS-based sites – I think it’s also important to consider your audience. Most of the sites used as examples here are targeted at a young, NewMedia-friendly audience, the kind of people who actually understand the medium in the first place.

    But, all of this has to be balanced against usability. One of the sites I’m working on just now is for the sort of people who not only use IE6, but don’t know that IE6 is what’s called a “browser”. And, for them, some of these design clichés – and there’s no denying that they’re clichés – are immensely helpful because they ease the process of interaction.

    Horses for courses, I guess. But this article has at least challenged me to think how I can stick within convention but bring something a little fresh which doesn’t involve hovers and gradients.

  60. I have to add something to the “no vertical scrolling” comment – I hate, hate, HATE horizontal scrolling. It’s generally a bad idea for usability, and anytime design interferes with usability, it’s bad design.

    Having all cliches is bad, but if you completely abandon standard rules, you won’t be avant-garde, you’ll be confusing, unstable, and unusable. A good balance is necessary.

    “No shiny buttons” is a good idea, though. Far too many of those around.

  61. I have to add something to the “no vertical scrolling” comment – I hate, hate, HATE horizontal scrolling. It’s generally a bad idea for usability, and anytime design interferes with usability, it’s bad design.

    Having all cliches is bad, but if you completely abandon standard rules, you won’t be avant-garde, you’ll be confusing, unstable, and unusable. A good balance is necessary.

    “No shiny buttons” is a good idea, though. Far too many of those around.

  62. Who loves the kit webs (I mean…)
    always: home,who we are, portfolio, contact and again: home,who we are, portfolio, contact.
    Webs created in a factory, same format, same layout.
    Same structure for a lawyer´s office, same structure for a restaurant…boring and ugly

  63. Who loves the kit webs (I mean…)
    always: home,who we are, portfolio, contact and again: home,who we are, portfolio, contact.
    Webs created in a factory, same format, same layout.
    Same structure for a lawyer´s office, same structure for a restaurant…boring and ugly

  64. Great Article!! There will always be trends, trend setters and those who buck the trend! I think either of these stereotype(s) can produce great design, functionality, usability and user experience! It all comes down to the way design is comsumed!!!

    Love the square FACTOR site btw!

  65. Great Article!! There will always be trends, trend setters and those who buck the trend! I think either of these stereotype(s) can produce great design, functionality, usability and user experience! It all comes down to the way design is comsumed!!!

    Love the square FACTOR site btw!

  66. Thank you for writing this article! I’m currently designing my portfolio and reading this has been invaluable!

  67. Thank you for writing this article! I’m currently designing my portfolio and reading this has been invaluable!

  68. I agree that for some company websites you should do things like stick to traditional layout and style, but I’m sure those companies don’t want their website to look exactly like everyone else. The first rule in branding is that it should be memorable. If I can’t tell the difference between one company’s site and another, that company suffers.