Characteristics Of A Professional Web Design

professional web design

We’ve all come across a website for the very first time and thought to ourselves “Wow, this is really nice. Can I just live here for a while?”. Professionally designed websites are easy to spot. Everything is well placed, navigation is a breeze and every single element ties into the overall look of the design itself.

So just what is it that makes these well thought out sites so appealing? Most importantly is the attention to detail that goes into the design. There are certain techniques that you can utilize to help take your web designs to a whole new level.

In this article, through the use of examples and tips, I’ll help to spotlight several Characteristics Of A Professional Web Design.

Subtle Details

I do more than just read articles when I visit websites. I study the entire design of the site looking for tiny little details that silently whisper professional design work. By adding simple 1px highlights and shadowing to lines and edges, you can easily allow your site to stand out in the crowd.

Creattica

The entire envato network is well designed. As you can see with Creattica the highlights and shadows along the edges of fields and lines were well executed and as simple as they are, let visitors know that they are on a professional website.

creattica

DailyMile

Buttons need to look good too. Soft gradients and detail through use of lighting almost force visitors to start clicking away at the DailyMile.

dailymile

Psdtuts+

Carry this technique of border highlighting and shadowing throughout your website. As you can see with Psdtuts+, paying attention to pixel perfect details even within separators help to add to an overall clean crisp design.

psdtuts

Smart Use Of Gradients

There was a time when gradients were used and abused. We often associate extreme use of gradients with the term “Web 2.0,” and you may still connect the two. We usually see the use of gradients in logos and headers, but they can prove useful throughout the design of the site as well.

Gradients work best when they are soft and gradual. There are some cases where extreme gradients actually work, but for the most part it can be a bad idea. Here are a few excellent uses of gradients within websites.

EctoMachine

Coupled with a slight texture and a big graphic the gradient use at EctoMachine helps to draw the eyes downward towards the content. It’s a gradual enough change to be both effective and non-distracting, even though your looking past a giant destructive robot spider baby.

ectomachine

YouLove.us

This entire website is an excellent example of creative gradient use. Spend just a minute or two on the site even without any navigation and watch the strong yet gradual gradients flow through the entire page. I should point out that these guys design websites for a living.

youloveus

Smashing Magazine

With the redesign of Smashing Magazine we were all introduced to the Smashing Network. This meant a new logo/badge that ties well with the existing logo. I believe they nailed it. The gentle gradient use helps to create an unforgettable logo that still remains simple. Here is some more info on the design process of this new identity.

smashing magazine

Background Textures

Use of background textures can make or break a website. If you go too heavy with an obvious identifiable pattern, you fail. If done right, it can be a beautiful thing. Textures seem to be making their way into a lot of new website designs that I have come across, most of whom have done an excellent job of incorporating this stylish element into their design.

WebDesignLedger

WDL does a great job of sneaking in just a little texture to help add character to the blank spaces that would otherwise remain a white canvas. Look too quickly and you’ll miss it.

wdl

Elliot Jay Stocks

Here’s a great example of smart texture use. If you look closely enough near the top of the background, you’ll notice that it resembles the typography of the logo. It’s not obvious enough to draw the eye away and compliments the site quite nicely.

elliot jay stocks

Matt Dempsey

I wanted to point out how the bold use of a background texture can work. As you see on Matt Dempsey’s site, the strong colorful brushstrokes that grab your attention immediately add character to the overall design. Because these same whimsical strokes are incorporated into the categories and contact form, the whole site ties together very neatly.

matt dempsey

Big Detailed Headers (hit or miss)

Some designers choose to break away from the standard neat and tidy header and showcase their design skills right there at the top of their site. I’ve really only seen this pulled off on a handful of designs, but when executed by a professional it becomes a thing of beauty. Not only does this add to the identity and brand recognition of the blog, it can also get you listed in several design articles helping to grow your readership.

Blog.SpoonGraphics

It’s big, bold and it works! I’ve always loved the creative logo/header that Chris Spooner has used on his blog.

spoon graphics

WebDesignerDepot

Another header that you just can’t miss. Lots of color and minute details help to make WebDesignerDepot’s blog stand out in the crowd.

wdd

Inspiredology

The strange symmetrical header over at inspiredology makes use of some great soft and inviting colors along with what I’ve always thought to be Polar Bear heads. The whole thing was put together quite nicely and the use of the pattern tapers off mid-way down the page only to reappear in the footer to help tie everything back together.

inspiredology

Great Use Of Space

I love it when a design has plenty of room to breathe. If you’ve read any of my other design articles, you’ve probably heard me say this time and time again. It’s amazing how adding 20px of space here and 10px there can do wonders to the readability of a website.

