Darren Alawi Web & brand designer

Having spent the past decade designing and observing web designs I started wondering if there was a secret formula to successful web design. Do we have to use a certain amount of gradients, subtle shadows, light effects and great typography or is it simply a matter of instinct and balance. Obviously web design like all the other types of design is subjective so one designers preference is another’s garbage but is there a middle ground that can be found using this elusive formula?

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