7 simples steps to a more “Oyinbo” website
Photo: BPG – UI Sketch 2 courtesy Martin Kulakowski
In other words 7 simple steps to better website design. Now I hate to have used this title but how else would I have gotten your attention? I once sent some design comps to a friend for feedback – Nigerian of course – his response went something like this:
‘Great work as usual, very “oyinbo”, very clean!’.
Then it got me thinking, what did he mean? Why do alot of Nigerians websites look “Nigerian”. Why do so many websites look like templates? And it struck me, the lack of basic principles of web design. So here are my 7 simple steps to a more “Oyinbo” website or to be politically correct a better designed website.
1) Love Type
Falling in love with type is the quickest way to become a better designer. Try to keep the number of type faces down to at most four (generally I’d say two, minus any typography based illustrations of course). Never mix two serifs or two sans serifs, for example Helvetica and Georgia great! Helvetica and Univers, not so great. It’s also good to have them grouped in a specific order, one font/size/style/lineheight etc for your main headers, a sub heading, a terteriary heading and then body copy. Leading, kerning, line-height and in print baseline are all very critical.
2) Colour Rocks – Keep it that way
It’s no doubt that the one thing human beings use as an identifier is colour (in addition to position & alignment, brightness, orientation, saturation, size, texture and shape). Keep it consist, get friendly with the colour wheel. Pick one colour and make sure everything else is related to it. The four rule applies here also. Try to keep colours down to four, this excludes tints and shades. In other words #cccccc, #999999 and #efefef all fall under one category – grey.
3) Master The Grid
If you haven’t discovered the wonderful word of Grids or worse learnt how to incorporate them into your designs – you should dedicate the whole of today learning about The Grid, it IS that important. The human visual system is extremely sophisticated and to put it simply, picky. We can spot lack of structure, to the accuracy of a 1px difference. Design should not be overly structured to the point of boredom but it is important that they do have a layout. The Grid System and this great e-book Grids are Good by Khoi Vinh and Mark Boulton are good places to start learning about the grid.
4) Introducing the Pen and Paper
Designers are individuals and like all individuals (no not the lot of you with your oversized glasses) we have unique methods, principles and differences. Most designers however will tell you the best place to start is on paper. Good old paper. It is the one thing we are used to right from childhood till date and so it is only natural to start from “the drawing board”. Try to come up with sketches, concepts etc. Step out of the box. Literally, leave that Mac or PC and let your creativity run wild. You’ll know when you have “the one” and only then will it be time to step back into the box.
5) Tickers are evil
We’re not in time square or at the stock exchange. Enough said.
6) Stock Photos are also evil
I know a picture is worth a thousands words. But that only applies to the right picture. If there is an equally effective and alternative way to relay some piece of information besides your smiling, perfect looking stock photo models in their unimaginative shots, please consider that option. Think huge type, illustrations or just plain copy. Stock photos are a first class ticket to Tack.
7) Let your design breathe
Try to employ basic principles of margins and spacing. Give your design room to breathe. Give it air. White space = Good. No space = Bad. Keep it consistent.
Bonus
Go through a checklist. Check everything works – images, links, e-mail addresses. It’s better to have a fully functional one page site, than a semi functional 5 page site. “under construction” pages are a no no no.
Resources
10 Things To Remember Before Launching A Website… | The Design O’Blog by Niki Brown
3 Ways To Make Your Site Stand Out From The Crowd | Paul Boag
13 Signs You’re A Bad Graphic Designer | Just Creative Design by Jacob Cass
10 Useful Usability Findings and Guidelines | Smashing Magazine
“You can’t wait for inspiration. You have to go after it with a club.” – Jack London
Pen and paper, everyone seems to forget that and clients always want to see the photoshop mock-up, that is all some clients know
But what i really wanna know is where do you find the time to do all this..
p.s i love the little sketches on the home page (at the bottom), i thought if i hovered over them, they would do something (like…jump or hurl)
VEry Catchy Title!Oh Yh…:)
The Pen and paper point is very important like the first commenter said. Design thinking should always come before design. I am currently taking an Interactive System Design course where this is over-emphasized but rightly so.
Another rule of thumb about colors should prolly be to think it fashion-wise. If you can’t wear all the color combinations in one outfit, then your website shouldn’t either.
I think we can make exceptions on the stock photos. Some photos are more evil than others. This is for the love of we who can’t get past beginner’s luck in the use of Adobe Illustrator:)
@Dara the photoshop mock-up is equally as important, in my case fireworks/illustrator (PS for me is Photos only) but it is important that your conceptualise freely, without any restrictions before that. Sorry to disappoint with my inactive doodles :p that would have been quite clever but I’d rather keep it lean and mean!
@Jae I love that Design thinking should always come before design. Would love to hear more about the course you’re taking. And I also love that colour to fashion analogy, however if I were to follow that literally half my designs would be white, black, grey, navy and a dash of red!
I am not against stock photos but there are some that just scream “Hi I’m a stock photo and I’m unrealistic”. You know what I mean the customer service model with her headset, smiling a computer screen. Or that token black family, perfect teeth, frizzy hair, smiling at you.
Just ran my newly uploaded website against your test and I think we do quite well actually. We’ve got a usability challenge on one page but I think color, fonts, space, even use of original/stock photos ought to pass your test.
I like the Design Nigeria site. Just bookmarked it alongside ebitheb. Keep on the campaign. Eventually the people will come to see the power of good design.
Thanks Tomiwa! And I’m glad your site passed the test – looks great! Definitely also look at this checklist http://www.nikibrown.com/designoblog/2009/09/20/launching-a-website/
anyTime i hear the word siMple, i get attracted..simple principles, note taken
aM off to werk !!
Other variant is possible also
Nice piece dude…..
Thanks for Points 1 and 7!! I’ve worked with some very Naijanised web designers and am usually livid when they present their mock-ups. I hate the fact that I’m often left looking to designers overseas simply because I can’t afford my darling Ebi ;P and all the rest I encounter are useless.
I used to pride myself on my ability to sniff out a Nigerian-designed website every time. Now I realise what a tragedy that is.
Oh and perhaps Point 8 should’ve been: Hire an anal editor (like yours truly) to sift through every single nook and cranny. She (cough, hint, splutter) will point out every single spelling or other verbal error.
I have been searching for sites related to this. Glad I found you. Thanks
Great post. Although I find it disturbing that you are associating “Oyinbo” with better, clean, organized, and “Nigerian” with shoddy, sloppy, etc.
While as a Nigerian I understand the sense in which this post was written and I totally get what you mean, I think we need to make an effort to break these mental associations because they harm US and OUR work.
Nigerians should not be walking around with the idea that Nigerian designers automatically offer poor quality work simply because they are Nigerian.
@Sugabelly: thanks alot for your comments.
My use of “Oyinbo” as an adjective was purely comical and somewhat ironic – seeing as I am a Nigerian designer. Hence my reference to a comment made by a friend of mine describing my design comp as “Oyinbo”.
I have received this comment many many times and unfortunately there is a look most Nigerian websites have. This as you say should not be related to Nigerian designers and I hope I have not implied this. I’m a Nigerian designer and I can certainly say my work is not Shoddy or Sloppy. As my friend Kelly Sylvia likes to say – let the work speak.
I am certain that with more information, a stronger community and a little more attention to detail we can rid ourselves of these awful designs.
I agree that many Nigerian and Nigerian-designed websites have this particularly horrid look that usually involves lots and lots of flash. So yeah, you do have a point.
I also get that you wrote this in irony. I do think though, that the reason “Oyinbo” websites look as good as they do is because web designers from America and Europe have been able to take their sweet time developing their craft and building on the work of others, while Nigerian designers have simply jumped into this feet first over the last fifteen years. I think we’re still developing our style and our look and getting a feel for things so there’s still a tendency to try to show off (which usually involves ungodly amounts of flash).
But yeah, I do see what you mean and I definitely prefer the cleaner website designs with lots of space.