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.
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.
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.
Buttons need to look good too. Soft gradients and detail through use of lighting almost force visitors to start clicking away at the DailyMile.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
It’s big, bold and it works! I’ve always loved the creative logo/header that Chris Spooner has used on his blog.
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.
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.
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”.
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.
There’s plenty of room at PixelBot. This is another great example of separation of elements and an easy to read website.
To reiterate my point again, MadeByOn wouldn’t be the same if, for example it contained a crowded sidebar.
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.
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.
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.
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.
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.