My Tripod.com homepage, circa 2001. Homepages have come a long way since those primitive days when we had to manually create every hyperlink and thumbnail.

Many people kick off their blogs without thinking of, or even knowing about creating a proper blog structure with a logical design. Yet a proper visual and content infrastructure is necessary for a blog to be decent-looking and accessible.

In plain English, all blogs need good design and content layout.

Think about it, a blog is essentially no different from a webzine or newspaper. It is meant to present the latest information in appealing, bite-sized pieces, while allowing you to retain creative control over how the site should look. At the same time, people should be able to access your old and new content easily, and get to their desired content quickly. That’s where proper content management comes in.

However, most people believe a blog should simply be about plonking in the latest content, and don’t think much about how the blog is laid out for long-term accessibility.

I disagree with that approach, because blog design indirectly affects how people feel about you and your content, whether they realize it or not. And if your blog lasts a few years, you’ll realize like I did that people are missing out on a lot of older posts that are probably worth revisiting. Heck, there are posts I don’t even remember writing!

Now it could be that many blog owners have no affinity for good design, or think that nice designs are out of their reach. I often feel much like the latter group, because unless you’re using a proprietary WYSIWYG blog creator like iWeb from Apple, most blogs require some serious programming skills to become exactly what you want it to be.

But good blog design is not impossible, even for non-techies. I’ve been writing on this blog for over 4 years and every year or so, I’d take a good jab at revising the blog design with my limited HTML skills. The good news is that blogging software is getting easier to use and there are more powerful plug-ins for the awesome (and free) blogging software WordPress with every passing month.

MY BLOG DESIGN

For 2010, I launched a new front page for my website as I realized that all the blog content I was creating was disappearing into oblivion and needed to be called out.

You’ll see now on the homepage that the main content on this site is now consolidated and updated on the fly in compartmentalized boxes (The Blog, On Christianity, Reviews) etc as I found that few people would bother clicking on the content categories on the sidebar. There’s also a Random Post of the day to revitalize the archives.

The blog itself remains unchanged in structure, but will no longer appear as the first page if you visit www.iantan.org. I used to wonder why people didn’t put up their blog posts upfront to new visitors, but now, with over 500 postings, I understand the need to shuffle them to the side. But it’s still important to call out the latest posts (I’m still exploring different options on doing content slideshows like major news websites).

Here’s what my site would look like with older WordPress themes:

The WordPress Classic theme – zero design elements if you ask me.

My previous theme – Mistylook – which was nice looking but difficult to tweak for non-geeks.

The current theme that I use – Atahualpa – is excellent. It has extensive menus that let you customize the layout of your blog exactly as you want it, without having to edit the theme code files manually. It also works well with most plug-ins. Highly recommended if you’re thinking of starting a WordPress-powered blog or reworking your current one.

TIPS AND TRICKS ON BLOG DESIGN

These are written for WordPress users in mind, but most of it will apply to users of free blogging software or other blogging platforms too. I am no professional web designer and this blog itself needs plenty of work! But these are the key principles I picked up over the years for an amateur blogger. I will start with infrastructure before I go on design suggestions. The key question to ask yourself is “Is my blog easy to read and explore?”

Categorize carefully

Good content is essential, but what you really have to take note of is careful categorization of your posts. You shouldn’t have too many Categories (I personally think I have too many myself, about 15 at time of writing), and they should be clearly differentiated.

For example, my movie reviews used to fall under Recommendations, when they should have been under Reviews (most online users home in straight for the Reviews category). Tags are useful too, but I’m too lazy to tag my posts regularly.

To take this further, think about what you really want your site to be about. If it’s about random thoughts, then it’s okay to have randomly scattered postings. But if you want people to find out more about knitting tips, they shouldn’t have to comb through postings about your travels.

Bring old posts out of the closet

I can’t believe I only did this recently. I installed the Yet Another Related Posts Plugin on my site, and if you visit each blog post on a single page, it’ll throw up suggested related posts at the end of each posting. So if you’re reading an Olympus Pen posting, it’ll suggest other Pen postings or photography related article for your browsing. This is great for letting readers comb the depths of your writing and your passions.

Consolidate posts and call them out

What I did on my front page was to use a common plug-in called List Category Posts that dynamically highlights the latest posts to capture people’s attention on my blog page. I also used it to call out a random post from the archive to follow the earlier tip of revisiting old content regularly.

Don’t abuse page menus

Some people put a dozen drop down menu options on the top of their site but who would bother looking at such a long list? I’ve kept mine to just a few (Home, Blog, Photos and Contact Me) because I want people to focus on the grouped content on the front page. Much as my ego tells me that every post is important, I know they aren’t. Each blog or website should be focused on just a few key objectives or themes, and allow users to discover the rest for themselves.

Make use of SEO

Search engine optimization (SEO) is the key to allow people using search engines to find your blog easily. In plain English, blogs that are optimized have invisible tags that tell search engines what this site offers. For example, at time of writing, if you search for “Ian Tan”, I’m the first or second hit depending on which country you’re residing in. That’s because my site and my identity is engineered to rank highly on certain search engines.

This does wonders for the ego too.

The Atahualpa theme has built-in SEO mechanisms, and you can find other plug-ins to do the same too. It helps to write your blog headlines carefully. For example, if you’re writing a Storm Riders review, search engines will find it better if you write “The Storm Warriors Movie Review” instead of “Feng Yun 2 sucks”. Tagging also helps to increase your content’s visibility on search engines.

Arrange your sidebar(s) carefully

Think like a reader who is visiting your site for the first time. What sidebar content do you want him/her to see first? An online ad or your online profile? Most people mess up their sidebar widgets with crap and it is a true eyesore. People don’t need to see a calendar on your sidebar, but they might want to see a random photo or a Facebook badge.

Font frugality

Since the dawn of printing, people have abused fonts to death. Use as few different fonts as possible, or stick to just one font family. And for body text, try to use simple and elegant fonts like Arial or Calibri, and avoid Comic Sans like the plague ok? Read more on font usage here and here.

Give your blog breathing space

Want to see a site that is gasping for breathing space? Visit AsiaOne and you’ll understand this bit on poor web design immediately. I have no idea why this site has been around for over a decade and still looks like a 1997 webpage.

If you are not good at design, just remember that it pays to have as few visual elements on your page to begin with, then you can add on new elements (widgets, banners, badges, ads). I wrote more about this topic here.

The past ten years have seen a proliferation of “clean design” (thanks to European designers and Apple) that emphasize proper allocation of empty space in relation to content.

In practical application, it simply means

1. Breaking up long text paragraphs into shorter, more readable chunks
2. Writing shorter, more concise sentences.
3. Use bigger, more legible font sizes where possible.
4. Having distinct gaps between different design elements.
5. Don’t have some fancy headline banner that takes up half the screen.

Of course, these design principles will work well on any other platform like advertisements, flyers and books.

Narrow text columns

Alexandre Dumas’ journal Le Mousquetaire, circa 19th century

Ever wondered why newspapers and news websites keep their text confined within a narrow space? Because it’s simply easier to read and scan. If you let your text flow unmitigated from one end of the screen to another, you can imagine how tough it will be for a reader who is using a 24” widescreen.

That’s why it’s useful to have fixed-width layouts for your main text. This keeps the text narrow and neat, no matter what kind of screens are being used. This also aids folks who are surfing your site on mobile devices like smartphones or the Playstation Portable.

Currently, my site is set to display text across a 500 pixel width, which I feel is a little too wide, but that’s because I like to display my thumbnails bigger.

Proper color schemes

The wrong or inappropriate use of color is one of the fastest turn-offs for any visual object. Poor use of color contrast also leads to eyestrain and less time spent on your blog (think tiny white text on black backgrounds). Bright red backgrounds are also a no-no, unless you have enough white or black elements to balance them out.

I’m not advocating that everyone uses a boring white background like my site, but just as you would spend time color co-ordinating your clothes, it’s important to color match elements on your website carefully for the ideal emotional and intellectual impact.

Read more about color literacy here, and if you really need help with colors, getting a book like the above would help. Jim Krause’s Color Index books contain thousands of color scheme suggestions for different uses.

Remember the golden maxim – less is more. In the age of information overload, we are prone to pour way too much content on our readers, and it’s important to know how to shape our content for maximum accessibility and impact.

Related posts:

1. Kena suspended
2. Housekeeping May 2009
3. My Japanese Blog

Here’s a letter in today’s Straits Times which demonstrates the huge gulf  between the creative class and the conservative class.

For me, home must be wholesome, clean

I REFER to last Wednesday’s report, ‘Loosen up and let the energy in’, on architect William Lim’s personal opinion. As he felt that Singapore lacks vibrancy, he clamoured for:

A less clean-slate approach and less rigid state control of the streetscape;

More spaces of indeterminacy, for example, allowing leftover spaces for creative people to use;

Acceptance of untidiness because it helps generate energy;

Ground-up vibrancy because Mr Lim is not sure if one can create a hub deliberately;

Less efficiency because it has stifled innovation; and

Better bureaucratic appreciation and hence better choice of iconic buildings. For example, Mr Lim felt that architect Frank Gehry’s proposal for the Sentosa integrated resort was a much better choice than Genting’s design.

I disagree for the following reasons:

I much prefer a clean Singapore to the messy and perennially clogged streets of Bangkok.

I would rather have determinant space for anything and everything, than run-down disused haunted graffiti-filled spaces in many First- and Third-World cities.

If the Toyota factory floor had been untidy, would the company have beaten the American big three car makers?

I wonder if Singapore would have been world class if it had left its thriving entrepot trade to be built from the ‘ground up’.

Looking around, be it in the physical environment or people’s heartware, I feel we are at a tipping point of many aberrations that are fast eroding Singapore’s reputation, built painstakingly over the years.

Some examples were given in last Wednesday’s Forum, such as not giving up priority seats to the elderly on public transport, extreme rudeness to cab passengers, slowness to react to feedback, and unabated littering, despite our best endeavours.

If we start to accept aberrations, as suggested by Mr Lim, let us imagine what we would have to accept after we are used to littering, such as spitting on the pavement and urinating on the grass. What about a din in a quiet neighbourhood, or bicycles and motorcycles on the pavement, which is against the law?

Given a choice, I much prefer a quiet, serene and wholesome Singapore to din, dirt and excitement-just-for-excitement’s-

sake places. Ultimately, Mr Lim’s value is different from mine merely because I believe home must be wholesome and clean.

Cheang Peng Wah

An assumption by the forum writer was that William Lim was asking for Singapore to turn into a messy capital city, which is not true. If you had read the original interview with Mr Lim (see below), he was lamenting more about how strict government control had prevented areas from developing their own character (not debris, mind you). The conservative always read the words of the creative through a tinted glass.

The government wants to foster a creative class and arts buzz in the city, but is filled with the mindset much like the letter writer’s. The Singaporean is brought up to believe strictly in law and order, but on the PAP’s terms. The conservative class wants to impose control on everything, but wants their cake and eat it too when it comes to the arts.

During my journalism days, it was a daily struggle to balance the power of the pen and the actual newsprint space allocated to you. Journalists have to jostle with advertisements for space, and pagination is a fine balance between making money and expressing opinion.

BUT it doesn’t mean that artists reject order – the very canvasses, digital image sensors, music score sheets, and writing pads that they create on are always limited in size and shape AND that’s a good thing. The canvas contains the Idea, prevents chaos from spilling over and losing control. With boundaries, ideas are tested to a limit so that the boundaries can be stretched again the next time around. Art, for many, is the pursuit of perfection, and that requires refinement over countless tries. Singaporeans, generally, reject the whole idea of “trying again” because failure is taboo, and want instant noodle results.  

Those that walk the fine line between chaos and order are very few indeed.

That’s why we often cannot imagine what life would be like without the sterility that permeates our streets. We go to other countries and cringe at the homeless squalor. We complain about anything that is not in a certain order, and expect our noodles to be cooked like every other plate of noodles. Our streets (save Geylang) have long been drained of their color – whenever I drive past Balestier Road, it is but a shadow of its former self as condominiums loom over a historical district. The Gahmen clamped down on neon lights and billboard advertising, and look how clean and beautiful our country is!

Pity it’s Dullsville. I look at the quality of graffiti at the Somerset Youth Park and lament at their low quality. Artists need space, a lot of space, to practice their craft and get it right without breaking the law. Recently, I walked past our Braddell Road flyover and was thrilled to see some graffiti along a wall – it’s probably been scrubbed clean by now.

For everyone’s sake, here’s the William Lim article in its entirety. It’s pretty long, but it’s a good read. At least someone agrees with me that the new Supreme Court building is plain ugly.

LOOSEN UP AND LET THE ENERGY IN

Architect feels there should be more ‘chaotic order’ as in Geylang and Little India to bring vibrancy to Singapore

By Tan Hui Yee

WILLIAM Lim thinks that Singapore stands out from other Asian cities because it lacks vibrancy. “In the upscale, high-rise Tokyo district of Ginza, you need only walk 50 yards to see traditional Japanese low-density streets off the main road.”

Singapore, however, cleared out the back lanes and side streets along with main arteries of old districts during its many urban renewal programmes over the years. The clean-slate approach and rigid state control drained the streets of colour that characterised traditional activities in these areas.

Mr Lim should know. The 76-year-old urban theorist and retired architect was one of the brains behind Golden Mile Complex and People’s Park Complex, which were hailed regionally as cutting- edge projects when built in the 1970s.

He was president of the Singapore Heritage Society from 1988 to 1997, and currently heads Architectural Association (AA) Asia, a regional forum for architectural discourse.

When he turned 70, a group of friends, colleagues and family put together a series of essays to celebrate the man, termed by Australia’s RMIT University as “the social conscience of architecture in the region”.

Contributors to the book No Limits: Articulating William Lim included architectural academic Robert Powell, art critic T. K. Sabapathy and diplomat Tommy Koh.

Mr Lim himself has written more than 10 books on urban Asia. His latest is Asian Alterity, which argues, among other things, for Asians to be more critical about the kind of Western-centric modernity being touted as contemporary design.

Dullness, he says, is still something that hobbles Singapore despite the more varied housing, shopping and entertainment projects pushed out in recent years. In this aspect, he feels the Government could take a leaf out of the underrated districts of Geylang and Little India.

He notes that these areas – crammed with old-style eateries, independent shops, red light zones and housing projects in side streets – are still vibrant because “they have not been substantially disturbed by road widening and clearances”.

Their charm, he adds, is “chaotic order”.

“In this apparent chaos, there is a very unstructured order. Even though goods sold spill over onto the pavement, they don’t spill over onto the street. There is still space that allows people to walk through the area.”

The unpredictability of these areas generates creative energy that easily trumps the carefully planned glitz of Orchard Road.

Singapore needs more of such unpredictable areas which he calls “spaces of indeterminacy”. This refers to “leftover spaces” like void decks or land under flyovers, which he says should be used for anything as long as it is not harmful.

He also thinks the Government should set aside buildings earmarked for demolition – such as first-generation Housing Board flats – for use by the grassroots and arts communities in any way they deem fit.

Such a low-rental environment will give artists enough breathing space to mingle, explore and create works they would not otherwise do because they cannot afford the high rental for art studios.

“Art is vibrancy for the community,” he declares, citing the example of 798 Art District in Beijing, an artist enclave that grew out of decommissioned factories, now being compared to New York’s Greenwich Village.

