Part of being a talented web designer means you have the ability to assess an aesthetic and judge whether or not the majority of the intended audience will find it visually appealing and whether or not it will have an impact on those users and influence them in some way. That is what successful web design is all about, not just looking good, but having the desired effect on the intended audience, whether it be focusing their attention or enticing them and creating curiosity. So there is definitely an element of natural talent involved because you have to judge if what you are creating looks good. This is the part of the formula that sets web designers apart, you either have it, or you don’t, it’s not something you can be shown or taught.

The other parts of the formula are more like ingredients that need to be prepared with passion and an extremely high attention to detail. A word of caution though, some ingredients don’t mix very well and it is too easy to fall into the trap of using one of the ingredients too much and creating a foul tasting design. By getting the right mix of these ingredients designers have been able to create some of the most stunning and successful web designs so far.

Typography – Choosing the right font or combination of fonts is essential to a successful web design. Once you have chosen you then have to consider how to use them, which one should be used for headings? Will you use images, Cufón, sIFR or CSS 3′s @font-face for none web safe fonts? Maybe you want to use a letterpress effect? How will you achieve this?

Iconography – The use of icons has been around since the first visual user interface was introduced in 1983 (Apple Lisa), they act as a visual anchor for users and are easier to quickly identify than a sentence or paragraph. Good icons add an extra level of detail to a web design and can really make your site look slick and professional.

Imagery – The use of images is a necessity for a good web design. When I say images I don’t just mean the use of images in general, I mean the use of images that illustrate. These could be product images on an ecommerce site, blog post images, or other forms of photography. The use of images has shaped the way we use the web making it more interesting and more interactive, engaging users and customers.

Layout – There are lots of different layouts available to web designers, some more creative than others, some more readable than others. When choosing a layout it is important to consider flow. How does the audience read through the page, how do their eyes flow through the page, this allows you to place important elements within the flow to catch the users eye to your advantage.

Illustration – You don’t have to be an expert illustrator to be a good web designer, but it helps. Using vector graphics to create the foundation of your design, creating consistent design elements with subtle gradients, shadows and textures, that appear throughout your design can really make a site stand out from the crowd. There are some sites getting a lot of attention for the level of detail in the illustrations being used in headers and footers, aspiring designers take note.

Finish – These are the details no one really notices but make all the difference. The best websites have subtle finishes all over the designs that most people probably don’t even notice. A good example of this is the minimal solid drop shadow used to make text stand out, now being achieved with CSS3, it’s one of those finishing details that unless you are a designer, you probably don’t even notice. Other examples of subtle lighting effects and borders within borders, all of which add to the quality of a design.

Minimalism – I am a minimalist in most things I do. The first thing I look at when asked to redesign something is what can be taken away? What isn’t necessary and plays no important role to a user? Whether it be content or part of the design, removing unnecessary elements is the best place to start, keep it simple and clean.

Colour – Colour choice and use is critical to a good design. Using varied shades or complimenting colours can achieve so much and yet it is very easy to get it wrong. Following on from the minimalist mantra, keeping it simple is key here. Look at the design and ask yourself if it works, experimentation is important, try different combinations and watch for what works. Particular favourites of mines right now are greys and purples.

Interaction – Ever get the feeling a button should move when you click on it? As a web designer, an obsessive one, nothing irritates me more than clicking on a button and having no feedback, no movement, why bother making it a button and not a link? Using interactive elements in your design allows you to connect with the user, try putting yourself in their shoes, what would they want to happen?

Here are some sites I have noticed that stand out for the way they have used some of these ingredients.

idsgn.org typography, imagery, minimalism

tutsplus.com iconography, typography, colour, finish

webdesignerdepot.com illustration, colour, finish

ilovetypography.com typography, minimalism, finish

apple.com typography, minimalism, finish, interaction

365daysofastronomy.org typography, finish, illustration, colour

abduzeedo.com imagery, layout, finish, interaction

atebits.com iconography, illustration, finish, interaction

When asked to offer my opinion on WordPress it wasn’t difficult and I was more than happy to sing it’s praises. What’s not to like? It works amazingly well, sure it could be a little bit faster but that ethos applies to so many things in life. The biggest benefit of WordPress is that fact it is open source. This doesn’t just mean it’s free, which is something you should obviously appreciate, it ultimately means the true incentive behind all the hard work, love and sweat put into it’s development isn’t motivated by profit, but driven by perfection and the need to create a tool that performs no other function than being the perfect integrated blogging platform, and I have to admit, it’s not far off. Here’s what I said about the WordPress 2.7:

For me WordPress has always been a no-brainer, it’s free and has been developed by the best in the business, you can’t really argue with that. It was always feature-rich but seemed to lack the user interface to tie it all together. With the “Coltrane” release (2.7) that problem was solved and WordPress went from being a simple blogging tool to a fully blown content management system. The new UI is beautiful and really takes advantage of all the latest web technologies. Everything ties in seamlessly and you can get around quickly using the new left-hand menu. Everything can be customised, like what is shown on the Dashboard and major upgrades are now automatic which as any WordPress user knows is a superb addition. All the content is easier to manage, review and change. You would need a damn good argument to get me to consider any other blogging platform.

