We often use icons for the sites we design at World Wide Creative. In our quest to develop sites that are profitable for our clients, we have seen (and research about the fact) that well-designed icons make difference to usability. Once a user is loyal to a site, and repeatedly visits the site, the icons go a long way into making it a more pleasurable experience.

So I found a post called ‘10 mistakes to avoid in Icon Design’ quite interesting (found via my new favourite resource, Design Float, which I posted about a week ago). Written by Denis Kortunov, it’s a detailed, well constructed breakdown on mistakes to avoid when designing icons.

On that note, one resource that our design team has found particularly useful in sourcing icons is iStockPhoto.com - especially when there’s no time to draw your own.

It’s amazing how much detail goes into a website. Think of the functional components, programming technology, tags, site navigation and the personas. Phew! And that’s before we even touch the content.

Design is the glue that holds everything together. And with so much to think about when you’re a web developer, I’m now going to add another to the list: typography.

When I studied (as a print designer), typography was a huge part of my course. In the Internet Age, it seems to have taken a back seat to structure and image manipulation, even though it’s such an integral part of keeping web layout together. If you take a quick browse through some of your most visited sites, I’ll bet you’ll see a noticable lack of well-weighted typography.

With the aim of keeping typography on the check-list for managers as well as designers, here’s a quick list of points to keep you honest:

1. Typography is about space. Like photography is about manipulating light, typography is about manipulating space. If the space (between lines, between letters) feels right, you’ve done a good job.

2. Sans serif CAN go with serif. The old adage of ‘don’t mix sans and serifs’ is NOT true. You’ve got to do what’s right for the project.

3. Type is meant to be be legible. If a designer says something like ‘it’s not supposed to be read’ or ‘I want the visitor to work for the message’ it means that someone’s chain is being jerked.

That’s all I got for now, but if you’ve got time, check out Smashing Magazine’s gallery of sweet typography acrobatics here.

We don’t see enough illustration, or art direction, in mainstream websites.

Hmmm…

1. Organisation

Designers worth their salt must have their resources close by. This allows the designer to work quickly and efficiently. Not to mention being able to explore a multitude of potential directions for a design in a short amount of time. A few years back World Wide Creative employed a whiz-kid who blew us away with the frantic motion of his Wacom mouse pen. It was amazing to watch him work - but the thing that struck me more than anything was the way he had his vast array of stock libraries, templates, font sets and icons all within close clicking distance. His scanner was ready for action within arm’s reach. He had a template ready for every need: 1000 pixel-wide sites, 4 column layouts, query forms, buttons, icons etc. He even had vector illustrations predrawn for t-shirts, caps, vehicles and billboard in case a concept needed to be taken over to external media.

2. Technical proficiency

As any designer will know, there’s nothing more frustrating than hitting a hurdle in trying to recreate the picture you have in your mind… and there’s nothing more satisfying when you ‘crack it’. Having in-depth knowledge of all the software you need is unbeatable - and this only comes with experience. The guys in our studio blow me away with the speed at which they solve problems using packages like PhotoShop, Fireworks and Illustrator.

3. A creative eye

We’re not talking just about being creative here - that’s the easy part. Most people can come up with great creative ideas. What’s more important, by far, is being discerning enough to look at your random scribblings and decipher what’s good and what’s not. A great designer has the ability to transcend an ordinary design idea into a remarkable one. A great designer will be able to gauge whether two colours work well together; whether an image actually communicates the appropriate message; and whether the final product really matches the requirements of the brief.

4. Conceptual ability

Perhaps the most important aspect of a great designer is the ability to come up with cracking concepts. If you look at great designers like David Carson and James Victore, design is not merely something that delivers something that looks sexy. It is something that delivers a message in a mind-numbingly intelligent way. When evaluating a design, ask the questions: ‘Is this impactive? Does this surprise and delight me? Is it memorable?’

5. Attention to detail