“It can be music, photography, writing, poetry. It’s a criss-cross of these ideas that generate energy,” he says. For it to work, there needs to be enough buzz from not just successful artists but struggling ones too.

“It’s very untidy and you have got to accept the untidiness,” he points out.
Mr Lim, who is partial to experimental art, recalls meeting Andy Warhol in New York’s Greenwich Village in the 1970s through a mutual friend.

“He was very down and out. He had all his Coca-Cola paintings but he couldn’t sell them. If I had asked him, he would have given me some of his paintings… Who would have known that he would become so famous and so important? So we don’t know. We don’t know.”

Asked about plans for the Bras Basah and Bugis district to be turned into an arts, entertainment and education hub, he says: “I’m not sure you can do an arts hub deliberately. These things have to grow on their own energy. You can’t push all the art schools into one area and then think, all these arts schools are there, and so it becomes a vibrant place.”

Vibrancy, he maintains, is a ground- up, not top-down process. Nightlife is an indication of vibrancy and Singapore needs a greater variety of it. He dismisses Singapore’s version of night markets or pasar malam in suburban areas, which he says sell cheap “discarded products”.

“If you go to Taipei and Taichung in Taiwan, you find that the night market is one of the major centre points of contact. People will go there, drink coffee through the night and argue about politics and anything else…We’ve forgotten that there is another side of the coin, there are other activities that can go on.”

The financial district of Shenton Way and Robinson Road – currently dead at night and on weekends, can be used for night markets with a difference, that allow new artists to sell original works, he suggests.

But in order for that to work, the authorities have to ease up on their obsession with squeaky clean streets.

For example, making Shenton Way 100 per cent efficient would come at the expense of night life.

“If you want Shenton Way to not have a single piece of waste paper in the morning when the businessmen go to work, then you are making the cleanliness of the city the priority, at the expense of allowing other people to use that space.”

“Singapore,” he says, “is perhaps too efficient. It has crossed its limits at the expense of innovation.”

Turning to the state of architecture in Singapore, he laments the lack of meaningful designs here, despite a host of world-renowned architects like Daniel Libeskind and Norman Foster leaving their mark on the landscape.

Their projects, like the sculpture-like condominium Reflections at Keppel Bay and the spaceship-shaped Supreme Court, have been pronounced “iconic”.

But Mr Lim calls them “disasters”. Reflections is “an obscenity”, while the Supreme Court is “a very bad building by a very good architect”.

Reflecting concern among many Singapore architects about the high-budget designs that look like they could fit anywhere in the world, he says: “All these guys are flogging images with no historic or social relevance to the place. These designs are debunked all over the world now. Only Singapore and Dubai are buying them.”

The recent global appetite for “instant icons” can be traced back to the success of Bilbao, a former industrial city in Spain that was regenerated with the addition of the Guggenheim Bilbao Museum designed by award-winning American architect Frank Gehry. The randomly curved building thrust the little-known city into the global spotlight, making it a tourist attraction, and fired the imagination of cities with similar ambitions.

But real icons, he maintains, “have to be people-inspired” and get the right amount of support from the government.

“The cultural and creative environment by the people and policy-makers must be there. Otherwise, even if you commission the best architect, they are unable to perform as you want them to.”

And often, the best design does not make it past the bureaucrats. “The authorities are generally not good at identifying and accepting avant garde and ‘out of the box’ designs,” he laments.

He cites the case of Frank Gehry’s eye-popping glass-and-steel design for the Sentosa integrated resort, part of the proposal for Kerzner-CapitaLand in the 2006 request for proposal to develop the project. The bid was passed over in favour of the one by Genting International, on the basis that the latter bid had a broad mix of attractions to draw the millions of visitors that Singapore was seeking.

“Not accepting one of Frank Gehry’s greatest works is a ludicrous aesthetic decision,” he declares. The avant garde building had glass sculptures encasing fibre optics that would beam images of sea creatures. This, he says, is a more forward-looking concept than the tropical stone-and-wood combination of Genting’s bid.

Ultimately, he says architects in Asia need to be more critical and have better understanding of what it means to be “modern”, instead of taking on mainstream and Western-originated designs wholesale.

There is always room for “non-generic architecture that is rooted in local cultures” like the Beijing National Stadium, now more popularly known as the “Bird’s Nest”. This need not always come from local architects, as long as the architect concerned stays true to the spirit of the place.

A more pressing need, however, is for architects to think up more solutions for the urban poor, like low-cost homes.

He writes in his book Asian Alterity: “Half the world population of 6.5 billion lack the basic needs of food, drinking water and shelter. Yet, much of the research on current environmental and design products is directed towards the better- off, especially the privileged minority.”

This, he pronounces, will be the direction he will take this year, through lectures which focus on the new economy, sustainable development and social justice.

“The urban poor are citizens of the city too, they have to be treated with respect.”

tanhy@sph.com.sg

Related posts:

1. Great quotes from great bosses
2. Weird lor.
3. How to kill visual literacy among the masses

Ms Marvel, from the Secret Invasion series.

No related posts.

One of Joel Yuen’s winning artworks in the latest UOB Painting of The Year. Photo extracted from Straitstimes.com

From Merriam-Webster dictionary:

AESTHETIC:

1 a: of, relating to, or dealing with aesthetics or the beautiful <aesthetic theories> b: artistic <a work of aesthetic value> c: pleasing in appearance : attractive <easy-to-use keyboards, clear graphics, and other ergonomic and aesthetic features — Mark Mehler>2: appreciative of, responsive to, or zealous about the beautiful; also : responsive to or appreciative of what is pleasurable to the senses.

From the ST article on the winning works:

In his comments for the award-giving ceremony last Saturday, chief judge Choo Thiam Siew, president of the Nanyang Academy of Fine Arts, said: ‘The judges see the re-interpretation of the traditional Western still-life painting of the Italian 16th century and Dutch 18th century, but superbly executed in the medium of photography. It has drama and power, it has a strong message.

‘Yet it leaves the viewer room for imagination. The objects are arranged effectively and artistically. The message was very well-conveyed without the artwork being bloody or gruesome.’

Architect and art collector Tan Kay Ngee, 51, who was one of the five judges, tells Life! that Yuen’s entry elevated photography to the level of classical painting with its lighting and composition.

He says: ‘When we were judging, we were not looking for good-looking work. We were looking for something creative which breaks the mould and carries on a certain tradition. The set of photos has all these qualities.’

Say what you will about the image above, but personally I think all these so-called art critics and judges (ie. the judges of this contest) should strive to promote aesthetic appreciation among the masses, not just praise someone’s work for its lighting, composition and seemingly vague agenda. Give me a studio with lights and a flash transmitter and I’ll show you it’s not a stretch to create such lighting composition.

To paint with oils/watercolor to create such an effect, however, IS a real stretch beyond the abilities of most young artists today. Paintings should be regarded as paintings, and photographs ARE not paintings. Otherwise, one day we’ll have digital art proclaimed as analogue art just because the JPG was printed on paper.

Actually, if you see Joel Yuen’s website, he does have some really nice images there. These BnW works do not hint at his painting ability, which is actually really good (hopefully his paintings are not done with Corel Painter).

An artist should be free to produce whatever his heart and mind desires, but the onus is on those who judge the work in  public competition, to increase the level of visual literacy in the public.

We need more aesthetic works in the public sphere to inspire, to motivate future artists and to promote the love of human ability. There is a part of our human condition – the aesthetic – which needs to be stoked and massaged to relieve us from our daily stresses. I remember the long hours I spent in Rome’s art galleries, and letting my mind unwind and relax just staring at works of beauty. Singapore doesn’t have enough of that.

It’s a vicious cycle – due the lack of beautiful works around us, people don’t think the fine arts are worth a career in, and hence there are even less aesthetic work being done.

Personally I dislike these winning works and I don’t agree with the judges’ decision (oh yeah, please don’t diss the classical masters), but hey, at least they provoke a reaction. For that, the artist has accomplished half of his mission.

The other half – for me to appreciate and understand his work – ain’t going to happen. I prefer to eat my trotters and chicken feet, not hang them up on a wall. Ter Kar anyone?

But congratulations to the winner anyway, all’s fair in love and art.

I would tell the judges to go fly a kite though. You guys are doing Singapore a real disservice.

Related posts:

1. Visual Literacy course : Part 1
2. Visual Literacy III: Proportion
3. Visual Literacy: Colours

I remember the 1980′s when desktop publishing (DTP) became the rage. Pioneered by the Mac and Aldus Pagemaker, suddenly, everyone could call themself a desktop publisher. Of course, back then, few people could afford the laser printers needed to produce the high-quality output that was required for professional standards. But I digress….

The availability of fonts wasn’t anywhere near what it was today. Today, fonts can be easily copied and installed from a variety of sources. I recently had to find the Grand Theft Auto font and did that in a matter of minutes (it’s called Pricedown) using online forums and dafont.com.

But like I said in the previous post, fonts are easily abused. Few people possess the fundamental knowledge needed to wield fonts in an effective manner, but simply mimic what they see from MS Word templates.

If you think about it, the fundamentals for font usage is the very same used in this current series on visual literacy and art appreciation.

• Keep the number of visual elements (fonts) as few as possible. Remember this to your grave – less is more.
• Establish a certain composition or rhythm within your canvas. There is a natural order of things. Objects all have weight, and hence gravity. Some objects repel others, some attract – so you’ve got to intuitively figure out how much “personal space” each font or word or sentence requires.
• Colors + composition = clarity. How clear is your visual/verbal message? For example, I abhor artwork which are nothing but frenzied dabs of paints, because they tell me nothing and they are hence worth nothing. Only pretentious art critics believe they can see some meaning, because otherwise they have no career to speak of. The same goes for font use – they require strict discipline in use, or you lose their power to impress.
• Sometimes, the most boring fonts are the most effective ones. But do try to experiment lah.

So naturally, once you figure out the basics, you’d want to do fun stuff with fonts. If you keep to the principles of clarity and let your imagination fly, there are many visuals you can make with text. These are just simple examples of what is possible.

Related posts:

1. Visual Literacy: Fonts Part I of II
2. How to kill visual literacy among the masses
3. Visual Literacy III: Proportion

Ha! Bet you didn’t know that fonts are part of visual literacy too right?

That’s because text has become a visual language in itself too. The use of fonts in our daily lives is of utmost importance, because where pictures cannot be used, fonts can be used to convey meaning between the lines.

