Top Design News

55 of The Most Colorful and Inspiring Web Designs

Hilde Torbjornsen — Fri, 03 Sep 2010 21:00:46 +0000

In this showcase we’ve put together a great collection of some of the most colorful web designs out there. If you need some inspiration for any sort of design or just want to have a look at some truly great web designs, these are definitely worth having a look at !

These websites will show you a good portion of all the good design that is available out there. It’s all about trying to think a bit outside of the traditional look and using your creativity and imagination.

Enjoy!

1. Splendour in the grass – 2010

2. Forest Edge music festival

3. World design capital Helsinki 2012

4. Pieoneers

5. GO Mammoth

6. 8th Continent Soymilk

7. Silly poems

8. Xhtmlcafè

9. Carbonmade

10. Bibliofaction

11. AdaptD

12. PopCap games

13. IGC Enterprises

14. Potzytywka

15. Vacation in Supetarska Draga

16. NineFlavors

17. Veerle’s blog

18. Giraffe restaurants

19. Mikii

20. Twittground

21. Jeff Sarmiento

22. Realmac software

23. Good

24. Organic grid

25. Matt Mullenweg aka Photo Matt

26. Lebloe

27. Danny Halarewich

28. Andrea Cima Serniotti

29. Rucksack

30. Rareview

31. F5

32. ReservoirBuzz

33. The House Media

34. Colourpixel

35. Open atrium

36. Willians Fernandes

37. Getmefast

38. Getting crazy on the waltzers

39. Sitesquared

40. Huxley prairie fest

41. FeedStitch

42. Pally giraffe

43. Mooolah

44. Herbal essences

45. LePushMail

46. Radium labs

47. Revolucao etc

48. Chapolito

49. Sound and show

50. Design slurp

51. ilovecolors

52. Green Any Site

53. Gisele Jaquenod

54. Claire Baxter

55. Mooty

Those were our 55 picks. We hope you’ve found some inspiration here.

Remember to share the article if you’ve enjoyed it – and leave us a comment!

Volkswagen Parking Sensor: Garden Dwarf, Hydrant

Filippo — Fri, 03 Sep 2010 11:00:22 +0000

“Get a Volkswagen with parking sensor.”

Advertising Agency: AlmapBBDO, Sao Paulo, Brazil
Executive Creative Director: Marcello Serpa
Art Director: Paulo Marco Monteiro
Copywriter: Cesar Herszkowicz
Photographers: Hugo Treu, Estudio Nolan

Email UI Faceoff – GMail vs Hotmail vs Yahoo – The results

Jacob Creech — Fri, 03 Sep 2010 10:00:11 +0000

Welcome back to part two of our email UI faceoff – I recently wrote about the usability testing process, and set up a test for comparing the usability of Yahoo! Mail, Hotmail and Gmail.

Well, the results are in and we’ve got some pretty interesting feedback from the test – you can get directly to the test results yourself, or read on for our analysis and verdict.

Over the days we’ve been running the test, we had north of 300 people take it, and we think the numbers are a pretty good sample. Based on our analytics data, I could see that we had participants from 64 different countries, and it took the average user 2:56 to take the test.

So what did we learn from all that? Read on and find out:

Part one: Learned behaviors and conventions

Grids: The first three questions used a grid to discover users expected behaviours. When you overlay the grid over the different UIs you can see how the designs fit in with peoples perceptions.

Learned conventions tend to show through in this kind of area, but conventions are often an important standard for designers to follow (as you will see reflected in the results later on)

1) Where would you click to logout?

As you can see from the results, by far and away the majority of people expect to find the log out button on the top right hand side of the page. This is the most common location for a logout button across numerous websites (have a look for yourself), and so something people are very familiar with. If you want to put your logout button in a different location, you should make sure there is a good reason for doing so.

When overlaid, we can see both Gmail and Hotmail follow this convention, but for some reason, Yahoo! Mail locates their logout button in the middle of the page. What’s worse, it doesn’t render properly in the browser I’ve been using for this test – Safari 5.

Yahoo! Mail 0; Hotmail 1; Gmail 1

2) Where would you click to write a new email?

The results for this are fairly obvious – as you can see from the heatmap, more all less all users clicked in the top left hand corner to compose a new mail – this is the location for all three services we tested, and the most common location across more or less all webmail services.

Yahoo! Mail 1; Hotmail 2; Gmail 2

3)Where would you click to reply to an email?

Some interesting results for this one – there is really quite a spread all over the screen, which shows perhaps there aren’t quite so many learned behaviours for this. There is a concentration towards the top-middle and top left of the screen however. Lets overlay this over the different services and see how they compare:

