My good friend, the very talented Andy Croll is working on a web-based application called Game Plan, that will let you manage your sports leagues, cups and tournaments online. It’s due to launch in a couple of weeks, and you can follow the progress on their blog, the Naked Startup.

Andy and his colleague and partner in crime Arun asked me to create a logo for them, and this is what we came up with.

For more information about the process and some stupid quotes by yours truly, check out their blog post.

The Naked Startup

Game Plan

Andy Croll

Supershapes recently teamed up with the Singapore Environment Council to create a new set of symbols for their new green schemes for hotels, offices, food courts and community clubs. Instead of creating new one-off logos, we decided to leverage on the already existing Green Label, and re-designed that and created a visual system that can be expanded to cover every new scheme that they introduce.

The new logo will be rolled out over 2010.

Before

After

More info and examples on supershapes.com

Singapore Environment Council

More info about the Green Label

We finally got around to updating supershapes.com, so if you’re more curious about the work we (and I) do, go check it out. Hopefully we’ll be better at updating this than the old one.

Supershapes

I’ve activated auto-post from my Posterous account, so this dead blog might not be so dead in the future. Who knows.

And who doesn’t love the Wonder Girls?

My cat, Windy, is up for adoption. I hate to do this, but circumstances force me to. I adopted her together with my ex girlfriend about two years ago, when she was still a kitten. She’s thusly about two and a half years old, black and white, short-haired. She’s been sterilized and vaccinated, and had a check-up just a week ago and seems to be in good health.

She’s a lovely cat, friendly and playful. She likes to sleep in my arms when I work, or at my feet when I’m resting. She’s a bit scared of strangers, but once she gets to know you she’ll be the most affectionate cat in the world.

The main reason I’m giving her away is that, because of a change in family situation back home, I might have to travel a lot more next year, and I might also have to leave Singapore on short notice. I think the apartment I’m in currently is too small for her, and before I move again, I will have to be out of Singapore for 2-3 weeks. I therefore feel it would be better to find someone who can take care of her, instead of bouncing her between friends and cat-sitters over the next year. Since I will move out of Singapore as well, I most likely need to sort this out sooner or later, and sooner is probably better for the cat.

I would have preferred to give Windy back to my ex girlfriend, but she’s unable to take her in at the moment. It breaks my heart to have to do this to someone who has become a family member, but at this point in time, I don’t see much other choice.

Please let me know if you or anyone you know has room for a cat.

Thanks.

Since Photoshop is the application I spend most of my time in, I figured that perhaps I should share a bunch of the things I’ve done to tweak my GUI experience, and that I now probably couldn’t live without:

1. Home made grids…
   Since I use Photoshop to mockup websites, I need to use a grid to line stuff up. The show/hide guides can only do so much, and until Adobe gives me the option to colour code the guides, I usually resort to designing my own ones and put them in their own folder.
2. …and how to show and hide them
   Now, the tricky thing is that there’s no easy way to show/hide these grids, so I wrote a javascript that looks for the folder with my grids (that I’ve named GRID), and shows it if it’s hidden and hides it if it’s visible. Then I use the actions panel to tie a shortcut to the script, in my case F1.

   

3. Shape layers…
   I love shape layers, but most people don’t agree with me on the grounds that they tend to attach themselves to fraction of pixels, and that usually leads to a lot of fixing afterwards. Luckily there’s a hidden option to make them snap to pixels. Unfortunately, this option only works well for rectangles and not (yet) for lines. You will want to enable this checkbox.

   

4. …also work as masks…
   One thing I find myself using more and more lately is using shape layers as masks. This is not, perhaps, as much a GUI thing as a personal workflow thing, but if you haven’t tried it yet, do! Not only do they work on individual layers, but also on groups. Easiest way to do it is to create a new shape layer, then drag and drop the vector mask to another layer or group, and delete the shape layer.

   

5. …and their shapes can be grouped!
   In a big, complex photoshop document for a webpage, 100 or more layers are not uncommon. Sure, you can always group together layers into smart objects (which I don’t find myself doing as often anymore). One sweet thing you might wanna try if you draw, for instance, a lot of lines as shape layers is to instead of duplicating the layer, just duplicate the actual shape with the Path Selection Tool (a). This way, you select the whole group of lines with the tool, and can change the width of them all at once.

   

6. More keyboard shortcuts
   There are also a bunch of shortcuts that I’ve created to make my life slightly easier: ctrl-apple-c and ctrl-apple-v to copy/paste layer styles from one layer to another, and ctrl-apple-z to delete a layer. I also always change the default settings so that apple-z is Step Backward (not undo/redo) whereas shift-apple-z is Step Forward, but that’s probably just me. Change these settings in the Keyboard Shortcuts in the Edit menu.
7. Layers, groups and naming
   My partner Patrick and I have a nomenclature system where we name folders with upper case letters and layers with lower case. The point of this is that when you right click with the Move Tool (v), you can browse the layers under the cursor. This way the folders show up more clearly in the tree structure.
8. Curse you, Quick Mask!
   And lastly, one of the things that used to annoy the hell out of me was enabling the Quick Mask by mistake by pressing the Q key (supposedly trying to press A or Tab). This makes a lot of things stop working, especially selecting layers with apple-click or using the path selection tool, and the only visual cue you get is that the Edit in Quick Mask icon in the bottom of the toolbar is highlighted. To fix it, go to the Keyboard Shortcuts and disable the darned thing.

