Bureau

Here is a document I've been building over the past year while working on CSS files based on ems for dimensions.
Let's say you want the text in <div id="foo"> to have a font size of 14px, while its parent div has a font size of 16px. In ems, this translates as (target size)/(context size) = 14 / 16 = 0.875em. What I used to do was reach to the calculator app each time, and copy paste the result in my css.
At some point I realized I was often calculating the same sizes over and over again; storing these recurring sizes in a document allowed me to refer to it for a quicker copy&paste, resulting in a less tedious workflow. Project after project, little by little these tables completed themselves, and here we are today.

Formating decisions

The value is followed by a semicolon: placing the caret after the colon of the css rule, a simple paste will finish the line, no need to type the semicolon at the end. In the case of replacing an existing value, placing the caret after the colon and hitting command+shift+right arrow followed by command+V proved to be a smooth keyboard ride.

The target and context in pixel sizes in the comments are here for two reasons: it made finding the right value in this reference document quicker(1) and it's easier to get back in the logic of the file when you haven't worked on it for a while — it lowers the em abstraction bar.

The 16px column is the first one, as it is the one I have been refering to the most, given it's the default font size in html documents. The following columns respect the logical order, but only even numbers. Odd font size contexts are not referenced here because I haven't been using them in my designs.

The file is available here on GitHub, so feel free to fill the remaining voids, and improve it whatever way you may find.

Happy em sizing everyone.

(1) the eyes don't have to grab the correct line from the target values in the left column and then follow this line to the adequate context column.

If you're using xScope and Photoshop CS5, there's a good chance you've come across this annoying disappearing behavior "bug" detailed here by the Iconfactory team.

Good fortune got me into an apps and windows configuration where I could magically get the xScope tools to work as intended : a Safari window opened with "Top Sites" selected sitting under the PS doc you want to inspect. Somehow, Top Sites bugs the Photoshop call to OSX sending the PS doc behind all apps. It can either be a new Safari window or a new tab; but it can't be a blank window, it has to display Top Sites. You're then free to grab, move and adjust rulers, loupe and frames as it should be.

It's not ideal, as you have to get your apps in the proper order with repeated alt+tabs judo moves, but at least it's a solution we can work with until this odd behavior gets fixed. Hope this helps and restores sanity in your workflow.

It's mid day on Ghuznee street in downtown Wellington. The no-ozone-for-you-folks sun is hitting hard on a mix of striped shirts business types and common people on their lunch break, and you have to stay in the shade to truly enjoy this cool breeze coming from the vast Pacific ocean. Cars and trucks make their way, regularly washing ears with their muffled clinky engine roars.

"It's a little cafe"

So said Mike Brown, co-organizer of the Webstock conference, who kindly accepted to meet a webby french tourist who solicited him for an interview via email a month before. It was only two weeks before the 2011 edition of this remarkable conference would start, but he and his partner in crime Natasha Lampard said "sure, let's meet", took time out of their busy schedule, and sat with me to answer a few questions I had for them.

How it started

First, I wanted to find out how they were able to attract and publicize Webstock among the great speakers available in the webdesign industry. Because here’s the thing: New Zealand is far far far away, and it’s tiny tiny tiny. Get a map of the world if you’re not familiar with its location, and ask yourself if you’d choose this country to host a webconference where you want the very best people to speak at. It would be as if the best car show you could get to was set in the middle of Newfoundland, or if the best cinema festival was in Ulan Bator, Mongolia.

Mike: originally it wasn’t Webstock, it started from a desire to share webstandards best practices with people. We started a series of meetings in Wellington, we emailed people and said "Are you interested in coming to an evening where we have some speakers about webstandards?". We ran probably five or six meetings through 2005, we’d have people talk about accessibility, content, design, all sort of topics related to the web. There seemed to be quite a following, we had 50 to a 100 people from Wellington at those meetings. That was trackting along and then Webstock itself was kind of a... we just sort of pulled up with the idea of a conference about the web just a couple of years after it started where people were going in Australia, in America and so forth...

Natasha: there was really nothing for people other than the little things we were running and a lot of mailing lists... there wasn’t really anything to bring people together, to share in the same space.

Mike: so we thought that would be cool to do that in NZ, and also we were big fans of lots of people in the web industry, people doing great stuff with html and css

Natasha: usability

Mike: so that would be fun to have them here and hang out with them for a while.

Natasha: Mike and I certainly couldn’t afford to go to these places to meet these people, so the only way to make it work was to bring them to us.

Mike: so Tash said we should have a web conference in NZ and we should invite Tim Berners Lee. So we dropped a list of all these people we’d love to come and we wrote to them and most of them said yes. So suddenly we’ve got to run a conference, all these people are coming and we have no experience and no money.

Natasha: it was quite funny our emails too, looking back on them : "Hi, we’ve never run a web conference before, you don’t know me..."

Mike: do you still got those ?

Natasha: I know that I’ve got some of them, it would be funny to step back in time. But you know, this kind of very cheeky emails, very much from a fan "I love you work, would you consider coming to NZ?". I think we were very fortunate because of the lure of NZ, it is quite strong for some people, so that certainly helped us. But also we were perhaps a little different from some other conference organizers. We were out for a good time, and we really just wanted to celebrate all this stuff. We must have been a little unusual.

Mike: thinking back it’s one of the reasons that we managed to succeed, we hadn’t really run conferences before, we weren’t in a mindset of "this is what you need to do and this is how it should be and this is how it should feel".

Natasha: but after saying that, we had been to other conferences and the memories of things we didn’t like was very strong. This is what we don’t want, and everything else should be open for debate, and let’s give it a whirl.

Mike: so we kinda did like we do websites I guess. We thought of who’s the customer, who’s the people paying money to come. How can we make their experience wonderful? So right from the emails, the website they go onto, the swag we give them, the bags and the t-shirts, the registration...

Natasha: some little things like you’re at a conference and you try to look at your program, you have to take it out of your little plastic thing, unwrap it and sometimes it can be quite huge, then you try to fold it back up... Little things like having it around your neck, but have it up the way you look at it so when you open your name badge. The program is presented to you the way you’re looking at it, rather than having you to swap it around. Trying to think about the experience we’d like people to have, and what’s the experience we ourselves would like, and then starting to design a conference that way.

Thibaut: and I guess these nice experiences made the Webstock reputation.

Mike: definitely, and we also wanted to treat people speaking here really well. They would come all the way to New Zealand to be at our conference, so we would cover all their expences, we would pay them, we would treat them really well here. And I think they responded to that. It’s also how you treat people in New Zealand already, really.

Natasha: if you treat them with respect, if you actually do respect these people, you want to give them the love that they deserve.

Mike: so they would go away having had a great time and they would tell others about it, write about it, or introduce us to other people. It kinda grew that way.

Natasha: we have never been the type of people to go from mainstream PR, or any of that advertising stuff we feel quite uncomfortable about. So it has been on the down low and all the reputation about Webstock being so great is not coming from us. We’re super excited about it, but it’s other people being our advertising medium. If they liked it, they’ll talk about it. It’s the word of mouth thing which is way stronger than any advertising you can take out, which is often overpriced. Our goal is to have people like it, love it.

Thibaut: can you talk about the very good article by Bruce Sterling recently published on the Webstock blog?

Mike: he was a speaker in 2009, and when the whole Wikileaks thing blew up, I remembered some of the things that he said in his talk, that quite struck a nerve to me. He’s obviously a great writer who would have a really fascinating take on the Wikileaks thing. So we just emailed him and said "would you be interested in writing a blog post?".

Natasha: we’re so fascinated by the Wikileaks thing, about Julian Assange, he’s such an enigma. And to have someone like Bruce, who is also an amazing guy, write about it was just, even for personnal reasons, really exciting.

Mike: we didn’t know what to expect, and we received this huge amazingly written article, put it up and it just went wild.

Natasha: the site went down. At 11 o’clock at night Mike was up with the server guy working on it, and thought it was fine at 1 o’clock. I got up at 4 just to check on it, and it was down!

A lady, walking past us whispers: "Happy Webstock!"

Mike: who’s that ?

Natasha: it’s my friend :-)

Mike: oh...

There are no reasons not to.

Thibaut: the webpage for the 2011 Webstock edition featured arguments about its advantages, for people who participate, but also for these people bosses. What do you think about the state of self education in companies?

Natasha: before I got into the web, I used to work for a computer training company. And yet the crazy thing was I never got any training. I used to get very — there’s a webstock bag!

Mike: just there (pointing at a guy walking on the other side of the street).

Thibaut: it’s everywhere.

Natasha: if you’re in the medical profession, or you’re flying planes or something, no one is going to stop training you, because you need to know this stuff. So why is it that some employers will not invest in their people to get the best out of them. They want these amazing sites, they the best out of their people, yet some bosses are not prepared to pay. And I find that curious. But one of the cool thing is that people who do face that battle between Webstock and their bosses, a lot of them are actually paying for it themselves. There was one girl who couldn’t afford to come last year – she’s unemployed at the moment – and she’s saved up money over the last twelve months to be able to afford to come. By and large, bosses are really great, and Webstock is becoming more accepted by managers, saying "if you’re going to go to one event, then it’s going to be Webstock". But when people still face that battle, they’re actually investing in themselves for their personnal development.

Mike: to me there are three aspects of it. There is this thing you’re going to tell your boss "If I go to somewhere like Webstock, I will come back being able to do parts of my job better because I’ve learned new techniques, I’ve learned where things are going, what sort of things will work". And especially we run in depth workshops, full day or half day about HTML, CSS3, content strategy or web performance. So you do that and you will be better in an aspect of your job. It will be immediately efficient, when you’re back on monday. Then there’s the connection with people. You can’t qualify that in advance, because you don’t know who you’ll be meeting, or if you’ll meet anyone. But chances are you will, and you’ll have conversations when something might come up.

Natasha: and it could be that this conversation, in a way, could be more powerfull, or more thought provoking than some of the talks that you’ve heard.

Mike: you may meet someone your company can partner with on some project, and they know about them now. The third thing, and it’s more personnal, is that you’ll come back inspired. You’ll hear stuff you weren’t expecting to hear but that will trigger something and you’ll be reminescent of why you’re doing all this stuff.

Natasha: it’s very humbling when you receive emails from people saying "I went to Webstock ’08 where I met so and so and so, and we’re now in a startup". There are actually stories of people doing something cool out of the Webstock experience.

Mike: I went there, on the other side of the coin where we had to try and convince bosses of the need for training or time off or whatever. It just seems crazy that you wouldn’t do that because of the benefits you get out of that.

Learning at work.

Thibaut: managers tend to view design work as a linear process, just as an assembly line job, aren’t they? If you sit fourty hours at your desk and bring that much profit, you should bring at tenth of that amount in four hours of work. And if you don’t «work» for four hours, you’re causing a profit loss of this much.

Mike: oh, yes. The thing in the web, or design, is that with insights you have, you can save hours or days or weeks of work. Because it’s not a thing that takes that long to do, you get those insights outside of work, you get them when you’re talking to people, at a conference, or reading.

Thibaut: should there be a more structured way to get training, like once a week, or one hour a day? We have time for lunch, we could have time for training.

Natasha: a lot of the people I know of who are in-house designers, they do actually seize every moment it seems, any down time, to continue their training. It might just be reading A List Apart or following someone on Twitter. A lot of people do take time at night, it’s part of their relaxation time. They are hooked, this is not a job, it’s a way of life. Everything is about their online existence, and aiming to the Web which is so mighty and powerful.

Mike: yeah, it’s a good point. For a lot of the people who seem to be doing good stuff on the web, it’s not a job. Well it is a job, but it’s not a 9 to 5 job.

Natasha: it’s incidental, their work would get to the web anyway because they love it, they love the possibilities of it, that we’re only just so young and we’ve got so far to go. When you think of people like Matthew Buchanan, they want to soak it up. So, structured training would almost be not appropriate for them, because they are at a level that maybe someone would find it hard to come up to where they are.

Thibaut: but how can a manager can take this into account when he’s trying to organize his team’s efforts?

Mike: this is probably why we don’t manage people, but if we were managing people, it would be more like...

Natasha: a trust thing.

Mike: ...we actually don’t care when you work and what you do. We care about getting something finished.

Natasha: like output oriented rather than clock watching.

Mike: there’s a whole movement, ROWE - results only work environments. The idea is that the employer just cares about the results, and the employee, if he wants to take a day off because his kid is sick, or he needs to chill out, he does that, as long as he’s committed to getting work done. It’s that, rather than you have to sit at your desk for eight hours because you charge on billable time.

Natasha: the requirement of that is a level of passion or interest in what you’re doing. If it’s oh-um, then you’re probably happy to just do the eight hours and then «see you later, it’s my time now». But the people we have the privilege of hanging out with in the web community are people who don’t stop.

Code like it’s 1999.

Thibaut: how can you make sure you’re up to date with the constantly evolving knowledge in this field?

Natasha: it’s hard. For usability, which was my line of work for many years, it’s quite dificult, because there’s not one standard, you’re dealing with human beings. The only thing that you can do is have relationships with other people who are in the same industry, and who are as interested, excited and passionate about it as you are. Swapping notes and sharing information with them, you have this feedback loop.

Thibaut: until the end of WWII, NZ was a very isolated country, forcing people to deal with all sorts of constraints while building. Is this Kiwi inginuity still around today and does it have an impact on the creation of kiwi digital products ?

Natasha: I think it does exist and there are groups of people who love that and really promote this reputation, and then there is another school of thought where people ask why should we have these constraints. It’s great that we have this ingenuity, but we don’t necesseraly need to be facing this battle, we can have more investment to allow people to work. There are lots of talented people, there is money... We could have more creativity if we had better broadband for example, it would allow people to do more, to connect more freely with other people.

A line is drawn.

Between an amateur and a pro: my sound recorder battery died at this point, my sincere apologies to you for this lack of preparation.
An extra fifteen minutes of conversation are consequently lost, where we talked about the good quality of kiwi web design and graphic design, and about how we (try to) cope with the amount of information we are fed with nowadays. I see this as a sign that I need to fly back to New Zealand, sit at Superfino and chat a little more with them with a recharged battery.
In the meantime, you really should have a look at the Onyas site and the featured sites to get an idea of what good kiwi web design is today. Also, don’t forget to set some time to watch the 2011 or past conferences that are available online for free. You’d be missing out a lot.

My sincere thanks to Mike and Natasha for their time and their contagious passion for the web.

When developing CSS style sheets called with media queries, you will be more comfortable if you can identify two things at a glance: what's the queried context you're in, and how a given element is behaving with the properties you've been editing.

Let's say you have 4 contexts to work with: S, M, L and XL for example. While you choose the break points trigering calls to these contexts's style sheets, it's handy to vizualize in the browser when the switch is happening. Johann Brook's method is very clever as it uses the :before selector to generate a block above your page; targeted widths are displayed in plain text when you access the different contexts. While clever, displaying a large block above the layout can prevent you from fine tuning another element just below it. Also, do you really need to be reminded of the display sizes when you are the one editing them in the markup? Adding a background color to the body or any other relevant element proved to be as useful and less obstructive.

Adding a background-color to any element I wished to style has worked very well for some years now, and a little variation makes it useful to both track one element and display the queried context: pick one colour for each context and use shades of it for the different elements you need to visualize. 0to255.com by @jamesmadson makes it really easy.

Here is a fictionnal webpage presented in the stages you could go through using both of these methods.

• One – markup styled with common properties and background color applied to the body.
• Two – background colors applied to the elements you wish to track while you build your contexts style sheets.
• Three – context style sheets built.
• Four – final result with contexts displayed, for presentation purposes.
• Five – final result.

Johann's idea is very helpful when you need to collaborate and display the break points you choose. I'd reduce the footprint of the generated content though: less text along with an opacity brought to 0.5. Also, having the position set to fixed allows you to keep the context displayed if you have to scroll down.

body:before{
	content: "M";
	padding: 0.5em;
	display: block;
	text-align: center;
	background: yellow;
	opacity: 0.5;
	position: fixed;
	top: 5em;
	left: 5em;
	z-index: 99;
}

While we're at it, if you're using CSS Edit (and you should anyway), don't forget that you can merge your media queries style sheets as tabs in one window, and have your common styles opened in another window beside it. I'm only suggesting it because while I was working on Bureau's CSS, I played a lot with Exposé instead and felt stupid when I realized last week I could have used tabs.

If you'd like to comment or share some tricks you use when building media queried pages, link them to me via @thibautsailly and I'll add them here.

Desktop image by Hector Simpson.

The interface design focused twitterhood of my timeline got really excited a month ago, when Push Pop Press released Al Gore's Our Choice. Teenage groupie girls excited. Statements of the book as we know it being a thing of the Past were made. From people I decided to follow. Good thing there were some beers and a weekend after that.
Before having a closer look at the amazing work Push Pop Press did with this app, here are some comments about this fantasy dead book thing.

The paper book is an object so optimized that it's not going to fade away any time soon. Here's what a book since spinal binding was invented allows us to do, and what any digital incarnation should be able to provide to deserve the name of Book Terminator:

• Displaying at a glance how much there is to read. I haven't read many ebooks, but each time I start one, I haven't got a clue about how much time it will require to be read – it's not a nice feeling.
• Displaying how much more there is to read. That's kind of addressed with the status bar at the bottom, but it's expressed as a proportion of a value you can't really figure out.
• Bookmarks – done.
• Notes – done.
• Easy access in space and time. A book sits on a shelf and will remain there waiting for you to come back to it if you wish to do so. It doesn't matter if it's next week or in twenty years, as long as you don't move house, it'll be there with all the notes and bookmarks. Will the Kindle or iBooks offer the same ease and legacy? Allow me to doubt A LOT.
• Lending. Knowledge is meant to be shared and spread. Profit is a corollary to this, not the other way around.
• Owning a copy signed by the author, or by a friend who made a gift. The emotional bond that tangible artefacts provide between individuals over space and time is cruelly lacking today in the digital sphere.

Because of these lacks in function and emotions, I tend to perceive eBooks as a convenience: you can buy them from your couch, they have no weight, and they don't age. You give away all the sexyness, presence and reliability of a nice paper book for accessibility and zero impact on your bookshelf. As it has already been said, eBooks may replace a certain category of books, the ones you would get rid of when you're packing before moving, but it doesn't look like paper books are going away any time soon.

So what's the deal with "Our Choice"? What has Push Pop Press done differently for it to generate so much passion and unrestrained commentaries?

Meaningful gestures

There is something about the navigation in this book app. As Josh Clark said, buttons are a hack, and the Our Choice app is a living proof: pinching out means "more detail about this", pinching in means "I'm done with these details, get me back to the bigger picture". The interaction model is exactly the same as the iPad Photos app's one, but for mixed media: you're zooming on chapters just as you zoom on your photo albums, you zoom on charts or animations just as you zoom on your photos, and you swipe to the next chunk of text as you would swipe to your next photo. Two simple and self explanatory gestures are used to control all the app, pinch and swipe.
Pretty close to the single flip gesture found in paper books, it's remarkable. They applied to textual content gestural evidence found in one of the iPad's core app, something that was before everybody's eyes but only them (it seems – correct me if I'm wrong) have noticed. Even Apple's own iBooks doesn't use this model, very well played.

But as meaningful as they are, I can't see how they could be useful on a fiction book, or an essay. Paged prose just need a forward/backward gesture, that's it. This interaction model seems to be better suited to content where details other than text provide better understanding to the reader - educational books for example. Charts, audio, maps, updates... Cell biology would be easier to grasp with the help of some interactive 3D models. Learning about the history of Paris would be great with overlaying maps combined with time sliders.

Mixed media

Producing a compelling work in this format is a team effort, it's not for a single person with ideas, a notebook and a pen. Al Gore didn't sit in a library by himself, wrote the text, picked the right iconography, produced the interactive info-graphics and 3D models, shot and edited the videos, recorded and edited the sound, et cetera. It would take a rare breed of author to produce a work worthy to be published with such a scope of media. Does such an individual even exist? People in their twenties today may be more fluent than older generations in these media, real authorship still requires a lot of insight and practice in each of these fields. It doesn't come easy.

Time speaks

With the level of polish we can witness on this app, we get a sense of how important motion design is to our interfaces today. Not only because it helps mimic reality and can get the user to conceive a mental model of how the different parts of the UI might work, but also because they convey meaning and emotions. Depending on its speed and dynamic, a fade in can be dramatic or energetic.
Interface design happens more and more in four dimensions: X, Y, faked Z (for now) and time. Knowledge in film editing should be taught to aspiring interaction designers; not how to use editing software, but how film editors think and work.

Flow

"As a result, Mr. Gore goes much farther in his mission — persuasion — than he could on the printed page alone."
D.Pogue, New York Times.

Allow me to disagree with this – and it may just be that I'm starting to be an old fart – and point out a downside of this particular app. Has anybody who got excited about this book app finished reading it? Or did you get distracted and switched to Twitter to praise the app and opened it twice since then only to read a couple of pages and browse the nice pictures? The app format may be more entertaining, its navigation model more rewarding for interface designers, but did we get the message better? Not sure about this.

If you don't want to listen to something, or if nobody's forcing you to, the message won't get across, pinch/swipe or not. I found the text to be too often interrupted by images or other calls. Every couple of views my attention was required on another level of discourse, sometime three times on a single view. These interruptions are not always in sync with the prose, resulting in a jittery reading experience where the reader's flow isn't respected enough.

The 80's are over

I feel insane when I see how much time I spent discussing about the form of this book, while the message that it holds is so much more important.
It's a bit sick to be discussing about proper pixel arrangements when so much depends on what's said in the book itself. If the interaction model of this app represented 1 point in benefits to human kind, reading and getting Our Choice is probably worth 1 000 points, a scale that Push Pop Press wouldn't probably contest.

By understanding how our actual way of life is suicidal for mankind, we will be more willing to act on it, and quick. Just as knowing about health issues related to smoking helps you quit, Our Choice helps you make decisions that will impact your quality of life and make sure our grand kids will have one. Less pleasure, better future. Fly less, avoid instant buys, look for expensive durable local goods you'll pass on to your kids instead of cheap disposable crap from overseas, and be considerate of your cloud requests. Uncool? Read Our Choice and think again.

Here is the translation of an article published by Andy Rutledge on his Design View blog. Although I don't view creativity and pragmatism that exclusive to each others in the practice of design, it is important to recall as often as possible that design is a process you call for when you have a problem to solve, and that solutions are not coming out of nowhere. The way you look at things has to be educated for you to be able to identify the true nature of the problem, question it, and evaluate the viability of the solutions you propose. Creativity comes in, fortunately, in the production and shaping of possible solutions, but without the knowledge anchoring them in a practical reality, they haven't got any value. In a field where graphic design, typography, ergonomics, kinematics, techniques and industrialization find themselves involved, the amount of theoretical knowledge to acquire is substantial. And I don't think this is pointed out enough. This article reveals the existing gap between creativity and this knowledge.
A big thank you to Andy Rutledge for this article, and for allowing me to publish its translation here. You can either read it in its original state, or practice your french a little.

Voici la traduction d'un article publié par Andy Rutledge sur son blog Design View. Bien que je ne partage pas complètement la dichotomie qui est décrite ici entre créativité et pragmatisme, il me semble important de rappeler dès que c'est possible que le design est un processus auquel on fait appel pour résoudre un problème, et que les solutions ne sortent pas de nulle part. On doit dans un premier temps former son regard pour bien identifier le problème, le remettre en question, et surtout pour évaluer la pertinence des réponses apportées. La créativité intervient – heureusement – dans la production et la mise en forme des solutions possibles, mais sans de solides bases qui les ancrent dans une réalité pratique, elles n'ont pas beaucoup de valeur. Dans un domaine où se mêlent graphisme, typographie, ergonomie, cinématique, technique et industrialisation, le savoir théorique à acquérir est conséquent, et je doute que ce soit assez mis en avant. L'article ci-dessous est un brillant révélateur de la différence qu'il existe entre la créativité et ce savoir. Je remercie Andy Rutlegde d'avoir eu l'idée de cet article, et de m'avoir autoriser à en publier la traduction ici.

❦

Il y a quelques années, j'ai publié un petit test pour à la fois engager une discussion dans notre profession, et pour que les lecteurs puissent auto-évaluer leur compréhension des fondamentaux du design. Il a été – et reste – très populaire auprès de mes lecteurs. Voici un autre questionnaire autour du design, avec cette fois une audience plus ciblée et un but plus spécifique.

Les notions de créativité et de design sont trop souvent confondues chez les designers, comme chez les non-designers. Cela me dérange, car c'est l'une des idées reçues qui permettent à des prétendants créatifs mais sans savoir-faire de se considérer comme des professionnels du design alors qu'ils ne sont rien de la sorte.

La créativité, ce n'est pas du design. La créativité n'a rien à voir avec le design. La créativité n'est contrainte par aucune loi, règle ou restriction ... ce qui est sans doutes pourquoi c'est aussi enivrant (parfois jusqu'à s'y méprendre). Le design, d'un autre côté, est entièrement basé sur les mathématiques, la psychologie, la perception humaine, et toute une série de règles strictes et de lois qui peuvent être contournées par une poignée de personnes très compétentes seulement. Ceux qui ne seraient pas en territoire connu avec ces règles, ces lois et ces sciences associées ne sont en aucun cas des designers.

Pour aider à illustrer les différences entre la créativité et le design, j'ai mis au point ce petit questionnaire qui abordent certains fondamentaux du design – et non de la créativité. Ceux qui baignent dans la créativité, et non le design, seront perdus. Ceux qui ont acquis les bases du design ne rencontreront que des notions élémentaires.

En observant le log de mes referrers au long des années, j'ai pu constater que mes articles sont régulièrement inclus dans les cours de design dans les lycées, universités et centres d'apprentissage de part le monde. Pour continuer dans ce sens, j'espère que ce test pourra être utilisé par les professeurs afin qu'ils aident leurs étudiants à comprendre et identifier la différence entre la créativité et le design. Trop d'entre eux passent leurs diplômes en ayant une idée vague de cette distinction, dans le cas où ils en aient une.

Le test

1. Dans l’exemple ci-dessous, quelle disposition apparait comme étant créée par l’homme, et laquelle apparait comme étant organique ? Pourquoi ?

2. L’orientation de cette composition est-elle horizontale ou verticale ? Pourquoi ?

3. Laquelle de ces deux compositions évoque l’inconfort visuel ? Pourquoi ?

4. Suite à votre dernière réponse, par quel autre moyen pourriez-vous évoquer l’inconfort dans une composition ou une mise en page ?

5. Compte tenu de ces deux dernières réponses, quels sont les éléments que vous prendriez en compte pour mettre en place une expérience visuelle confortable ? Pourquoi ?

6. Pourquoi l’asymétrie est-elle généralement plus conseillée que la symétrie dans une mise en page ?

7. Quels mécanismes pourraient vous aider à compenser les effets de la symétrie dans une mise en page informationnelle ?

8. Décrivez les raisons spécifiques de communication pour lesquelles vous utiliseriez des coins arrondis plutôt que des coins droits dans une mise en forme.

9. Décrivez les différences de messages portés par ces deux structures :

10. Suivant la logique de la question précédente, pourquoi utiliseriez-vous un dégradé comme texture visuelle ou une gradation dans la mise en page ?

11. Quel est le but dans l’utilisation d’une grille dans une mise en page ?

12. Puisque les relations entre les objets des deux groupes ci-dessous sont les mêmes, qu’est ce qui a changé dans la figure B ?

13. Décrivez la ou les différences de message visuel primaire porté par les figures A et B.

14. Décrivez au moins trois différentes façons de guider le regard de l’observateur dans et au travers d’une composition, en empruntant un chemin particulier. Quels mécanismes peuvent être utilisés à cette fin ?

15. Dans l’image ci-dessous, quel objet influence l’autre ?

16. Est ce que l’influence que vous percevez implique le mouvement ou est-elle de nature statique ?

17. Compte tenu de votre dernière réponse, pour quel(s) effet(s) utiliseriez-vous l’influence d’un objet graphique ou structurelle sur un autre dans une composition ?

18. Laquelle de ces deux lignes communique la vitesse ?

19. Dessinez une forme géométrique masculine, et une féminine. Qu’est ce qui distingue le genre entre ces deux formes ?

20. Comparez la figure A et la figure B. Quelles fonctions sont assurées par les éléments structuraux de la figure A ? Sont-ils nécessaires ? Pourquoi et pourquoi pas ? Existent-ils d’autres moyens d’obtenir le même effet ? Si oui, quels sont-ils ?

21. Comparez les deux mises en page ci-dessous. Laquelle possède une hierarchie de l’information claire ? Comment cela est-il accompli ? Par quels autres moyens pourrait-on obtenir le même résultat ?

22. Dans laquelle de ces compositions le logo est-il le plus grand ?

Explications

Voilà. Ce sont les bases, le plus simple. Quand bien même, il est important de noter que même la plus fructueuse des créativités ne vous sera d'aucune aide pour ce test. Vous noterez que plusieurs de ces questions ont plusieurs réponses possibles, et pourraient souvent s'articuler sous forme de dissertation. Ce format est important, car c'est la meilleure façon pour les étudiants de démontrer leur assimilation, et pour une classe d'ouvrir un dialogue vers des problématiques similaires.

Vous noterez aussi que les réponses ne sont pas fournies ici, et ce pour deux raisons spécifiques. La première est que les enseignants en design les connaissent déjà et n'en ont donc pas besoin (et cela compromettrait l'usage de cette page dans leurs cours). La deuxième est que je tiens à ce que les personnes qui se croiraient designer et pour qui ces questions restent sans réponses comprennent le manque de compétences dont ils font preuve. Dans ce cas, si les réponses étaient disponibles ici, cela atténuerait certainement le sentiment d'urgence à finir leur éducation qu'ils doivent ressentir. Mon souhait le plus sincère est qu'après avoir fait le constat de leur incompétence, ces personnes cessent de tromper leurs clients sur la qualité de service qu'ils leurs proposent et s'engagent dans une formation en design digne de ce nom pour acquérir le niveau de compréhension nécessaire à la pratique du métier qu'ils prétendent aujourd'hui avoir.

J'ai pu constater au travers des discussions que j'ai eu avec des designers que les lycées, universités et centres d'apprentissage proposent souvent des formations incomplètes, et forment donc des designers incomplets et mal préparés. Je n'ai donc aucun doute que beaucoup de designers "très éduqués" échoueront à ce test. Et si les formations sont directement responsables par cet état de fait, les étudiants en design ne le sont pas moins. La responsabilité de votre éducation n'incombe pas à votre professeur, elle vous incombe à vous uniquement.

Enfin, si vous êtes de ceux qui êtes d'accord avec le fait que le design est une profession "de créatif", vous devriez sans doutes réévaluer le rôle que vous attribuez à la créativité dans le design, ainsi que la pertinence d'associer cette étiquette à votre profession.

Si vous avez trouvé le test facile, félicitations. Dans le cas contraire, et si vous souhaitez être un designer, je vous suggère de recommencer à plancher avant de prendre en charge un projet de design.

During my 2009 & 2010 holidays, I took the challenge to avoid any LCD screen wherever I went: no cellphone, no email, no IMG35002.jpg snapshots, no TV and no Web. This was such a refreshing experience that back in January, when the french labor laws made a lucky bastard out of me and let me enjoy a continuous four weeks leave from work, I decided to enforce this zero pixel policy again*.
Here are a few remarks about how it felt to be back in front of a glass panel emitting light in an organized fashion after about a month.

Eye strain

This was something I knew but didn’t really want to admit: in the evening, when I’m reading on my laptop or iPad, my eyes are hurting a little. After 8-9 hours spent in front of a 24” screen blasting light in my face at work, my eyes feel a bit like two sun dried tomatoes. They are tired. As I’m writing this, after work, I can feel it. They beg me to close this down and read some comics or something. But there is so much to discover, enjoy and tinker on these screens that I blind myself to this physiological Fact. And hope that we won’t discover in fifteen years that this habit was actually very very bad, making your sight half of what it should be when you’re seventy. Nothing to do about it though, really, but I sure wish brilliant engineers are making progress on 60fps color eink display technology so that we’ll be able to code CSS4 in plain sunlight. I’m this >< close to get a Kindle so I can read my Instapaper on it.

The info hose

