Hinting

The reason Arial looks good at small point sizes is because Microsoft pay a lot of attention to the hinting of their web fonts so that they render well on screen.

To quote Wikipedia’s article on Font Hinting:

Font hinting is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, with or without antialiasing, hinting is critical for producing a clear, legible text for human readers.

Fonts that have not undergone a rigorous hinting process tend to look fuzzy or poorly spaced when forced to align to a computer monitor’s pixel grid. Helvetica is a case in point: it renders very well on Mac systems even at small point sizes, but on Windows systems it looks, frankly, crappy.

Arial vs Helvetica

To demonstrate, here is a comparison between Arial and Helvetica on a Windows system. You will notice that Arial’s anti-aliasing is much crisper than Helvetica’s at larger sizes, and that Helvetica’s kerning falls to pieces at sizes smaller than 12px. These defects are especially evident when viewing an entire webpage set in Helvetica.

I performed the test above in Firefox 3.5 and Internet Explorer 8 on Windows Vista, using both Adobe’s OpenType Helvetica LT Std and a Linotype PostScript version of Helvetica, with identical results.

Arial on the Mac

On a Mac the story is quite different. Arial and Helvetica look virtually identical (as they should), and both remain perfectly legible at 8px. This might be because Apple’s font rendering engine is superior to Microsoft’s ClearType, or perhaps the version of Helvetica that ships with Mac OSX has been hinted to retain legibility at low resolutions.

Whatever the case, the fact remains that Arial looks better on Windows than Helvetica does. Does this make Arial a superior font than Helvetica? Not by a long shot. But it does serve to illustrate Arial’s suitability for the Windows environment, which still accounts for over 90% of all web traffic.

Does Arial deserve reconsideration?

So what do you think – does Arial’s superior hinting on Windows systems elevate it beyond the status of a substandard Helvetica clone, or is it beyond redemption?

A note about Win/Safari

If you use Safari on a PC you may have noticed that Arial renders differently than than in the screenshot I provided. In fact, it renders exactly as it would on a Mac. That is because Safari offers the option to use Apple’s font rendering engine rather than Microsoft’s ClearType. Sadly I couldn’t test whether Helvetica’s rendering was similarly improved in Win/Safari, because Safari refuses to recognise any of my non-system fonts. If anyone can shed light on this issue, please leave a comment below. I’m very curious to know if Helvetica’s substandard appearance on Windows can be attributed to a deficiency in ClearType rather than a deficiency in the font (I suspect the former).

1. Instant dotted lines
2. Scaling masked images
3. Non-destructive scaling
4. One-click selections
5. Quickly change a color scheme
6. Automate repetitive tasks

1. Instant dotted lines

For some unfathomable reason, Photoshop’s line tool doesn’t allow you to create dotted lines, which is a shame, because dotted lines are something web designers use with great frequency. To create a dotted line, you could use the pencil tool to draw each individual dot, but that would be painfully slow. A much more efficient technique is to use a pattern fill.

Step 1

Create a new 2×1 pixel Photoshop document, and hide the background layer. Create a new layer, and use the pencil tool to fill in one pixel.

Step 2

Press Ctrl+A (Cmd+A on a Mac) to select the entire canvas, and choose Edit > Define Pattern. Give your new pattern the name ‘2×1 dotted line’ You can now close the Photoshop file.

Step 3

To apply the pattern to a layout, create a new layer in your document and use the marquee tool to make a selection that is 1 pixel high and as wide as you want your dotted line.

Step 4

Choose Edit > Fill, and in the dialog that appears set the Contents to Pattern, and select the Custom Pattern you created earlier.

Your selection will be filled with the dotted line.

The great thing about this trick is that your patterns are stored for future Photoshop sessions, saving you even more time.

2. Scaling masked images

One thing almost every website layout requires is a couple of good old fashioned rectangular images. Often a layout requires several images cropped to the same dimensions, and resizing and cropping them individually is a pain in the backside. Thankfully Photoshop’s clipping masks give us a quick way of cropping images to fit a pre-defined space on the canvas.

Step 1

To begin, create a solid rectangular placeholder for your image.

Step 2

Paste your unscaled image into a new layer above the placeholder.

Step 3

Right-click (Option-click on a Mac) on the image layer, and choose ‘Create Clipping Mask’. A mask the same shape as the placeholder layer will be applied to the image.

Step 4

Now you can scale your image up or down in size by using the keyboard shortcut Ctrl+T (Cmd+T on a Mac) and dragging the transform handles, or move it around by clicking and dragging.

Step 5

Once you are happy with the way the image is cropped by the mask, hit Enter to apply the transformation.

3. Non-destructive scaling

When creating a website layout I find myself obsessively increasing and decreasing the size of objects on the page, trying to strike the right visual balance. In older versions of Photoshop objects, scaling and object down, and then back up again would make destroy pixel information and make the image blurry. That’s where Photoshop CS2 comes in, with its ingenious ‘Smart Objects’.

Step 1

Any layer can be turned into a Smart Object by right-clicking (Option-clicking on a Mac) it and choosing ‘Group into New Smart Object’. Alternatively, paste an image or vector shape into your Photoshop document, and when prompted choose to paste as a Smart Object.

Step 2

The new Smart Object contains the layer’s original pixel (or vector) information, and can be transformed to your heart’s content without losing quality.

To release the Smart object, you need to rasterize its contents by right-clicking (Option-clicking on a Mac) its layer and choosing ‘Rasterize Layer’.

4. One-click selections

Being able to create a selection from a layer is extremely handy. Here is a real world example. Remember the dotted line from tip #1? Lets say we want to change its color from black to orange.

Step 1

Hold down Ctrl (Cmd on a Mac) and click the thumbnail of the layer containing the dotted line. This will create a selection from the layer.

Step 2

Set your foreground color to orange.

Step 3

Make sure the layer containing the dotted line is selected – if not, click on it. Now hit Alt+Delete (Opt+Delete on a Mac) to fill the selection with your foreground color.

There are many situations in which it can be useful to create selections from an existing layer, and all it takes is one click.

5. Quickly change a color scheme

Photoshop’s adjustment layers allow you to apply all the regular image adjustments – hue, saturation, color balance, etc – to an image without permanently modifying it. There are a myriad of different effects you can achieve using Photoshop adjustment layers, but I use them most frequently to change the color scheme of my mockups.

In this example, I have mocked up a nice shiny “web 2.0″ style design. The only thing is, I’m not loving the monochromatic navigation bar, and I’d like to try out some other colors. Using an adjustment layer it is easy to experiment with different color schemes without altering the original layer.

Step 1

First of all, put the layers containing the artwork your want to colorize into a new folder, and set the folder blending mode to Normal. This is so that the adjustment layer will only affect the folder’s contents, not any layers below it.

Step 2

Select the folder, click the ‘Create new fill or adjustment layer’ icon at the bottom of the Layers palette, and choose ‘Hue/Saturation’.

Step 3

In the Hue/Saturation dialog box tick ‘Colorize’ and adjust the Hue, Saturation and Lightness values until you are happy with the color of the navigation bar. Click ‘OK’ to confirm the adjustments.

In future, you can double click the adjustment layer to open the dialog box and modify its values. This lets you experiment with different color schemes until the cows come home, all without altering the underying artwork.

6. Automate repetitive tasks

Web design often requires that we apply the same adjustments to a number of images. For example resizing a large number of images to use in a photo gallery, or converting them to grayscale. Rather than bore yourself to tears stepping through the same transformations for each and every image, you can record the steps in a Photoshop action, and apply them with a single click.

Step 1

Lets say you want to create thumbnails of a bunch of images. Open your first image in Photoshop, then open the Actions palette by choosing Window > Actions. Click the ‘Create a new action’ icon at the bottom of the Actions palette, and give your action a name.

Step 2

Your action begins to record automatically. Every transformation you apply to your image will now be saved in the new action.

Step 3

Perform whatever transformations you like to the image. For this example choose Image > Image Size and resize your image to the dimension it needs to be for the photo gallery. Next choose Filter > Unsharp Mask and sharpen the image.

Step 4

Click the ‘Stop playing/recording’ icon at the bottom of the Actions palette. Your action is now ready to use.

Step 5

To apply the same action to another image, open the image, select your new action in the Action palette, and click the ‘Play selection’ icon. Hey presto! The image is resized and sharpened.

Credits

Photos used in this article are by Simon Wuyts, and are available fromstock.xchng.

You don’t have to go far to learn more about the new design savvy Microsoft – the company now has an entire website devoted to spreading the word. Microsoft Design Center details Microsoft’s mission to bring good design to the world:

Good user experience is now common in the consumer space, and it’s the next domain of differentiation in the enterprise. Effective user experience in software and computing is not perceived as a nice surprise when we find it—it’s now an expectation that our experiences will be pleasant, secure, productive, delightful, useful, and adaptive [...] Microsoft is creating a new paradigm for creating compelling digital experiences.

It’s difficult not to be at least a little skeptical of Microsoft’s motivations. As every web designer knows, Microsoft tend to stop innovating once they have firmly cornered a market. When Internet Explorer 6 ‘won’ the browser wars, Microsoft indefinitely abandoned their web browser development program, and it was only when Firefox started eating into their market share that they jumped back in the game. I think the same is the case with the company’s newfound interest in design, only this time it is the success of Apple’s design driven marketing that has given Microsoft a swift kick in the pants. On the Microsoft Design Center website the Apple iPod is singled out as an example of great design, and it’s hard to imagine Microsoft’s Vista operating system existing in its current form were it not for the innovations of Apple’s OS X.

