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 wasn’t prepared to get so much (if any) response to the things I posted on thursday, and though I’m thankful I’m a bit embarrassed that I didn’t spend more time on my sketches.

Anyway, Daniel over at Singapore’s Land Transport, pointed me in the direction of the new tender to redesign the bus stop poles, so with his help I was able to find the actual design that will be implemented (subject to changes, naturally). And it was fun to see that I wasn’t completely off the mark, although the visuals provided in the tender were more thorough than mine. The new ones are actually really good. I can’t link directly to the file, so for details on the tender, go to  GeBIZ, click on Tenders & Quotations, and then search for Signcraft Installations. They fix most of the problems I’ve had with the current ones, although, I can’t help but to poke around a little bit and make some modifications to them.

This is what they’ll look like (theirs to the left, my modifications to the right):

As you can see, the new stop pole is about 1000 times better than the old one. Now for my modifications.

A. It seems the LTA is fixed on making the bus stop code the biggest and most prominent part of the stop (second to the public transportation logo on the right side). Why? How many people currently know the bus stop code of the stop nearest to them? Also, this code is not very prominent in other pieces of information design around public transportation. It’s not on the Bus Services guide, it’s not in signs in the MRT showing the way to the nearest bus stop… The only places that has them is the online journey planners and the transit link book. So, obviously, it should be smaller.

B. Instead they’ve made the actual name of the stop (which is prominent on the bus services guide, for instance) almost illegible, and especially if you were to be on the bus. Upsize, please!

C. I implemented my idea of separating the night rider buses from the “normal” ones. Since they don’t run all the time, they should stick out a little.

The biggest problem with this current tender, that I see, however, is that it only covers the actual pole. This may not mean, however, that the LTA doesn’t have plans to look into the design of the rest of the stop, but still, these should definitely be overhauled at the same time. I modified my old sketches and implemented the new design, but kept some of my original ideas:

Especially, I combined my idea for the simpler “via” information tables with the current “Real-time bus information” panel released earlier. I frankly don’t see the point of having the arrival times of the two next buses visible (when the first one isn’t very accurate for starters). Instead, make that sign more usable by

1. Providing information of what buses populate the stop, in big type that is legible from the street or across it.
2. Showing a couple of “prominent” stops that the buses stop at on their way to their termination stop

Here’s a better picture:

That’s all for now. There also have been some developments on the front of the journey planner, especially since TransitLink released their updated version on Friday. Compare that one to the one at GoThere.sg, just for kicks. GoThere may not have in their own words, the most “pleasing” design, but it does its job extremely well (at least during the time I’ve played with it), and it’s vastly superior to anything else that I’ve found. TransitLink has really taken the complete reverse approach, making something that is basically as complex and difficult to use as possible.

More on this later.

I know it’s been a while (again). Here’s what I’m thinking about right now.

The of a lack of a good journey planner and coherent information design has caused me a lot of trouble since I moved here. To outline it; there are currently two different public transportation companies here, SBS Transit and SMRT. They run their own bus lines and their own train lines, which luckily are connected and use the same payment system (unlike, I hear, in Tokyo).

Problem is that first of all there is currently no good journey planner system (you know, the one at sl.se for instance), which makes it difficult for me as a foreigner to figure out how easiest to get from point A to point B. Today, the two companies each have their own journey planners on their website, but not surprisingly, they cover only their own networks, forcing me to go to both websites to figure out how to plan my journey. The company created by both SBS Transit and SMRT, TransitLink, which serves to create an “Integrated Transport System” in Singapore, released an “integrated bus journey planner” last year, but it’s still hidden away deep in their structure, difficult to use and badly written. This is also the case with the SMS based iRIS system that SBS has; it doesn’t cover SMRT which makes it confusing, and actually quite useless.

My second whining is about the lack of implementing good information design on the bus stops. Today, a typical bus stop at Newton looks like this

It’s graphically very messy, with a lot of extra information that only adds to the confusion. On the other hand, the LTA [Land Transport Authority] already has a great looking design system (easy to read, esthetically pleasing) that’s implemented on the MRT [subway], so why does this look like it does?

(image courtesy of herenthere08, flickr)

Also, the only place where you can see the name of the bus stop is located on top of the SBS Transit sign (the red one). See it? It says “Newton Stn”. Imagine you’re a confused ang-moh [westerner] on a bus peering out the window trying to look for that. You think you’ll see it? I sure don’t.

After having trawled the web for a couple of days, I stumbled on Daniel Chin’s excellent blog about Land Transportation in Singapore. I sent him an email and outlined these thoughts, and he was kind to reply and agree to meet me sometime next week to discuss things further. He also informed me that work on both these projects are under way, but I nourish a hope that I’ll still get a foot in and try to help the LTA out as much as possible.

These are a couple of rough sketches of what how I think they should do it:

Firstly, the journey planner:

Think of it more of a web based desktop application, with as few clicks and reloads as possible, but which can still be easily integrated on any website (like, in this case, Transit Link’s). With dynamically loading information (ajax based), and broad search criteria (or narrow if you choose), and a mix of icons and text, this should prove to be a “next generation” journey planner. Especially if you can tie it in with your GPS enabled phone.

The basic idea is to keep it simple. Where are you? Where do you want to go? That’s all, really. Advanced searches should of course be permitted, but I’m pretty certain that 95% of the people who use this won’t need to do an advanced search. These are my first drafts:

My next target was the bus stop.

Design wise, I’ve tried to use the existing icons, colours and typography that LTA uses in the MRT, with a little tweaking perhaps. When it comes to the pole, my approach is “remove and simplify”. The primary focus is on where you are, and what buses go from here. Also, does this bus stop connect with the MRT? The only buses that need separating are the day and night buses, so I put the NightRider bus on a dark plaque with a crescent moon symbol to further signal that it is a night bus (I borrowed this from SL, thanks!). As an extra treat, I figured that it should be easy to change if the buses are being re-routed. So I figured that all the bus numbers could be on little metal plaques, that are easy to remove and replace if need be. This way, there’s only need for one basic bus stop pole, which is highly configurable.

Then, when it comes to designing the actual bus stop, my first goal was to make it easy to see which bus stop you’re at, both from further down the street and from on board the bus itself. Therefore, I put the name of the bus stop both at the side of the bus stop facing traffic (not the pole side), and also on the side facing the street.

Lastly, you should be able to see the bus lines from across the street. I have also noticed that people (me included) spend a lot of time looking at the bus line map at every bus stop, trying to figure out how to go where they’re going. They are great, actually, listing the streets and all the stops, both before and after this stop. Problem is, they are a bit complex. When you’re in a hurry, it takes a lot of time to read through all of them, so I suggest a simple “via” system to complement them, which gives you a quick overview of what buses go in approximately what direction.

So now what? Well, I’m hoping to get some feedback from Daniel, and perhaps, if I’m nice, even some names at the LTA, to come up and talk to them about this and to hopefully help them out with design in the future. I feel, as usual, a bit tied down, having loads of ideas but not knowing who to go with them to. But still, it’s a lot of fun.

Update: I found some more information about the new bus stops on LTA’s tender site; check it out.

I needed some icons for a web projects today, and after googling for a simple hand cursor and several unsuccessful attempts to screen dump them, my friend Christoffer came up with a hardcore terminal script to steal all icons from, for instance, the Application folder on Mac OS X:

sudo find /Applications/ -iname *.ti*f -exec cp ‘{}’ /Users/yourusername/Desktop/icons \;

Now, all I needed were some simple icons, so I decided to put them in a png and a photoshop file for you!

Download the psd

I figured it was high time to do some brushing up on my blog, just for kicks. And to celebrate, here’s a new version of my Adium Dock Icons. Yay!





Download it from my iDisk (239kb) or from the adiumxtras page (don’t forget to give it good ratings if you like it)!

Since the N95 8Gb isn’t yet supported by Apple’s iSync (at least not in 10.4, which I’m still using), and the Nokia iSync page still doesn’t cover it, I decided to whip up my own by modifying the existing N95 one. This page put me on the right track. If you want it; knock yourself out.

Update 2008-02-12: Tried fiddling with the identification tags to see if it works better with new firmware. Not sure if it helped, though, but try it!

Download (34kb) and place in /Library/PhonePlugins/

Took some time yesterday to update my icon set for Adium, Flat Balloons. Get it from the Adium Xtras-page.

I did two new icon sets for the Macintosh chat application Adium. Check ‘em out, if you wanna. Updated as of May 2nd 2007.

Origami | Download

Flat Balloons | Download