Don’t be afraid of “white space,” crowding the elements of your site can easily turn readers off. Just because you have generous use of space does not mean you site is labeled “minimal”.

Black Estate

Gigantic typography and large uses of product imagery does not interfere with the awesome use of space at the Black Estate Vineyard website. If you were to remove just 10px of space in one or two areas, let’s say between the horizontal rule and the content of the article, the site would begin to crowd.

estate black

PixelBot

There’s plenty of room at PixelBot. This is another great example of separation of elements and an easy to read website.

pixelbot

MadeByOn

To reiterate my point again, MadeByOn wouldn’t be the same if, for example it contained a crowded sidebar.

on

Thinking Outside Of The Box

We’re designers, which means we’re creative. The standard header, body, footer, sidebar design has its place but if given the opportunity to do something different, go for it. You mostly see this idea of going against the grain used in portfolio websites where you’re supposed to do a little showing off, but as new and upcoming designers make their way onto the web, magazine style blogs are also witnessing a change.

cpeople

Here’s a good example of quality originality at work on a portfolio website. The complexity of the bird nesting in the beard, the quality of the image used of the mans face and the unique use of the fuzzy squirrel all scream professional web design work.

cpeople

Tripping Words

Josh, over at Tripping Words, redefined the way a magazine style blog can look and feel. It’s obvious that every element of the site was positioned with a multitude of thought and creativity. I’ve stopped by their on several occasions to read up on his articles and I feel as if the design has changed just a little bit on each visit. Not enough to confuse me, but enough to peak my curiosity.

tripping words 3

Carsonified

Who would’ve thought that a web page featuring only two colors could be so breathtaking. Every category you choose on Carsonified leads into a beautiful professionally designed page that is easy to read and just a wonderful place begging you to explore.

carsonified

Share Your Thoughts

What are some characteristics that you believe go into a professional web design? Which direction are web designs heading and will we see some drastic changes in what we call the standard website? Let others here your 2¢ below in the comment section.

Written by Shawn Ramsey

When I’m not brewing my own beer or hiking through the local National Forest, I’m busy building a more beautiful web.

@shawnramz → / bitdrips.com →


13 Comments

  1. Css Awards gallery December 31, 2009 at 4:25 am #

    Woow, fantastic collection!! :)

  2. Noel Wiggins December 31, 2009 at 11:46 am #

    Fantastic round up and details that make each design awesome.

    I think only a handful of these techniques could inspire a great website design, but imagine if you could create a design that hits on all levels.

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  3. Design Informer January 2, 2010 at 8:34 pm #

    Excellent points you bring up Shawn. By the way, you also have included great examples with your post.

    While I don’t think all these points are necessary to have a professional website design, they are still all valid points that should be taken into consideration when designing a website.

    For example, a minimal website might not want to have gradients and background textures but it can still have a professional and nice design.

    I think the key is knowing when to use these different characteristics to create that perfect design that fits your website. Anyway, nice post!!

    • Shawn Ramsey January 2, 2010 at 9:00 pm #

      Design Informer – I completely agree with you. A minimal website would need to focus more on spacing, while some other design styles may benefit from gradients, various uses of textures, etc…

      Also, utilizing all of these characteristics into one site design doesn’t necessarily mean that all of the elements will mingle together well. Designers should use their own judgments on when, where and if some of these characteristics should play their part.

      Thanks for the input Jad.

  4. Ev January 3, 2010 at 1:15 pm #

    This is a selection of fancy designs only. Professional designs don’t boil down to this kind only.

  5. Josh January 4, 2010 at 11:44 pm #

    Thanks for the mention! I just stumbled across this post today. A very interesting definition of how “professional” is defined in today’s contemporary design climate.

    Thanks for sharing! :)

    • Shawn Ramsey January 5, 2010 at 6:34 am #

      Thanks for the input Josh. Before I even began writing this post, I knew that your site would make it’s way in.

      To sum up the whole article, I believe that the act of paying attention to details both big and small is what sets a great looking design apart from one that was carelessly thrown together.

      And really, the term professional could vary in definition from one person to the next.

  6. astho January 29, 2010 at 2:58 pm #

    usefull…, thanks

  7. ashley February 1, 2010 at 5:45 pm #

    lots of insight and great links!

  8. abu September 1, 2010 at 2:06 pm #

    Fantastic!!!

  9. st.catharines web designer March 5, 2011 at 5:08 pm #

    Very good article. Great point. There is alot of characteristics that come with a professional web design and I think you covered alot of them.

  10. mauritius web design August 31, 2011 at 11:14 pm #

    great stuff thanks for sharing and Totally agree with you

  11. Web Design October 6, 2011 at 12:34 am #

    Nice one i like it

Leave a Reply