This is not a simplistic blog post on whether Comic Sans is better than Times Roman.

Or whether Arial is better than Century Schoolbook.

I won’t go into deep technical details over serifs, leading, kerning and the like. You only learn those terms if you’re earning dough doing designs! And also because I’m a lazy dog, I’m not going to name any fonts from here.

Instead, this course in visual literacy is meant to educate readers on how to better appreciate and use visual elements. In other words, how to tell someone to use a better font if he can afford to.

Font 101 : The above use of the font is poor.

Why so?

- Firstly, recognise the usefulness of a font and how long a sentence it can possibly endure existing in. Such stylistic fonts are better used where there is very little text.

- The black and red color scheme look cool, but LEGIBILITY is key when using fonts. If you find it hard to read at first glance, it’s a poor use of fonts. I deliberately put the lines of text closer together to reduce legibility too.

- The use of fonts reflects the type of person you are. Or perhaps, just how emphatic you are when you create documents for your audiences. If you have no idea who your audience is, you’ll probably safer sticking to Arial or Times Roman.

Now see a better version way to use the font and how to maximise its impact:

Like visual elements, some fonts need more space to breathe, others don’t.

The trick is to first ask yourself, how pleasing is the font to my eyes?

It’s pretty obvious which font most people will choose to read here. The deluge of fonts available today just spoils designers who have no basic foundation in legibility.

Don’t listen to people who tell you which fonts are best for your document. The most important thing is to print out your document, take a long hard look at it, and ask yourself if your font conveys your basic intentions.

Like all visual literacy lessons, learning to understand fonts is something that takes time, trial and error.

But here are some examples anyway.

You might think all this is pretty common sense right?

But trust me, there are lots of disgraceful uses of fonts out there in public. Fonts ought to be respected for the role they play on paper or on the screen, and few people even realise that fonts are painstakingly created for specific purposes.

BTW, you can actually download some cool free fonts from www.dafont.com but be careful not to abuse them ok?

Interestingly, according to some dude whom I largely agree with, here are five fonts you should never use.

Finally, a few more things for you to chew on – how colors, fonts, font sizes and placement affect the visual meaning of your text. Yes, please remember that text is not just text, but are visual elements too.

Related posts:

1. Visual Literacy: Fonts Part II of II
2. Visual Literacy III: Proportion
3. Visual Literacy IV: Give Space

Well in design, you need to give elements their breathing space too.

Consider the pinnacle of Depression-era art – Norman Rockwell’s art pieces.

All Rockwell pics from www.normanrockwell.com

Space here is created not just to provide breathing space, but to provide potential space for the kids to swing into. Space sets the context, space gives the picture the ability to depict motion. Just imagine what this picture would have been like if the background was cluttered with other visuals – it just wouldn’t have the same impact.

Now look at this one:

Space is used to draw your attention first to the paper note, then lead your eyes back to the blue eyes of the kid.

These days, too much design is done without giving space, well, its due space. But there are ways to bend the rules.

For one newspapers can often swing from one extreme to another.

The lack of breathing space in the WSJ is deliberate. For practical reasons, squeezing text together reduces pagination and saves trees. For design reasons, the suffocating alignment is meant to drive an impression of intellectual superiority and information overload. It may not be a pretty design, but it’s an effective design.

Back in 2005, me and Simon Ang worked on the massive Canon photography series in The New Paper.

Click to see slightly bigger version! 

In this case, we had to give it sufficient breathing space because the full spread was over two tabloid pages, and allow a gutter running through the centre. It was really annoying that we didn’t have the centrespread to work with, but Simon did what he could to ensure the space drew attention to the text, and not just the pictures.

The following year (2006), the Canon series was designed by Cel Gulapa, and thankfully, we had the centrespread so we could go for a more integrated and tighter design.

My shameless use of wedding images of Edwin and my sis.

With hindsight, we could have really used less text in the body to give more breathing space, but you know, it was really tough balancing educating the public and getting the design right. So in 2007, when I developed The Young Photographer Of The Year series, me and the TNP artists (I believe Hup did the initial groundwork), simply went for visuals over text:

Doing the Canon photography series over three years really taught me how to take space seriously. As you can see, the series kept evolving in shape and form, and it’s a pity I won’t be doing any more such photography series from this year on. I was learning more design stuff with each instalment!

I could go on and on about optimal use of space, but my suggestion is to take a good look at how movie posters do it.

The Iron Man movie poster follows the classical style set by the Star Wars series:

In earlier instalments, I wrote about proportion and colours, and you can see how space is now added to the Iron Man poster for a real POW effect. Most of the poster is given a dark tone, and key characters are carefully brought out with the use of contrasting colours, spatial alignment and minimal gradients. I don’t agree with the use of the explosion visual next to Jim Rhodes though, it kind of spoils the entire image.

Now I was mentioning Star Wars, and the following is just about perfect in use of major elements:

The original 1977 poster!

The SW poster is brilliant because not only does it expertly balance light and dark visuals (yes, my Padawans…) the artist somehow managed to also introduce a radial element – see how the guns, X-wings, lightsaber etc manage to form a radial circle around Luke Skywalker. Frankly, they don’t make movie posters like they used to. Again, let me point your eyes to the careful use of space to create desired visual and emotional effects.