Impure motivations aside, I think it’s great that Microsoft have finally realized the value that good design can add to their products, marketing, and public image. Vista is the most striking example of this new design philosophy in action, but I’ve noticed that Microsoft have stepped up their game right across the board, including the design of their software titles, electronic devices, and websites. Here are a few examples:

Optical Mouse

Microsoft tapped iconic product designer Phillipe Starck to devise their first piece of ‘designer’ hardware, the Optical Mouse. To me it looks about as functional as Apple’s appallingly unergonomic pill shaped mice, but from a purely aesthetic perspective it certainly has its appeal.

Popfly

Popfly is Microsoft’s foray into the ‘mashable’ web, and a direct competitor to Yahoo Pipes. Popfly’s simple, elegant branding is a far cry from the cluttered design and corporate blue and white we have come to expect from Microsoft.

Vista

I’m sure by now you’ve seen at least screenshots of Vista, and know that Microsoft is hoping that Vista inspires the same “wow” factor that Mac OS X did on first release. I’ve been using Vista as my primary operating system at work for about a month now, and in my opinion the GUI definitely lives up the hype.

With impressive ‘glass’ effects, icons by Icon Factory, and 3D tabbing between applications, Vista helps puts Microsoft back at the cutting edge of user interface design.

Zune

A year or two back a hilarious video was doing the rounds that posed the question: what would the iPod’s packaging look like if it had been designed by Microsoft? In the video the minimal iPod packaging was transformed into a perfect representation of ‘design by committee’, a visual cacophony of product endorsements, company branding, disclaimers and technical specifications. The message was simple: Apple understand good design, whereas Microsoft are too caught up in corporate bureaucracy to ‘get it’. Well, Microsoft did end up designing their own portable music player, and judging from its packaging they learned from past mistakes. It’s a shame then that they chose brown as the trademark color of the Zune. My guess is that brown was the only color Apple hadn’t already used in their iPod Mini range.

Zune may not have been the iPod-killer Microsoft were hoping for, but I still think they got it right with the Zune website, which in my opinion has a tad more personality than the iPod micro site. In an odd reversal, Apple’s iPod site seems more… corporate!

Forefront microsite

The quirky online campaign for Microsoft Forefront makes good use of Flash video to portray would-be hackers as bumbling zombies and incompetent aliens. It’s a humorous twist on Microsoft branding, and like much of the company’s recent marketing it is friendly and bright rather than drab and corporate.

In this tutorial we will be using the often overlooked LAB color space. If you’re anything like me then you do the majority of your image editing work in either RGB or CMYK color mode, which are both fairly straightforward to get your head around. The LAB color space is a different kettle of fish altogether. Like RGB it consists of three channels, but in this case they are Lightness (L), colors ranging from red to green (A) and colors ranging from blue to yellow (B). Kinda confusing, huh? Anyway, lets see how the LAB mode can make our black and white images zing with just a few simple adjustments.

Here is our original image:

The quick n’ dirty method for converting this image to grayscale would be simply to choose Image > Adjust > Desaturate from the Photoshop menu. Viola, our image is now black and white. However it looks a little flat. Untouched photos are often quite tonally dull, and suffer the most from the standard Photoshop desaturation technique.

Lets try the LAB method instead. We’ll start with our original color image, then choose Image > Mode > LAB Color from the Photoshop menu to convert the image to LAB mode. Next, click on the channels palette, and hide the A and B channels, to leave only the Lightness channel showing.

Straight away you should notice an improved tonal range.

Now it’s just a matter of adjusting the images levels or curves to tweak the image to your liking. I’m going to use curves, and pull the sliders in a little at each end to give the image more contrast.

All that’s left to do is convert our image to grayscale mode by choosing Image > Mode > Grayscale from the Photoshop menu. Here is the final image:

I think it’s fair to say that our new image is a big improvement over our original effort, and took only a few moments longer to produce. This method won’t produce stellar results every time, but if you find your black and white conversions lacking life then it is definitely worth a whirl.

Because the LAB color mode contains all tonal information in a separate channel, it is also great for sharpening images, and adjusting levels and curves, without messing up your color information. I will cover some of these other techniques in future articles.

Photo credit: Photo by Sean Ratke, available on stock.xchng

A few days later the “visual elements” addition had been removed after a vote by wikipedians. The objection, I suppose, is that no set of visual criteria can accurately define something as being characteristic of Web 2.0 – if Web 2.0 can be understood as an approach to generating and distributing content, then it needn’t be tied to a particular visual style.

