Does anyone have their favorite webs site design examples they can share? How about a good resource for excellent web design?
I don’t have a favorite, but I have many sites I like visually. I’ll just post those I like from an aesthetic (emphasis is mine) point of view.
http://www.cubancouncil.com/
http://www.bydelakerbrygge.no/
http://veerle.duoh.com/
http://donq.com/
http://christophzillgens.com/
As for excellent design galleries, I can’t think of one as all the galleries I know have a gem popping up every once in a while but I’ve not seen a gallery yet that exclusively features great designs, but seem to decide what goes in their gallery based on eye candy or Javascript overkill. Therefore, I won’t recommend one, but if you do a search on “web design galleries” or “css galleries”, you’ll drown in in the sheer plethora of galleries out there.
Well there are numerous web resources like smashing magazine, codrops, vandelay design and so on. From my point of view designs that i like are:
you can see lots of good design here http://www.csswinner.com
I often find it amusing how ‘excellence in design’ in most people’s eyes are perfect examples of 'disasters at usability" in most every case. I find it hard to cite sites that are best in design from an artsy standpoint, because to me the kings of design are the folks behind sites like Amazon, Wikipedia, Google and eBay – which let’s be frank, aren’t exactly a visual tour-de-force – but at least I CAN MALFING USE THEM ON EVERY MACHINE I OWN!!!
So far the hurricane force wind-driven prarie pies listed in this thread are STELLAR examples of EVERYTHING wrong with web development today – the PSD jockeys basically pissing all over the Internet to the point 90% of the sites I used to visit I won’t even wait for them to finish loading anymore!
Take this steaming pile:
http://christophzillgens.com/en/ – Color contrasts below accessibility norms? Undersized fixed metric fonts? SERIF fonts? Mediocre fixed width layout? USELESS!
http://donq.com/ – Take everything I just said and multiply it by a factor of ten… This is an example of someone who needs to back the devil away from the keyboard and take up something less detail oriented like macrame weaving. When someone puts all their content in 12px in a serif or condensed font with contrasts like #757473 atop #000000 or worse atop a #201F1E background, they aren’t qualified to be designing anything!!!
http://veerle.duoh.com/ – even WORSE illegible color contrasts, layout that just looks slapped together any old way (or is it just broken in Opera?) – illegible useless garbage in a fixed width layout – I’d be shocked if it had REAL visitors.
http://www.bydelakerbrygge.no/
http://jasonsantamaria.com/
http://www.marijazaric.com/
Lather, rinse, repeat…
http://www.cubancouncil.com/ – one of the worst sites I’ve ever seen – ALL of the text is illegible, bordering on invisible for a significant chunk of the population. Not that there appears to be enough actual content of value present for there even to be a website in the first place… good luck figuring out what that site is even supposed to be ABOUT!
http://colly.com/ – and then there’s this train wreck which comes up whenever a design thread starts up, and I have to ask “WRYYYYYYY!!!” – the only ‘impressive’ part is the switchy layout, and to be frank that’s not THAT impressive a use of it if what it’s switching is all declared in absurdly undersized fixed metric illegible serif fonts with insufficient contrast!
Of course you always have someone chime in with turdpress galleries, because of course the shmendrik vomited up and called markup by those train wrecks are worth even looking at in the first place.
I swear, laundry list of everything WRONG with web development today… there’s a reason I’ve basically been telling anyone coming to me with a PSD to piss off.
Best in web design?
http://www.google.com
http://www.ebay.com/
http://www.woot.com/
clean, simple, accessible. I don’t care how malfing pretty a psd-jockey layout is, if you can’t read the text, there’s a lack of anything resembling content, or the layout breaks or doesn’t fit the screen because the end user doesn’t have the magical combination of screen size and system metric it was designed on – it’s USELESS.
I used to link to slashdot and amazon for this too, but they basically destroyed the usability of the site when they switched EVERYTHING over to PX metric fonts, quickly treading into Yahoo territory on the useless scale and sending me diving for the zoom and to override the colors with opera’s user styles just to make the page usable again.
But yes, they’re very pretty… but again, all flash, no substance.
PROBABLY getting a warning for this post, I don’t care at this point it has to be said, I’m SO FED UP with pretty much every other developer out there, it’s a miracle I’ve not gone on a shooting spree! Those of you out there (and you know who you are) should be {omitting the nastiest expletive I can think of} ASHAMED OF YOURSELVES!!!
Off Topic:
Hey deathshadow60. I would have thought this thread to be an excelent opportunity to showcase your website, if you have one, or any that you have built so we can see how it should be done 
Anybody (and you might be able to even train a monkey) can find things wrong with other websites if they really want to pick something out of them.
There is a bit of a movement in the design community that might show some promise … a subsection of the mobile first crowd. Basically, as its simplest, it acknowledges that basic HTML is all you need to have a perfectly usable and flexible site. Then add in some CSS for various screen widths etc, maybe some media queries, and take it from there. That’s what I’m playing with these days, and I find it much more satisfying.
[ot]
He actually did this in another thread not so long ago.[/ot]
Gosh, deathshadow60, I’m glad I could give you an opportunity to let off steam.
Don’t think there’s a need to OT this, it’s kind of on-topic in a subtle but non-offensive “calling me out” sort of way… but then I have strange notions on what’s on topic and what’s not… though 99% of the time someone says “that’s off topic” to something I post it’s because they are blissfully unaware of a literary device called a ‘simile’… and no that’s not the same thing as a smilie. 
Normally I’m not into self promotion, and I’ll admit my own sites have issues…
http://www.deathshadow.com
http://www.ewiusb.com (needs a content update badly)
deathshadow.com suffers from a lack of originality in the theme, and feels a bit dated now that I’ve swapped it to “the same blues everybody else uses” – but they’re semi-fluid accessible layouts (need media queries though), with dynamic fonts on the content areas (need to update the sidebars to same), with LEGIBLE color contrasts – even with the overblown text-shadows (which were more me just messing around with new stuff).
EWIUSB.com is a bit better on originality, though it’s very simple…
Biggest complaints I get about both sites is “AAAH, WALL OF TEXT!” – something that to be frank people who say can go shtup themselves for all I care. It’s called content – content of value – in other words the reason to have a website in the first place.
But both degrade gracefully CSS off, images off, scripting off, or any combination of the above; it properly supports accesskeys (in opera hit shift-esc for a bit of fun on that front), skipto navigation, and PROPER heading orders for keyboard nav. Semi fluid layout from 752px to 68em, dynamic legible fonts with color contrasts well within the WCAG guidelines, and semantic markup top to bottom! deathshadow.com (the newer page of the two) even uses HR properly to indicate changes of topic when there’s no corresponding new subsection heading. (which is what HR is for! Just like numbered headings indicating the start of a subsection of the higher order (lower numbered) heading preceeding it)
I’m just sick to death (why do you think I’m shadowing him) of seeing the SAME things wrong on every website people praise for design, cheering uselessly idiotic designs from the rafters – It’s the same list of things over and over again; inaccessible color contrasts, inaccessible fixed widths, inaccessible absurdly undersized fixed metric fonts… and quite often font-faces that are also illegible on screen. You add to this fixed height containers that the content doesn’t even fit into when/if they do use dynamic fonts, and it all adds up to the “But I can do it in photoshop” idiocy – which basically proves the people who vomit up a PSD and have the nerve to call themselves “Web Designers” need a good swift kick in the daddy bags.
But again, I consider the entire notion of drawing a pretty picture of a layout or even THINKING about layout before you have semantic markup of content (or a reasonable facsimile) to be completely back-assward; it’s putting the cart before the horse. Make semantic markup, bend the markup to your will with CSS to make the layout, and THEN hang the goofy graphics and effects on it, because again: “People do not visit websites for the goofy graphics you hang on the layout, they visit sites for the CONTENT” – CONTENT FIRST! That way instead of shoe-horning your content into a layout it probably wasn’t even designed for (see why things like pre-built templates are USELESS TRASH) you’re crafting your layout to the content.
It’s also what’s wrong with the whole “mobile first” nonsense – when you make your markup you should be thinking “What is the content”, not “what’s it going to look like on a specific device” – this is where 99% of developers kick themselves in the crotch is they think “what’s it going to look like on screen?” instead of “what is this content?” – changing this to “what’s it going to look like on mobile” is NOT THE ANSWER, and misses the entire POINT of HTML!!!
The point of HTML being device neutrality and letting the user agent best determine how to deliver the content within the capabilities of the target device – to go hand in hand with the point of CSS+MEDIA types allowing the designer to then take that device independant markup and craft it for specific targets.
HOW HARD IS THAT?!? Again it’s so simple, and how it’s SUPPOSED to have worked from day one – then the browser wars pissed all over the very concept of HTML with 3.2, then developers couldn’t pull their head out of 1997’s backside, and now with HTML 5 they’re just legitimizing forgetting the entire purpose of HTML. HTML 5, the bleeding edge of 1997 coding practices for the win – NOT.
I mean people can’t even be bothered to use the numbered heading tags or accesskeys properly (hampering keyboard nav in browsers that actually support it in a useful manner … ok, browser… since there’s only really one), constantly abuse tags like definition lists and paragraphs…
… and then the current idiotic nonsense of nested UL’s with content cloaked heading tags come up with by the ‘no tables at any cost’ whackjobs. (see the default vBull skin for this in action).
You combine these “didn’t get the point of HTML” developers with these “crap out a pretty picture in photoshop and call it a web design” and you end up with a page that is not real world deployable, and most likely has more bounce than it does real visitors… see most of the pages outlined above, which thanks to the same flaws and same levels of bloat probably only get visits from other art {omitting the sexual preference slur} going ‘ooh, pretty’… and being an artsy fartsy type, trust me; we can smell our own.
Which again means the sites are useless for anything practical like selling a product, conveying information of value, or even just providing entertainment.
In this case it’s not a matter of self-promotion. For me it’s more about seeing if you practise what you preach which points to the level of credibility of your critique of other peoples’ websites in this and other threads.
btw - your deathshadow web site has 3 w3c validator errors (at the time of this post). Well 1 actually, the other 2 are cascades of the first.
Most of what you say makes sense but fwiw, I would suggest steering away from what imo is ott like hinting at going on a shooting spree against those you don’t agree with.
In the unlikely event that anyone affected by what’s happened in the U.S. and Europe over the last few years sees your comment directly or indirectly , at the very least it will most likely come across as being extremely insensitive and at worst, well…
I couldn’t find the thread ralph.m referred to earlier, so since he didn’t mention which web site the thread is on I figured it must be on another website. I found some very interesting info googling deathshadow60 and someone on another website helped find some other info as well
I tend to agree with deathshadow60 on this topic. The sites listed do look aesthetically pleasing but they are not the best examples of technical mastery. However, in regards to web design I believe that having a technical mastery should be part of the requirements for a well designed site.
I myself believe that well done web design amounts to good font-end code, following known UX patterns and nice decoration to round it all off. The decoration portion is really where a design should stand out. One shouldn’t be deviating from known UX patterns because those decisions tend to decrease useability for little gain.
Though I do not believe deathshadow60’s work shows design mastery in regards to aesthetics. Though I can’t recall a time when he has stated he is a designer.
This is the whole reason front-end developers exist. To take the designers masterpiece and turn it into a piece of not only aesthetic beauty but technical as well. There are probably very few people who can say they have mastered both sites considering programmers make the worst designers and vice versa.
I consider myself a decent designer in terms of following patterns and technical mastery but when it comes to decoration such as; illustrations, etc I’m lost. That is why I tend to stay away from those types of “masterful designs” and always go with simple, clean with good typography. Nothing to ever be in a design showcase but than again I’m not really a designer either.
That is one thing just about all well done aesthetic designs have in common good decoration. From little illustrations to textures and bringing it all together. Something I just can’t seem to wrap my head around. Other than that all it is is a standard UX pattern.
I don’t disagree with you, oddz, neither do I disagree with deathshadow60 (however, I strongly dislike the tone and am kindly asking to respect that some of us do not appreciate being shouted at or personally attacked), which is why I’ve explicitly stated what I like visually. I fully realize and acknowledge that these sites could have better (and less) markup, be more flexible, and generally be more user friendly and accessible, otherwise I would not have put emphasis on the visual aspect.
Nevertheless, I find these sites visually inspiring which is why I posted them.
… and that’s the thing, the fixed width layouts, absurdly undersized fixed metric serif fonts and illegible color contrasts aren’t just technically bad or bad from an accessibility standpoint, they’re visually depressing to since again – it’s basically shellac on a pile.
Just ONCE I’d like to see one of these ‘visually inspiring’ sites that was actually USEFUL to end users. NEVER seen one. Yes, very pretty – but what good is it? Welcome to bounce and one-shot cantrip hell. It treads into the same territory as art films that get rave reviews from critics but tank at the box. The term is “box office bomb” – designers are going “ooh, wow, neat” when it means nothing thanks to the resulting sites being USELESS to actual visitors… in the same way that “critically acclaimed” has become synonymous with “don’t bother going to see this unless you bring a date and plan on doing something OTHER than watching the movie”.
Again, for those of you about to panic into “off topic, off topic”, that’s called a simile.
What’s visually depressing is subjective. They obviously aren’t visually depressing to me.
Neither have I, which doesn’t in any way mean that it can’t be done.
Spot on
And also so to some extent is how a page is constructed provided it passes the w3c validator. I use a Strict doctype and as long as my page passes the validator and looks like it should then as far as I am concerned there is nothing wrong with it and I don’t give a rat’s clacker if in someone else’s opinion the page should be constructed differently.
I think sometimes people forget that all they can do is express an opinion on how things should be done and at the end of the day that’s all it is, an opinion and everyone is free to take it for whatever they think it is worth and nothing more
I haven’t met anyone yet that has the clout to enforce how I design and/or build a web page.
I am shocked that DS60 listed Google. Their apps have pretty poor contrast out of the box, and the new update lets you customize less. Not to mention their current mindset is make them work with their tech (chrome & ChromeVox), and sometime in the future they’ll work on making it work with a wider audience. Just a little backwards thinking?
I don’t use their apps, and you are correct in that all their new stuff – and indeed what they’re doing to their latest versions of the site itself are slowly working their way towards saying “accessibility, what’s that”. (since they’re basically pissing all over their own sites with the endless javascript for nothign and retarded HTML 5 bs).
But even with that taken into account, their websites is/was an example of good design (increasingly was) – fluid layout, accessibile font sizes, legible font faces, tasteful colors with proper contrasts… though that new menu, well… I had a thread a while back talking about how they’re slowly shooting themselves in the foot and forgetting what it was that made people use them in the first place.
One day someone from another planet will land and show the world how to balance visually pleasant design with usability. Whatever will deathshadow60 do then? Probably complain that they landed their spaceship wrong.
I wish I could create a visually pleasing design like the examples that kohoutek posted. I really don’t see the point to nit-picking things like fixed-width design, which is something I prefer when using a site, or the use of HTML5. People don’t care if their mechanic uses Snap-on or Craftsman wrenches. What’s the difference, use HTML 4.01 or HTML 5 or straight up XML if you wish. As long as the code is valid, semantic and logical it makes no difference.
The reason people use google is not the design, it’s the function.
So you mean the bare bones search engine? There are issues with that besides the pretty standpoint.