Feel free to share your own tricks. I’m always looking for ways to make my life easier.

A Sample Grid
The Toggle Layer Visibilty script (place in your Photoshop/Presets/Scripts folder)

If you’re like me (which I hope to God, for both our sakes, that you’re not), and sometimes sit around designing web sites to make ends meet, you might find yourself in need of simple UI elements for your beautiful Photoshop sketches. Since all I could find online were rasterized ones, I put together my own, albeit very Mac OS X inspired, elements as shape layers, which means they’re easily modifiable and scalable.

I didn’t want to copy Aqua completely, so your lovely client will go “but how will it look on Windows?”, but tried to keep it a little more generic.

Use them for good, modify them and create beautiful things. And let me know if you have any feedback.

And if you need cursors, I have a bunch put away with your name on them.

Download UIElements.psd.zip from my iDisk (thanks for the not-so-free space, Apple!)

The (no longer very) new official site for public transport in Singapore has been online for about six months now, and while it still lacks some of the functionality, it’s an interesting site to look at from a design perspective. We at Supershapes did a small presentation for the LTA about brand design integration for public transport, and this site redesign was a part of a bigger presentation that I may post at some point in the future.

What first struck me when I looked at publictransport.sg is that it doesn’t look anything like the design that has been (sort of) implemented through the public transport network of Singapore. It looks more like IDA’s Wireless@SG, though it might be the name and the misused @-sign that seems to be ever so popular on government websites and condominiums (like, unfortunately, mine). This is not public transport at Singapore but public transport in Singapore.

So what has happened here is what seems to be happening in general when agencies develop sites, they create a completely new look and feel, disregarding the fact that it dilutes the brand, the information experience and thus confusing the users. The “symbol for the integrated public transport system” is strangely missing, the colours are green but completely the wrong shade, and they use a blue that’s almost LTA purple, yet not. They also refrain from using the official bus and train icons, and have instead created a new set of icons that has no reference to the information system already in place.

Lastly, of course, there are a lot of visual glitches, strange features and no integrated journey planner (although I hear some people are working on that). I also think the map is way too prominent for something that is not very useful in that sense. So while I was prepping some other stuff in the public transport brand presentation, I decided to take a day to look at how I would improve publictransport.sg.

1. Starting with the obvious – the top. As previously mentioned, the site should look and feel like the design already in place on maps, time tables and other information design for public transport in Singapore, using the symbol, the right colours and the right fonts. That doesn’t mean you can’t give it its own identity, yet still retain the recognition from the rest of the network.
2. Navigation. I don’t quite understand the general favoring uppercase text in the navigation, since it really decreases legibility not vice versa. I also think the structure of the site could be thought through more thoroughly.
3. The Journey Planner. Well, this is not available on the site yet, and the only link is to the previously mentioned one that TransitLink has. Yet, this will probably be the most important feature on the future site, and should be in the most prominent location.
4. The promo space (picture borrowed from Flickr, can’t find the URL right now). Here’s a great chance to create some brand value for the network. Instead of highlighting the service aspect, this space could be used to promote the more emotional values that you want to be associated with public transport. Like, in this case, discovery, and how you can explore Singapore with the help of the public transport network. I’ve borrowed this idea from sl.se, the Stockholm Public Transport Network website.
5. The two promotion spaces. This is where you’d promote your new services or features.
6. Realtime Information. There’s a description there already, but basically, it’d be nice to be able to just key in my location and see the real time information for buses or trains.
7. Service Interruptions. It might be good to know if you’re shutting down Orchard Road over CNY, if there’s a huge traffic jam affecting the network or if Bus 167 is being reverted.
8. “I need some help with…” might be a good way to pick out a few FAQs and link deeper into the site structure.
9. Latest News. Well, this is being used rather poorly at the moment. People using this site are probably not at all interested in news regarding the LTA and its tenders. Instead this should feature news related to public transport.
10. More services. A place to collect the MRT maps, the (somewhat hard to use) Key Bus Services Maps and other resources for download. That doesn’t mean that we should have unlabeled pdf links on the front page though.

That’s it for now. Of course I have a couple of more ideas for the subpages, and this is just a one day sketch that I thought would never see the light of day, but these are some of the basics that I think they should consider if and when they decide to redesign publictransport.sg.

And Supershapes and I’ll of course be more than willing to come in and help you out, LTA!

I recently spent way too much money on a gadget I probably neither need or can use properly, but I figured I needed something expensive to keep me exercising. In retrospect, I think it might have been a better idea to wait for Nokia to release their Bluetooth HRM that works with their already pretty good service Sportstracker.

Anyway, after realizing that my new HRM only supports IR, that my Macbook Pro doesn’t have proper IR, and that I have to use the darn thing with Windows anyway since Polar refuses to make Mac software (stupid slackers!) I needed to pick up a USB-to-IRDA device. I found a cheap-ish no-brand one at Challenger for $S15.00 (this guy), but the drivers that came with it were for some random portuguese mp3-player. I ended up trawling the web for the drivers for 3 hours before finally figuring which company that manufactured it, and emailed them. They replied with a completely empty email subjected “drivers” from a nondescript address, with four attachments that I almost threw away fearing they were viruses. But lo and behold, they worked just fine.

Seeing as I spent so much time searching for the damn drivers, I figured I’d put them up here. Hopefully someone who needs them find them useful.

ds620.rar
ks959.rar (the one i used)
MA-620.rar
ww-600.rar