When it comes to web design and development, we’ve offered up our top picks for tools of the trade. We’ve shared great tips from pro developers. We’ve even wrangled exemplary sites to learn from.
But sometimes, a healthy dose of artistic inspiration is in order. If you’re a web designer (or web design afficianado) and low on creative juice, take a gander at some of these sites — recommended by top designers themselves — that push the limits of what artistic and technical expression can be on the web.
Have you come accross a truly spectacular site design that deserves the web’s attention? Share it in the comments below.
1. Lost World’s Fairs – Atlantis
Take a journey 20,000 leagues under the sea via this compelling proof-of-concept.
“The Lost World’s Fair project is a showcase of IE9 Web Open Font technology,” says Jesse Thomas, founder and CEO of the design firm Jess3.
There are a few interesting projects from The Lost World’s fair series, but Thomas picked Atlantis “because it was enjoyable to control how fast I processed the information. With this kind of responsive design, I can go slow the first time, and quick the next time.”
Thomas also notes the aethetics. “The use of illustration is soothing. I really appreciate in these examples the attention to detail.”
2. BeerCamp at SXSW 2011
Web designer Dan Rubin with code shop Webgraph suggested we take a look at this event promo site.
The design is unassuming at first, but the scroll bar packs a surprise.
“This is another stunning site from n’clud for an event at this year’s SXSW. The scrolling effect is outstanding, taking you through the site with plenty of physical depth,” says Rubin. “It’s one of my favorite examples to show during workshops and presentations.”
It’s hard to explain just how impactful this website is unless you’ve experienced it. Go ahead. We’ll be here when you get back.
3. Dmig 5
We’ve higlighted Design Made in Germany before when it won the first annual Web Font Awards, but it’s so impressive it bears another mention.
Brad Colbow, an independent web designer and illustrator picked this one for our gallery.
“I’m a sucker for great illustration integrated onto a site, and this one does it really well,” Colbow says. “It’s using some transparency effects to change the backgrounds as you scroll down. This is one of those sites that looks great as you resize it in other browsers too.”
4. Analog
Minimalism still rules the well-designed web, but that doesn’t mean you should skimp on the details. The information site for web design shop Analog is the pick of UK web designer (and frequent Mashable contributor) Grace Smith.
“Analog is simple and elegant, with beautiful intricate details,” says Smith. “However, it’s the clever use of ‘Easter Eggs’ that make visiting this one-page site such a pleasure. The use of CSS3 transitions on the mugshots, along with the unique GeoIP implementation and Grid (try pressing G), make this a clear example of how to create a visually stunning site that utilizes current web development practices and encourages users to return.”
5. Guide to the App Galaxy
WordPress developer Brian Casel (another design contributor to this site) pointed us toward this clever informational site from Google.
It’s another effective use of the scroll wheel, and the graphics can’t be beat. “It’s both visually appealing and highly informative at the same time,” Casel notes.
6. Octavo Designs
The web has seen its share of horizontally scrolling sites — some better implemented than others. The portfolio for Octavo Designs bucks the trend of awkward side-scrollers, according to Kelli Shaver, a web/UI developer and regular Mashable contributor.
“The site is just full of texture and warmth, with very detailed, unique, often subtle illustrations,” Shaver notes. “I think it works really well with the typography. Everything just comes together to create a very engaging experience.”
7. One Bit Increment
A web full of shiny vectors and smooth white spaces can eventually get boring. Graphic designer Emily Caufield points out a more tactile approch in One Bit Increment’s “gamified” homepage.
“I thought this site was a great fusion of meticulous handmade art and the wonders of modern technology,” says Caufield, referring to the paper cut-outs that comprise the virtual landscape of this impressive Flash-based design. “It functions as a website, a body of art, and a game.”
8. Ben the Bodyguard
Informational sites can become stale — logo splash, navigation bar, some floating text, and a few graphic bumpers if you’re lucky.
That’s why “Ben the Bodyguard” is a step in the right direction, says Jacob Gube, founder and chief editor of the design blog Six Revisions and frequent Mashable contributor.
“It’s a great proof-of-concept of what HTML5 and CSS3 can do,” says Gube. “The site has a memorable user experience design; something that all websites should strive for, no matter how you execute it. Is it the most functional, beautiful or usable design? Definitely not. But did it succeed in its intended objective, which is to generate buzz about an upcoming web service? 13,000+ tweets says it does.”
Take a stroll through this site to see what we’re talking about.
9. Awwwards
Looking for a bubbling font of great design examples? LA-based web designer Soh Tanaka reccommends checking out the Awwwards (get it?), a site that recognizes and promotes the best of innovative design.
“It usually features sites that are very interactive and that push the limits of CSS3 and JavaScript,” Tanaka says. “I feel most of these sites are pushing the boundaries of design and development on the web.”
Image courtesy of iStockphoto, skodonnell
More About: design, inspiration, List, Lists, web design
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad
