All entries from October 2007

Display:

Dates

  1. 2007
  2. 2008
  3. 2009
  4. 2010
  5. 2011
  6. 2012
  1. Jun
  2. Jul
  3. Aug
  4. Sep
  5. Oct
  6. Nov
  7. Dec
  1. From Elastic to Elastici

    Screen type.

    Thanks to the fantastic voluntary effort of Nicola Pressi, the elastic design tutorial has been translated into Italian. May good karma reign down on her him (oops!).

    If anyone else is bilingual and would like to translate the article for the benefit of local technicians, please download my vCard and get in touch. A few thank you links are the least you will receive, to go with the good karma from such a generous gift of time and skill.

    Share

  2. Letterpress Print Design

    Grow Collective business card with debossed glyphs.

    The new Grow Collective business card is in circulation. It appeared a while ago, and I’ve been meaning to post about it. Today seemed like a good day. In a calm interlude, I snapped open the lens cover, hit the macro key and, after grappling with my poor photographic technique, here you go.

    It was printed using letterpress onto 740gsm two–ply (natural white with Baghdad brown) Colourplan card by the venerable, and expert printers, Piccolo Press of Nairn in Scotland. They are one of the few remaining commercial letterpress printers in the UK who, ironically, do a large portion of their printing for clients in the States. Wherever you are, you could do much worse than a conversation with Tim Honor, or the designer, Paul. Their advice is invaluable.

    Quick Tips

    1. Letterpress is an analogue format so go to the highest resolution your machine and software can handle when producing the artwork. (I spend chunks of time waiting for changes to be applied at 1600dpi, but it was worth it.)
    2. Letterpress will saturate the card with ink, so your colours will be richer than printing on the office inkjet.
    3. You pay for the block, the card and the print run. It’s not cheap but then, it’s not lithographic quality, this is letterpress!
    4. Trust the advice of the printer (especially if you use Piccolo) on the choice of card. They can provide samples, but a good rule is, the thicker the card, the better the deboss at print. Standard weight is around 540gsm — almost twice that of litho printers.

    There’s a high resolution photo on Flickr if you want a closer peek. I’d love to hear how you get on if you go down this route. It’s more than worth it just to run your fingers over the debossing when they’re delivered.

    Share

  3. Smoothing out the Creases in Web Fonts

    Stickman smoothing out the contour in a ligature.

    Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems.

    Apple OSX and Microsoft Windows have different ways of rasterising fonts and different text rendering engines. Apple’s text rendering engine is Apple Type Services for Unicode Imaging (ATSUI .) Microsoft’s text rendering engine is Uniscribe .

    Font Rendering Methods in OSX & Windows

    OSX tries to respect the anatomy of the type as far as it can using floating–point positioning — a combination of anti–aliasing techniques and sub–pixel rendering that does not lock glyphs to the pixel grid.

    Windows uses two methods depending on the version of the operating system, (Standard and ClearType.) Standard uses a combination of hinting (grid fixing) and anti–aliasing. ClearType also uses sub–pixel rendering — using LCD display technology to achieve better anti–aliasing. With both of them, it prefers to lock the letters to the pixel grid.

    Comparing fonts at 14px and 800% maginifcation in OSX and Vista.

    Fig. 1: Firefox 2 on OSX (left) and IE7 on Vista (right) font rendering at 800% magnification.

    ClearType is enabled by default in Windows Vista. In 2001, Windows XP had ClearType included but enabled Standard mode by default. Changing to ClearType requires navigating through the Control Panel to find the Appearance settings, then finding a button marked “Effects” to access the options. It’s the Windows equivalent of trying to change the accessibility options in browsers: Even if you know they exists, they’re a pain to find.

    The legibility of each technique is subjective, and also depends on factors like ambient light, resolution, viewing distance, visual impairment, screen type and colour contrast.

    Dave Shea prefers Windows’ ClearType method, as does Jeff Atwood and much of his commentators. For judiciously sized body text I mostly prefer the Apple method, yet previously in brand work I’ve also locked the letters to the pixel grid to get them as sharp as I’d like. Again, it’s subjective: How I see the individual font appear at a particular size and colour is the deciding factor.

    Core Web Fonts

    In August, 2007 Apple and Microsoft renewed the license for the core Web fonts. It was anticipated, but still, there was a collective sigh of relief that the fonts would still be common to all major operating systems. Matthew Carter, the designer of Georgia and Verdana said:

    “By agreeing to make these fonts available cross–platform Microsoft and Apple will support their customers, and confirm their respect for the standards of type–design.”

    Using the default Standard mode in XP, text is rendered with minimal (practically non–existant) anti–aliasing up to a certain size. The size at which text starts to become smoothly anti–aliased seems arbitrary. Good smoothing occurs at various sizes for each variant of each typeface. XP is still the most common platform used by our audience today, and this is how it displays Georgia in IE6:

    IE6 on windwos XP font rendering

    Fig. 2: Screenshot of Georgia displayed in IE6 on Windows XP clearly showing smooth anti–alias starting at 17px.

    For your bookmarks: The Web fonts test suite displays text from all the fonts in a range from 11px to 21px so you can compare and contrast yourself.

    Smooth Header Font Size for Windows XP

    The Web Fonts test suite was used to produce the following table that compares the core Web fonts, and the size in pixels at which good anti–alias starts to occur in XP by default. (Every browser except Safari.) Only whole pixel font sizes were used.

    Typeface Pixel size for smooth anti–aliasing
    Regular Bold Italic Bold Italic Small Caps
    Andale Mono* 18 11 18 18 21
    Arial 18 11 18 12 21
    Arial Black 17 17 17 17 20
    Comic Sans MS 16 11 16 11 18
    Courier New - 16 - 17 -
    Georgia 17 17 17 17 20
    Impact - - - - -
    Times New Roman 18 14 21 18 21
    Trebuchet MS 17 12 17 12 20
    Verdana 17 17 17 17 20

    * Andale Mono does not ship with Windows Vista.

    Noticeably, Impact is never smoothly anti–aliased, and Courier New only when embolded (perish the thought.) The font being rendered with smooth anti–aliasing at the lowest size is Comic Sans; a fact that might produce a wry smile from its creator, Vincent Connare, who never intended Comic Sans to be used outside of the speech bubbles in Microsoft Bob.

    Designers can choose to ignore the smooth anti–aliasing point in XP Standard mode altogether. My view is that headers look better when smoothed as much as possible, so a careful choice of weight for the font is important. Now there’s an added complication. ClearType in Vista seems worse in some circumstances to me than the Standard method, but that is a post for another day.

    Future Font

    Apple’s patent application for a system and method for displaying text—invented by Mark Zimmer—from June 14th, 2007 may make interesting reading for some. It includes references to grid fitting / hinting, specifically a method that, “increases contrast of tops of lowercase characters of the font family and preserves thickness at tops of stems of lowercase characters.”

    In the future, the debate around platform specific font rendering may all be moot, as displays move to ever higher numbers of dots per inch and pixels per inch (160 as per the iPhone.) For now, how a given fonts behaves on different platforms is still crucial to user experience. I’ll still be keeping an eye on XP for a while yet, and I have a funny feeling I’ll be getting good use out of the table for a while, too.

    1. Resources and further reading:
      1. Web fonts test suite
      2. Apple Type Services for Unicode Imaging (ATSUI)
      3. Microsoft Uniscribe
      4. Apple TrueType Reference Manual
      5. Microsoft TrueType Reference Manual
      6. Wikipedia: Font Rasterization
      7. Wikipedia: Anti–aliasing
      8. Wikipedia: Font hinting / grid fitting
      9. Wikipedia: Sub–pixel rending
      10. Microsoft ClearType
      11. ClearType tuner for XP

    Share

  4. Strawman Argument

    Stickman: Your argument is flawed. Strawman: Why? Stickman: It’s a strawman. Strawman: ?!

    I couldn’t resist after reading Chris’ (useful) post on logic, and seeing this accusation used frequently on pedantic mailing lists. Forgive the pun and levity but what’s life without a little teasing now and again? :)

    Share

  5. Design vs Evolution

    I just watched a fascinating TED presentation on self–aware robots from Hod Lipson of Cornell University:

    It was inspiring to watch the spider–like bot trying to understand its own form and how to move forward. It was fascinating to see it not walk like a spider as we might have hoped for. Instead, it found a completely different way of propelling itself.

    Observing users in action within a user centred design (UCD) approach can also be surprising. They often do things we might not expect or be able to predict. As designers, we use our intuition to try and create empathetic experiences that transcend our own predilections. Jared Spool alluded to this recently at dConstruct when he described speaking to members of AIGA. He described how he talked about UCD and experience design to the audience who apparently promptly turned around and said, “that’s what we do!”

    In the article about narrative, I was thinking about developer versus user–generated narratives. The best social networks are platforms for expression. Users generate their own stories within the framework. To do this there is often a symbiotic relationship between the stage (the site) and the players (the users and audience.) The stage is literally set by the players and audience. They often find unique and interesting ways of using the stage to tell their stories. They create and pave new cowpaths which are then expanded upon by the developers. So the narrative being designed by the developers is only one of countless plots the users can follow.

    That’s what the robot was doing. With a reward at the end, it created its own story in order to understand itself and move forward. As Hod Lipson suggests, evolution rather than design may be a much more effective way of allowing robots to discover themselves. The same could apply to website users. Should we design experiences, or help them evolve? If it’s a balance between the two, how do we walk the line?

    The other fascinating portion of the presentation is what happens when rewards are removed. Instead of trying to achieve a task, the robots in the primordial soup of parts and power start to self–replicate. Self–replication becomes the task and the reward; amazingly like us, or any life form.

    You might compare that to certain social networks that exist without a goal as such, but to merely connect people. Users define their own rewards and tasks. Create their own narrative. Think about friends lists or popularity on Facebook. In a way that could also be considered self–replication, but of ideas and influence rather than genes. Conversely, on sites like Cybersocietes—a social networking popularity game where an algorithm calculates popularity based on activity—many users choose not to play a part in the designed narrative of the game. They choose instead to get satisfaction in other ways. They create their own narratives that still revolve around influence; not with the false measure of game points though, but in more subtle ways such as participation in public forums or private groups.

    Perhaps our job is not to design experiences in all cases, but to enable the audience to explore, play, and learn their way to a rewarding experience. Along the way they teach us a thing or two, and we all move forward together. Thanks to the Cornell Computational Synthesis Lab we can also let robots evolve on our computers as a screensaver (unfortunately Windows only) but fellow Mac users can evolve sheep instead.

    Share

  6. Starting a Flickr Journey

    New desk and machines.

    There’s been a few changes recently. New desk, new site, new tools for the coalface, and a sudden urge to drag my late–adopter self into the world a little more.

    So, today I posted my first ever picture to Flickr. I feel pleased. I got over–excited with notes which you’ll have to visit the site to see, part inspired by Terry Chay’s office picture. His notes were like the narrative in the margins, giving the photo some context. I love a good story. Notes made it so.

    I've long admired Flickr, and used it as a lurker, even to the point of having an account (sans images.) Anyway, today the lovely new Apple cinema screen arrived with a man in brown. UPS have the best corporate palette of any couriers, and a courageous one at that. It’s not every company that has the vision to use brown and gold in their identity. It’s almost timeless. Long after the bubble–wrapped sheen of so–called Web 2.0 design has become as tired as Microsoft blue, UPS delivery dudes and dames will still look classic, and hopefully feel it too.

    The arrival of the screen seemed like a good time to post a pic. Technically and artistically it has little merit, but as a snapshot into my life, hopefully it has more weight. Especially with the notes. I’ve been waiting for my desk to look like this for a year. Totally worth the wait, and it feels good to celebrate it with folks I know. Thanks Chris for greasing the wheels, I hope you like your handywork!

    Feel free to add me, comment, deride or lurk as you see fit. Let’s see where this journey goes, it might even be surprisingly good fun. :)

    Share

  7. Copywriting, Experience Design, Daleks & Julio

    Feedburner heading: My feeds are with Julio down by the school yard

    Reading the welcome message from Feedburner made me laugh. Logging in was a treat. Can you name the song and artist? Googling is cheating by the way! How I knew it automatically, I will never know. It was published before I was born.

    Feedburner just endeared themselves to me by making my experience better. Even if my huge subscriber count goes from six to one, then back to six again the following day, I’ll be predisposed to cut them a little more slack, just for making me smile.

    Flickr resurrected good copywriting with the multiligual and colloquial welcome messages. After coming out of beta Flickr also loves me (and you). Ahoy me hearties!

    Flickr: Ahoy jontangerine welcome message

    Dopplr has taken forth the torch and does its own great things with copy. Simple but effective:

    Dopplr copy: Welcome, Jon. Your home city is Bristol. You can invite people to Dopplr to see your trips or look for travellers you already know.

    Great copywriting. Or, more accurately, great copywriting as part of great experience design.

    Copywriting as Part of the Product

    Copywriting is usually associated with advertising: The selling or promoting of a particular product, service, concept or person. Hold the dogma, though. The Web hasn’t made that untrue, but it has extended the definition slightly. Copywriting is integral to user experience. It’s part of the contract between the user and the site. The copy is part of the service, not just a means to sell the service.

    Darlek says: Log in sux sess full.

    Dalek image © Owen BillCliffe via Flickr.

    Once upon a time in a land too close for comfort, developers often did copywriting. They were often great developers but more often terrible copywriters. Everything looked like DOS or Terminal messages: Dry, terse and with the personality of a Dalek. Not any more, though. As designers, we should have an active hand in it, and if the project allows, work with a good copywriter. At Grow, we regularly get pedantic over language because the copy will effect the way we think and see. If the copywriter can move away from the trite self–promotion of corporate sites, or the stale techno–shorthand of developers, we’ll hopefully all think good thoughts and have our eyes delighted by what we see.

    Experience Design and Narratives

    Experiences, narratives, stories; simplistically, one and the same. Denna Jones is Designer in Residence at Central St Martin’s College of Art, and consultant for architects. When she introduced me to the phrase, “design narrative” over a Peking duck salad at Severn Shed in Bristol, we shared a smile together, mostly due to the awkwardness of the term. However, narratives are exactly what social websites are all about. We share, create and experience them through the medium of the site and that’s exactly what copywriting helps to encourage.

    The copy adds to the narrative just as much as the typography and graphic elements do. In the same way, the copy can also add to the personality of the brand. Brand personality is a carefully cultured message. Brands have characters, and as I discussed in a previous article, the house style is integral to it. The question is whether the site or brand is a Mary or a maverick. As Mark Bernstein said in his A List Apart article on narrative:

    The point is that the reader’s journey through our site is a narrative experience. Our job is to make the narrative satisfying.

    One way of looking at it, is to see the narrative we design as just one amongst many. Users will create stories and experiences for themselves. The context may also be created by the audience, too, and then reinterpreted by others as part of their own experience of the site. That leaves the interface, the framework or stage upon which the narratives are played out. That’s where I love to work. Web designer? No. Art director? Maybe. Stage hand? Definitely! On that note I think I’ll go back to watching my feed play with Julio in the school yard. Paul Simon has a lot to answer for.

    Share