Take Your Web Designs to the Next Level

Sep 30 2010 by Shannon Noack | 31 Comments

Take Your Web Designs to the Next Level

When you start out as a web designer, you do all you can to grasp the basic design principles so that you have a solid foundation to start your journey on. As you become more proficient in your craft, you start to learn techniques that are more advanced, and you begin to implement bigger and better things in your work until you reach a point where you feel pretty comfortable to step outside the bounds of the ordinary. What else can you do to take your web designs to the next level?

Here are just a handful of ideas you can consider if you’d like to take your web designs the next level.

Delve Into Design Details

If you look at most beautifully designed websites, you’ll notice that they are often set apart not because of big things, but the little details that let you know the designer took great care and attention of even the smallest of things. These small touches don’t need to be in your face to be powerful and effective; details can include a hairline stroke for additional depth, a faint gradient for more interesting surfaces, small icons for added visual appeal as well as to aid visual cognition, and so forth.

Here are three good examples of web designs that delve into the details.

Foundation Six

Delve Into Design Details

This site rocks with lots of small details that contribute to an overall great design. The banner behind the F6 logo at the upper left corner of the layout has a slight shadow, creating depth and drawing attention through distinction. The shadows behind the large website thumbnails in the middle are also nice for creating depth as well. Small shadows can be seen in a bunch of places if you look closely, as well as hairline highlights too. Unique icons and other small details make this design really shine.

TNVacation

TNVacation

This site design shows great personality through lots of textures, bright colors, and great typography. The navigation banner has plenty of details including unique dividing lines, a wrap-around ribbon with depth, and extra lines at the top and bottom that complete the look. The halftone dotted pattern can be seen throughout the site, not only showing consistency, but also the impression that the designer pays attention to the details.

Capo

Capo

This site is subtle in colors, but still powerful and loaded with details. Slight shadows can be found everywhere on the site: on the content edging, headlines, dividing lines, and so forth. These subtle shadows are wonderful ways to add small details. The soft glow at the top center of the homepage is a good additional detail as well.

Learn jQuery for Additional Functionality

I mention jQuery here because it’s my front-end web development/Ajax JavaScript library of choice and because it’s known to be friendly to web designers — however, there are loads of other JavaScript libraries such as MooTools, YUI, and Dojo that are equally up for the task.

JS libraries can give designers an easy way to implement animation effects and interactivity into their design and, if you’re the braver kind of web designer, Ajax utilities and dynamic manipulation of markup.

Let’s look at some great web designs that have been taken to the next level because of JavaScript web development libraries.

Hull Digital Live 10

Hull Digital Live 10

You can find plenty of excellent examples of jQuery use in this site design. Most notably, check out the navigation animation, the header graphic that was made functional with the use of hover events, and the scrolling Twitter feed near the bottom. These additions to the site are classy and professional, adding a lot of goodness into the design.

8 Faces

8 Faces

This cleanly designed website has a few jQuery features to heighten the user experience. Check out the "Preview" box on the homepage, which is a jQuery-based slideshow that slickly transitions between pictures. Also, check out the interesting scrolling action that keeps the sidebar navigation and site logo fixed in place. The site’s theme, minimalist and clean, makes the interactive pieces truly stick out.

Drexler

Drexler

A subtle box up top prompts users to "use your arrows" in this design, and though it might be a bit too experimental as the primary navigation feature, they do have a back up (the main navigation menu). Having a back up for JavaScript interactivity — and making sure that your work degrades gracefully so that it will work without JavaScript — is a good practice you should keep in mind when working with JS.

Additionally, you can also click on the arrows that appear over the banner of pictures, which scrolls through a slideshow of images. Click through the site and you’ll see other jQuery tidbits at work.

Use Unique Fonts

Great typography can certainly make a good website even awesomer. There are tons of ways to use fun and out-of-the-ordinary fonts in your designs outside of web-safe fonts (e.g. Arial, Georgia, Verdana).

My two favorite methods are the @font-face CSS property and Cufon. Both methods are different — @font-face uses CSS while Cufon uses JavaScript — but they allow you to expand your font choices as a designer. You could also even use the free Google Font API service (which also uses @font-face) to not only bring your site designs to the next level, but also to take advantage of Google’s powerful infrastructure to serve your font files.

