CATEGORY: Design

Apple Worlwide Developers Conference 2007 has passed for almost two months by now, and all the huzz and buzz of iPhone has started to calm down.

But, time-travelling to about a month ago, the day when I met Joe Goh, one of the very few Mac developers we have in Singapore. It was over a-cup-of-coffee talk, a nasi-briyani and roti-prata meal at Ang Mo Kio (AMK) Hub, he shared his experience at the conference, and one thing that caught my attention was The Bay Area Rapid Transit (BART) Widget, the winner of 2007 Apple Design Award (Dashboard Widget Category).

BART_widgetBART widget is small swiss-army tool that allows commuters to plan trips on the BART subway system in the San Francisco Bay Area.

When he showed me the widget, I was fast to be impressed at the amount of information packed nicely into such a small widget, and its intuitive design that delves with immediate feedback and speech synthesis. The best of all, that widget was all done basically with HTML, CSS and Javascript!!

The BART Widget proved to us, that given enough thoughts and creativitity, much we can do to replace the simple and traditional web interfaces that we all have been familiar with.

Finding out more about Bret Victor, the guy behind BART Widget, I found a paper he has written on User Interface (UI) design, named ‘Magic Ink‘. If you are a software developer or a UI designer, nothing beats bumping into a resource as delicious as this.

Bret stresses that information software design can be seen as the design of context-senstive information graphics, which he shows clearly through his widget, and he steps through the process and throughts behind the creation of BART widget, which I think is an invaluable information.

In the paper, he also shows other great examples on how a typical information-rich page, can be redesigned into a context-sensitive information graphic. An example shown below:

Flight Original

Consider the re-design:

Flight Redesign

IPA New Identity

SUN, 22 APR 2007

Following up my work for Indonesian Professional Association (IPA) new identity design; after the initial designs and some feedbacks, we finally conclude the new logo for the association.

IPA logo thumbnail

The budding leaves represents how we as a community of Indonesian professionals in Singapore can help to support each other and to grow together. Red for one of the leaves represents our national colour, the red of our flag, just like Singapore, we too have red-white flag. :) And a stripe is placed between the leaves to help to assure that they do still appear as leaves (instead of something else) when presented in black/white or solid colours.

Following up on the new logo, I did a re-design of the its speech club award bookmarks; and picking up some tips from Making and Breaking the Grids, by Timothy Samara, I’m very happy with how the new design turns out to be.

IPA Speech Club

Reading that book has opened my eyes to a wider perpective of the design world, I was previously afraid that grids will limit your creativity, but after looking at many of the project examples in the book, I was definitely proven wrong.

Now, I think grids in design is similar to what a framework is in software development, it helps you to build a consistent, pre-planned work, with still enough windows to expand, and be different.

And this is a very good article by Khoi Vinh, about how grids can be used in web design; this article also triggers my curiousity to find out more about grids. And thanks to Lucian for that.

UPDATE: Found this amazing collection of notes and articles on designing with grid based approach in Smashing Magazine.

I don’t usually design logos, other than for my own business and application logos.

Having been busy coding for the last couple of weeks, my brain yearns to do something creative. So I took a break yesterday and designed a new logo for Indonesian Professionals Association (IPA), a pro-bono work that I have promised to do some time ago.

These are the two drafts that I’ve come out with, one has a more fun and fresh feel, while the other is more traditional, formal and sleek. Hope they’ll like it, probably still need to touch up a bit here and there.

IPA Logo 1


IPA Logo 2

A bookmark design done recently for Indonesian Professional Association (IPA) speech club. The speech club is modelled after Toastermasters club, except that it is less formal and more fun.

The bookmarks are given as awards to encourage best speakers voted on each session. The design aims to represent the characteristics of the club: vibrant and fun. Other design considerations: white background to save on printing cost, different colour vector graphic shades for different categories. Simple and minimalist again work.

IPA is a non-profit organisation that fosters networking among Indonesian professionals in Singapore. Other than speech club, it has other clubs under its umbrella, ranges from Dance Club, Golf Club, Mandarin Club and recently Yoga Club. It also organises seminars on various topics.

