Ash Blue Web Design

Top 50 Inspirational Websites

About a month ago I submitted my website to a lot of CSS galleries. To be honest I was quite disappointed with what people were showcasing. So I thought I’d take a swing at putting together a list of the top 50 websites I’ve seen over the last month. Feel free to add any websites you think are phenomenal in the comments.

Type based websites

Gritto Rollo has a unique design and layout, especially since everything drops down on the page when you click text. Simple and definitely one of my top pics!

Matthew Henry’s website is loaded with knockout typography. This is what a good website looks like you design with content first. You can’t create something like this with a template.

Great type and it gets the point across. Navigation sucks for the rest of the website though >_<

Established NYC has some great typography and a very different navigation. As much as I hate flash, I don’t think something like this could easily be done any other way.

Achieving a design that feels like an authentic newspaper is extremely difficult. This page’s typography makes it look like I could reach out touch a genuine 1940s NY newspaper publication.

The design is a little scary, but its one of the slickest portfolio’s I’ve seen. You rarely see type used to create images in web design.

Pulman plays on the 960 grid by showing it right on top of his page. No shame here, hes showing his website’s framework all over the internet.

Blog based layouts

Effective showcasing for the featured article through simple type. Nothing too complex, but a great testimony to the effectiveness of great design theory.

Has a trendy zen garden feel to the website. Image at the top really makes this website work, but I’m somewhat disturbed by the cloud on the right and left hand sides that looks like an atomic bombs going off.

Video games are often an overlooked inspirational web design source. The Halo: Reach website packs a bunch and holds its weight well as a blog based website.

The Swish Life goes for more of a newspaper layout instead of an out of the box feel. Its very effective and the use of whitespace with line breaks should be noted.

Illustration helps a website climb to the top once again. Without a good illustration or photograph its hard to make a website stand out (unless you are a typography master).

SimpleBits has been showcased in more top 10 website lists then I can remember. The company has moved towards a more blog based layout these days.

Good use of graphics to emphasize the blog’s theme. Contact form in the header is an interesting choice, but it works incredibly well.

Smashing Magazine is well known in the design community. The blog layout is phenomenal and fits its content perfectly.

Mind raking portfolio designs

Dimension can really make or break a design. Basic WW makes great use of dimensional space to stand out from other “flat” website portfolios.

One of the best one page portfolios around. Well thought out use of type, photos, and whitespace.

Cubex is proof that all you really need for an effective website is one particular focal point. This website has changed little for years, yet continues to be featured all over the web.

This design screams “I’m going to kill them all!” Great use of an image to center the rest of the page’s design.

Good use of slider technology throughout the website. Effectively relies on transparency with a well textured background.

Flyguydesigns uses a blog like format with sorting to showcase their portfolio. This is a growing trend that will only continue to increase.

Sushi and robots showcases work phenomenally well! The content is simple, making users feel relaxed and laid back.

This website’s designers really thought outside of the box. The site feels very free flowing despite its dark color choices (which tend to feel crowded).

The extremely effective type of this website is only rivaled by the amazing footer it contains.

At first glance you’ll think flash, but look again! Its all HTML, no flash needed my friends.

Although I can’t read anything on this website because I’ve failed all foreign languages other than computer code, I’m strangely attracted to this layout. It makes great use of text in a fading banner and the illustrations are phenomenal!

Notable use of light and depth to create focus on specific content. The slider on the page is oddly effective, probably because most people just use a sliding box instead of a strategically  placed image holder.

This website uses a four column website layout to showcase content as if it were an old guide to different creatures (or perhaps an old menu, either way I’m not too sure).

Good web design isn’t stuck inside of a box. Phureal breaks outside of the borders with an imaginative design.

You don’t see too many good one page portfolios these days. They were more of a 2008/2009 trend, but this website is an exception.

Transparent boxes on a unique background are growing in popularity every year as support for for them grows across browsers. This is a great example of what can be done with transparency.

Develop Daly makes amazingly good use of whitespace to create an impressive impact on readers. The website fills the whole page too, without feeling overwhelmed.

It isn’t too often that you spot great photo manipulation that drives a website. ECTOMACHINE has created an EPIC feel when you first see their website through some devious manipulating techniques.

I’m not a fan of flash, but the navigation for Young’s portfolio is phenomenal. It could easily be duplicated with jQuery.

Simple and effective one page portfolio. Image loading backgrounds are notable and really cool (looks like its loading onto a wireframe).

Great use of type and I love the slider. The large amount of whitespace also creates a great feel for this website (usually the more whitespace the better).

Services

Faces attract people’s attention far more than any other kind of picture. This is a great example of using facial expressions to get customers focused on a specific website feature.

Very effective website depth through usage of photography. The blurred images really do make/break this design.

If you haven’t seen this website yet, you need to. Worth a good laugh and a small reminder in this list that sometimes “fun” is better than good.

I have no clue what this website says, but whenever you hover your mouse over anything, something cool is almost guaranteed to happen.

Besides the unique characters, this page is heavily carried by its logo. An effective logo can help to mask up below par typography and carry a website.

This is how an illustration should be used in web design. The logo is also amazing, I’ll try to avoid mentioning the footer though.

A futuristic interface on a website isn’t something easy to achieve. Starcraft 2’s websites really feels like you’re using a next generation touch panel to move around the website.

Don’t become a slave to neat and tidy website layouts. Experiment and you might create something amazing like this.

What grabbed my attention was not the actual site design, but the layout of the services near the bottom of the page. Very different, yet very effective.

This website showcases its product well and makes me crave chocolate… chocolate, chocolate, chocolate.

LemonStand has created a good bit of excitement for eCommerce developers. The design has only helped to promote its success.

Flexible layout with many resizing graphics. Usually pages like this can be broken, but I can’t seem to break it.

This page relies on the large background image to drive its design. Works quite well and the image’s blur adds depth.

Effective color usage to build trust. Icons are strategically placed to promote its services, while increasing conversions.

Sources

• Exceptional website navigation
• Design Snack
• CSS Elite
• CSS Drive
• CSS Beauty