Nevertheless, it’s true that many Web 2.0 sites do share a distinctive aesthetic. Wikipedia’s editors may not think it’s a worthy part of the Web 2.0 discussion, but I say bring it on! Let’s take a look at the some of the communication issues facing a Web 2.0 site, and see how the “Web 2.0 look” can help to solve them.

Trust me, I’m Web 2.0

Integral to Web 2.0 is harnessing the input of website visitors. Users can generate content for a web service, promote it in a “viral” peer-to-peer fashion, and improve it’s data quality through their opinions and preferences.

But to convince a visitor to contribute their time – and data – to a web application, you need to get them to trust you first. Most Web 2.0 sites come across as friendly, approachable and small-scale, using subtle design decisions to gain our trust.

Green is the new grey

Bright, cheerful colors dominate Web 2.0 sites. Green is the unofficial color of web 2.0, but saturated blues, oranges and pinks are also favourites. Bold primary colors suggest a playful, fun attitude and also help to draw attention to important page elements.

Rounded everything

New CSS techniques for achieving rounded corners have helped make this style hot again. The friendliness of rounded corners is in keeping with the comfortable, informal tone of many web 2.0 sites.

In a great FontShop article analysing the logos of Web 2.0, it was clear that rounded typefaces are all the rage. This smooth approach to type lends a modern playfulness to a company’s visual identity.

Free, as in beer

If you’ve got to convince visitors to sign up for your killer app, giving away FREE accounts surely can’t hurt. Most Web 2.0 sites devote prime real estate to the message that they offer a free service. If that message can appear inside of the ubiquitous ’starburst’, all the better.

No (stock) photos please

You won’t find any stock photography of smiling support staff on a Web 2.0 site – that’s a tactic favored by small companies trying to mimic large corporations. Simple icons and screenshots are the order of the day when it comes to imagery on Web 2.0 sites. 3D and beveled icons can lend elegance and polish to a page design that is otherwise fairly stark.

Keep it simple stupid

Most Web 2.0 applications add an additional technological or organizational layer to the user’s web experience. Be it managing links with del.icio.us, sharing photos with flickr, or organizing tasks with Backpack, we have to familiarize ourselves with a new technological process and devote time to managing our content. A good Web 2.0 app ought to be lightweight and easy for users to grasp, and clever visual design and copywriting can help remove barriers to entry.

Smart use of layout, color, type and copy can go a long way towards easing the pain.

Big is beautiful

As far as Web 2.0 is concerned, bigger is definitely better. Bigger text, that is. Large text is easy on the eye, and coupled with snappy copywriting makes information easy to absorb. And now that accessibility is cool, it’s possible to be a hotshot web designer and use enormous type. Admittedly this craze for giant text strays too far into Jacob Nielsen territory for my taste – when a web page’s body text is set at larger than 13 point it looks like a “learning to read” book to me!

Breathing space

The layout of Web 2.0 sites might be described as minimal. With a focus on legibility and ease of use, good use is made of white space. White space allows important information to stand apart, provides rest for the eye, and imparts a sense of calm and order. Generous leading also makes text copy easier for the eye to follow. Some Web 2.0 layouts are so minimal that they verge on boring, but designed well, an uncluttered page can be incredibly tasteful.

Clever copy

Friendly, informal copywriting allows a more personal relationship with website visitors. A List Apart singled out Flickr and Photojojo for an honorable mention in this department, and it’s a lesson that many Web 2.0 sites put into practice. WebTango isn’t just free, it’s “free of additives, cholesterol, ozone-depleting CFCs, and most importantly, free to use”. Tioti doesn’t just have tagging and RSS, it has “tagging and RSS up the yazoo”. FAQQLY founder David Liu isn’t a isn’t a faceless entity, Dave is “your first friend once you register”. And the toolbar on eSnips isn’t just flexible, it’s “a toolbar you can use in a bunch of cool ways”. You get the idea.

Odds and ends

There are a couple of visual tendencies amongst Web 2.0 sites that don’t seem to answer a particular design problem, but deserve a mention nonetheless. The ‘wet table’ look, ’starbursts’ (also known as ‘flashes’ or ‘violators’), and ‘glass’ buttons, provide a lot of Web 2.0’s eye candy. Apple’s marketing department sure has a lot to answer for.

Conclusion

So that’s my quick tour of the visual design of Web 2.0. Who knows, the “Web 2.0 look” may be out of vogue a year from now, but I think it offers good lessons about effective design for the web that deserve to have a much longer lifespan.

Further reading

What is Web 2.0?

Straight from the horse’s mouth.

The Logos of Web 2.0

Examines trends in Web 2.0 logo design, and identifies the most popular typefaces.

Current style in web design

The inspiration for this article. Sums up the current trends in website design.

The Web 2.0 Awards

Discover a gazillion Web 2.0 sites you never knew existed.

Translations

This article has translated by readers into the the following languages:

Chinese
Russian