To give an example, at ILRT we were recently working on a new website for the Worldwide Universities Network, an alliance of 18 universities across the globe that join together to encourage interdisciplinary research. The main audience for the site are academic researchers who may be interested in starting a new collaborative research relationship with another group in another WUN university. In this case it was useful to distill out a key message for that audience – one that summarised the benefits offered by WUN – and marry that to an image that illustrates that message metaphorically:

The benefit of this type of design is that it allows you to communicate your message in a visual way. Images are more instantly accessible than words and require less effort to process. In this case the distant expanse of horizon ties in with the idea of looking at the future and meshes with the tag line. Tag lines can often be used to clarify the metaphor you are making and anchor a non-literal image to the actual subject of the design.

Here’s a homepage for a software company:

In this case we determined that the immediate appeal of the company’s software products was to help it’s clients stand out in the market place. So I set about trying to capture that concept in a non-literal way. In a literal sense, of course, fruit has very little to do with software. But the image implies the concept of ’standing out from the crowd’ or ‘being special’ which is what we wanted to communicate in this case. The fruit also has a secondary connotation – that of being tasty. Images of delicious food work on our senses in a more immediate way than software usually does.

As a web designer, using conceptual or non-literal design solutions can be liberating. You know what it’s like, you’ve just landed a new job to design a website for a firm of accountants. The obvious choice is to use images of people in suits reading documents, perhaps a close-up of a spreadsheet or a calculator. Not the most inspiring stuff to work with. But perhaps we can look at it from another angle – what kind of function does a good accountant really perform in the life of a business? He is a necessary part of helping a company grow and flourish, helps to keep things in order. Something like a gardener perhaps? You could then shoot off to your favourite stock photo site and start looking at images of tended gardens or beautiful trees growing.

Snap to pixel

In Illustrator CS1 and older, getting objects to ‘snap to pixel’ properly was difficult. Even when you set your units to “pixels”, positions on the canvas are very sensitive and tend to end up as fractions of a pixel. This introduces anti-aliasing artifacts when exporting the image so that your web graphics don’t look very ‘crisp’.

To get a ‘snap to pixel’ effect in these older versions of Illustrator, first set up your grid so that you have a grid line every 128px with 128 subdivisions. That in effect gives you a pixel grid, but with a usable number of lines visible. Then turn on “snap to grid” under the “View” menu. This keeps all your movements and transformations locked in to the nearest pixel, and keeps your graphics nice and crisp. (Thanks to Hennning for first showing me this technique).

As of CS2, Adobe introduced a specific ‘snap to pixel’ option, which you can see under the View menu after you select “Pixel preview”. This will keep all your objects snapped to the nearest pixel.

Clean outlines

By default, a stroke line around an object will follow the centre of the outline. This means that a stroke line of 1 pixel will have 0.5 pixels either side of that line, and we’ll end up with anti-aliasing artifacts. To solve this, always select “Align stroke to outside” or “Align stroke to inside” from the Stroke options window.

Unfortunately, even when you do this, and have “snap to pixel” turned on, Illustrator will randomly introduce an extra 1px anti-alias shade below the top edge of a rectangle. This is one of those annoying Illustrator bugs that (almost) makes you wish you’d just stuck with using Photoshop. This bug seems to occur in both CS3 an CS4 versions. The only way around this that I know of, if it is absolutely critical, is to draw the stroke separately as very thin rectangles – see below. [Update: setting the stroke weight to 0.999px solves this problem. Thanks to Benjamin McDowell for posting this in the comments.]

Drawing lines

In theory, the centre of a line lies between two pixels, and hence we get anti-aliasing problems when drawing lines with “snap to pixel” selected. Rather than nudging the centre measurement of a line by 0.5 pixels (which will give you a clean line), I prefer to draw lines as very thin rectangles. For example, a 1px horizontal line can be made up of a 1px high rectangle. In a similar way, controllable shading can be achieved by creating thin rectangles filled with a black to white gradient, setting the blending mode to “multiply”, and then reducing the opacity as required.

Use layers

Unlike Photoshop, by default Illustrator allows any element on the canvas to be selected and moved/modified with a single click. This makes designing more fluid and quicker – resizing an object requires less clicks. It also makes it important to set up a few different layers, so that you can lock some layers while you work on others. I tend to place some example browser chrome on a top layer (to help get an ‘in-context’ preview of the design), a layout grid on a second layer, main content on a third layer, and structural elements like boxes or columns on a ‘ground’ layer. But depending on the complexity of the design, you may want to set up more layers – don’t forget to name them to help you keep track.

Use character and paragraph styles