Each of the services seems to have ever so slightly different locations for their buttons, and the users of each seem to have learnt these. I don’t see that one or the other is ahead in this test.

Personally though, I do like both the Hotmail and Gmail interface for having reply buttons at the bottom of messages, so you can easily reply after you’ve finished reading. What’s more, the Gmail message reply is the box you can see at the bottom of the messsage. Just put your cursor in there and you can begin typing. Pretty straight forward.

Yahoo! Mail 2; Hotmail 3; Gmail 3

4) Which interface do you prefer?

This is a bit of a popularity contest, but evidence shows all things being equal people have a better experience with nicer looking interfaces. Stands to reason. You can see the results here.

The numbers were:

Yahoo! Mail: 20%
Hotmail: 16%
Gmail: 59%

The remaining 5% is people either skipping the question or clicked the side of the interface. Regardless, these numbers are pretty defenitive, and Gmail is well ahead.

Yahoo! Mail 2; Hotmail 3; Gmail 4

5)Do you prefer your email threaded or non-threaded?

Great results for this one, fairly overwhelming:

Threaded: 73%
Not Threaded: 12%
Don’t know/care: 12%

At the present time, Gmail is the only provider that offers threded messages to all its users. Hotmail is currently rolling out threading on a limited basis, but by no means to all users (our test account doesn’t have threading), and Yahoo! Mail offers no threading at all. Results:

Yahoo! Mail 2; Hotmail 3; Gmail 5

6)Do you prefer to reply on a new page or the same page?

Another comprehensive result as you can see from the image below:

The numbers were as follows:

Reply on a new page: 11%
Reply on the same page: 81%
Don’t know/care: 5%

Again, Gmail is the only provider of the three that enables you to reply on the same page – a behaviour prefered by 81% of users tested.

Yahoo! Mail 2; Hotmail 3; Gmail 6

7) Do you prefer banner ads or text ads?

I was slightly surprised by the results of this test – banner ads are evidently more popular than I thought, and although the results were comprehensively in favour of text ads, it seems there is life for banner ads yet. The results were:

Banner ads: 17%
Text ads: 68%
Don’t know/care: 13%

Again though, seeing as Hotmail and Yahoo! Mail both use banner ads, and Gmail text ads, it looks like Gmail is the winner here.

Yahoo! Mail 2; Hotmail 3; Gmail 7

8) Do you prefer a site with or without a landing page?

I was surprised when testing Yahoo! Mail that they used a landing page when you log into your mail. This got me thinking as to whether or not this was the prefered behaviour of users. The results are:

With landing page: 7%
Without landing page: 82%
Don’t know/care: 3%

Yahoo! Mail is the only one of the three that uses landing pages – and obviously this isn’t very popular with users. Score:

Yahoo! Mail 2; Hotmail 4; Gmail 8

Part two: Usability comparison

For the next series of questions, the success criteria are less than 10 seconds to complete a task – thus giving the user time to read instructions and to ensure a usable interface – and a success rate of over 75% – to make sure most users are completing the task satisfactorily.

9) Where would you click to change your settings? (Yahoo! Mail)

As you can see in the results, the success rate here is 75%, but what we also need to pay attention to is the average time to complete this test – in this case, 27.58 seconds.

This shows us that while users can indeed find the settings area, they are taking too long to do in. In this case Yahoo! Mail could try to make the text more prominent or more visible in order to make this area more usable.

Yahoo! Mail 2; Hotmail 4; Gmail 8

10) Where would you click to access your calendar? (Gmail)

These results are a bit of a fail for Gmail – it fails on both fronts. There is only a 69% success rate, and it took the average user just under 14 seconds to complete the task.

If they wanted to make the calendar more visible, they could try moving it’s location, or featuring it in more than one location. The fact that 16% of people clicked on the left hand side indicates that adding a calendar button in that area would be beneficial.

Yahoo! Mail 2; Hotmail 4; Gmail 8

11) How would you mark a message as spam? (Hotmail)

And at last we have a task that meets our criteria. 76% of users (or 87% if you count the ones marking the messages) successfully completed the task with an average time of 9.16 seconds. This could still be improved upon, but isn’t a bad result.

Yahoo! Mail 2; Hotmail 5; Gmail 8

12) Where would you click to access your calendar? (Yahoo! Mail)

As you can see here, a pretty poor result. It took an average of 17.73 seconds for people to click, and after that, there was still a success rate of just 54%.