Let us take a look at some sites with great typography powered by web fonts.

Marie Catribs

Marie Catribs

This site design has remarkable typography, including the use of the Steinem font for some headlines (rendered using @font-face). They have also used beautiful fonts as CSS background text image replacements where web fonts weren’t possible, adding more style and personality to the design.

web://contact

web://contact

This site uses @font-face to display the Museo font, which is utilized by all headlines. The font is just distinct enough to make it stand out, but not so much that it’s over the top "look at me I’m using @font-face".

BBQWar

BBQWar

Cufon is powering the fonts on this site, including headlines and some standout phrases. Using a special font on the site design gives it a little something extra. This site is so unique in look and style — the font fits right in — adding to the rustic theme they have.

Play With CSS3 Goodies

CSS3 has brought about tons of new options for web designers to style their designs effortlessly with. CSS3 isn’t supported in every browser just yet (most notably IE8 and below), but that doesn’t mean we can’t play around with it and create designs that are progressively enhanced. Let us check out some cutting-edge web designs that utilize CSS3.

ANTETYPE

ANTETYPE

There are a few CSS3 goodies at play in this web design. They’ve implemented some rounded corners and gradients through CSS. Click through the site to check out the elements they’ve brought in to elevate the site’s design to the next level.

New Adventures In Web Design Conference

New Adventures In Web Design conference

This site that caters to web designers leverages some CSS3. They’ve used the border-radius property as well as the box-shadow property for various elements to give them a distinctive look. Also check out the great typography and the use of WebKit CSS transformations.

I Love Dust

I Love Dust

The images on the homepage use the opacity CSS property on :hover. It’s a small effect that adds great attention to detail.

Taking It to the Next Level

As you can see from the ideas I’ve highlighted, you don’t need to add much — just some extra thought and care and paying attention to the craftsmanship of our work as well as keeping up to speed with our growth as a web designer and staying ahead of the curve. Got more tips for taking web designs to the next level? Share them in the comments.

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

31 Comments

Dan Sunderland

September 30th, 2010

Nice roundup, stepping up to something new can be a tougher task than it seems sometimes. Good to see some CSS3 sites that aren’t just slapping border radius on every block object!

Robbie

September 30th, 2010

Interesting article and range of sites Shannon.
Most feature a limited palette(very successfully imo) that the photo-real elements blend really well in.
Wish they could me teach that skill ! (I’m too used to rendering 3d stuff without serious attention to selecting colours at the start, not as I go.)
BBQWar gets my fav as it “makes muh eyes happy justa look at.”

Arnold

September 30th, 2010

Great article. As a new designer, I appreciate seeing such great work from others. It really inspires me.

Craig Pennings

September 30th, 2010

Beautiful design work! I definitely need to start integrating more subtle textures into my designs.

David

September 30th, 2010

Nice comprehensive article here, i especially like the first example of depth in a design – foundation six.

Jim Munro

September 30th, 2010

Great sampling of goodies. Along with my coffee, this was a good infusion to start my day. Thanks!

Susanna K.

September 30th, 2010

It was either a really bad or really good thing that I read this article while in the middle of redesigning a site’s homepage.

Now I think everything I’ve done so far looks like crap by comparison. Back to the drawing board!

Aaron Moody

September 30th, 2010

Think I will try the custom type in my next design :)

Shannon

September 30th, 2010

Thanks for the great feedback everyone! I’m glad you enjoyed the article.

Dan Sunderland – yes I’m happy more and more sites are implementing CSS3 stuff, it’s fun to see!

Robbie – check out some other articles on this site, there are some good ones about color. Here’s one I wrote: http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/ There are tons more though.

Susanna K. – I’m sorry you had to start over on your design, but it is nice to see more inspiration in new places. Hope it helped!

watermelonbunny

October 1st, 2010

Still, most of these sites take the privilege not to fully support Internet Explorer (throughout it’s versions), especially in design issues.
It’s a drag, I know, but I still strongly believe that letting go of a browser, makes a bad design choice over the site’s efficiency.
First and foremost, a website is meant for users, not designers, and is meant to sell an idea or a product.
Sadly, I still say: “patch it up for IE users”

Chief Alchemist

October 1st, 2010

I’d like to add one. The key one IMHO actually.

