Best Website Designs of 2010 | Hacker News Reader

Best Website Designs of 2010

line25.com

81 pointsd441 comments

What I wouldn't give to watch YouTube videos of some of these designers putting these sites together. Everything from how they get the background textures, to adding gradients, shadows, altering colors, everything. It would be amazing.

I'd probably pay to watch a 10 part series from an accomplished designer who goes start to finish designing some of these nice sites.

I completely agree and would pay as well. I'm sure there are sites out there that fit this need, but the key is finding the accomplished designers out there willing to offer their best tips and tricks.

Recently in Hacker News:

http://blog.guestlistapp.com/post/2133037823/timelapse-desig...

I just shows how one designer can put 4.5h in a landing page with design exploration.

I would also like to see more in depth tutorials made by professionals. Something for the ThinkVitamin guys?

That would be cool. Perhaps even more interesting to me would be the thought process behind each decision, font choices, font sizes, spacing, layout etc. If you watch enough videos on lynda.com you can get pretty good at production of design, but design itself is much harder in my experience.

As a disinterested observer, I can say two things:

1) They're pretty

2) They piss me off

These sites scream style over substance. I can't think of an Alexa top 500 site that uses this kind of design. The only one I frequent would be Grooveshark, and their design is highly functional.

Between facebook, gmail, reddit, HN, and the various blogs and news sites I visit, 98% of my time online is spent on sites that look nothing like these. Even Hipmunk, while very web 2.0, is completely function-focused. These sites seem like they're pretty for the sake of being pretty, and I couldn't for the life of me say what a single one of them actually does.

"an oversized number pad and graphic call and hangup keys that even a toddler could figure out"

I had some trouble figuring this out.... style over substance indeed.

I think these are mostly "first impressions count" sites, rather than "you come back over and over again" sites, which have different requirements. Sometimes you only have a few seconds to make an impression...

The only people for whom "first impressions count" is a better business model than "you come back over and over again" are web designers. These sites seem to exist only to fill the niche of sites that exist to please web designers. I can't imagine many successful startups employing these people.

Quiet a few of these sites are actually landing pages for Web Design firms. A couple are for portfollio galleries of 3rd parties.

The rest are pretty minimalistic and function focused.

I'm just taking this list as what it is: A list of very well crafted websites that hopefully inspire others for their own work.

And really, what's wrong with style over substance? It's not like a firm needs to have a Reddit/Gmail style of a design.

I, like you, use Facebook, Gmail, and Reddit quite a bit. However, I don't consider their design to be as outstanding as their functionality (which I know we'll disagree with). Thus, I wouldn't say they are my favorite web designs.

If you look at design as being purely aesthetic, then I agree with you. If, however, you approach design as does an architect, that is, to facilitate human interaction with a necessary medium, then these sites suck.

They are a chair that looks really great from a distance, but that you can't sit in. It's pretty and pointless.

I disagree. You're generalizing and not looking at the business purpose of the sites.

If the purpose of your site is to impress potential clients then there's absolutely nothing wrong with: http://www.dawghousedesignstudio.com/

If the purpose of your site is world domination of classified ads then there's absolutely nothing wrong with: http://toronto.en.craigslist.ca/

Dawghouse is an exception. I actually quite like that one. However, I don't like it because it's "pretty", I like it because it follows good design fundamentals and includes nice little touches - like js button highlighting on mouseover. It looks well-put together. I'd hire them.

To quote the movie character Mark Zuckerberg: It's clean and simple, no Disneyland.

What’s wrong with being pretty? Those websites are fine for what they are, portfolios mainly. You are not supposed to use them every day, that’s not what they were designed for. They are not supposed to be Alexa top 500 websites, none of their designers thought they ever would.

A metro station doesn’t look like a Gucci store and that’s just fine and perfectly appropriate.

What I don’t like about this list is that it focuses on Gucci and not on metro stations. You can’t design a metro station like a Gucci store, you can’t design a high-traffic web app like a designer portfolio.

Thanks for the hipmunk & reddit shoutouts. We're definitely from the function > form school of web design. That said, I'd love a bit of polish on the reddit UI (Apple can pull it off, after all). Hipmunk is getting one soon -- function will never be compromised, but a bit of sexy makes it more palatable, faster, to a wider range of people.

These are 'pretty designs', some even just a one page, above the fold bit.

More impressive would be comprehensive site design and UX for a site with a significant amount content, and not just a pretty home page.

I couldn't agree more. I've yet to see any of these sites do anything, with the possible exception of Ben, which was a cool html5 demo.

Have there been any good looking regular websites released this year? A lot of best of lists tend to just be a list of portfolio and design studio websites.

I'll start (based on what was passing through Forrst and HN) -

http://www.draftboardapp.com

http://www.aerofs.com

http://www.certtime.com

http://www.wuala.com (not 2010, but still good)

I really liked this one, for example.

http://www.cmap.illinois.gov/

It looks good but there are some bad choices in my opinion, like having transparent menu backgrounds. It decreases readability, for example on the menu "GO TO 2040", "Regional Mobility" merges with the background and it becomes hard to read.

Only app I spotted on that list was http://www.coolendar.com/ Seems to be hosted on google app engine. Nice example of simple design that does one thing very nicely.

The rest looked like brochures. Not nearly as impressive as a functional app with a good UI.

Are there lists like this of great design examples, except focused on web apps? These lists always let me down since they seem to bias static information sites over web applications, which is what I'm interested in. These are great designs, but mostly unhelpful to me because of this.

Except maybe for "ben the bodyguard", these websites are pretty much all "design" and no "web". In fact, most of these look like they were made straight out of Illustrator (a couple of those websites are actually huge images stitched together with no text!).

I prefer the Drawar best of roundups because at least they provide a few paragraphs of explanation for each screenshot explaining what makes it exceptional: http://www.drawar.com/posts/2010-best-designs-2nd-quarter

Not a single one makes use of the full width of the screen. All static layout. My websites all make use of the full screen width. I still think dynamic layout is better for usability. What do you think?

I think it has to be taken on a case by case basis. It's extremely difficult to do a well-designed dynamic layout that doesn't look too boring/un-crafted.

I read somewhere recently that most sites are using central layout now as opposed to fixed or liquid. I was looking for tutorials but I didn't find any, how would I go about making a central layout?

you just need a container, make the width of it about 980px and set the margin like so: #page_container {margin:0px auto;}

Alright thank you. Just one last question, within that 980px space, would the design be liquid or fixed? Maybe it sounds stupid but I'm kind of new to CSS.

That would be fixed then, you can subdivide that 980px space into columns but nothing inside will stretch beyond the boundaries. Eg. here's one of our sites: http://nxbus.co.uk

You can see that while there's a background image on the full page, all of the content is constrained to a 962px width container with the auto margins. This keeps it centred but with a fixed width.

Alright, thank you.

Is there a way to just filter all posts containing '2010' in the title?

is this what you are looking for: http://www.google.com/search?&q=intitle:2010+site:news.y...

I'd want the inverse of that...

Maybe this?

http://www.google.com/search?&q=intitle:2010+site:news.y...

They kinda all look the same to me. Pretty, but unmemorable.

"Showcasing 65 of the Best Website Designs of 2010"

I pretty much stopped reading and closed the tab after that. Seriously, 65?

We need a save option, elsewise I have to make a worthless comment just to flag the story!

jQuery appears to be the staple of modern web development/design. With javascript turned off, quite a few of these sites still remain pretty and usable.

Reply on news.ycombinator.com