Yahoo obviously needs to put a lot more consideration in to the placement of the calendar button. The ammount of people clicking in the upper left hand side tends to suggest that many people look to this area, so perhaps by offering a link there they would increase their success rate.

Yahoo! Mail 2; Hotmail 5; Gmail 8

13) How would you mark a message as spam? (Gmail)

As you can see from the results, there was an 85% success rate, and an average click time of 6.38 seconds. This is obviously well inside our success criteria, and a strong result for Gmail.

Yahoo! Mail 2; Hotmail 5; Gmail 9

14) Where would you click to change your settings? (Hotmail)

Another good result for Hotmail here – an 80% success rate, and an average click time of 7.54 seconds. I think this makes a lot of sense as this is a very common location for a settings/options link to be.

Yahoo! Mail 2; Hotmail 6; Gmail 9

15) How would you mark a message as spam? (Yahoo! Mail)

A much better showing for Yahoo! Mail in this case, an 87% success rate, and a click time of just 4.13 seconds. This really shows the value of following conventions – bear this in mind when designing.

Yahoo! Mail 3; Hotmail 6; Gmail 9

16) Where would you click to change your settings? (Gmail)

A 91% success rate, and an average click time of 6.01 seconds show that Gmails setting page location is working very well – these are very good numbers.

Yahoo! Mail 3; Hotmail 6; Gmail 10

17) Where would you click to access your calendar? (Hotmail)

And another success to round out our tests. 5.5 seconds average click time, and a 78% success rate. Quite a spread on this page though, so it shows people still aren’t quite sure where to look for calendars.

Yahoo! Mail 3; Hotmail 7; Gmail 10

Conclusion

This was a pretty interesting test, and created some interesting results. It shows the value of following conventions and observing user behaviours when developing or reworking your designs. If you’d like to browse through the whole test results, you can go here.

The final scores were: Yahoo! Mail 3; Hotmail 7; Gmail 10.

While Gmail was ultimately ahead in these tests, all three of the services have areas they could improve upon.

Hotmail was also a reasonably strong contender, and with updates which they are currently rolling out, the usability of their service should continue to improve.

Yahoo! Mail was lagging far behing in third place, and really needs to pick up its game if it wants to remain competitive. They are probably relying on people who have been using their service for many years, and I would be surprised if they are still signing up many users.

How does this compare with your actual experience of these different webmail services? Are there any other sites you’d like see compared in the future? Be sure to let us know in the comments!

Volkswagen: The Moose is loose

Filippo — Fri, 03 Sep 2010 08:20:07 +0000

“Adaptive lights from Volkswagen. Be ahead of dangers.”

Advertising Agency: TRY, Oslo, Norway
Creative Director: Petter Bryde, Thorbjørn Ruud
Art Director: Thorbjørn Ruud
Copywriter: Petter Bryde
CGI: Thomas Bråten, Ole Jakob Skattum Bø
Photographer: Sigve Aspelund

20 Snippets You should be using from Html5 Boilerplate

Matthew Corner — Thu, 02 Sep 2010 21:00:08 +0000

I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.”

It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.

Html

We will start off by checking out some of the html snippets used in the resource. All of these are snippets of code that may not necessarily be only html, but will definitely be placed in your html files if used.

Favicon and Apple icons

The favicon is pretty much normality these day. the interesting bit here is the apple-touch-icon which is used if you save a bookmark to your home screen on an apple touch device such as an iPad or iPhone. Interestingly enough, android also supports its usage. As far as I can tell, the apple-touch-icon size is 60px by 60px. As the comment says, if your icons are in the root of your domain, these links aren’t required.

Faster page load hack

This empty conditional comment hack is used to basically increase performance of your site. When conditional comments are used on your site, for example, for an ie6 conditional stylesheet, it will block further downloads until the css files are fully downloaded, hence increasing load time. To solve this issue, an empty conditional comment, like below, is used before any css is loaded in the document, and the problem will be solved! For further reading, check out this article.

X-UA-Compatible

Internet Explorer has many rendering engines ready for use. What this line of code basically does is force IE to use the most up to date rendering engine that it has available, so that your pages will render as well as possible. It then goes on to talk about Chrome Frame. Chrome Frame is a plugin for IE6, 7, and 8 which brings all the rendering, and js power of Google Chrome to IE. If the user has it installed, we render our site using it. For more information on Chrome Frame, and how you can even prompt users without it to install it, check here.

Conditional body tag

This snippet is a Paul Irish original, and allows you to target IE browsers specifically without having to add in an extra http request with another separate stylesheet. Basically, depending on the IE browser that the user is using, a class is added to the body tag. If the user is not using IE, then a classless body tag is used. This allows you to target specific browsers in your css without having to use css hacks, or further stylesheets. For further reading, check out the original article on this.