On a typical day, not checking what the people I follow on Twitter have to say feels like I’m going to miss a good insight or a nice thought provoking / game changing read. With this feeling in mind, I was curious to find out how much I really had missed after four weeks off, and how far behind the flock I would be. As it turned out: not so much.
You don’t need every drop spitting out the info hose. Any relevant information will find its way into some relevant container there to stay and to be reachable later. Big news tend to ripple and leave more noticeable traces than a tweet.
This article from Robin Sloan came back knocking when thinking of this.

The desktop metaphor

That was the weirdest of all: for a good fifteen minutes I had a very awkward feeling about the computer interface itself. Almost like when I first used a pc. Everything felt very binary and jerky, on or off, opened or closed, white or black, visible or not. It missed a sense of continuity and suppleness analog things have (cars on roads, film cameras, watercolor on paper, hand writing, clouds in the sky). It was like walking in ski boots after a month of walking in sneakers. And yes, it was macOSX 10.6.
Then this feeling vanished, I was back to keyboard shortcuts and contextual menus. But this was very much worth to feel something like this, it had a strong impact on how I look at what I do all day.

Still loving it

I was a little reluctant about this experiment; not because it would impair my options during these holidays (asking people for directions is a very nice alternative to Google Maps, and quite "social" too), but because going back to my daily concerns about line height and fadeOut timings after so long could, afterwards, seem futile.
But when your efforts are geared towards making complexity more discernible, decision making quicker and learning easier, your role in today’s world has not to be perceived as futile. It doesn't matter if you're not actively working towards solving the world's mess we're in, if your work can make common problematics more soundable, it will have some impact in the end.

Recommended

Spending a month offline is becoming a luxury for most of us, but I would recommend to any person involved in building screen based products to plan and devise in advance an extended period of time where no pixels cross their sight no matter what.
For what happens during this period of time, and for what happens when you’re back.

* it was made easier because She had a smartphone we could rely on for phone calls, and quick web accesses on wifi.

To my surprise (and satisfaction), the design of this blog seems to have got the attention of a lot more people I would have hoped for. This article is for the curious among you as it details the ideas and choices gone into the conception and the process used to get Bureau on its feet, back in september.

First, why this publication? My other blog, Artificial Horizon, despite posting being very sparse lately, is still active. It's a place where design as a process is the main topic, and interface / interaction articles found there way in there. But as interaction design has become my daily concern, I needed a place to talk about it exclusively; this is how the need of Bureau came to be.

Content first

The metaphor I had in mind for what the reader would feel when loading the page was as if I was handing her my last article on a printed white page, as nicely typeset as possible, and very simple. The first and easiest thing I want my reader to have access to is the last ideas I felt were necessary to express.

Only after that should he have the means to find out more via different navigation elements, get to know who writes this, et cætera. This is why I chose to have an illustration acting as the back-to-home button for the site instead of a word: the first thing you read is the title of the last article, not the name of the blog and its tagline. This is also why the navigation is placed down in the footer, while being easily accessible from the top of the page by clicking the info "i" in the right corner. Knowing that I wouldn't post often here, chronology and categories were sufficient enough to find your way through the posts — no need of a real navigation list on top.

Time, yours and mine

Enabling comments means spending time filtering spam, reading them and replying to them, and as a consequence means less time for other nice activities life offers like cooking or learning how to code in Obj-C. Some readers see this as being closed to counter arguments, especially when I get into rants, but it really is because I want to lower the amount of time Bureau is taking from my other interests.

I love discussions, but I also love having a good meal on my table at the end of the day, and a good meal doesn't cook itself. So there. The Twitter is ideal to send a quick feedback that won't consume a lot of your/my time. And if you feel like it's not enough, post a more detailed thought on your blog and send the link in, I'll be happy to read it while stirring this Bourguignon beef. Sorry if this is disappointing, but you have to start somewhere if you want to cut on the info hose.

About your time now : I'd like to respect it as much as possible, so I thought of displaying the reading time for each article. Writer for iPad came around with this feature so I wouldn't have to read aloud and measure the time myself for each article. But then, knowing the time each article takes from your life may not be as useful as it sounds. You can estimate that by scrolling to have an overview of the article's length.

