LearnHow to Make Your Web Design Stand out from the Crowd

Treehouse
writes on July 31, 2009

Share with your friends










Submit

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.]

89 Responses to “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.

  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. I like the idea of making things really simple, is better and simple for the visitor finds what he wants.
    Great article

  6. 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.

  7. Pffft why bother with all that when you could just use bacon to do the trick: http://bacolicio.us/http://carsonified.com/

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


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

  9. Very nice selection of sites, enjoyed those designs very much! :) time for some games now again…

  10. Dennis Kardys on July 31, 2009 at 2:29 pm said:

    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.

  11. Thanks loads for your comments guys :)

  12. I absolutely love Clap Clap website…. stunning design, great colours and brilliant coding.

  13. I like the fact there is so much of choice, opinion and diversity in modern web design and promotion.

  14. Its always fun to see such wonderful and creative sites… thanks for posting all of these!

  15. This comments form is huge. I mean, wow.

  16. Thiago Menezes on July 31, 2009 at 11:27 pm said:

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

  17. 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.

    • brabantia on August 3, 2009 at 8:31 am said:

      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.

  18. 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.

  19. Interesting List. Very true about the agencies being dependent o the clients mostly. Some other sites worth mentioning:
    http://shop.lumadessa.com/ (again taken from siteinspire.net)
    Also interesting to see is Helveticons here because we covered in our favourite web designs for July as well.
    http://www.digimode.co.uk/blog/favourite-web-design-list-july-09/
    Cheerio!

  20. great article, gotta add this one to delicious 😉

  21. MARK JACKSON on August 1, 2009 at 8:18 pm said:

    “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”…

  22. 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

  23. 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.

  24. 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

  25. lossendae on August 2, 2009 at 9:13 pm said:

    Your design is pretty and i like your comment styling too! Great article BTW

  26. Great article! I love the examples you posted.

  27. 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)

  28. Hi Great post i’m inspired to do some new designs.

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

  30. 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

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

  35. Michelle on August 26, 2009 at 6:41 pm said:

    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.

  36. Great detail. Thanks so much for the tips.

  37. great tutor..it help me so much..
    i’ve learned a lot of technique

  38. 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.

  39. 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!!

  40. Helveticons is the best

  41. These are very true. I love the design for 24 Ways as well.

  42. nice post, thanks

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

  44. Great inspiration for me as i’m starting a new design blog…thanks…

  45. Car insurance claims >> http://onlinecarinsuranceclaims.com/ on November 23, 2009 at 9:19 pm said:

    [… – carsonified.com is another wonderful authority of information. Online Car insurance claims [… –

  46. 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.

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more