jQuery loading fallback

A vast majority of sites these days make use of the jQuery JavaScript library. A vast majority also make use of Google’s hosted version of the library for faster loading speed’s, and better cross site caching. However, what if there is ever a problem and jQuery is not loaded from Google? Well here is your backup. What it basically does is check if jQuery is loaded from Google. If not, then we load it locally from our own version of jQuery.

Optimised Google Analytics

Google Analytics is a very popular tool for tracking your website’s user behaviour, and visits. This is simply an optimised version of Google’s asynchronous tracking snippet. To learn what has been optimised, and why it is faster than Google’s own version, read the article here.

Css

Moving on into Css, this is where the vast majority of awesome snippets care to be found. Don’t be put off by some of the one-liners; they are just as useful and awesome as some of the larger snippets to be found.

Html5 ready reset

Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.

/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

Font normalisation

To get rid of rendering inconsistencies that can occur between browsers and OS’s when rendering fonts in pixels, this snippet allows you to size your fonts in such a way that the size and line-height will remain consistent across these platforms for your website. You will basically be setting your font sizes via percentages that can be found here.

/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }

Webkit font smoothing

This is anti-aliasing for webkit browsers, sadly only in Mac OSX. It basically makes your text render better, and make it more readable, without all the text thinning hacks that we have seen in the past. For further reading check out Tim Van Damme’s article on this.

/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }

Force scrollbar

Sometimes, pages can be shorter than the browser view-port, and when you load a page on the same site that has longer content and uses a scrollbar, content can jump side to side. By forcing a scrollbar no matter the height of our content, we stop this small, but annoying issue.

html { overflow-y: scroll; }

Formatting quoted code

This snippet simply makes the text wrap when it reaches the walls of its container, in this case, the pre tag, whilst still preserving line breaks and white space cross browser. To read up on this, have a look at this article.

pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

Aligning Labels

Alignment of labels with their relevant inputs can be a horrible task to achieve in older browsers. This snippets solves that for us by making it consistent across browsers!

/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

Clickable inputs

For some reason, most browsers don’t apply a pointer cursor to some clickable input’s by default to let the user now that this item is clickable, so we solve this by doing it ourselves.

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }

Screenreader access

This snippet basically gives us the best of both worlds, allowing the best usability when it comes to link outlines for both screenreaders tabbing through links, and mouse users. To learn more, read this article.

a:hover, a:active { outline: none; }

a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }

IE7 image resizing

Ie7 by default uses an image resizing algorithm that means that scaled down images can look far from awesome. To solve this, we simply enable a much better resizing algorithm that is available in Ie7 that produces results similar to what you’d expect from most image editing software. To read more about this, and similar solutions for Ie6, read this insightful article by the Flickr developers.

/* bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

Print styles

Any decent site should be print ready, as even though we live in a technology driven time, people still like to have a hard copy of some information. This snippet firstly uses a css media declaration, allowing you to include this in your main stylesheet, and not having to place another link in the head of your document. This benefits load time, as even when the page inst being printed, a browser will always download that extra css file, generating an extra http request. The snippet then goes on to include some useful print styles such as printing our link urls, and so on.

/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }    .ir a:after { content: ""; }  /* Don't show links for images */    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }    img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

Device orientation

These are just two css media queries you may want to use for your website development. With lots of smart-phones, and tablets being able to orientate their screens from landscape to portrait, you may want to include different styles for each. This is how you would go about achieving this.

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}

.htaccess

One thing that html5 boilerplate does come with that other starting point templates generally don’t is server sided files. Check out these awesome .htaccess snippets that can easily improve your site.

X-UA-Compatible Server sided

This is the same as the html version mentioned above, forcing the latest rendering engine in IE, and Chrome Frame if it exists. The benefit of including this in your .htaccess file is that it saves you having to declare this in the head of each and every html document you produce.

  
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  IfModule>
IfModule>

Gzip compression

Gzip compression allows us to drastically reduce out file sizes. This .htaccess snippet does the gzipping for us.

# gzip compression.

  # html, xml, css, and js:
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/javascript application/javascript application/json
  # webfonts and svg:
  
    SetOutputFilter DEFLATE

Expiry date for cache filetypes

When we cache our files on the user’s machine, we may want to specify how long they remain there, depending on how often we change them ourselves. This snippet provides basic times for common file types, some of which you may wish to change for your own site.

# these are pretty far-future expires headers
# they assume you control versioning with cachebusting query params like
#