Another area where Illustrator scores is its ability to define character and paragraph styles. Say you have a full web page design with a fair amount of content: text may appear in different columns, break-out boxes and sidebars. Now say you want to try tweaking the link colour, or changing the font of the headings. Instead of selecting each instance of link text in turn and making the colour adjustment, you can just make a global change to your “link” character style. It takes a little longer to set up, but you can end up saving time, especially if you’re the kind of perfectionist designer who likes to keep fiddling with things.

Working with bitmaps

For some things, like editing photos, you’re going to have to use Photoshop. It’s often worth ‘placing’ PSD files into Illustrator so that transparency works properly. Placing an image (as opposed to just copying and pasting via the clipboard) also means that Illustrator can automatically update the image when you make changes to the file within Photoshop, which can be handy. Note that you can do some quick ‘cropping’ work in Illustrator by making a ‘Clipping Mask’.

Getting help

There are lots of decent books and online tutorials around, although few of them focus on using Illustrator for web work. I’ve always preferred to teach myself, using the Adobe help files. A good place to go if you get really stuck is the official Adobe support forum. There are some knowledgeable power users there, although don’t expect an answer right away. Illustrator does also have the odd strange bug every now and again, so if you really can’t work out what’s going on, it might not be your fault! 99% of the time though, the answer is there somewhere in the help files.

A user may not find it easy to articulate his goals. Often he may say that he would love to see a feature X on the homepage. But when you actually take the time to understand his situation, it is clear that he’d never really use X. Perhaps he saw it somewhere else and thought it looked ‘cool’ and that’s why he’s suggesting it. People usually like to be helpful, after all. And it may well be that understanding his real needs will prompt you to dream up feature Y. Feature Y may not even exist yet, it may be a new invention.

“If I had asked my customers what they wanted,” Henry Ford said, “they would have said a faster horse.” Some people actually use that as an argument against user research: don’t listen too closely to your customers. But Ford was successful because his product addressed people’s underlying needs. And that is what proper user research is all about discovering.

When gathering information on your users, using online surveys is a fairly limited approach. Asking them what they would like is worse. The best thing to do is ask them to talk freely about what they do on a daily basis within your domain of interest. Then ask them why they do that. A little bit of empathy is useful, and there is no harm in collecting information on deeper, longer-term goals. Good design is, after all, about really understanding the user.

The Gfaster search actually works well in practice. The only slight downside I’ve found is that many of the text-only pages are a little wide, resulting in quite small font-sizes on the iPhone, even in landscape orientation.

The app was built using Google’s Ajax Search API, and I had some invaluable help from a couple of the guys at the API Google Group. As usual, I was impressed by the community spirit of people willing to spend time to help each other out.

You can also find Gfaster listed on Apple’s Web App Directory.

For anyone giving this a try on their iPhone, let me know how you find it, and if you have any ideas for improving it. I should probably add pagination at the bottom, so when I get a moment I’ll do that.

This kind of texture is fairly popular at the moment. You can use it on buttons, navigation bars, and so on. I’ve adapted the technique so that you have a single Group of objects and can easily change the colour of the button with a single click. No need to mess around with gradient sliders

First, draw a rectangle and apply a Round Corner effect. Then apply an Inner Glow effect (Effects > Stylize > Inner Glow). Set the blend mode to Screen and the colour to white. Then select center. Alter the Opacity and Radius settings until you get a fairly subtle glow effect that does not quite reach the edges of the rectangle:

Next, copy this shape and paste in front. Now remove the inner glow effect from the uppermost shape. Using the Scissors tool, carefully click the path of the new shape half-way each vertical side. This will divide it into 2 halves. Use the Direct Selection Tool to select the top half and delete it:

Lastly, group the 2 shapes before adding your text. Because the Inner Glow effect has a blending mode of Screen, you can change the colour of your button very quickly, just by applying a new fill colour to the group. You might need to adjust the opacity of the Inner Glow if you shift from a dark to a light colour.

Today I started thinking that it would be useful to have a CSS gallery where some of these design options were categorised – where you could search for all gallery entries with ‘fixed width 800px wide, 3 columns’, for example. Maybe there is such a thing already? CSSBeauty categorises sites into ‘business’, ‘entertainment’, ‘personal’, etc which is really useful. So why not take it further.

As an initial solution I’ve started using del.icio.us to keep track of designs that I like. I’ve added tags like 800boxed (the standard 750px wide, horizontally centered, with a border layout), 800free (designed for 800px wide browsers but without a definite border), liquid, semiliquid, and so on. It kind of works but it’s a bit clunky and you can’t ‘search’ on more than one category (tag). Maybe oneday I can make a web app to do this better.