Do check it out if you are an Indonesian, a professional, and living in Singapore; IPA helps to bring home closer to us.

IPA Speech Club Awards

I usually have a long list of books that I want to read, although I know I won’t have the time to read all of them. Trying to be smart, I categorise them into different categories, such as technical, photography, design, fiction, and etc. And to avoid the tendency to read only certain type of books, I also logged the books I have read. You know, it is important to be well-rounded (kiasu). =)

Currently I am maintaining the list in an excel sheet, and I find it pretty cumbersome to maintain. Whenever I plan to read a new book, I need to refer to the list and re-search BookJetty to check the loan status in the library. I thought if BookJetty can be enhanced to support this feature, it is going to be useful.

Basically users should be able to add books to their account as either ‘Wanted’, ‘Reading’, or ‘Read’, and they also should be able to tag books based on whatever names that they like.

From there, we can derive some interesting lists such as most wanted books, what are the popular books currently read or had been read. And we should be able to link a book to other users who had bookmark this book.

With the membership feature, in the future, BookJetty can be extended to support other features, such as book reviews, groups, and group dicussion threads similar to what Flickr has. Meanwhile for the upcoming enhancement, I will be focussing on just the membership and bookmarking features.

I have just completed the design for these enhancements, and this is how the new BookJetty will look like.

bookjetty_home_t.jpg

Design is Shadowy

WED, 20 SEP 2006

Can’t resist not to participate in Designer Wallpaper, started by John Hicks.
Design is Shadowy
It is hard to define definitive guidelines.

Colour Management

FRI, 1 SEP 2006

Colour ManagementI saw this book when I was hanging out in library@orchard. It was displayed on top of a bookshelf. The colours of the book cover were so vibrant and eye-catching that it was hard to ignore; they justify the book title, Colour Management. Judging a book from its cover, I trusted this book to be a good one. I have just finished reading it and I am not disappointed.

I don’t have have a graphic-design degree, thus I had not seriously studied about colours. My colour judgement was merely from my gut, feeling and common sense. So this book is the first one that seriously exposed me to the amazing world of colours. Seriously…be forwarned, this book is really serious about colours.

What I like about this book is, it starts with basics, the colour jargons (okay, may be not really basics, as some of the terms may still be hard to be visualized by beginners), then it goes deep into the topics, and the authors would also repeat some the important points again, so that we will remember.

For a start, you are thrown with the terminology of colour for 82 pages. Then it gets serious about basic colour theories, the creation of colour wheels, colour readability and legibility, colour calibration and overprinting, colour prepress and printing and the last chapter, the behavioural effects of colour.

When I finished reading this book, not only I understood more about colours, but I also felt like I was ready to perform a minor eye surgery. I learned how our eyes interpret colours, starting from the light, going through the cornea, then through the pupil and the iris, and straight into the retina, sending signals to the rods and cones, and finally interpreted by fovea and triggering signals to our brain for the visual interpretation.

Holy cow, I wasn’t even sure the difference between pupil and iris before that. It also teaches you about analogous colours, complimentary colours, harmonious colours, tinting, shading, scaling, split complementary, monochromatic, achromatic, the colour theories (substractive, additive and 3-D), colour temperature, colour mixing, colour toning, the list goes on.

Since it covers so much details, this book may not be so suitable for beginners, but it’s definitely a serious book for designers, be it web, product, environmental or fashion designers, or any nuts like me who would like to get serious about colours.

p.s. The extra explanations, diagrams, and examples on the bottom third of each page are really useful.

QuoteJetty Pre-Release PageJust completed a re-design of QuoteJetty pre-release page.

I was aiming for a consistent look and feel and similar colour schemes with the final QuoteJetty design. It is also neater and fresher compared to the previous one with black background.

New Look for Pluit’s Blog

TUE, 25 JUL 2006

 Pluit 1.0I have just given a new look for Pluit Solutions blog.

I found the old design (the image on the left) was not serious enough for a business blog. So I created this new design with that idea in mind.

I also added a shot of myself. Now you would recognise me if we happen to bump into each other on the street.

Flickr was down this morning, yet they gave me some work to do. Don’t you love them?

Flickr Down