The feature itself is very detailed and written well. I have bought Web Designer before and prefer it’s designer based layout and point of view, opposed to being a developers magazine featuring more coding and database features than design. Some magazines sit on the fence in between developer and designer, it is hard not to include articles that cross over, but Web Designer use a very illustrative design that I think appeals to designers which is probably the reason I picked it up off the shelf. Grab a copy and check me out!

1. Thou shall not steal someone elses design.

A very sensitive area for me at the moment, although copying is supposed to be the best form of flattery, blatant copying of someones design is shameful. In this day and age you will be named and shamed on a blog or forum somewhere. There is a fine line between ‘inspiration’ and ‘copying’ so be careful if you struggle with being completely original. Of course everyone is influenced by what they see around them and current design trends but my advice to anyone prowling the CSS showcase websites for inspiration would be to get away from your desk and chill, look for inspiration in places you would least expect to find it. 

2. Thou shall adhere to web standards.

A bit of a generalisation but let me explain. Why do standards exist? Standards exist to make people who don’t care, have to care. Take ISO manufacturing standards for example, every product manufactured has to adhere to certain standards, imagine if they didn’t, how would you feel if you TV blew up after one week? You take it back right? Not if manufacturing warranties weren’t standard, you get my point?

Web standards are just the same, they make web designers think and produce amazing work for the benefit of everyone, users, designers, IT folks, silver surfers and any other demographic you can think of. Don’t just discuss web standards, use them!

3. Thou shall not use Tables for layout.

There is only one reason for using tables in web design, for tabular data. Using tables to organise a page layout is a poor practice and something everyone should move away from. I don’t care who is still doing it or if you have always done it that way, it is wrong, sort it out. Builders used to use asbestos for insulation, but they realised the error of their ways, a bit of an extreme example but hopefully it emphasises my point.

4. Thou shall never prioritise ad placement over content.

One of my (many) pet hates. Did you create a website to generate money from Ads? Or, do you have a passion for what you do and enjoy sharing, writing, designing, filming, reviewing or what ever your website does? Make the choice and stick to it, yes I understand ads are a good way to pay for hosting but don’t try and trick your visitors into clicking the ads by camouflaging them (Camoutising) or placing them in really annoying spots like just under the title of the article, before any content.

5. Thou shall allow for non-Flash/Javascript browsing.

Some people don’t care but those people are crazy fools. Don’t discriminate, segregate or eliminate your potential visitors. It’s just logical really, why would you create a website, at it’s fundamental core a vehicle for sharing information with the world (hence the www, not just ww), only to present information that isn’t accessible to a certain audience? You can still use Flash and Javascript but just provide alternatives which are unobtrusive and don’t effect your site if the user turns them off. For example, if your navigation is Flash how the hell is a user, not using flash, supposed to get anywhere? It may sound stupid to some of us, but believe me, it does happen.

6. Thou shall check, check and recheck links, images and copy.

Nothing is worse than a link that leads to nowhere or the completely wrong place, it immediately tells the user it is amateur night.  Unfortunately with web design and large dynamic sites, it can sometimes be hard to get it perfect first time which is why I recommend triple checking. It is difficult and we are all human but the more you slowly check through every link and proof read your copy, the less mistakes will be made.

7. Thou shall validate all XHTML code.

If you are a web designer and you don’t know about validating XHTML, stop designing and get learning. the W3C offer a great resource where you can validate XHTML, Dreamweaver has built in validation tools, so there really is no excuse. Validating your code isn’t just about being a perfectionist, it points out small errors in your code which might not show in some browsers. Valid XHTML is another no brainer, if you are going to do something, do it properly. Think of it as a spell checker for the XHTML language.

8. Thou shall always test cross browser & cross platform compatibility.

As a general rule I test all my websites in IE7, Firefox 3 and Chrome in Vista, IE7 and Firefox 2 in XP and Safari and Firefox in OS X. Seems like a lot but it doesn’t take that long and you would be surprised at some of the differences in the way they render pages. This is a great cross section and loosely based on the W3C monthly browser usage stats. I refuse to test in IE6 because it is over 7 years old and anyone still using it to browse the web doesn’t deserve to have access to it. Designers who still test in IE6 are keeping it alive by doing so, don’t do it.

9. Thou shall avoid using too many DIV’s

One of the things about learning CSS is using DIV’s. At first it seems like an endless amount of DIV’s are required to contain, wrap and assign classes but it’s not the case. Look harder at your code, ask yourself, do I really need a DIV there or can I assign a class to another element? For example, your footer, does it need to be in a DIV or could you not simply assign the footer ID or class to the <p> or <a> and use CSS to do the rest? Many designers suffer from ‘divitus’ when experiencing the CSS learning curve, but hopefully you can use your skill to rid yourself of this infliction and start designing more elegantly with less DIV’s. Think of it as a challenge, avoid using DIV’s unless you absolutely have no other choice to get the desired design.

10. Thou shall not open links in a new window.

Back in the day web designers used to open all links from the homepage in a new window. The theory was the more pages open with their content in the better! What they didn’t think about is how annoyed the user would be and therefore would never, ever return to their annoying website, great job! There are almost no situations where you would want to yank control to open content in new windows from the user. It is so easy for a user to open content in a new window or in a new tab that if they really want to they will, don’t force the issue because you will only drive traffic away from your annoying site. The W3C have gone as far as taking the tag “target=” out of the XHTML 1 Strict specification, it doesn’t even exist anymore, get the hint?