“Never forget that your design exists within the context of the brand/business. ‘Beautiful’ in and of itself is not the goal. Meeting the needs of the business are.”

The fact is, there are plenty of visually appealing website that fail. Why? Because they fail to realize that design is a means, not the ends.

I think the question is, when is design going to take itself to the next level?

sinetics

October 1st, 2010

Amazing article! Great source of inspiration. You found some great examples here!

Sarah Jones

October 1st, 2010

Great source of information for Designers. Capo is the best, its professional, attractive and simple.

Simon

October 1st, 2010

Really wonderful and inspiring websites and also nice suggestions. Thanks!

Terry Dunn

October 1st, 2010

I think there is something etheral, almost mystical about great design. It’s something you instantly recognise, but cannot put your finger on why it looks so good. And it’s a skill I wish I had. Some wonderful web designs Shannon.

Terry

bcarter

October 1st, 2010

Great collection of inspiring sites with quality workmanship, and a well written article on stepping it up.

One of the problems I often face in my design work is—the client! Clients can limit design way quicker than we ad designers may limit ourselves. That is why stepping it up and moving to the next level of design (for me) has to start in my free-time between jobs, or with those few clients that understand good design.

That leads to another hot topic—educating your clients to recognize good design.

Osh

October 1st, 2010

Its interesting how many people can think some picky things are not important, but give them the importance they deserve can make the difference in our designs, not only webdesigns…

thanks for the article!

fiona

October 1st, 2010

nice inspirations and good suggestions

Shannon

October 1st, 2010

watermelonbunny – I agree. Although it’s not always easy, it’s still important to test for IE users and not alienate that audience. Good point.

Chief Alchemist – thanks for sharing, and I agree with your idea! Although, if a site isn’t visually appealing, it’s not going to be as successful as it could. Both the clients needs and the design itself are important.

Terry Dunn – very true, I find that many people can’t describe what “good design” is, but they know if they find a site easy to use or not, and if they like the design or not. They can’t really describe it because it’s observed subconsciously by many people, but it still has an effect on them.

bcarter – yes the design can be very dependent on the client’s opinion. However, I find that educating clients on why their choices might not be best for them works well. They don’t always listen, but it does help!

Morten BN

October 2nd, 2010

Really nice designs you found

Calgary

October 2nd, 2010

Cool article Shannon! Actually interestingly enough we were thinking about doing a redesign and the Foundation Six was almost identical to our discussions yesterday :-) Irony at its best but glad to know we’re thinking of a good design!

Heath Waller

October 2nd, 2010

Really inspiring collection, Shannon. Many were already in my “favourites” – but you articulated for me why they were in there!

Thank you for your insight.

Alfie

October 2nd, 2010

A very inspiring article. I hit a blank wall on how to proceed with my next design. This post made me wanting to get down on creating the wireframe right now.

Oh, it’s a weekend. We designers need to take a break and recharge our mojo, too. thanks!

Sophie

October 3rd, 2010

Totally agree. It’s tricky to get that eye for detail – sometimes just a tiny change can make such a big difference to a design. Great article.

Mike

October 4th, 2010

Excellent designs…thanks for the inspiration!

nott

October 4th, 2010

showcase of a truly good websites! i’m very much inspired!

David Christian-Woodruff

October 6th, 2010

Great article!
I only recently started out as a web designer for Creare Design and sometimes think that I want to push the boundaries of my site designs but I’m unsure as to how, or where, to go with them.
This article, even from just seeing the web pages listed and before further reading, has given me that extra push to make my designs better and slightly different. Obviously client satisfaction is key, but if I could incorporate some new ideas into those, it would be excellent.

Ross

October 8th, 2010

One of the best “keep moving forward…” article that Ive read in a while. Ill have to try the font technique from google API and seriously start playing with CSS3.

krishna

October 13th, 2010

Its a great job u have done, Its helps to improve our skills.

ashley watson

October 25th, 2010

Great design……
website design really works work to attract and influence the customer for the inquiry, Website design Newcastle expertise work to design your website to attract the online customers.

sparsh

November 2nd, 2010

I am newbie in web design. your article will help me to know about web design. you have nice collection of web design. thanks for this informative post.

Leave a Comment

Subscribe to the comments on this article.