Entries tagged with ‘design’

Display:

Tags

  1. Web Design as Narrative Architecture

    New Adventures Paper

    Stories are everywhere. When they don’t exist we make up the narrative — we join the dots. We make cognitive leaps and fill in the bits of a story that are implied or missing. The same goes for websites. We make quick judgements based on a glimpse. Then we delve deeper. The narrative unfolds, or we create one as we browse.

    Mark Bernstein penned Beyond Usability and Design: The Narrative Web for A List Apart in 2001. He wrote, ‘the reader’s journey through our site is a narrative experience’. I agreed wholeheartedly: Websites are narrative spaces where stories can be enacted, or emerge.

    Henry Jenkins, Director of Comparative Media Studies, and Professor of Literature at MIT, wrote Game Design as Narrative Architecture. He suggested we think of game designers, ‘less as storytellers than as narrative architects’. I agree, and I think web designers are narrative architects, too. (Along with all the multitude of other roles we assume.) Much of what Henry Jenkins wrote applies to modern web design. In particular, he describes two kinds of narratives in game design that are relevant to us:

    Enacted narratives are those where:

    […] the story itself may be structured around the character’s movement through space and the features of the environment may retard or accelerate that plot trajectory.

    Sites like Amazon, New Adventures, or your portfolio are enacted narrative spaces: Shops or service brochures that want the audience to move through the site towards a specific set of actions like buying something or initiating contact.

    Emergent narratives are those where:

    […] spaces are designed to be rich with narrative potential, enabling the story-constructing activity of players.

    Sites like Flickr, Twitter, or Dribbble are emergent narrative spaces: Web applications that encourage their audience use the tools at their disposal to tell their own story. The audience defines how they want to use the narrative space, often with surprising results.

    We often build both kinds of narrative spaces. Right now, my friends and I at Analog are working on Mapalong, a new maps-based app that’s just launched into private beta. At its heart Mapalong is about telling our stories. It’s one big map with a set of tools to view the world, add places, share them, and see the places others share. The aim is to help people tell their stories. We want to use three ideas to help you do that: Space (recording places, and annotating them), data (importing stuff we create elsewhere), and time (plotting our journeys, and recording all the places, people, and memories along the way). We know that people will find novel uses for the tools in Mapalong. In fact, we want them to because it will help us refine and build better tools. We work in an agile way because that’s the only way to design an emerging narrative space. Without realising it we’ve become architects of a narrative space, and you probably are, too.

    Many projects like shops or brochure sites have fixed costs and objectives. They want to guide the audience to a specific set of actions. The site needs to be an enacted narrative space. Ideally, designers would observe behaviour and iterate. Failing that, a healthy dose of empathy can serve. Every site seeks to teach, educate, or inform. So, a bit of knowledge about people’s learning styles can be useful. I once did a course in one to one and small group training with the Chartered Institute of Personnel and Development. It introduced me to Peter Honey and Alan Mumford’s model which describes four different learning styles that are useful for us to know. I paraphrase:

    1. Activists like learning as they go; getting stuck in and working it out. They enjoy the here and now, and are happy to be dominated by immediate experiences. They are open-minded, not sceptical, and this tends to make them enthusiastic about anything new.
    2. Reflectors like being guided with time to take it all in and perhaps return later. They like to stand back to ponder experiences and observe them from many different perspectives. They collect data, both first hand and from others, and prefer to think about it thoroughly before coming to a conclusion.
    3. Theorists to understand and make logical sense of things before they leap in. They think problems through in a vertical, step-by-step logical way. They assimilate disparate facts into coherent theories.
    4. Pragmatists like practical applications of ideas, experiments, and results. They like trying out ideas, theories and techniques to see if they work in practice. They positively search out new ideas and take the first opportunity to experiment with applications.

    Usually people share two or more of these qualities. The weight of each can vary depending on the context. So how might learning styles manifest themselves in web browsing behaviour?

    • Activists like to explore, learn as they go, and wander the site working it out. They need good in-context navigation to keep exploring. For example, signposts to related information are optimal for activists. They can just keep going, and going, and exploring until sated.
    • Reflectors are patient and thoughtful. They like to ponder, read, reflect, then decide. Guided tours to orientate them in emergent sites can be a great help. Saving shopping baskets for later, and remembering sessions in enacted sites can also help them.
    • Theorists want logic. Documentation. An understanding of what the site is, and what they might get from it. Clear, detailed information helps a theorist, whatever the space they’re in.
    • Pragmatists get stuck in like activists, but evaluate quickly, and test their assumptions. They are quick, and can be helped by uncluttered concise information, and contextual, logical tools.

    An understanding of interactive narrative types and a bit of knowledge about learning styles can be useful concepts for us to bear in mind. I also think they warrant inclusion as part of an articulate designer’s language of web design. If Henry Jenkins is right about games designers, I think he could also be right about web designers: we are narrative architects, designing spaces where stories are told.

    The original version of this article first appeared as ‘Jack A Nory’ alongside other, infinitely more excellent articles, in the New Adventures paper of January 2011. It is reproduced with the kind permission of the irrepressible Simon Collison. For a short time, the paper is still available as a PDF!

    —∞—

    Share

  2. First Things First

    Last Wednesday I turned up in front of a friendly bunch of designers and developers at BathCamp — a regular and excellent monthly event in the city next door. Thanks to Mike Ellis for inviting me at the last minute, and everyone who attended. That day I’d roughly cobbled together a few thoughts about design culture from some old reading, a sprinkle of disquiet, and a bit of dubious optimism. Be warned, here be politics; provocative for some. My thoughts went something like this:

    1963–1964

    From what I have read, and soaked in by osmosis over the years, the early sixties were a fascinating time. In the early part of the decade UK society was emerging from the austerity following WWII. An impoverished Britain looked across the pond to the booming consumer culture of the USA with envy and ambition. Consumerism was on the rise. Advertising was on the rise. At the same time, there was a revolution going on in music, culture and politics. The baby boomers were about to change the world.

    In 1963 70,000 people marched from Aldermaston to London — part of the Campaign for Nuclear Disarmament. The Test Ban Treaty was signed. Martin Luther-King gave his ‘I Have a Dream’ speech. James Meredith became the first ever black student to graduate from the University of Mississippi. The first ever X-Men comic from Marvel was published and Iron Man made his debut. The first episode of Doctor Who was broadcast. Coke launched its first ever diet drink, ‘TaB’. The Museo Bodoniano opened in Parma. JFK was assassinated.

    On 29th November, 1963, during a meeting of the Society of Industrial Artists (now the Chartered Society of Designers) at London’s Institute of Contemporary Arts, Ken Garland wrote First Things First, A Manifesto (plain text here). He read it out to copious applause. This is what it said:

    We, the undersigned, are graphic designers, photographers and students who have been brought up in a world in which the techniques and apparatus of advertising have persistently been presented to us as the most lucrative, effective and desirable means of using our talents. We have been bombarded with publications devoted to this belief, applauding the work of those who have flogged their skill and imagination to sell such things as: cat food, stomach powders, detergent, hair restorer, striped toothpaste, aftershave lotion, beforeshave lotion, slimming diets, fattening diets, deodorants, fizzy water, cigarettes, roll-ons, pull-ons and slip-ons.

    By far the greatest effort of those working in the advertising industry are wasted on these trivial purposes, which contribute little or nothing to our national prosperity.

    In common with an increasing number of the general public, we have reached a saturation point at which the high pitched scream of consumer selling is no more than sheer noise. We think that there are other things more worth using our skill and experience on. There are signs for streets and buildings, books and periodicals, catalogues, instructional manuals, industrial photography, educational aids, films, television features, scientific and industrial publications and all the other media through which we promote our trade, our education, our culture and our greater awareness of the world.

    We do not advocate the abolition of high pressure consumer advertising: this is not feasible. Nor do we want to take any of the fun out of life. But we are proposing a reversal of priorities in favour of the more useful and more lasting forms of communication. We hope that our society will tire of gimmick merchants, status salesmen and hidden persuaders, and that the prior call on our skills will be for worthwhile purposes. With this in mind we propose to share our experience and opinions, and to make them available to colleagues, students and others who may be interested.

    In January 1964, one hundred copies were printed by Goodwin Press. Twenty-two designers, typographers, and photographers were signatories. That same year, the Civil Rights Act was signed into law by Lyndon Jonhson, outlawing segregation in the USA. There were race riots in Harlem, Philadelphia, and Singapore. Terence Conran opened the first Habitat store. The Vietnam War escalated. Mary Poppins was released by Disney. The death penalty was abolished for murder in the UK. Nelson Mandela made his ‘I Am Prepared to Die’ speech in an apartheid courtroom. Jan Tschichold designed Sabon. Charlie and the Chocolate Factory by Roald Dahl was published (with a wonderful cover illustration). Educationalist and writer, Caroline Benn was passed a copy of First Things First. She passed it to her husband, Labour politician and maverick, Tony Benn, who published it in full in his Guardian column. Following that, Ken Garland was invited to read the manifesto in full on BBC TV. What amazing times.

    By the ’80s many people, like me, had grown up with a love of the music of the ’60s, but no memory of the time. The counter-culture of the decade had been absorbed and distorted into mainstream memory: Flower-power; Hippies; Vietnam war protests; Civil Rights; Sex, drugs, and rock and roll. The Stones sang Paint it Black as we watched Platoon, going out to buy Zippos right after.

    2000

    By the late ’90s, the counter-culture I grew up with had been co-opted by corporate consumerism and woven into mainstream brands. From surfers to skateboarders and musicians to DJs, heros were willingly commissioned into endorsing the messages of consumerism. Designers were commissioned along with them. Culture was easy profit. If it was niche (and thus ‘cooler’) so much the better for parting youth from coin.

    The product developers, public relations consultants, brand gurus, ad agencies and design teams were so slick that most people seemed not to notice. After all, their heros lead the way. If people did notice, it seemed they quickly muscled past any twinge of loss and welcomed it, feeling validated. It didn’t seem to matter that it was to brand-build and sell gadgets or khakis. They barely noticed that their culture had become a lifestyle, or that their symbols were now just another transient fashion — one that would eventually be discarded by the new corporate curators they’d sold the rights to, who would then try to suck them away and onto to the next trend.

    I know this. That was me. I was there.

    In 1999, the superb Adbusters initiated a re-write of First Things First. Co-ordinated by Rick Poynor, it was signed by luminaries like Erik Spiekermann (amongst many others, including the original author, Ken Garland) and published in Emigre 51.

    Read the re-aligned First Things First 2000.

    (You may have to zoom Emigre’s squint-inducing 10px type.)

    Also, see the text of the Emigre article by Rick Poynor (PDF). It supplied many of the incidental facts here, and Rick Poynor illuminates the First Things First Manifestos of 1964 and 2000 much better than I ever could.

    2010

    It just so happened that I stumbled across First Things First as 2009 was about to become 2010. It was also just after Analog launched. Preceded by much navel-gazing on my part about what kind of work I wanted to do, for who, and why.

    When I read it, the first thing I thought is what about web design and development? How does First Things First fit? Rick Poynor’s comments on the 1964 original were thought-provoking:

    The critical distinction drawn by the manifesto was between design as communication (giving people necessary information) and design as persuasion (trying to get them to buy things). In the signatories’ view, a disproportionate amount of designers’ talents and effort was being expended on advertising trivial items, from fizzy water to slimming diets, while more ‘useful and lasting’ tasks took second place: street signs, books and periodicals, catalogues, instruction manuals, educational aids, and so on.

    Poynor goes on to say:

    Today, the imbalance identified by First Things First is greater than ever. The vast majority of design projects — and certainly the most lavishly funded and widely disseminated — address corporate needs, a massive over-emphasis on the commercial sector of society, which consumes most of graphic designers’ time, skills and creativity.

    I agree with Poynor who suggests that, ‘Design’s love affair with form to the exclusion of almost everything else lies at the heart of the problem.’ If there’s a legacy the ’60s left for me, it’s that everything we do is political and value-driven, from the products we buy to the jobs we take. Web design is no exception. If it is, where do we draw the line? At producing material for the intelligent design movement? Or perhaps designing insignia and making uniforms for the Nazis?

    I veer from accepting the political and economic status quo as the 1964 manifesto did. After all, it’s almost 46 years later, and the commercialisation doesn’t seem any less to me. In fact, to my mind, the barrage is ascendant.

    In Pynor’s article, author and book artist Johanna Drucker urges us to ask, ‘in whose interest and to what ends? Who gains by this construction of reality, by this representation of this condition as “natural”?’ In light of the current furore surrounding the Digital Economy Bill, that seems very close to what Tony Benn urged us to ask in 2005:

    What power have you got? Where did you get it from? In whose interest do you exercise it? To whom are you accountable? How can we get rid of you? Only democracy gives us that right. That is why no-one with power likes democracy. And that is why every generation must struggle to win it and keep it — including you and me here and now.

    We already apply our morality, politics, and sensibilities to our work in a multitude of ways. All the designers I know are subtle, thoughtful, detailed, scrupulous people by nature. It seems odd somehow that any of them would think their work as being apolitical. Or, to put it another way, that form matters more than content and the agenda behind it.

    1964 seemed like a much simpler time where the lines were much more clearly drawn between differing agendas. Culture had not been co-opted by commerce so ubiquitously. Advertising was not synonymous with design. The latter still seems somewhat true to me on the Web, too. But, with the increasing concern over commoditising relationships through ‘monetising’ everything, especially social networks, I wonder for how long will it remain so. Already the rather obvious message that design can improve profitability is at the core of how many people represent our craft; a step up from being seen as frivolous stylists, perhaps, but is it genuinely enough?

    Everyone needs to earn a living; me included. However, at the risk of being called naive, much like the signatories of the 1964 manifesto, I definitely see the need for a debate. Without being too precious about this profession I hold with great regard, web design (with development) is the filter between content and people. As designers and developers we have great power to solve problems, provide amenity and guidance, educate and enthuse. Surely we also have a responsibility, too. So, where is our own First Things First, 2010, the web manifesto?

    Two things stand out for me, re-reading this post:

    1. There is an imbalance in how we value design: Too much emphasis is placed on commercial work in publications, lauding style over substance. Content, presentation and interaction are interwoven and shouldn’t be examined separately. To do so infers that the substance can be ignored as long as the æsthetic is good.
    2. We must somehow help to open up the opportunity of public work to designers, and redefine the value of design away from either pure style, or profit. That’s the tricky one. The way public work is commissioned often seems constipated and self-destructive to me. I don’t have a solution but I have a feeling the large agency dominance is part of the problem, and co-ops part of the solution.

    At the end of my talk at Bathcamp, there was only one question that mattered, really:

    Given the choice, what work would you choose to do?

    The answer to that is, perhaps, all one needs to know.

    For those masochistically interested in the Bathcamp material: the rough slides with even rougher notes are available as a PDF.

    Share

  3. @font-face in IE: Making Web Fonts Work

    All Hallows’ Eve seems the perfect time for something a little spooky. Getting @font-face working in IE may just be spooky enough. As you probably know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. Fontin is one of them and I’ve built it into this example page:

    Before we get into the nitty-gritty of making this work, which you can skip to if you wish, I thought a little history and a brief summary of the current status of the web fonts debate might be useful.

    Web Fonts: Then & Now

    Web fonts have been with us for a decade. They were an original part of the CSS2 recommendation in 1998. Recently, the godfather of CSS, Håkon Wium Lie, brought them sharply into focus with articles in CNet and A List Apart. The ironic thing is, IE has supported web fonts using the Embedded Open Type (EOT) format since 1997. The problem was that EOT was a proprietary format, belonging to Microsoft. Not for much longer: it’s been submitted to the W3C and is going through the process towards becoming a web standard.

    Since the debate opened up, the web and type communities have both been busy discussing how the future will unfold. More collaboration between the disciplines would be beneficial to both, and I’d encourage any interested designers or developers to get involved with organisations like the Association Typographique International (ATypI).

    Recently, Bert Bos of the W3C paid a visit to the ATypI Conference in St Petersburg to meet with type designers face to face. His summary of the current situation is essential reading. The debate has continued apace on the ATypI mailing list, which unfortunately has no public archives. However, if you are member of the ATypI, you can see this summary about the conference panel on web fonts by Nadine Chahine that started the debate in earnest. Simply put, type designers seem anxious about @font-face linking making it too easy to steal a font. Both Microsoft’s EOT format and direct font linking are under consideration with EOT a favourite with many. However, rather than paraphrase a wide-ranging set of opinions, I’d encourage you to join the ATypI yourselves as designers and developers to participate or observe.

    If you have other favourite comments or posts about the future of web fonts, please add them to the comments.

    As a designer, I want a straightforward way of licensing and including fonts for my work. I will pay, respect the rights of type designers as I expect mine to be respected, then get on with the glorious business of merging content with type. It’s not as simple as it sounds, though. The licensing of fonts, and the protection of the rights of smaller designers in particular, is a sticky issue. DRM does not work, so what then? Richard Rutter has shared thoughtful insights which are very much worth a read. My view is that I would be perfectly prepared to pay a separate or extra licence fee to use quality fonts on the Web. I would have no problem selling this to my clients. Embedding or linking to fonts has to be straightforward though. I get paid to think about, plan and implement design, not grapple with obstructive software (more on that later). If fonts were delivered through a third-party web service as Richard suggests, the one proviso must be that it would have to be done by someone who knows exactly what it means to scale a service for millions of users. Like most designers though, I have very little knowledge of the real security and scalability issues, but hope to see a comment from a real security expert, shortly.

    User agents are currently taking divergent routes. Bert Bos’ summary reports:

    Mozilla has stated that they don’t want EOT. But they are not opposed to letting the browser check the license, as evidenced by the proposal to let HTTP headers carry license data.

    Microsoft has said that it is impossible for them to support linking to native OpenType as long as font vendors oppose it.

    Apple’s Safari has implemented font download with no checking of licenses. They said they are against EOT, but would not be against browsers checking licenses, e.g., using Mozilla’s proposal.

    Opera remarked that there are more existing and announced implementations for downloading native OpenType than for EOT. They conclude that the market apparently doesn’t need EOT and thus they see no need to support it themselves either. W3C’s limited resources should be spend on more important standards.

    That means that designers and developers have the same perennial problem: Two different implementations to achieve the same result. Safari 3 and Firefox 3.1 beta both support direct linking to OpenType (.otf) font files. Presumably Opera will soon. Only IE 4 to IE 7 support Embedded Open Type (.eot) files. IE8 does not, but will at some point. So, to see Fontin display in standards complaint browsers like Safari 3 and IE, we need to provide two separate fonts.

    @font-face Example

    The @font-face example uses Fontin Regular by Jos Buivenga — a free face kindly provided by Jos with a licensing permitting embedding with attribution. Jos also has many other fine faces available via his foundry site, Exljbris. The example is a quick one using a traditional scale, with all of the CSS available in the <head> of the file.

    1. Set the basic font-family:

      h1, h2, h3, p, td{
      font-family:'Fontin-Regular', georgia, serif;
      }
      

      Notice the 'Fontin-Regular' name — this is an arbitrary name that can be whatever you like. All it does is tell the browser when to apply the font file referenced in the @font-face rule.

    2. @font-face and .otf for standards compliant browsers:

      Ed: White space inserted for clarity.

      @font-face{
      font-family:'Fontin-Regular';
      src: url('Fontin-Regular.otf') format('opentype');
      }

      Note the 'Fontin-Regular' name, again. This rules basically tells the browser, when the @font-face is set to 'Fontin-Regular', use the font found at this URL.

      Screen sample of Fontin Regular in Safari 3 set at 16px with 24px line height from the example:

      Fontin in Safari 3

      When Safari renders the page, it will look for the font file, then render the text accordingly. There’s a slight delay as WebKit works. In the example you might notice that the text not requiring the loading of a font file renders quickly, but the rest is blank until the browser catches up. For reference, the Fontin-Regular.otf file is 32KB in size. Some font files can be much larger.

    3. Create the .eot file with WEFT:

      To do this you will need to download and install WEFT3, a Microsoft application for creating EOT files from TT fonts. WEFT is not able to create EOT files from an OTF. It must be converted to a TrueType file, first. WEFT is the only tool for this as far as I’m aware, although I believe there is an open source one in development. If it wasn’t for WEFT, embedding EOT files would be easy. What I want WEFT to do is convert the font to EOT, and allow me to create a subset if required. It does that, but in a nightmarish, frighteningly over-complicated way. Perfect for an All Hallows’ Eve entry. Here are a few tips I learnt the hard way:

      1. WEFT requires the URL of the page or site where the EOT font will be used. It will then ‘scan’ the pages by crawling the site to see what glyphs are used and try and create a subset of the EOT file accordingly. If it refuses to analyse a valid URL as it did for me, get granular and specify pages or sub-directories in your information architecture.
      2. If you’re using WEFT via Parallels and XP Pro, it may refuse to add some fonts in your windows/fonts directory to its database of available fonts. Try using a standalone PC if you can. I haven’t tested in any other virtual machine.
      3. Use the wizard to set up your project, but after that try it manually using the View menu item to see what fonts are available to convert, and the Tools menu item to convert them.
      4. WEFT will try to save the EOT file to a remote location. You can over-ride this manually to save the file wherever you please for you to upload yourself.
      5. Disable your original OTF fonts on your system before testing (obvious but worth a prompt).

      Be warned, WEFT is awful to use, in every way. It did not work for me running Parallels with XP Pro on a Mac. 7th Nov: After more experiments, Weft will accept TrueType (.ttf) files in Parallels. It also worked with the gracious help of Jon Gibbins and his standalone PC running XP Pro. Because it is so painful, I cannot give support for WEFT. You can try the Microsoft WEFT user community, but I can’t comment as to its usefulness, and I could not find any other support avenues.

      Hopefully, you now have an .eot file to use.

    4. @font-face and .eot for IE using conditional comments:

      Ed: White space inserted for clarity.

      <!--[if IE]>
      <style type="text/css” media="screen">
      
      @font-face{
      font-family:'Fontin-Regular';
      src: url('Fontin-Regular.eot');
      }
      
      </style>
      <![endif]-->
      

      These are screen samples from IE:

      Screen sample of Fontin Regular in IE6 set at 16px with 24px line height from the example:

      Fontin in IE6

      Notice the bar missing from the capital ‘A’ towards the end of the second line. The tyepface designer, Jos Buivenga is currently looking into the font hinting, with input from John Boardley.

      IE7 sample:

      Fontin in IE7

    See a full size Safari 3 screenshot, and IE6 screenshot on Flickr.

    That’s all! Try the example in different browsers to see how it works for yourself (but please don’t blame me for ClearType’s poor anti-alias at larger font sizes).

    Summary

    We have only a few web fonts with a EULA that permits embedding right now, unless they are free. Please respect the EULAs of any typefaces you try out until the type community resolves the issue for all commercial fonts.

    My feeling after doing this is that EOT has potential advantages in file size over OTF, but OTF files could always be edited (as far as I’m aware) to create subsets just like EOT. Although EOT is not a DRM solution per se, it feels like one. If it achieves widespread acceptance, no doubt some clever soul will be reverse-engineering an OTF file from EOT before too long.

    What we need to encourage designers and developers to use EOT today is a good tool to create EOT files in the first place. Perhaps even one hosted remotely, where we can buy a licence, convert the font to EOT, grab the same OTF subset for complaint browsers, and get the work using the typefaces we’ve always dreamed of. WEFT is not the tool right now to enable EOT usage. In fact it discourages it.

    Regardless of what security is implemented, the font file will have to be on the audience’s machine somewhere, even temporarily. ‘Defense in depth’ is a term used by web app security experts. It would seem that the question is how much depth will satisfy foundries and type designers, and what form that depth will take.

    As a designer, I can only speak for myself to say that if OTF and TTF were supported, regardless of how easy it was to steal the file, I would still pay as required by the EULA. I have a strong feeling the vast majority of my colleagues feel exactly the same.

    Share

  4. Flipped Types

    Typesetting-Printing Office. Digital ID: 1152640. New York Public Library

    Sometimes, flipping things around can be a useful mental exercise. It can raise a wry smile. An idle comparison between print and web typography was one of those times.

    Imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. With the help of a rendering expert, you specify precisely what device, screen, operating system, colour profile and browser the finished work will be viewed with. You test your work in that environment and make necessary adjustments. It’s distributed to the audience who see it exactly as you expect. That’s print typography.

    Now imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. Two files are given to the audience: one with content, the other with detailed design instructions. They pass both files to their printer. The instructions ask for a specific typeface to be used. The printer may or may not have it, but will never tell anyone, so you specify a few alternatives, just in case. The audience chooses the kind of paper to use, and what size it will be. They also tell the printer what personal preferences they want applied to the design, like making the text size smaller or larger. Your work is printed for them. You never see it. You’ve already resigned yourself to the fact that it will look different for different people. By testing your work in a broad range of environments before you sent it to the printer, you’d like to believe it will look good for most people, and adjust itself gracefully. Not to worry though, someone will probably tell you in no uncertain terms if you get it wrong. That’s web typography.

    Image courtesy of the New York Public Library digital gallery, entitled Typesetting-Printing Office from Working with the hands : being a sequel to ‘Up from slavery’, covering the author’s experiences in industrial training at Tuskegee (1904) by Booker T. Washington.

    Share

  5. An Ephemeral Site: Denna Jones

    Denna Jones is a designer, and we recently launched a site for her that is unlike any other that Jon Gibbins and I have done before. This is it:

    Screenshot of dennajones.com

    The evolutionary bit for us is under the hood, and to understand why, let me introduce you to Denna, herself.

    Introducing Denna Jones

    Denna’s fascinating to talk to because she is genuinely erudite. Her influences are as diverse as her roles. She’s a former Designer-in-Residence at Central St Martin’s College of Art and Design for the B.A. Architecture course. Currently, she’s Lead Artist for DLA Architecture’s Masterplanning Team, Deputy Editor of Art and Architecture Journal, and the Resident Curator responsible for delivering the arts strategy for the massive Devonport regeneration project. Most recently, Denna’s contributed to books like 1001 Buildings You Must See Before You Die and had an invitation to be the editor of a new tome in the series, 1001 Houses You Must See Before You Die.

    Luckily for us, Denna’s work with spacial narratives is often exploratory, so she was open to our newfangled experiments.

    A Web 2.0 problem

    Denna is also prolific around the Web. She documents her projects and travels using Flickr, and regularly reads, writes about, and observes Web culture as part of her work. So when she came to us to discuss a site it seemed to me she embodied a problem I’d been thinking about for a while: How can our domains be connected to our other personal accounts more naturally? Domains are our identity. However, much of what we publish is locked into other sites where we share it. It’s accessible by APIs at best, or clunky widgets at worst. Technical people can pull everything together but for non-technical people it’s not intuitive. Then there’s the issues of legacy content and copyright. Unsolved as yet, but looming. What will happen to all of our content in five, ten or twenty years time? Will we still have content strewn around the Web disconnected for the most part? Somehow we need to connect the dots. Maybe portable social networks are part of the answer, or Google’s OpenSocial. Whatever the answer, I wanted to include Denna’s existing content in her own site, and to make the future relationship between her Web activity and personal site as seamless as possible.

    Web services, say hi to dennajones.com

    The content on Denna’s site is delivered exclusively by Web services. We take advantage of the ability to share and manipulate data that those services provide to Denna, then let her choose what to publish on her site, and in what context. This is how:

    • Flickr is used to manage all images and some of the site copy direct from Denna’s account. That includes the main display images on the home page, the introduction copy on her work page, and the images and copy for projects. Work projects are managed via a specific Flickr collection, with each set being a project. This enables Denna to choose the display image and write a description that appears on the site. Visitors can also drill deeper via the project link to see other images that Denna has added to each project on Flickr.
    • Tumblr is used for Denna’s blog and her about page. The site archives her entries and allows access to tags and dates exactly like a conventional blog would. We also use tags to display different content around the site like the entries tagged with “projects” that are displayed on the work page.
    • Ma.gnolia is used for bookmarks.
    • Twitter is used for random thoughts and snapshots of her day.
    • Upcoming manages events.
    • Technorati is used for references to her posts in the wider blogosphere in place of allowing local comments which were considered but discarded.
    • Feedburner manages all feeds.
    • Google is used for site search.

    Jon Gibbins did the heavy lifting around the idea, using CakePHP and SimplePie to manage the incoming data. He also added functionality like Technorati reference counts, and the ability for Denna to refresh her site as soon as she published something elsewhere if she didn’t wish to wait for the automatic updates.

    Other small touches were also a pleasure to see unfold, like Denna’s footer image being her Flickr profile image, and the text describing her blog coming directly from her Tumblr byline.

    Denna’s Tumblr account is not linked because she wishes it to remain private.

    Tumblr posed the most significant problems. When we started development, tags were invisible on Tumblr. Entries could be tagged, but tags were not displayed anywhere for people to use. They were absent from the API. Jon Gibbins wrote a workaround and fired an email to Tumblr suggesting it might be good to give people some way of using tags. After a couple of weeks Jon came back to me and declared that although he hadn’t had a reply, the API had just changed to allow tag access. Perfect! We got an email a couple of days later from the Tumblr crew: Did we know that the API supported tags?

    Visual design, typography & layout

    I wanted the design to be a container to allow Denna’s own content to flourish. Although we discussed style, and helped Denna formulate her own house style, it was very much in her hands. Strangely, I had no reservations about this. Putting the choice of stock images in the hands of a client might seem risky to some folks; to me it was exciting, especially as Denna was so enthusiastic about having such an intimate level of control over her own site.

    Typography and layout have a touch of the Swiss modern using Helvetica Neue or Arial (depending on your platform) with a traditional scale. The layout is a hybrid—part fluid, part elastic — meaning it defaults to a 1024px viewport width, shrinks to fit 800px-wide viewports, but grows with browser font size until it fills the available viewport and then wraps.

    Information verbitecture

    The information architecture mostly uses verbs in the directory names—an idea that first surfaced with Chris Shiflett during our recent OmniTI design. It means that web addresses make up sentences wherever useful. For example, a blog entry has a URL of http://dennajones.com/writes/entry-title.

    HTML, JavaScript & microformats

    Plain old semantic HTML is used with CSS for styling. The interface was designed with accessibility firmly in mind; all JavaScript is introduced as a progressive enhancement to PHP-powered features like the slide-show for the home page.

    Microformats are used wherever appropriate: hCard for Denna’s contact details; hAtom for blog entries; hCalendar for Upcoming events.

    There is still more things we’d like to do, but in the meantime we’ve got a great head start and hopefully the beginnings of something special for an exceptionally interesting voice on the Web.

    Parting shots

    Working with Denna was inspirational. Her boundless curiosity, willingness to experiment, and professional skill made the whole process lots of fun. Her uncompromising belief in the ability of art and design to improve people’s lives makes her just the sort of person we need consulting on the future of our public spaces. It was a pleasure to give her a quasi-professional site that hopefully embodies the spirit of collaboration, personal creativity and expression we all admire. You can read more of her own thoughts on the design in her entry, Websites and the Science of Happiness. I’ll leave you with the opening line of that entry; it’s humbling to be though of in this way:

    “The designers of this website are happiness merchants.”

    Thanks Denna.

    Share

  6. A Site for Sore Eyes: OmniTI

    You may have seen the recent case study featuring the evolution of OmniTI’s brand mark. Work on their new web site started soon after that was finished. This is what we did:

    OmniTI index

    OmniTI’s CTO Chris Shiflett and I worked closely on every aspect of the vision, brand message, information architecture, copy writing and content. For me it was the best kind of arrangement resulting in a piece of work I’m especially pleased with. Along the way we developed the kind of relationship that I’ve come to treasure, making me feel like I work in a collaborative industry, rather than a service one.

    OmniTI Sketch mark

    Metaphors for the invisible

    Discussions around the new site made me think of two interesting design problems. Scalability and performance, security, development and infrastructure are invisible arts. Historically, companies have fallen back on metaphors to communicate what they do visually: Faux boxes of imaginary software; stock photography of happy people at computers; they never worked for me. From my perspective, OmniTI is one of the finest development companies in the world. They’ve written some of the seminal technical books in our industry. They work for some of the most heavily trafficked sites on the planet like Digg, Friendster, National Geographic and Facebook. Their contributions to open source are legendary, with their utilities being used by Yahoo!, amongst many others. When tackling email on a massive scale they built the world’s fastest mail transfer agent. To reduce what they are capable of to awkward metaphors seemed disingenuous. I wanted to do something different.

    Another significant problem was how to convey personality. People buy from people, especially in a service industry. The relationships we develop are priceless. Many developers in our business—especially those who attend conferences like OSCON where they often speak—are already aware of the people at OmniTI, but they themsevles don’t tend to shout about what they do. Part of the reason for this is the culture of the company itself: Relaxed and down-to-earth but jam packed full of some of the most talented people anyone could hope to work with. Excellence has become commonplace, making celebrating it feel almost un-natural. It just happens by default. So, the web site needed to show some leg, reveal their personality as well as their work, without forcing patterns of publishing on them that would not be maintained.

    These problems made the job interesting. I wanted to accomplish three specific goals:

    1. Make OmniTI accessible. Personalise the brand, reveal the company character, and the people within it.
    2. Communicate the scale, quality and depth of what they do to technical and non-technical people.
    3. Make the whole experience of researching and contacting them simple, easy and useful.

    Collaboration

    To try and accomplish the goals we took a novel approach to design. It might seem ad-hoc, but it was deliberately organic; we let everything develop collaboratively, at almost the same time: From setting the vision to requirements gathering, persona development and task analysis, through to information architecture and copy writing. It sounds insane, but with a condensed time-line and a lot of intellectualising to be done, it worked in a way that only a small agile team that knows each other well can do.

    Along the way we went through four related iterations of style. Each reflected a development stage in the multi-track process we embarked on. The staff started writing a personal note for their own profiles. Some chose to stay with the professional photos, others supplied their own. All of it real though and unfiltered by marketing hype. Read the personal note of Rob Speed to get a glimpse of what I mean. The iterations kept getting better. In fact, everything kept getting better. Nothing is ever perfect, but a feeling of constant iterative improvement is a joy in itself. These are some of the highlights from my point of view:

    Theme, copy writing & content

    The theme is deliberately textual. OmniTI is a company that manipulates data in ways that are so esoteric that sometimes I had a hard time conceptualising the scale, nevermind the method. Text is the prevalent form of web data. It felt right to focus on it.

    Early on I decided to drop almost all decorative images and anything that was not content from the design. The data, the typography, they became the decoration. That went hand-in-hand with the decision to let OmniTI’s people, work and clients tell the company story. We decided to have a dual section in the planet for official company news and relevant posts from the staff’s own personal blogs. For the rest of the site, any copy that didn’t reflect the spirit of the company was avoided, and that which was left would be factual, not hyperbolic. Any claims OmniTI have made are under-estimates, and therefore all the more exceptional.

    Tiered detail

    I wanted to find a way of communicating the scope of their ability in a simple way. The audience diversity made this problematic. When developing personas to identify who we wanted to reach, two stood out: The technician and the executive. Both have very different requirements from the site. Both required detail in different areas. The first answer to this was for the home page. To grab people’s attention, I had the idea to display the actual output of their work as data in real time. There were technical and disclosure issues. We settled (for now) on showing some meta-level data around the number of pages and people that OmniTI’s clients serve:

    Screenshot: 'last month we helped some of our clients publish 880 million web pages, seen by 93 million people.'

    This will evolve over time and also be stored in an archive for future reference. Even more importantly, it is no mere boast. The figures are independently gathered and conservatively rounded down.

    The next solution was to somehow ease all of the audience into the site, whether they were technical or not. The narrative pattern we developed I call tiered detail. At the first level, like the index or any of the main navigation landing pages, chunks of different data are labeled with headers that encourage page skimming to find interesting topics. Copy is short, terse, accurate. The second level, like a personal profile, is more detailed and specific but has contextual links to related second level topics. The copy has links to third level pages where the focus narrows further to provide the kind of detail some people might want. These third level areas can be on site or off site—we didn’t distinguish between the two. All detail is useful when you want it.

    URLs

    Both Chris and I love beautiful, clean URLs. So when he came up with the idea of using verbs rather than nouns in the information architecture we we quickly agreed to make it so. The outcome of a fair degree of debate and wrangling is the structure you see today. The about page is http://omniti.com/is, the work page is http://omniti.com/does, etc. Deeper pages have a URL that forms a sentence, such as:

    http://omniti.com/does/security

    All trailing slashes have been removed making for highly legible and beautiful URLs in any context. More traditional URLs are redirected to the verb, so people can still type http://omniti.com/about and reach the about page. If you wish to know more, read Chris’s post, URLs can be beautiful.

    Typography & palette

    Evolving an interface from a brand, the type choices of which I had nothing to do with, is always interesting. Trying to find compliments is fascinating, even more so in a design that relies heavily on type composition and treatment for decoration. I’ll pretty much let the typography speak for itself .

    Italic Baskerville ampersands in the byline

    Highlights for me are the raised initial used in headlines which I always see as an icon, my favourite Baskerville italic ampersand used in the byline on the home page, and other subtle treatments like the semantics of the page titles or contextual links. I used a traditional scale, body copy is set in Georgia by Matthew Carter with the headlines set in a Lucida stack.

    The palette is included in this section because the typography developed alongside it, and they are irrevocably linked. Or, I should say, they are tonally co-dependent. Although the palette is autumnal, it is a counterpoint to the season, and you may see us have some fun with it over time, but the effect will persist: Type highlighted by luminosity, regardless of palette.

    Layout, functionality & accessible Ajax

    The layout is elastic in every respect to a strict baseline grid. This served the narrative theme, splitting the content in to equal chunks higher in the architecture for skimming, resolving to conventional asymmetric columns deeper in.

    OmniTI contact Ajax

    Jon Gibbins did a sterling job implementing the JavaScript effects on the site. He chose jQuery and added some flavour of his own to make everything accessible with or without JavaScript turned on. That extends to the Google Map on the contact page which fills the expanding container as font size is adjusted. Jon also audited the site for accessibility generally, applying his uniquely pedantic but practical approach to support a wide range of disabilities, especially where the JavaScript is concerned. You can read more in his post, Accessible Ajax: OmniTI.

    All other functionality was handled by OmniTI, with Theo himself building an unbelievably quick search engine with Perl in about an hour, and Chris building out the CMS equally as fast it seemed.

    Experience & narrative

    As designers, we wear a multitude of hats. In the final analysis I think we’re experience designers more than anything else. In many cases we use design to tell stories, or help a story unfold. We create spaces in which enacted or emergent narratives exist and the OmniTI site is no different. Like all real tales though, there’s still much to be told. Hopefully they have a good starting point; an authentic opening chapter where the history of the last ten years can sit comfortably with the next ten.

    For my part, I hope the story is a joy to read. I hope the design is unobtrusive and becomes an ambient signifier that adds a little texture to the content. It is a design I would have liked to implement for Grow itself, so a lot of my own predilections went into it. I was lucky: The great relationship that we have, and the creativity of OmniTI, allowed my ideas some breathing space. We took a journey that resulted in a site that is re-markedly different to other technical companies. Some might view that as dangerous. I think the opposite is true. To me it was a great project to do. Hopefully you’ll find it interesting enough to enjoy. If that’s the case, keep an eye on it; there may be some more subtle changes to come.

    Share

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