Category Archives: Cookin' Design

Designing icons for web design, and mistakes to avoid

I love designing icons. It’s something that I still do whenever I get a chance. I find it relaxing, as weird as that may seem.

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.

Design Muti

I’m pretty stoked to have found this: Design Float. It’s a Muti.co.za / Digg style design scrapheap. It’s now top on my Google Reader. Sweeet.

Typography in Web Design

typedesign.jpg

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.

Vector art

A showcase of amazing talent. Once again a link to the brilliant Smashing Mag.

spidy_r2_c2.jpg

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

Hmmm…

Book cover design

In the web design arena, we can sometimes get too restricted by the parameters of our media. I’ve always been a fan of book cover design. It’s something we did back in college, and it was always a fun, and challenging, project. Check out this collection put together by Vitaly and crew at Smashing Magazine.  Great inspiration for web designers, to think a little differently. Below are two of my favourites…

book-covers-17.jpg

book-covers-25.jpg

5 traits of a great web designer

What makes a great designer? I compiled this list after a decade of trying to be one. (This list applies to graphic designers as well as web designers.)

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

designer-leoburnett.jpg

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

designer-jamesvictore.jpg

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

designer-think.jpgPerhaps 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.

The Evolution of Logos

I came across a fascinating post entitled ‘The Evolution of Tech Company’s Logos’. Check these examples out, and see if you can identify them:

Read More »

Brand new look for World Wide Creative’s ‘Heavy Chef’ blog

There was a great deal of excitement in the World Wide Creative web studio today. Mostly from me actually. The reason for this, is because, after much deliberation, debate and watching of Deliverance*, we completed our brand new look for a tired old warhorse: The Heavy Chef blog. The idea was to retain a thread of consistency with the World Wide Creative corporate identity - which is clean spaces, white, blue and greyscale - and then combine it with the whole Heavy Chef vibe of scattering ingredients everywhere. Read More »

What do we do to stop plagiarism on the net?

I wrote an article on Ideate a while back about originality, and how it was impossible to create something truly original. This is a semantic argument, and your conclusion will differ depending on your interpretation of the word ‘original’. Read More »

Checking Browser Compatibility

When I opened my del.icio.us account many moons ago, I was tagging everything I found like a kid with a new toy. One of the first sites I bookmarked never really lived up to my expectations and I haven’t re-visited it for years. However I stumbled upon it again this morning and

Read More »

Rocking Flash Sites

Flash is a bit of a flashpoint in the web industry. There are those that believe that it should be done away with altogether, and those that advocate it over everything else. Sort of like religion, it engenders extreme
views and not much in between. Our view at World Wide Creative is that Flash, like every other tool at our disposal, has its place. One should see each project in context and then decide whether using Flash is appropriate or not. From a web marketing perspective, this is the only way to go.Gasoline

Here is yet another fantastic post from Smashing Magazine (click here to view). They have filtered the Flash sites out there and come up with a great showcase of what works and what doesn’t. Check it out.

Cross-browser compatibility

As a web marketing company, World Wide Creative focuses a lot on the actual design and usability of the websites we’re marketing. One of our biggest headaches is cross-browser compatibility - arrgh. This means making the dammmm thing work in Internet Explorer 6 and 7, as well as Firefox (our browser of choice - download it here) and all the rest. Read More »

What goes into designing a website?

This piechart explains the pain we go through better than any words could. Read More »

8 Ways to Drive a Graphic Designer Mad

Digital_pen

A very talented graphic designer friend of mine sent this to me. I think web designers face similar challenges sometimes…

8 Ways to Drive a Graphic Designer Mad:

As everyone knows, graphic designers are the reason there are so many wars in this world. They get inside our heads with their subliminal advertising, force us against our will to spend money on the worst pieces of shit, and eventually, drive us to depression and random acts of violence. And of course, most of them are communists.

So to do my part to save the world from them, i made a list of things you can do when working with a graphic designer, to assure that they have a burn-out and leave this business FOREVER.

1. Microsoft Office
When you have to send a graphic designer a document, make sure it’s made with a program from Microsoft Office. PC version if possible. If you have to send pictures, you’ll have more success in driving them mad if, instead of just sending a jpeg or a raw camera file, you embed the pictures inside a Microsoft Office document like Word or Powerpoint.
Don’t forget to lower the resolution to 72 dpi so that they’ll have to contact you again for a higher quality version. When you send them the "higher" version, make sure the size is at least 50% smaller. And if you’re using email to send the pictures, forget the attatchment once in a while.

2. Fonts
If the graphic designer chooses Helvetica for a font, ask for Arial. If he chooses Arial, ask for Comic Sans. If he chooses Comic Sans, he’s already half-insane, so your job’s half done.

3. More is Better
Let’s say you want a newsletter designed. Graphic designers will always try to leave white space everywhere. Large margins, the leading and kerning of text, etc. They will tell you that they do this because it’s easier to read, and leads to a more clean, professional look. But do not believe those lies. The reason they do this is to make the document bigger, with more pages, so that it costs you more at the print shop. Why do they do it? Because graphic designers hate you. They also eat babies. Uncooked, raw baby meat.

