Blog Category: uncategorized
Content AND Presentation
In a couple of weeks, I’ll be heading off to the Web 2.0 Expo in Berlin to talk about the role of typography in the Web 2.0. I don’t mind telling you I’ve had a hell of a job researching this one. I feel the topic is standing alone in a track dedicated to a variety of topics related to user experience and implementation. I started off thinking that I couldn’t do this. Designers who are looking to work with social networking applications or rich media applications, are rightly concerned with social connectivity, a ‘web a data’, and other such blue-sky thinking.
This is a brave new world and surely it’s no place for a stuffy old practice such as typography.
Not just fonts
Most people, not just designers, think of the practice of typographic design as choosing and manipulating typefaces. For sure, that is part of typography, but it doesn’t begin and end there. Ellen Lupton says in her book ’Thinking with Type‘, ‘Typography is how language looks’.
Where does typography fit in
Rich Rutter and I gave a presentation on typography at SXSW earlier this year. As part of the closing comments, we discussed how typography should be everybody’s concern. From editors and web producers, to designers and developers, good typography should be everyones concern. Maybe that’s a little idealistic and my guess is that most of the blame for typographic design not begin considered is down to process.
In Jesse James Garrett’s great book ’Elements of User Experience‘, Jesse outlines the five planes of user experience: Strategy, Scope, Structure, Skeleton and Surface. If you haven’t already read this book, you should go and get a copy right now, settle down with a good cuppa and work your way through it. It is a book that has changed how people work. And that is good thing. Mostly.
I may be wrong in how I’ve interpreted this, and by no means do I wish to discredit Jesse’s work, but I feel that the methodology that is described, along with the technical movement of separating content from presentation, is having a detrimental effect on typographic design and art direction. I’ll tell you why.
Typography is the look and shape of language
Good typographic design tells a story. It works at a micro level such as typesetting, and typeface selection etc. But it also works at a macro level. Macro level typography is about layout, rhythm and whitespace. But it’s also about content and the story the designer is trying to tell through the type. This point brings me back to Jesse’s five planes.
The top-most plane is Visual Design. In the book, Jesse discusses typography as font selection (in relation to branding mostly). Sure, elements of typographic design belong in this plane. However, I feel typography spans these planes. In fact, typography goes all the way down the second plane; Scope. Pigeon-holing typography in the surface plane is implying that typography is a visual practice. It’s not, completely. Typographic design is information design. As Emil Ruder once said:
Typography has one plain duty before it and that is to convey information in writing.
Information has to be shaped to create entry points and exit points. It has to be broken up, moved up and down a hierarchical scale in order to be perceived in the correct way. It’s a designers job to really get to grips with the content and this is where designing with type for the web gets really difficult.
Art Direction doesn’t happen on the web
At this stage in the development of Web design, we have become, I think, engrossed thoroughly by the practical difficulty (and the legitimate challenges) of achieving aesthetically rewarding user interfaces. As a result, our focus has become trained almost exclusively on designing platforms, on investing our innovation efforts within the infrastructure of our design solutions — in navigation conventions, mnemonic devices, user inputs, system feedback, etc. And we’ve given up, at least for now, on the opportunity to innovate within the presentation, the shaping of visual constructions specific to a given piece of content.
It’s the last four words that interest me. As we’ve moved towards a model of separating content from presentation (both technical and in process), the designer has lost the relationship that they should have with the content. Designers working in the ‘Surface’ plane make the content legible and on-brand, but we aren’t telling stories with it. How can we when we don’t know what that content is?
I’ve worked with some agencies over the past year who see the separation of design to a surface layer as a given. It’s sad, but the amount of times I’ve been asked to design a ‘theme’ is on the increase. On one hand, that is a triumph for things like Web Standards, but on the other, design, and typography is being left as the icing on the cake. And that brings me back to web 2.0.
Typography has an important place in the web at the moment. Social interaction, and how to design for it, it a hot design topic in Berlin (and my guess is it will be in SXSW). But don’t forget that the medium of social interaction is language, and the way language is shaped and looks is typographic design. Web 2.0 is all about typographic design.
Blueprint. A CSS Framework.
Over the past year or so, the industry has been making some great inroads into streamlining some of our processes. We have Microformats for standardizing how we mark up certain data. John Allsopp’s Web Patterns is gathering pace and recently Tantek et all started work on solving the ‘why do I always have to re-enter my user data in every social networking app?’ problem, or the easier to say, Social Networking Portability. These are all great and everything, but they have data at their core, not the presentation of that data. Until recently, we didn’t have a usable system for creating layouts.
That was until a Norwegian chap called Olav Frihagen Bjørkøy released a CSS framework called Blueprint last Friday. The key difference between this and other frameworks is Blueprint has been created from a typographic design basis.
There are frameworks being used. Yahoo’s is one of them. I’ve tried using it in the past, but I’ve really struggled. It’s way too bloated (it’s huge!) for my needs. According to Olav, this was one his gripes too. He’s therefore created the Blueprint framework with these features in mind:
- An easily customizable grid
- Some default typography
- A typographic baseline
- CSS reset for default browser styles
- A stylesheet for printing
- No bloat of any kind
What a list! Now, if you just put the first point aside, the core features of Blueprint bring together some of the best typographic design thinking on the web over the past year or so. Eric Meyer’s reset code is in there, Richard Rutter’s Vertical Rhythm theory, Jeff Croft’s ideas on managing a CSS framework.
Going back to the grid—and this is what really interests me—Olav has used Khoi Vinh’s theories and practice on grid design to great, practical use. What is so important about this CSS framework to me is that it has been designed to solve a design problem, not a technical problem. As all great systems, it has been designed to help and guide the designer. As you can tell, I’m already a big fan.
Download it and Use it
Mark Boulton Design are hiring!
That’s right. The time has come to ramp up. We’re looking for an exceptional designer to join our Cardiff based studio. You will be based in South Wales and work out of our studio in beautiful Cardiff Bay.
You will work on a range of challenging and interesting projects—from web apps to branding—for companies large and small. You need to be creative, passionate and enthusiastic. You should be thorough, with a keen eye for detail bordering on obsessive. You read blogs (you probably write one of your own). You know your way around Web Standards, in addition to the usual desktop apps. You will have a minimum of three years experience. Pay level, and details, will depend on experience.
If you fit the bill, we’d love to hear from you. We’re in a hurry though. Deadline for submissions is Monday 13th August. Interviews will commence the following week.
Strategising about how to create more Spare Time
We’re all busy. I know that. Just indulge me, okay?
For the past month, I’ve been chasing my tail and it’s beginning to show. The permanent four o’clock shadow; the dark rings under my eyes; and the ability to fall asleep at the drop of a hat—something I’ve never suffered with before.
This morning, I went along to the Cardiff Flower Market with The Wife at the incredibly ‘un-weekendly’ time of 7.15am. Whilst bathing in the early morning sunshine, I was trying to think about how to create more time so I can balance off the crazy time of it recently. I reached some sort of conclusion based on a book I read last year—The Power of Full Engagement—which was recommended by my best mate, Phil. The conclusion I reached was; it’s not about how much time you have, or how you use it, it’s about finding balance by adding routine and triggers.
Power of Full Engagement can be summerised as being about managing energy—not stress, or time—is the key to a balanced, happy life. Oh, how simple it sounds. By taking note of your body—when you’re tired, unwell, or in need of a boost, whatever—and acting upon it instead of ignoring it. Many people sing the praises of having a 20 minute nap in the afternoon. This is what the book is talking about, in part. Putting small routines and triggers in place throughout your day to achieve a more balanced approach to your daily life.
Shoes on. Shoes off.
When I started freelancing this time last year, I worked at home. I carried on until a couple of months ago and, on the whole, found it quite easy. One of the little tricks I got from the book worked incredibly well in providing a little bit of mental separation between home and work.
In the morning, I’d say cheerio to The Wife, put my shoes on and walk around the block. I did this every day. When I returned, I didn’t take my shoes off. That was key—I felt like I was walking to work and whilst at work, I kept my shoes on. In the evening, after work, I’d take them off. Creating this psychological trigger, by instilling a strict routine, helped me cope enormously by being in the same four walls every day. Of course, now I’m lucky enough to be working in an office 25 minutes drive away, so it’s not too much bother.
Where’s the Time
Like I said at the start—everyone’s busy. Being the Director of a small business—as many of you are—you’ll understand I’ve got quite a lot to do. I’m the salesman, the accountant, the receptionist, the designer/developer/art director, and finally the tea boy. I need some help. I’ve decided to hire another designer (I’ll be posting a blog post shortly about that—in addition to an ad). I’m hoping that will help me with my time. And what time I do find myself with, I need to start managing it better, by managing my energy better. To do that, I need some routines and triggers.
Normally promises to yourself are made at New Year, but I’m going to make some now. I need more balance. To get that balance, I need to start doing the things I enjoy again in my ‘spare’ time: Boxing/Martial Arts, Angling, Surfing/Snowboarding. These pursuits have one thing in common—they require you to be ‘in the moment’. In boxing, or any martial art, if you’re not in the moment, you’re going to get hurt. The same is for surfing or snowboarding. Angling is a little different; you just won’t catch anything.
So, this afternoon I’m going to dust off the bag gloves and head down to the gym. I’m going to find a weekend I can go angling. But, before all that, I’m going to write a job ad for a designer…
Well, it took three days but markboulton.co.uk is back and working. Phew. I just hate the uncertainty of changing hosting providers. So much hassle for such a little thing. I’m currently changing a domain for a client of mine over to Dreamhost from BT. What a saga that is turning out to be.
Firstly everytime I speak to BT I get a different answer and speak to a different person. Secondly the DNS team, who I need to talk to, aren’t a “customer facing” department, so I have to talk to someone who clearly hasn’t got a clue what i’m talking about.
All I want to do is transfer a .com domain. That’s it. You’d think it was something they’d do everyday. The last time estimate I got from BT for changing the domain was 30 days! 30 days! I then lost my rag with the bloke on the phone. True, it’s not his fault blah, blah, blah but this shouldn’t be this painful.
Anyway, once again the ball is in their court as I’ve requested they unlock the domain so Dreamhost can pick it up. Why have I got a nagging feeling that this may prove difficult for them…
The Myth of Navigation
Fascinating article from “Design by Fire” outlining interface design. Particularly interesting points on the Amazon e-commerce interface and how things could be improved by removing the interface from the browser. A good read if you have 15 minutes.
I’m due to give a presentation this week, following my time in Texas, regarding accessibility in websites. I’m currently writing it so, i’m doing quite a lot of research. I thought i’d note down some interesting/useful sites here so I don’t forget them mainly!
Hours of fun with the Subservient Chicken.
Good food, good service, good idea
Last week, after ranting a bit about Tesco’s fruit n veg, a flyer came through the door advertising an organic fruit n veg delivery service - what a stroke of luck!
We had our first box last week and we’re still trying to get through it (they were rather large and included several mutant parsnips).
Strongly recommend it though.
Just some links
Mainly so I don’t forget them myself…
Joe Clark’s SXSW presentation on accessibility
George Olson’s Persona Toolkit
Spooky Girlfriend V1 - XHTML generator
Doug Bowman’s SXSW presentations, apparently FIR is officially no good
Lots of other methods to replace FIR, all of which have good and bad points.