To sum up, here’s what’s important about space in visual design:

• Proper use of space is required if you want to create the right context for your images.
• There is no hard and fast rule to providing space in a design. It’s a matter of gut feel, and allowing elements to have "breathing space" or be isolated enough to appear important.
• Space can provide visual depth, or even remove depth (depending on how you use it)
• Less is more, but not always. It’s always good to have clean, simple designs with generous space allowances, but expert users will know how to fill up the space effectively (see WSJ eg.)
• Proper use of space, especially in interior design, creates ideal environments to work and live in. That’s why, as common sense tells you, you shouldn’t clutter your house with stuff! And neither should visuals be cluttered with too many elements.

Related posts:

1. Visual Literacy: Fonts Part I of II
2. Visual Literacy III: Proportion
3. Visual Literacy: Fonts Part II of II

Proportion determines, whether we like it or not, whether you are pretty or otherwise.

Take for example, the two women whom I consider as among the top classical beauties of the past 50 years:

Monica Bellucci, with relatively little Photoshop touchup done on this pic. Still a babe though!

Cherie Chung, a picture from the 80s. Photoshop didn’t exist then, so yes, her skin really looked this good as airbrushes could only do so much then. 

Both are from different sides of the world, yet they share largely the same facial traits that made them incredibly famous in their respected hemispheres.

Note the following:

1. The length of their eyebrows, and how they frame the eyes

2. The size, shape, width of the lips, and their distance from the nose.

3. The relative size of the nose, versus the distance between the eyes.

Okay, this may seem biased to people who fit the Monica/Cherie mould, but as scientific studies have shown, there is apparently a Golden Ratio of 1.68 that works across most objects and architecture.

 Leonardo Da Vinci’s illustration from De Divina Proportione applies geometric proportions to the human face. (Wikipedia)

So it’s not just faces we should be concerned with when it comes to visual literacy and proportion. We have to be able to discern when architecture is out of whack, when cars are badly designed, or when furniture that we are buying will not fit in proportion to the rest of the house design.

Let’s take cars for example.

Why does a Toyota Corolla Altis, in my opinion at least, look better than a Vios?

Corolla Altis

Vios

Both share very similar design lines, but in order to squeeze the Vios down to a smaller capacity, the overall proportions took a hit too. Given the shape of the Vios windscreen and side windows, I feel that front portion is not long enough. The boot has also been reduced.

The result is that the Vios, although still a very capable car in its own class, looks too cramped and constricted from the exterior. Nothing wrong with it in the real world sense, but from an aesthetic point of view, the Vios could really do with a less obvious physical compromise.

Disclaimer: I own an Altis, but I’d rather own a Camry

So what do other car makers do when faced with such a scenario? The VW guys know this best – make the same compromises the key design element:

When you can’t beat them, accentuate them!

You would be surprised to find out how much work goes into the design of everyday items to ensure proper proportions, both in colour and other visual elements, exist to meet specific goals:

See how red and white are carefully proportioned to drive certain messages. Coke has a dominance of red to probably drive excitement/fun/fizz, and the white colour is used to highlight the cursive fonts more than anything else. Colgate, on the other hand, uses more white to possibly drive motivation to get your teeth cleaner, and the red is used to anchor the white element. So you’ll never see a yellow Colgate tube!

The same goes for interior design too.

In 2003, me and my sis Joanne decided to overhaul the Bishan flat, and here’s how our original kitchen looked – very 80′s, very generic, and very boring.

Our Bishan kitchen (1986 – 2003) 

I had a big headache trying to visualise how to redo the kitchen, and took a crash course in 3D software to come out with this:

Note that the proportion and placement of various items are all very deliberate. A black floor (easier to clean) and black Corian kitchen top, requires a large amount of bright tiles to prevent the kitchen from looking too constricted.

I also chose metal finishings for the wall cabinets to reflect more light and reduce the impact of the black floor tiles. The red colour was meant to anchor the entire colour scheme down and provide a visual focus and identity to the design. White portions (the sink and the washing machine) are simply used to expand the visual palette from three colours to four)

And here’s what the kitchen looked like after renovation, (very close to my 3D model). The floor is actually much blacker lah, as it wasn’t washed yet in this photo.

But till today, I’m not entirely satisfied with the proportions of the kitchen. The hanging cabinets are too long and reduce the "airiness" of the setup. It’s not the best looking kitchen on earth, but the proportions are both practical and aesthetic.

That ends this chapter of Visual Literacy!

Related posts:

1. Visual Literacy IV: Give Space
2. Visual Literacy course : Part 1
3. Visual Literacy: Colours

Boutet’s 7-color and 12-color color circles from 1708

We are surrounded by colours, but do we stay still long enough to appreciate the way colours play around with each other?

Why is the sky pleasant looking when it has white fluffy clouds with a cyan sky? Why does the same sky look so dull with grey monotone clouds? And why is it so beautiful with red dusky streaks at dusk?

Three different photos from my Bishan living room window, previously posted on this blog. Notice how the colour schemes lend a different mood – from slightly divine, to dark/moody to peaceful (from top to bottom)

That’s where colour theory comes in. For the long explanation, read the article at Wikipedia. There are also many differing colour theories, each with their own merits and tastes.

For the short explanation, read on.