What could be more useful for readers is a sort of a grade announcing how much time on average reading this blog would take them if they decided to become regular readers. It could be expressed in minutes per day or per week, as in "be aware reading this blog will take 8 minutes of your life each day if you subscribe to it". That may be a good feature to have on RSS readers, if only as a sanity check monitor of your subscriptions. None of these two options are in place for now, but I'll be looking into how this ratio could be dynamically calculated in Movable Type when I'll find time to (I'm not a programmer, yet).

Responsive design

Having read the A List Apart article and seen some well executed instances, how can you not be convinced it's the way to go to present your content to different type of screens or devices ?

Media queries help you target a range of screen sizes. The usability way of saying this is: they help you target different usage contexts. It's not only about how to fit such content into that much space, it's also about redefining the content hierarchy for each different context. The informations and interaction handles you need upfront are not the same wether you're visiting from your smartphone during your daily commute, from a tablet on your couch or from your 24 inches desktop at work. We shouldn't be thinking of it as a way to extend or compress a default presentation to larger or smaller screens, but more as way to adapt our voice and interactions to different situations. For this blog, which has little different types of content on its landing page, it's not much of an issue. But for more content heavy sites, viewing the use of media queries from this angle can really help you to shape up rewarding experiences for the user.

In Bureau's case, the design of the large screen layout came to be when realizing that if I wanted to respect text formatting best practices, the article's width, or measure, couldn't get larger as you'd extend the window's width. For reading comfort, a line of text can't be too long: a maximum of 75 characters is recommended. As a consequence, widening the window is only going to add horizontal white space; what to do with it then? The choice of having an illustration as a title lead the way to the answer: bigger. Illustration. Using perspective in this alternative version allows to add depth to the layout.

Body text font size is getting a 2px upgrade in the large screen layout, as when using big screens, we usually sit a little further from them. The background color is also slightly evolving from layout to layout, preventing the page emitting too much light into your already strained eyes. For a page with a white background color, when the browser window widens, its brightness rises accordingly. So I made the background color dimmer and dimmer as the window's width gets larger. It's not scientific at all, and I might need to adjust my color values to fully achieve my goal, but it's a start.

For the iPad version, thumb scrolling is a key interaction to keep in mind for the design : you should use at least one inch left and right margins to prevent your readers from hitting a link in the text body when they only want to scroll. As media queries allow it, orientation can be responded to with an appropriate style sheet. If you're visiting the site from an iPad, you'll see the larger illustration in the landscape mode. What you'll see too is that when you go from portrait to landscape, the page's width doesn't resize automatically to the width of the screen, and you have to pinch to zoom out. I have long thought I was doing something wrong but I came across this tweet from @filamentgroup and learned that it was a bug from iOS, not my code being unsufficient to cover the case.

Building it

The site went from ideas to sketch to html/css mock up to Movable Type in that order, with no other steps in between. Here are some pictures I took from the notebook I used at the time:

The html/css prototype is pretty much like the first article published here, all in its latin glory.

I decided to use Movable Type because I already had it installed on my server to run Artificial Horizon, and knew my way around it. The pages served are static so the server is not doing too much work: I guess it uses less power per page served, so it's kind of green.

Next up is the switch to html5, and getting custom layout features called for each article categories. And some easter eggs might or might not find there way too.

John Nack linked to a video on his blog today about Adobe's work on CSS (thanks to @jasperhauser for the link). It demonstrates complex and dynamic text wrapping on a mobile touch screen, and pretends to "enhance Webkit for better typography".

The example is so technically remarkable, the result so miserable in a design sense, and the communication strings so entangled it's comical.

Technically, shaping a text block organically in CSS today is a time sink, and it's not dynamic at all. It has to be custom made, and the markup has to be adjusted too much to reach the intended result. Consequently, having a CSS rule establishing some shape relations between two blocks and letting the browser deal with the rendering issues will allow more creativity in layout design. Congratulations to the Adobe team for building this and hopefully contributing their brain power to Webkit.

However, you can't decently use this with the current state of browser justification rendering if you're serious about typography and graphic design. The example on the video shows a text crippled with holes and rivers. The resulting text very uncomfortable to read, as much as this video was to watch (by the way, it's called a tripod, you fix the camera to it and then the image stops shaking). Enhancing typography? How about some work on justification rendering first? Less impressive than text flowing around a giraffe, but it would actually "make the web a better place", and make this demo more convincing to practicing web designers who care about legibility.

As for the communication part, there is a name which, because it is omitted with so much efforts, can only be noticed: Apple. They are working with Google to enhance Webkit, not Google and Apple, the originator of Webkit. Their demo about text flow would have been much more convincing, and would have made more sense really, on a tablet sized device like the... iPad. And the use of a giraffe must refer to the Pages for iPad demo - or is it a common reference in layout design, like the teapot in 3D modeling?
This mix of untold and omitted but obvious references to Apple shows a lack of voice control surprising for a corporation like they are.

Adobe is trying real hard to be on the picture hand in hand with every single cool kid around these days: tablet publishing, "HTML5", web typography, and now Webkit. It looks more like desperate tries to solve a branding problem rather than a genuine effort to solve users problems: a sad waste of talents.

Update: I've left a comment on John Nack's blog post

Any builder, wether he builds a house, a cabinet or an interface, needs an absolute minimum set of tools which will allow him to prepare his work, get through it, and then check it along some given milestones.

Having spent a fair amount of time in a metal workshop, I have learned to love and identify good tools. To a point that getting in a hardware store feels as exciting as going in a nice restaurant. Good tools for metal work are expensive, so you have to take your time picking the right ones and prioritize your purchases.
The first thing you need is to be able to measure correctly. Without parts having the correct dimensions, you're going nowhere. The logical second is to mark what you've measured, so you can process it. Then you need to position correctly and check the parts of an assembly against a design.
The quality of these tools will determine how long you'll be able to use them. And because with time you'll learn to manipulate them and read them better, it is important to choose durable tools. Your work will be more comfortable, you'll save time and worries, because you have practical and reliable tools.
An expensive scriber – swiss-made-like expensive – will be better because it will remain accurate and will survive you if you take good care of it. Your ruler should be well printed and/or carved so it stays legible for a long time, even in low light. Your square should be the toughest you can get because if its shape changes only slightly, it's no more a square. Your tools define what you can do, the quality of your production, and the time you'll spend working.

This detour to a hardware workshop is the closest experience I would compare the use of xScope to. Building an interface is not unlike building with metal or wood or plastic, in that it requires you to measure, mark and check your work. xScope does that on the screen, providing you with lots of measurement options and saving you time. If you want to design webpages in the browser, it's a requisite.
Anybody doing interface design on a mac has to have it. I would recommend to anyone doing interface design on a PC or on Linux to get a mac just to have this tool at hand and eyes, as it seems no decent equivalent exist on those platforms.

Also, it is a great way to observe and learn from the graphic work of others, just as reading source can learn you lots about markup and css methods. If you like Dribbble, you'll love Dribbble + xScope.

This is not an advertisement, I'm not getting any money back if you go buy it from here. I just thought this little gem doesn't get as much praise as it should. Thank you Iconfactory & Artis Software, you make our days better.