This is the archive of jontangerine.com version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

Entries tagged with ‘brand’

Display:

  1. Reversed Logotype

    Reversed type optical illusion example.

    This image shows a particular optical illusion that confronts us every day. Notice the difference between the black text on a white background and the reverse. With reversed type — light text on a darker background — the strokes seem bolder.

    Black text on white is very familiar, so we can be forgiven for thinking it correctly proportioned. For familiarity’s sake we can say it is, but there are two effects happening here: The white background bleeds over the black, making the strokes seem thinner. With reversed type the opposite is true: The white strokes bleed over the black, making it seem bolder.

    Punched, backlit letters on a sign outside the Nu Hotel, Brooklyn.

    One of the most obvious examples of this is with signs where the letters are punched into the surround then lit from inside. In his article, Designing the ultimate wayfinding typeface, Ralph Herrmann used his own Legibility Text Tool to simulate this effect for road and navigational signs.

    One might say that characters are only correctly proportioned with low-contrast. Although objective reality hails that as true, it isn’t a good reason to always set type with low contrast. Type designers have invariably designed around optical illusions and the constraints of different media for us. Low-contrast text can also create legibility and accessibility problems. Fortunately, kind folks like Gez Lemon have provided us with simple tools to check.

    As fascinating as optical illusions are —  the disturbing, impossible art of Escher comes to mind — we can design around reversed body type. On the Web, increasing tracking and leading are as simple as increasing the mis-named letter-spacing and line-height in CSS. However, decreasing font weight is a thornier problem. Yes, we will be able to use @font-face to select a variant with a lighter weight, but the core web fonts offer us no options, and there are only a few limited choices with system fonts like Helvetica Neue.

    Reversing a logotype

    For logotype there are plenty of options, but it makes me slightly uncomfortable to consider switching to a lighter font for reversed type logos. The typeface itself is not the logotype; the variant is, so switching font could be tricky. Ironically, I’d have to be very sure that that was no perceivable difference using a lighter weight font. Also, with display faces, there’s often not a lighter weight available — a problem I came across designing the Analog logo.

    The original Analog logo seen here is an adapted version of Fenway Park by Jason Walcott (Jukebox Type).

    Analog logo original.

    The logotype worked well when testing it in black on white. However, I wanted a reversed version, too. That’s when I noticed the impact of the optical illusion:

    (Reversed without any adjustment.)

    Analog logo reversed (flawed).

    It looked bloated! Objective reality be damned; it simply wouldn’t do. After a few minutes contemplating the carnage of adjusting every control point by hand, I remembered something; eureka!

    (Reversed then punched.)

    Analog logo reversed (punched).

    Punching the paths through a background image in Fireworks CS4 removed the illusion. (Select both the path and the background then using Modify > Combine Paths > Punch.) Is this a bug? I don’t know, but if it is, it’s a useful one for a change!

    Modify > Combine Paths > Punch in Fireworks CS4.

    N.B. I confess I haven’t tested this in any other Adobe products, but perhaps you will be so bold? (’scuse the pun. :)

    Fireworks CS4 screenshot.

    Matthew Kump mentions an Illustrator alternative in the comments.

    I grinned. I was happy. All was well with the world again. Lovely! Now I could go right ahead and think about colour and I wouldn’t be far from done. This is how it emerged:

    Analog logo.

    A final note on logotype design & illusions

    Before we even got to actual type for the Analog logo, we first had to distill what it would convey. In our case, Alan took us through a process to define the brand values and vision. What emerged were keywords and concepts that fed into the final design. The choice of type, colour, and setting were children of that process. Style is the offspring of meaning.

    I always work in greyscale for the first iterations of a new logo for a few simple reasons:

    1. The form has to work independently of colour — think printing in greyscale or having the logo viewed by people with a colour-impairment.
    2. It allows for quick testing of various sizes — small, high contrast versions will emphasise rendering and legibility issues at screen resolutions, especially along curves.
    3. I like black and white. :)

    I realise that in this day and age the vast majority of logos need to perform primarily on the Web. However, call me old-fashioned, but I still think that they should work in black and white, too.

    Brands and display faces emerged with consumer culture during the 19th Century. Logotypes were displayed prominently in high streets, advertising hoardings, and on sign boards. In many instances the message would be in black and white. They were designed to be legible from a distance, at a glance, and to be instantly recognisable. Even with colour, contrast was important.

    The same is true for the Web today; only the context has changed, and the popularity of logomarks and icons. We should always test any logo at low resolutions and sizes, and the brand must still have good contrast (regardless of WCAG 2.0) to be optimal. A combination of colour and form works wonders, but in a world of a million colours where only a handful are named in common parlance, having the right form still seems a smarter choice than trying to own a palette or colour.

    A final word

    This article was prompted by a happy accident followed by a bit of reading. There are many references to optical illusions in design and typography books. The example image at the start of this article was inspired by one found in the excellent Stop Stealing Sheep and Find Out How Type Works by Erik Spiekermann and E.M. Ginger. There’s also plenty of online material about optical or visual illusions you can dive into. There’s also more on how the eye processes light. Oh, and don’t forget the work of M. C. Escher!

    Human eyes are amazing. In two sets of watery bags we get a wide-angle lens with incredibly sharp focus and ridiculous depth of field. Apparently our brain is even clever enough to compensate for the lag in the signal getting from retina to cortex. I know next to nothing about ocular science. Spending a morning reading and thinking about optical illusions, and contemplating my own view here in the garden office is pretty awe-inspiring. If only my photographs were as good as my eyes, illusions or no.

    Share

  2. Iterations in Brand Design: OmniTI

    OmniTI flames

    OmniTI are instantly recognisable to almost anyone interested in open source development, scalability or security. Their client list reads like a who’s who of the Web. Many of their people are core contributors to open source technologies like PHP; some are co-creators of popular frameworks like CakePHP and Solar; they speak at many industry conferences and have written eight critically-acclaimed technical books; they’re probably one of the most technically erudite and accomplished consulting companies working on the Web today.

    They asked me to work on their identity to mark their tenth anniversary and the separation of the email part of their business off in to a separate entity. This is an insight into the process and how the final design was created:

    Scope & objectives

    In June 2007 the initial scope asked for a redesigned mark that would still be recognisable to people already familiar with the brand. That meant retaining many of the elements of the original, including the typeface, over the course of five iterations. This was the existing mark at the time:

    OmniTI original logo

    These are the objectives of the redesign we arrived at during the specification stage:

    1. Simplify the mark “O” and incorporate it into the type to render well for the Web at small and medium sizes as well as large.
    2. Make the mark as easy to understand as possible with the correct enunciation.
    3. Clarify the typography for the Web and provide “balance”.
    4. Make the form colour–independant and suitable for all formats: print, screen or otherwise.
    5. Make the mark unique and suitable for trade mark purposes.

    Type & typography

    Identifying the original typeface was straightforward. It was Century Gothic from Monotype Imaging: A Bauhaus-inspired geometric face designed specifically for digital systems, based on 20th Century, which was drawn by Sol Hess between 1936 and 1947 and in turn inspired by Futura. Century Gothic shipped with Windows from Win98.

    After reproducing the original type treatment, I quickly capitalised the name properly in order for it to be read more accurately. I converted the text portion of the mark to black and white, and began to play with anti-alias at low screen resolutions to show a quick revision to OmniTI before starting in earnest:

    OmniTI typography

    The weight of the capitals looked incongruous to me, but the quick revision gave us all food for thought. It set the tone for the direction the design would move in, and I got stuck in to the main body of work: Trying to find a way of simplifying the existing flaming comet and incorporating it in to the leading “O”.

    Simple & Complicated Revisions

    Iterating the existing mark forced me to go back to starting principles. Much of the form needed to be retained, but it had a significant problem: If this was an identity seen mostly on the screen, then the existing mark was too complicated, effectively breaking at lower sizes, and forcing OmniTI to use a comparatively large version for the “comet” to be rendered properly.

    The first two revisions were deliberately simplified as far as I could make them with some movement retained in the stylised “O”, but stripped completely of decoration:

    OmniTI revisions 1 and 2.

    These revisions were deliberately provocative on my part by being extremely simplified and pushing the limits of the brief. However, having something tangible gave everyone room to think and react. It made the boundaries of the brief slightly clearer and allowed me to continue with more of a feeling for the direction we needed to go in.

    From the super-simplified, the next two iterations re-introduced the trails from the original mark as flames, and swung the design in an opposite, more complicated direction:

    OmniTI revisions 3 and 4.

    This was deliberate, too. I’ve sometimes found that good results come from a design process that swings like a pendulum or an elliptical orbit around the final outcome. To find the right balance between the requirements it sometimes feel right to push the design out to the aphelion along certain lines of thought, then let the collaborative process pull it back to the perihelion where all the conditions are met and it works. That’s what happened for OmniTI. Collaborative discussion with them and their quality feedback was crucial to this approach.

    Final polish

    The final iteration combined the two approaches, with a more geometric comet that has echoes of the original, but more simply drawn. The letterforms were unlocked from the pixel grid, but with the anti-alias tightened. The acronym capitals were also adjusted. This was the result:

    OmniTI revision 5.

    During the OmniTI web site redesign (a case study will follow soon is now available) the logo was re-coloured to match the palette:

    OmniTI site logo.

    All of the iterations and development of the final brand mark were heavily influenced by the feedback of Chris Shiflett, Theo Schlossnagle, Brian Vaughn and the rest of the OmniTI folks who gave their time and opinions. This collaboration was crucial to get the end result. My job was to guide them through the technical design process and hold all of their requirements in my mind while the pixels and vectors appeared on the screen.

    It was a real privilege to be trusted with their brand. I think we achieved a good result from what is often an emotive exercise, and I’m particularly happy that we managed to build on the work that came before to reach the final design.

    Share

  3. 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