Obviously, some colours go well together, some don’t.

Often, it really depends on your cultural outlook when it comes to choosing colours. Some ethnic groups like the dull green/brown/red (like some Peranakans) scheme, others like Technicolor combinations (like some sari-wearing Indians).

BUT one thing is common, is that no matter the palette of colours used, it’s useful to mix colors opposite each other on the above wheels (complementary colors), or colours next to each other if you want to accentuate a certain colour family, or even colours that alternate on the wheel.

Then again, why am I writing all this – I don’t even bother with the theory. I go by sheer gut feel and trial-error methods.

I believe that good colour theory is innate. You just got to keep trying different combinations to figure out what works and what doesn’t. For example, you don’t wear a maroon shirt with bright blue pants because of the clashing tones, and the "warm/cold" conflict. It’s better to look dull with a warm brown pants, than suffer to look like a clown.

Many Singaporeans, because they find it too much of a hassle to do so, or don’t realise the importance of colour theory, just go for safe and INCREDIBLY boring combis like black/black, black/white, black/grey, white/white…. you know lah. Boring and very serf-like. Unfortunately, the same principle applies to their choice of car colours (yawn).

Colours also need to be balanced against each other. 

When I take photographs, I do some quick mental calculations at the back of mind with regards to having the right colour mix and balance of tones. For eg, in the picture here of Isaac at the beach….

…I took into account the blue, the green and the sandy colour tones, then let Isaac be the foreground subject with his higher contrast colours (white clothing and tan skin). Composition of the photo’s elements not only take into account the relative size of the objects, but also their colour weightage in the photo.

So yeah, it’s a simple photo, but you can see how the careful balance of colours doesn’t let the background overwhelm the subject.

Using colors is an infinitely interesting thing to do, and it’s important to keep looking at beautiful pictures like the ones below because that’s where you also learn different palettes and how to apply them in your home decor or daily dressing.

Notice how Leonardo Da Vinci uses different palettes (Color combis) to create different effects. Mona Lisa exhibits a muted, duller palette to convey sophistication and mystery, while The Madonna Of The Carnation (below) uses more vibrant tones to achieve a mythical, divine scenario.

Color should also affect your choice of purchases. For example, Dell’s great XPS 1530 laptop originally came in three shades – deep red, blue and black. With the silver accents, blue just doesn’t look that good. Then you’re really down to choosing just the red or black versions.

Then it had to come out with this new colour combi : Pink and Silver.

The press release says:

Identified by Pantone as one of the Top 10 Fashion Colors for Spring 2008, pink is one of the new shades for the season. It was all over the 2008 Fashion Week runway shows and is expected to be a shade that women and celebrities will be draping themselves in all year.

Well, I’m not a fan of pink and silver (a bit Pink Panther, you think?), and I think the XPS (which is one laptop you should really buy if you want a powerful bang for the buck) needs more aggressive colours like red, maroon, purple etc to highlight its strengths as a machine.

Colours, needless to say, convey a whole bunch of meanings. If you can’t co-ordinate your colours for nuts, it may just indicate that you are sending out mixed or wrong signals to others.

Related posts:

1. Wall colours and photography
2. Visual Literacy III: Proportion
3. Visual Literacy course : Part 1

From today, I shall use a variety of visuals to teach people how to appreciate things with their eyes. It’s totally biased of course, with visual standards totally my own. Perhaps, if it helps my credibility, I was a published photographer, special projects editor and I continue to design ads that I hope have some pow.

This course will probably stretch to 20 parts, and goodness knows if I can complete writing 10 parts.

But try I must. Do, or do not. Speak, or keep quiet forever.

Lesson 1: Defining the ugly.

Before one can appreciate beauty, one must be able to define ugly.

Now I don’t find this pretty:

Frida Kahlo. The Little Deer. 1946

Spare me the art criticism talk, but for all of Kahlo’s painting ability and tragic life, paintings like this are still able to make me cringe, 62 years after it was painted. It wasn’t necessary to insult the beauty of deers this way.

Closer back home, we have this truly ugly building:

Supreme Court Singapore

It can’t decide if it wants to be a floating, rotating seafood restaurant or a stranded UFO. But what really galls me is the poor colour scheme accentuated by multiple lines. I can’t think of a worse use of expensive tiles.

The Supreme Court suffers from extensive use of useless extensions in the facade, and in no way represents the stature of the law profession. Thankfully, some trees at the front ensure that this ugly building is kept mostly out of sight.

The above is an absolute eyesore – some flats in the Selegie area I believe. The architecture simply doesn’t lend itself to the otherwise interesting Bandung colour scheme. A pathetic attempt by the authorities to spice up old buildings.

Why can’t people paint or sculpt more beautiful things like this:

David, by Michelangelo

Trust me, if you see this work in real life, you’d be staring at it for a long time. No, not at his dong, but because of the sheer impact of the handiwork and detailing. When I was in Rome, I sat down at the side to admire this piece for nearly an hour.

One theory I have, why there aren’t more beautiful pieces of work, is simply because many people aren’t good enough to be artists. So they create mediocre, and sometimes, truly ugly pieces of work to prove they are "different".

Related posts:

1. Visual Literacy: Colours
2. How to kill visual literacy among the masses
3. Visual Literacy III: Proportion