How to Make Your Web Design Stand out from the Crowd

All web designers want their work to stand out from the crowd … but what does that take?

In this post I’ll pick a few sites I think pack a punch and I’ll explain why.

[Editor's Note: Mike Kus, Andy Clarke, Brendan Dawes, Elliot Jay Stocks, Paul Boag, Simon Collison and more will be talking about Web Typography, Microformats, HTML 5, CSS3, Creativity and more at The Future of Web Design Tour.]

Less is more

Keep it simple. It’s easy and tempting to try and fill a web page with too much information. Don’t be afraid of space on a page. I’ve lost count of how many times people have asked me “Why is there a space there”? I’m sure this is just pure web page conditioning. People don’t ask the same question in print design. We’re so used to seeing web pages packed with info that when we see a space it looks strange.

Space is good. Let your design breathe.

Also carefully choosing the colour palette for your site can have a massive impact. I think these three examples demonstrate use of colour and space beautifully.

Helveticons

Daffy’s

Annyas.com/screenshots

Images and Typography

Get creative with imagery and typography. Think in terms of poster or book design to further distance your site from the thousands of “Web 2.0″ style clone sites. I just love the typography in the RVLT site below. It’s in flash but even the page loading is beautiful… I wish it took a bit longer!

The fact that some of these site are in Flash doesn’t mean one can’t create just as powerful and effective site designs using just HTML and CSS.

RVLT

Serial Cut

Black Estate

Buck current web trends

Web design is drowing in trends: Gradients, subtle 3D effects, shadows, glows, textures. They all have a place but if you really want to stand out from the crowd do something different. Avoid the current trends, experiment and maybe even set trends!

I also loved the way in which Tim Van Damme threw conventional web trends out of the window in his redesign of 24 Ways. It was also cool to see him experiment with RGBA and CSS3.

Both the 24 Ways design and the Clap Clap design below show how websites can still be beautiful while ditching current web trends.

24 Ways

Clap Clap

Details and Execution

One sure fire thing that will help your site stand out from the crowd is your attention to detail. For example putting real effort into the composition of the page will shine through. Elliot Jay Stocks demonstrates this perfectly with the latest version of his site.

The Boutique Cycles and Checkland Kindleysides both show how attention to detail just raises the bar that little bit higher.

Elliot Jay Stocks

Boutique Cycles

Checkland Kindleysides

So what do you guys think? What makes a website stand out from the crowd? What other sites can you suggest that already do this? It’d be great to here your thoughts.

[Editor's Note: Mike Kus, Andy Clarke, Brendan Dawes, Elliot Jay Stocks, Paul Boag, Simon Collison and more will be talking about Web Typography, Microformats, HTML 5, CSS3, Creativity and more at The Future of Web Design Tour.]

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

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

89 comments on “How to Make Your Web Design Stand out from the Crowd

  1. Nice post Mike. I agree with not being overly caught up with so-called Web 2.0 trends.

    However, it’s important to recognise that agency’s often have to deliver something that the client will like and this often means a “trendy” website.

    I’m not saying this isn’t possible to deliver on the brief without using trends, but there’s a thin line between delivering an ground breaking site and getting a very pissed off client.

    • I totally agree with David here – agencies often don’t have the luxury of doing what ‘they’ want – unless they’re a big-name-brand-agency-thing.

      Also, that ClapClap site does look great, but it’s the photo that makes it, not the design, imho.

      Nice write-up though!

    • That’s true, every project is different and sometimes there are more restrictions than others.

      I’d just say when you get creative freedom – go for it.

      • Sorry Mike. That wasn’t supposed to sound so negative!

        I think it’s a great post and I’m really going to try hard to “break and mould” on my next site design.

  2. I think “Buck current web trends” is probably the best advice for making your designs stand out from the crowd – and I think that separates those who are genuinely creative, from those who just look to the CSS Galleries for their ideas – something I really should do less of! :-)

  3. I have to say I have become a real fan of your work and approach Mike :)

    Recently I put together the following page http://www.artsbox.com for interested people to keep up-to-date while I prepare my application (artsbox) for first beta launch.

    There are definitely design elements (on my webpage) that are easily spotted elsewhere on the web. I did however make a considerable effort to give the brand a unique appeal and feel. For example I invested some cash and bought some beautifully designed typography and artful elements.

    I think it works well. Thanks again for the great article :)

  4. Hi Mike,

    Did you find these sites on http://siteinspire.net? :-)

    Really nice article, although I don’t think Elliot Jay Stocks’ site really belongs here: I don’t think it stands out or really breaks any sort of mould. (Sorry; personal opinion.)

  5. For commercial web sites the key is driving visitors to a buying decision. A clear, direct message and clean presentation will attract visitors to explore what you have to offer. This is how we’re solving the problem of selling information on it’s intrinsic value rather than relying on ads which requires heavy traffic to maintain profitability: http://www.computerreview.com. I welcome your suggestions and comments.

  6. Thanks for the inspiring words I am pumped to get designing now…


    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  7. Well done article, Mike. My friday morning is off to an inspired start!

    In response to the comments about agencies needing to deliver trendy sites to cater to client expectations, I find that by educating clients and involving them in the design process they tend to be more receptive to more creative uses of typography, layout and color. But even with more conservative clients, implementing the principles described above can really make a difference.

  8. Pingback: Carsonified » How to Make Your Web Design Stand out from the Crowd | Squico

  9. Pingback: furiousBlog – in my diatribe » Blog Archive » The First “Abbe” is Going Up For Sale…

  10. Yeah the part of attention to details is so true! I’m working on that “eye” LOL

  11. Some very nice sites. It’s a good reminder to always keep thinking… and not simply do the same thing all the time… or follow others.

    That said… some of the examples don’t really count as websites in my book. I think Flash is out. Flash is a different medium. Big beautiful illustrations or photos is another medium as well. Of course a site that is 98% image and 2% content/links is going to look beautiful! And I LOVE the navigation in 24 Ways and the use of translucency. Pretty darn cool and like nothing I’ve ever seen before!!! Kudos. However… I can’t look at any of their pages without getting a migraine.

    • totally agree with you. Most people I know actually have clicktoflash installed meaning they have their flash turned off untill manually turning it on (most adds are in flash, turning it off speeds up the browsing) Personally I don’t bother with flash interfaces at all anymore. And indeed if you’re site is about the image and not the content, it’s easy to make something visually stunning. But what about clarity and ease of use when you actally want content?

    • Hi David,

      thanks for both your comments :)

      “…some of the examples don’t really count as websites in my book. I think Flash is out. Flash is a different medium. Big beautiful illustrations or photos is another medium as well”.

      Interesting…

      It’s exactly this sort of thinking that inspires me to talk about web design that stands out from the crowd in the first place. It’s all too common or web designers to disregard Flash website design. I think we can learn a lot from the way some Flash sites are designed. One doesn’t have to use Flash but there’s no reason we can’t be inspired by Flash based sites.

      In my humble opinion Flash, photos and beautiful illustrations are part of web design because there are no rules when it comes to design… a website is what you make it.

      Thanks again for your thoughts :)

      • True enough Mike. We like to think that we’re not constrained by technology but we probably are. We certainly were back in the days of nested tables and spacer GIF’s. Flash forces you to think in a different way. Just like sketching with pen and paper helps you to think in a different way. And we should always look for inspiration in other mediums. Be it Flash, Typography, Architecture, etc… rather than simply looking at other websites.

        That said… I guess my point was that the typical 100% Flash site has vastly different content requirements than say… a News site… an eComm site… a Corporate site… or any other content-heavy, informational / functional website. But yes… it’s great to look at anything and everything for inspiration. I once designed a site inspired by a car that I saw walking to work one day. I loved the language of sweeping arcs combined with sharp creases and brought that into my interface design.

        Thanks again for the list.

  12. p.s. Not to be all negative… I have to say that I love Black Estate and Clap Clap. Especially Black Estate. Nicely done. Clean. Bold. Dramatic. And it’s a real website with real content. Not a lot of content mind you. It’s just 7 “pages”… but still… very nice. It’s great when you get a project like this were the content is so short and simple. It’s a huge opportunity for a designer. It give you a world of possibilities. Nice to see people taking advantage of that rather than simply designing a shiny glass horizontal navigation bar with the logo in the top left… etc.

  13. Pingback: MacDaddy Links of the Week - 080109 | bkmacdaddy designs

  14. Pingback: Great Tips on Web Typography and How to Make your Design Pack a Punch | Design Reviver

  15. “Why is there a space there”? I’m sure this is just pure web page conditioning. People don’t ask the same question in print design”

    Oh they do (still) ask this question in print design. I find clients from an engineering or technology background want every available inch of the page filled with information. Same for their web sites. Am I the only one still having this battle?
    “Can you make my logo bigger”…

  16. Pingback: Digital Media Buzz - How to Make Your Web Design Stand out from the Crowd | Digital Media Buzz

  17. Pingback: Great Tips on Web Typography and How to Make your Design Pack a Punch - Programming Blog

  18. Pingback: Morning Inspiration

  19. Pingback: Cosas que andaban por mi reader. « Soy un curioso

  20. I agree, there are times when more is less in design.

    An aside, I am with Helvetia fonts, but Helveticons.com’s presentation doesn’t reach me…
    neither do heavy black themes (save the mystery of no light/no color for late nights without moonlight).

    just opinion, not gospel.

    ~DT

  21. That Daffy’s site sure stands out, shame it feels clunky as hell to use. I’ve always liked the map at the bottom of the Black estate site too.

  22. Hey Mike,

    The article is about making your website stand out from the crowd so it is really bang on with that respect and some really good examples and ideas here – well done!

    If anything I would just want to challenge whether the goal of having your website stand out from the crowd, from a design perspective, is an appropriate goal or objective in the first place.

    Don’t get me wrong..I am all for innovation in marketing and design but sometimes standing out from the crowd, from a design standpoint at least, may not be in the cards for many projects. And a few others have pointed out that a client might not go there. And that’s completely legit. There is definitely a time and place to stand out – where that alone can serve you really well.

    As a marketer vs a designer I love to see sights that stand out from the crowd because they are more relevant to their target audience and are much better at connecting with them, drawing them in and engaging them. Design can certainly play a role in that, but it goes much deeper than that. To me its about understanding your customer and your audience better than anyone and reflecting that in your website that can really have you stand out.

    It’s not always an easy thing to do or an easy place to get to, but I’ve started providing a few practical tools and ideas to help folks figure out the path there on my blog (http://www.thinkmitchthink.com/blog) if that helps.

    In any event, well done Mike…just thought I would throw in my 2 cents on standing out as well.

    - Mitch Solway

    • Hi Mitch,

      thanks for the feedback.

      Personally it’s always a goal for me to make a site design stand out from the crowd. That might just be personal goal and something that keeps me interested and passionate about design. I completely take the point that some clients may present a brief that doesn’t allow for such experimentation… I’ve done loads of those projects myself. I guess I’m just taking it for granted that everyone understands that each project has varying levels of potential when it comes to creating groundbreaking designs.

      Thanks again for the feedback :)

      • Hey Mike,

        “That might just be personal goal and something that keeps me interested and passionate about design.”

        That’s a heck of a good reason : )

        - Mitch

  23. Very inspiring, thanks Mike!

    The things that are trends now are only trends because somebody bucked the old trends! (How many times can I fit trends into a sentence)

  24. Thanks for the great post.
    You guys always put out quality stuff and this is no different.
    Very inspiring – thanks again!

  25. Great post, some fantastic designs on there. However, I think you should also have included some quality mobile sites too. Admittedly though, that area does have some pretty slim pickings.

    Why is mobile web design neglected when the potential market share is so big? There are so many portable devices capable of browsing the web, yet most companies don’t even bother to put the effort in to an optimised design.

    We’re trying to change that mindset with our latest paper. If you’d like something to read and mull over, why not have a look: http://tr.im/uTCe

  26. Pingback: July 2009's Monthly Mother Lode of MacDaddy Links! | bkmacdaddy designs

  27. Pingback: links for 2009-08-03 « Giri’s Blogmarks

  28. Pingback: Michael Doyle’s Blog » Web Design – Inspiration

  29. Pingback: How To Make Your Web Design Stand Out From The Crowd | Design Newz

  30. Pingback: Sweet Tweets: Design Resources of the Week #11

  31. I like the idea of making use of things really simple, is better and easyer for the visitor find what he wants. Great Article.

  32. Because people often come to a site via a blog post with is “inside” the home page, isn’t the design of the pages as important as the homepage?

    • yeah totally agree… but the homepage is sometimes uniquely differerent to the other pages in that it might have less content and it’s main job might only be to communicate a single message… So in these cases the homepage is often an opportunity to have some fun with the design and do something a little bit different :)

  33. Great topic and great write-up, Mike! I’m squarely in the “buck the current trend” camp, and I too give the thumbs up to Flash. For me the web has become too predictable and therefore much less exciting and worth my time because of it. When both Target’s web presence is hardly distinguishable from Macy’s, there’s a problem with following the current web design trends and ultimately neither stands out from the crowd. As a consumer, if I’m paying Macy’s prices, I expect a little better web experience than what I can get over at Target!

  34. Pingback: Favorites from the Feeds #03

  35. Pingback: Favorites from the Feeds #03 - Programming Blog

  36. Pingback: AMB Album » Favorites from the Feeds #03

  37. Clapclap is the most original site I’ve seen in a while. I can’t say I’m totally crazy about the design (too much “grid” for me) but I can’t deny the creativity, and content navigation is also very interesting.

  38. Pingback: Links creativos para 08.08/10.08 | Eliseos.net

  39. Pingback: Sweet Tweets: Design Resources of the Week #11 « test

  40. Pingback: Sweet Tweets: Design Resources of the Week #11 | X Design Blog

  41. I agree that Flash is out. It never was particularly “in” anyway, except for designer portfolios. I have never been able to sit still and wait for one of those sites to load. I just don’t have the patience, and I think I’m more patient than the average surfer. LOL

    I certainly think these sites make one stand out, but it might not necessarily be in a good way. It depends on your type of clients. I work with many types of businesses and they view our site as an example of what their site will look like and rightly so. If our site looked like any of those examples, we wouldn’t have the customers we do have. One must weigh the consequences of bucking the trend. From a business standpoint, it’s not suited for everyone.

  42. Thanks for the great tips Mike. I really love your choice of using RVLT and Helveticons as examples. There are many more out there, but those are very nice looking sites, and demonstrate your point well. Thanks again.

  43. Pingback: Maak je design anders dan de rest! « SjorsRoelofs.nl

  44. Pingback: Simple is better in Web design « eHarbor eCommerce Marketing Blog

  45. Some good examples and good tips, agree with less is more but at the sharp end of the industry people need to get their message across and good text means better Search Engine positioning, it can be a tricky line to walk.

    Always have much love for Checkland Kindleysides site though!!

  46. These sites are phenomenal, especially “clap clap”- thank you! However, that Daffy’s site jumps around way too much and makes me seasick.

  47. Pingback: www.ma-idesign.co.uk » Mike Kus explains - How to Make Your Web Design Stand out from the Crowd:

  48. [... - carsonified.com is another wonderful authority of information. Online Car insurance claims [... -

  49. Pingback: 4 formas de hacer tu blog interesante - Chica SEO - Ideas de Negocios y SEO

  50. Pingback: The Best of Twitter 2009: Graphic Design Edition

  51. By using a minimalistic style you can stand out by not trying too hard to standout. I an effective minimalistic design does not simply lack substance, it achieves balance and attractiveness without the need for excessive design elements.

  52. Pingback: Google