I used to work in a studio with a guy who was renowned for seriously pissing people off. He was a great designer… apparently. When I met him, I thought, ‘He’s not such a bad guy!’ It took me a week to want to throw him off a balcony. The reason: he was uncompromising on getting the details right. It took me a long time to appreciate his ‘talent’, because he was just so teeth-grindingly annoying. Now, I look back on the body of work we created at that studio and realise how good he really is… if you can get past wanting to kill him. He proved to me that God really is in the details. Perfection in design often comes at a price (sanity, friends, sleep, etc.) but it can elevate something ordinary to something extraordinary.

How about these?

Or these?

How about these?

How d’ya think you did? The first two are Apple and Canon. The second lot are LG and Firefox. The third, Nokia and IBM, and the fourth Palm and Xerox.

When I see this kind of stuff it reminds me of the foundational criteria of designing a ‘big’ logo. There are three pivotal points that a designer must remember:

The logo should be’ timeless’. Well maybe not completely timeless, but try and imagine it working ina world 20 years from now. If it wears the shirt comfortably, then you’re in business.

The logo should be versatile. Does it work as well on a screen as it does on a cap, T-shirt, or the side of a car? Take a squiz at the first examples above. My guess is that they won’t work so well on a billboard from a kilometer away.

The logo should be meaningful. Can you rationalize the reasoning behind the colours, the shapes, the type-face you’ve used? If not, it’s going to be tough to get past the secretary you show it to who says: ‘Ummmmm, I prefer pink actually…’

When these are in place, it results in a logo design sticking around a little longer than most.

[Check out the original article here - it's excellent.]

The whole thing has been 4 months in the making. The discussion has been going for a lot longer than that, mainly spurred on by the fact that our old iteration was so crap and wasn’t really representative of a top notch web studio aiming for nothing less than world domination.

Here are some of the highlights of our strategy:

The Heavy Chef blog is the place where web design, programming and online marketing strategy converges.

It will be a forum for entrepreneurs to discuss web marketing.

It will be a place for web professionals to gain inspiration (hence the gallery section on the side).

It will have the latest updates on the Heavy Chef Sessions, for those interested in learning about web marketing, design and online brand-building.

It will be a fun place to hang out.

It must have a global outlook.

So here it is. The fruit of our labour. We’ve managed to fit it into a very busy schedule, which is why it has taken a while to develop. The initial wireframes were developed by Mike and I. We decided to go for widescreen, since it suited our content better. We wanted a heavy emphasis on video, mainly because we find online videos well entertaining. Final design touches, outstanding CSS and WordPress work have all been completed by World Wide Creative’s CSS whizz, Paul, who is rapidly becoming the WordPress World Heavyweight Champion. Shaun, World Wide Creative’s Lead Programmer, helped out with some technical details.

All in all, a job well done by the team, especially considering all the other stuff going on. Nice work guys.

As for our readers out there, please let us know what you think…! Feedback, comments and suggestions are very welcome.

* Not really, but I needed another ‘D’ for alliteration.

Let’s face it, all designers steal ideas. Even the most original artists are influenced heavily by some genre, art form or peer’s work. Most ordinary designers will start the creative process by accessing their resource libraries and looking for something to inspire them. All designers are aware that there is a line that you can cross. That line runs between ‘taking inspiration from’ and ‘blatantly ripping off’.

Here’s an example where one of World Wide Creative’s web marketing clients have been brutally savaged and put out to dry. This is the equivalent of Dave Hasselhof doing a cover of ‘Ring of Fire’ by Johnny Cash, in German. It’s just wrong.

World Wide Creative’s client.
The original layout was designed by Sue, who shared our old studio with us: http://www.africangameskin.co.za/

The David Hasselhof version: http://www.fellart.de/

- Fred

found the results far better.

In the web industry its vital that you check your sites for browser compatibility and browsershots.org now appears to do this really well. It gave me eight screenshots within 30 minutes from users with those browsers I needed to test. Of course, you can’t check usability stuff like drop downs working correctly but its a nice snapshot to check quickly.