So make sure you ask them to put smaller margins and really, really small text. Many different fonts are also suggested (bonus if you ask for Comic Sans, Arial or Sand). Ask for clipart. Ask for many pictures (if you don’t know how to send them, refer to #1). They will try to argument, and defend their choices but don’t worry, in the end the client is always right and they will bow to your many requests.

4. Logos
If you have to send a graphic designer a logo for a particular project, let’s say of a sponsor or partner, be sure to have it really really small and in a low-res gif or jpeg format. Again, bonus points if you insert it in a Word document before sending it. Now you might think that would be enough but if you really want to be successful in lowering the mental stability of a graphic designer, do your best to send a version of the logo over a hard to cut-out background. Black or white backgrounds should be avoided, as they are easy to cut-out with the darken or lighten layer style in photoshop. Once the graphic designer is done working on that bitmap logo, tell him you need it to be bigger.

If you need a custom made logo, make your own sketches on a napkin. Or better yet, make your 9 year old kid draw it. Your sketch shouldn’t take more than 5 minutes to make. You don’t want to make something that’s detailed and easy to understand, because the less the designer understands what you want, the more you can make him change things
afterwards. Never accept the first logo. Never accept the 9th, make him do many changes, colors, fonts & clip art. Ask him to add a picture in the logo. Bevels. Gradients. Comic Sans. And when he’s at his 10th attempt, tell him that you like the 2nd one the most. I know, it’s mean but remember: graphic designers are the cause of breast cancer among
middle aged women.

5. Choosing your words
When describing what you want in a design, make sure to use terms that don’t really mean anything. Terms like "jazz it up a bit" or "can you make it more webbish?". "I would like the design to be beautiful" or "I prefer nice graphics, graphics that, you know, when you look at them you go: Those are nice graphics." are other options. Don’t feel bad about it, you’ve got the right. In fact, it’s your duty because we all know that on fullmoons, graphic designers shapeshift into werewolves.

6. Colours
The best way for you to pick colors (because you don’t want to let the graphic designer choose) is to write random colors on pieces of paper, put them in a hat and choose. The graphic designer will suggest to stay with 2-3 main colors at the most, but no. Choose as many as you like, and make sure to do the hat thing in front of him. While doing it, sing a very annoying song.

7. Deadlines
When it’s your turn to approve the design, take your time. There is no rush. Take two days. Take six. Just as long as when the deadline of the project approaches, you get back to the designer with more corrections and changes that he has time to make. After all, graphic designers are responsible for the 911 attacks.

8. Finish Him
After you’ve applied this list on your victim, it is part of human nature (although some would argue weather they’re human or not) to get a bit insecure. As he realises that he just can’t satisfy your needs, the graphic designer will most likely abandon all hopes of winning an argument and will just do whatever you tell him to do, without question.
You want that in purple? Purple it is. Six different fonts? Sure!

You would think that at this point you have won, but don’t forget the goal of this: he has to quit this business. So be ready for the final blow: When making final decisions on colors, shapes, fonts, etc, tell him that you are disappointed by his lack of initiative. Tell him that after all, he is the designer and that he should be the one to put his expertise and talent at work, not you. That you were expecting more output and advices about design from him.

Tell him you’ve had enough with his lack of creativity and that you would rather do your own layouts on Publisher instead of paying for his services. And there you go. You should have graphic designer all tucked into a straight jacket in no time!

[Thanks Tahier]

- Fred

Usability or Design?

Obviously the answer is a combination of both, and this is a highly fought over and debated topic.

How can you approach a company with a poorly designed site and tell them they need a new website, when you know they are getting very low bounce rates and they have a very profitable website? This is a lot harder to do than approaching someone who has a beautiful site but is not converting any traffic.

The Trust factor is an important element of the design. If I come across an old looking website, even if it is very easy to use, I am hesitant to enter my personal details when purchasing.

Just this week I was browsing the web and came across the Cape Town Lodge Hotel website http://www.capetownlodge.co.za/. Whenever I drive pass this hotel I always think wow, that looks like a trendy vibrant place to stay. So I was very shocked when I saw their website. I expected my impressions of the hotel to be reflected in the look and feel of their website.

Lodgehomepage

However, I cannot complain about the usability. On every page the navigation is clear and actionable, and all information that you would require is on the site. The only thing I noticed was once you leave the home page you can not get back there which is a shame as the homepage has all the pictures of the hotel on.

Lodgepg

Once again the dilemma has appeared, If this website is profitable for them (because of the usability) why would they want to change the site?

At World Wide Creative we take the approach of a site storm before any website is designed and built. The whole team comes together and ensures the design will reflect the brand and marketing objectives as well as compliment the usability of the website. I believe we have some of the best website designers and web marketing experts in South Africa and with this combination we do not even have to choose between usability or design? (Shameless self promotion, I know)

- Nicola

Page 1 of 212»
RSS Subscribe to our Newsletter