Mark Boulton Mark Boulton blog. 2019-07-12T00:00:00+00:00 Mark Boulton Weeknotes 9 2019-07-12T00:00:00+00:00 <p>I'm not doing very well at these week notes but I do have a reason for this month-long lapse. Last week was La Marmotte in France – a cycling event I'd targeted last year – and for the past month I've been preparing the best I could. That meant moving into a period of overloading in my training – lots of hours of intense work in an effort to increase my lactate threshold and prepare my mind and body for a tough day cycling in the French Alps.</p> <p><a href="">La Marmotte</a> was a brutal ride. Three '<a href="">Hors catégorie</a>' climbs: <a href="">Col Du Glandon</a>, <a href="">Col Du Galibier</a>, and <a href="'Huez">Alpe D'Huez</a>. The the <a href="">Col Du Télégraphe</a> thrown in for good measure. 178km. 5500m of climbing. Thankfully, on the day, the weather was on our side. A relatively mild day out on the bike for France in summer at just 28C. The week before was in 40's.</p> <p>But, I did it. In just over 10 hours and finishing right in the middle of the 8000 riders. I didn't really <em>enjoy</em> it to be honest. That's the wrong word for this kind of thing. The climbs were very long and very hard. Thousands of riders ascending in painful silence. There wasn't even a sense of 'we're in it together' camaraderie. This kind of measured effort – to ride up 35km of 8 degrees gradient – requires quite a bit of concentration it turns out. Thinking about your breathing, that you're eating and drinking enough, and mentally knocking off the kilometres as you go. It was a strange feeling being in a mountainous valley surrounded by thousands of cyclists in complete silence but for the odd grunt of effort.</p> <p>No, I didn't enjoy it but now I'm starting to feel proud of myself. This time last year, I was diagnosed with a common heart condition for endurance athletes, Atrial Fibrillation (although it was never confirmed and measured and I haven't had a recurrence). This has made the training over the last twelve months, and the completion of this event, even more special. Despite these setbacks, and with the help of my coach, I stuck to my training and it paid off. Now to think about next year...</p> <p>A couple of things caught my eye over the last few weeks, and they were both from Basecamp:</p> <p><a href="">They are hiring a Head of Marketing</a> and this post outlining the role, expectations and place within the organisation is about as good as it gets.</p> <p>Today, Ryan released a book on their site called <a href="">Shape Up</a> outlining modern product delivery. It's good, but I will say – like Basecamp's other books – it's written from a place of their own experience. Which is absolutely fine given they run some very successful, sustainable products. I'd say this type of delivery is only possible with the right environment. With the right chemistry of the team, and <em>exactly</em> the right leadership supporting it. It'd be interesting to earn if the advice in the book works in other places. But, read it anyway. It's jammed full of common sense.</p> Weeknotes 8 2019-06-19T00:00:00+00:00 <p>Nine months preparation and training. 400km ridden with over 10,000m of climbing. Many thousands of calories burnt. Last week was a big week.</p> <p>After my big cycling goal of last year, riding the <a href="">GF Ventoux</a>, I knew I had to focus my mind and subsequent training on another goal. It's certainly not for everyone, but I'm the type of person who needs structured exercise towards a clear goal. When I'm putting in hours and hours on an exercise bike in the depths of winter, it helps with the pain. This year, the goal is – was my coach, Tim, put it - 'A biggie'. <a href="">La Marmotte</a> is an organised ride in France where you ride over three mountains and finish atop one of the most famous climbs in the region, Alpe d-Huez. To get me in tip-top shape for that goal, a few friends and I organised a trip to Gran Canaria to find our mountain climbing legs.</p> <p>Gran Canaria is a rock. A massive, ancient stratovolcano, that collapsed millions of years ago leaving a tortured maze of canyons and steep mountains. It rises from sea level to just short of 2000m in 40km. It also turns out it has some of the best, and worse, road surfaces I've ridden on.</p> <p>We'd planned for a day on/day off programme where we'd be taking in four of the island's most popular climbs: Serenity, Soria, Pico de las Nieves, and the wonderfully titled Valley Of The Tears. The latter climb is reputed to be one of the hardest climbs in Europe.</p> <p>The week before I headed out there was busy with work and training and I manage to niggle an injury to my left quad from last year. I was apprehensive that this would need careful management throughout the week, but with a couple of days rest the inflammation settled. As the week in Gran Canaria progressed, the riding got harder but I'm pleased to say I felt better and stronger too. On the last day we climbed Pico de las Nieves and despite cramp up the first climb of the day, I felt stronger the closer to the summit I got. The last 20 minutes of the climb I recorded my best sustained power at the lowest effort of the whole week.</p> <p>A few days before that ride, we did the Big One; the Valley of The Tears. A 28km climb from sea level to 1500m with the last 11km section averaging 11% with some brutal sustained ramps of between 15 and 20%. I swore. A lot. It was a hot day – 41C in the sun – and we all drank at least 5 litres of fluid throughout the day. But the views in the isolated valley were worth the effort. Almost entirely uninhabited, the road snakes its way past dams and up valley walls. Hairpin after hairpin of unceasing gradients the silence is only interrupted by the odd cry of a circling eagle. That's when I could hear them over the noisy battle in head between pushing hard up the climb or getting off for a nice snooze under a tree.</p> <p>It was hard. So hard, in fact, I've forgotten most of it. The human brain is clever like that. But was it worth it? In three weeks time I'll know. La Marmotte will probably take me between 8 and 10 hours at a steady pace. I'm not planning on riding to time, but to just get round the thing and make space in the noisy battle in my head to try and look around and enjoy the views over the iconic mountain passes. Until then, it's back to the hard training and the last push.</p> <p>Some things caught my eye over the last week:</p> <p><a href="">Mary Meeker</a> has been at it again. The thing that did catch my eye in this report was the bit about customer acquisition. It's costing more to get them, and they are not staying long enough to pay that cost off. Indicative of a crowded market? Fussy customers? Either way it leads to unsustainable growth.</p> <p><a href="">Facebook announced its currency plans</a>. This article was a good overview as to how this affects cryptocurrencies more generally.</p> <p><a href="">Remy</a> launched <a href="">Webmention app</a>. Coupled with <a href="">this article</a>, I may well have a stab at integrating web mentions on this site.</p> <p><a href="">How to section your HTML</a> is a fantastic article on the fundamental structures of HTML. I learnt loads.</p> Weeknotes 7 2019-06-04T00:00:00+00:00 <p>I'm sat writing this in Frankfurt airport after a whirlwind visit to Heidelberg for a day of work onsite. As much as travel can be tiring and disruptive – and this last week has with a visit to my parents up North and then a camping trip with friends – it's also a time when I can get some space to think. Which is nice.</p> <p>Last week Emma and I had an early celebration of our fifteenth wedding anniversary. We've now been together for twenty one years. Quite an achievement, we think, so we deserved something nice. As we were visiting my parents near Manchester we thought we'd take the opportunity to visit the <a href="">much praised</a> <a href="">Where The Light Gets In</a>.</p> <p>I grew up on the outskirts of Stockport in a little town called Marple. Stockport was once a powerhouse of manufacturing during the industrial revolution. In fact, entrepreneurs throughout the region drove much of that era. The byproducts of this time can be seen and felt all through the town. From the imposing <a href="">Pear Mill</a>, to the dominating <a href="">brick Viaduct</a>, one of the largest brick structures in the UK. But times have changed for Stockport. When I was a kid, we used to go shopping there and it was always rammed full of people. And raining. Always raining. But it was a vibrant, thriving town. Then, during the 90's, the rot set in. Shops started closing and people disappeared. Currently, it's estimated 40% of shopping units are unoccupied and boarded up. But maybe Stockport’s fortunes are changing.</p> <p>I've been to a few good restaurants over the years, but this was the best meal I've had. Not just the food, but the location and bright juxtaposition of an exciting little restaurant set against the backdrop of a dying old town. Maybe this little spark is enough to rekindle Stockport's fortunes. Who knows.</p> <p>Some things caught my eye over the last couple of weeks:</p> <p><a href="">Jeffrey</a> writes about how many of us are feeling. He writes just so bloody well! When he tells me &quot;you've got this&quot;, I believe him.</p> <p><a href="">Playdate</a> is a little handheld gaming device from Panic. Looks very cool, especially the crank. I wonder what the games will be like though.</p> <p><a href="">Going Critical</a> is a fantastic article on how things spread. Littered with simple effective examples, I spent a good thirty minutes lost in those examples.</p> <p><a href="">Javascript in 14 minutes</a>. Javascript is just one of those things that my brain refuses to absorb. Try as I might, it just won't go in! This article dented my brain, though. Good stuff.</p> Weeknotes 6 2019-04-26T00:00:00+00:00 <p>I missed writing a week note last week, and it’s a little late in the week for this note to be this week’s note. This is a fortnight note, then. Clear? Good.</p> <p>The last two weeks has been punctuated by a rather lovely couple of days holiday in Snowdonia, North Wales. The UK was fortunate over the last week that there was a slight shift in the jet stream which resulted in five days of unseasonably warm and dry weather. The unfortunate side effect of this is that it accelerated flowering of several tree species culminating in a perfect storm of tree pollen. It was so bad I couldn’t really work out if I had a cold, or it was an allergic reaction. Grass pollen is my thing, you see.</p> <p>The <a href="">place we stayed in Snowdonia</a> was nestled in a valley on the south side of Snowdon just north of a village called <a href="">Beddgelert</a>. The English translation of this is ‘Gelet’s Grave’ named after the resting place of Prince Llywelyn’s faithful hound. <a href="">Go and read the story</a>. It made my daughter cry when we saw the grave. The statue made Charlie bark. Silly dog.</p> <p>Work continued either side of Easter. I’d like to say we’re working on some cool stuff. I mean, we are, but the real, valuable work is often not cool. It’s hard, grinding work on fundamentals. So much of what I do these days is foundational work. Stuff that, when you tell people, they look at you like you’ve just told them humans can’t breathe water. Just a look of ‘duh’.</p> <p>I’m a big fan of the idea of marginal gains widely popularised by <a href="">Sir Dave</a>. <a href="">This is a good blog post explaining it</a>, but to summarise it goes like this: take a look at where you are now, where you need to be, break down all the parts of a system that will get you there and make a ton of tiny little improvements. The marginal gains aggregate to a big difference and it works. But, these days, I seem to be more focussed on the opposite: marginal degradation. How can you possibly improve a system if it’s being constantly eroded? Death by a thousand cuts. First you have to stop the rot and then work on the gains. In my experience that first bit is hard because the only measurement of success is if something is less bad than before. Nobody gets out of bed for ‘less bad’.</p> <p>Still. I keep plugging away.</p> <p>Here are some things I’ve been enjoying over the past couple of weeks.</p> <p><a href="">Brian Cox on the Joe Rogen Experience</a> is fabulous. Several times I caught myself either smiling in a stupid sort of way or not blinking. Utterly engaging and thought-provoking.</p> <p><a href="">LFT Etica</a> is a rather lovely looking Mono from TypeTogether.</p> <p>I took the girls to watch <a href="">Tom Gates</a> (written by Liz Pichon) on stage yesterday. It was a brilliant, funny, clever little show. If you're in the UK and get the chance, you should go. <a href="">Here's a review</a> that sums it up well.</p> Weeknotes 5 2019-04-15T00:00:00+00:00 <p>Another month, another week in Heidelberg for work. This time, it was great to get out on the bike every evening for an hour or so as it was light and relatively warm. The training continues at a pace as I build towards my target event of La Marmotte in July. As much as the rides in the warm German evening air were pleasant, it was marred by the fact I'm on the last week of a four week build so my legs feel heavy all the time. The next thing on the immediate horizon is a hard couple of days riding in the Peak District in the UK in May, before a training camp in Gran Canaria for a week in June.</p> <p>This week saw the <a href="">release on GitHub</a> of our draft phone contract for our eldest daughter who gets her first phone for her birthday today. She's eleven and will be travelling everyday to her new secondary school in a nearby town in September. A phone is a big responsibility for her. Emma and I have thought long and hard about how we might give our daughter the right attitude and tools to deal with this new responsibility and independence and our own phone contract is part of that. Already, since the release this week, it's been translated into German and we've had a flurry of really valuable edits. So that's nice.</p> <p>A few things caught my eye last week:</p> <p><a href="">The United States Web Design System (version 2)</a> was released. It's good. But two stand-out parts for me: the <a href="">documentation</a>, and the new typeface <a href="">Public Sans</a>.</p> <p><a href="">Collyn writes about the Full Stack Social Enterprise</a>. TLDR; A Full Stack Social Enterprise is:</p> <blockquote> <p>Now the fun part. A new crop of companies have started to realise that if they combine these two business models, using data from a (mostly) controlled supply and distribution chain, a business can be optimised for the explicit purpose of doing social good — making sure the people who need the optimisation are getting it. Not the fat cats at the top. Not the middlemen, but the makers, the independent creators, the small businesses, the farmers, the weavers… the environment.</p> </blockquote> <p><a href="">My Favorite 10 Practical “Management” Books</a> from John Maeda. These types of books normally make me vomit in my mouth a little bit. But this list is good. I've bought a couple and they're currently sitting at number 14 and 15 of my reading list. More reading to do.</p> A Child's Phone Contract 2019-04-08T00:00:00+00:00 <p>Our eldest daughter is soon moving to a secondary school a short bus journey away from our house. Many of her friends already own and use phones regularly. For a while, Emma and I resisted but as she will be making her way to the school independently, for her safety and our piece of mind, we thought a phone would be a good idea.</p> <p>When we sat down to discuss the idea, we all felt that we should have an agreement around the usage of our phones. Emma and I already do this. We have a loose set of rules we follow; no phones at the dinner table, no phones in bed, common sense, really. Of course, we also have the guidelines and rules as part of our phone contracts with Vodafone and Apple. Our daughter felt that it would be fair and make sense if she had the same.</p> <p>I remembered reading <a href="">Cameron's phone contract</a> he wrote for his son. With that as inspiration (thanks Cameron!), Emma and I set about noting down the various conditions we felt would give the right guidance. Making it clear what was advice and what was a rule and consequences of breaking them.</p> <h2 id="what-would-you-change%3F">What would you change? <a class="direct-link" href="#what-would-you-change%3F" aria-hidden="true">¶</a></h2> <p><a href="">The contract is on Github</a>. What would you change? What would you add? Please, fork it, add to to it. I'd love to know what you think. Wisdom of crowds and all that.</p> Weeknotes 4 2019-04-05T00:00:00+00:00 <p>Some would say that was a boring week. A week of head-down work in many respects: the day job, cycling training, and, with Emma being away most of the week, I've been juggling the usual child-related shenanigans. On Sunday, I travel to Heidelberg for a week of meetings. My diary resembles a rather depressing game of Tetris at the moment with really no way of winning. Cramming commitments like cats in a sack.</p> <p>Here are a few things that caught my eye this week and based around a bit of a theme:</p> <p><a href="">Six Simple Ways to Improve Your Wellbeing</a>. I try to remain reasonably open-minded about self-improvement writing. Some of it has helped me enormously in the past in reframing the world around me. This is a rather nice, practice list of ways to just feel a tiny bit better every day. The one about 'Not taking things personally' is really a skill a need to develop.</p> <p><a href="">How to Deliver Constructive Feedback in Difficult Situations</a>. Let's be honest. If you work in this industry in any kind of leadership capacity, almost every discussion you have is difficult. Not necessarily bad; good conversations can also be challenging. I found this post interesting in that it presented sa polarised few of behaviours that are complex: Emotions vs Thoughts, Needs vs Strategies, Requests vs Demands</p> <p><a href="">Confidence: 2 Reasons Most People Don’t Have It</a>. Quiet confidence, arrogance, cultural confidence, are all different ways in which confidence can manifest itself. A lack of confidence can also appear in different guises. A good read.</p> Weeknotes 3 2019-03-29T00:00:00+00:00 <p>I'm not going to talk about Brexit. It's utterly depressing and I've been trying to distract myself from it all week to varying success. <a href="">Circles of concern</a>, and all that.</p> <p>This week has been a heads-down sort of week after my couple of weeks travel just gone, and another couple of coming up. I wish it were a pause, but it isn't really. I complained on Twitter a little about how everything on a website looked the same.</p> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">If anything needs disrupting in this industry it is the rise of Sameism. Just look at this! <a href=""></a><br><br>I&#39;d love to know why this convergence is happening. It&#39;s depressing there is such a lack of diversity in such a creative medium.</p>&mdash; Mark Boulton (@markboulton) <a href="">March 26, 2019</a></blockquote> <script async="" src="" charset="utf-8"></script> <p>There were some interesting responses. As usual, Twitter isn't really the place for anything other than verbal drive-bys (I'm talking about me, there). The comments that got me thinking were about how designers today are less focussed on look and more focussed on scale. We're increasingly building the machinery of the web which is run by robots. We're the conductors of the choir.</p> <p>Things have been quiet at home. The usual: school, dog walking, trying to cope with a building site next to our house. I mentioned last week we got a new fridge freezer and I'm still enjoying that. Had some lovely news from my Dad that he is in the clear following two years of complications with Pancreatitis.</p> <p>A few things caught my eye on the web this week:</p> <p><a href="">Ping</a> is a lovely looking geometric sans-serif typeface. Look at that dot above the 'i'!</p> <p><a href="">Barnardo's</a> has an open intranet! What a great idea. Intranet's are the most awful places. Hidden behind closed doors they reveal themselves to you when you're at a moment of crisis: 'I need to book holiday', 'Where is that form I need?'. Having this open means you need to, well, actually do the work of designing for user need. Not only that, but it's a great hiring tool. To get to see how an organisation works, look at its intranet.</p> <p><a href="">This is what got me upset</a>. Convergence of design might not be the worst thing to happen if it means faster, accessible, easy to use (and trust) tech products. I know the conflict in me is irrational. They all look the same. Why is this a good thing?</p> <p>Like many designers who went to school in the 80's and 90's in the UK, The Face magazine was held up as defining a generation of editorial designers and their work. Along with David Carson, Neville Brody is someone whose work I have burnt into my typographic design vocabulary. To read <a href="">The Face</a> is making a return put a big smile on my, er, face.</p> Weeknotes 2 2019-03-22T00:00:00+00:00 <p>In a week of more political wtfuckery my highlights were two things: my fridge freezer finally gave up after many years of sporadic leaking, and I enjoyed a brief train journey to Cambridge for work. In the scheme of things, not a big week.</p> <p>Last week in Heidelberg I'd been asked to travel to Cambridge to give a presentation to senior leadership. I like a good train journey. Time to stare out of the window. To ponder as I zoom past a cows face at 125 miles per hour. The meeting was at the <a href="">European Bioinformatics Institute</a> – part of EMBL – based in the rather wonderful, but somewhat Gattica-like, <a href="">Wellcome Genomics Campus</a>. The journey there from Cambridge station was enriched by a discussion about Bangladesh from my very chatty taxi driver. The return journey was a little less interesting.</p> <p>I fixed a bunch of things on this site. RSS for one. <a href="">Eleventy</a> is still proving to be the right decision, I think. I'm enjoying using it and learning so much I decided that I'd rebuild the website for my book on it too. Static site generators are just perfect for that use-case. Turns out, this year, <a href="">Designing for the Web</a> is ten years old! I have to say, after a brief read through some of it, that it's a little long in the tooth and showing its age. For a while I've been thinking of a second edition. Where the hell would you start these days, though? Yeah, React, probably.</p> <p>Several things caught my eye this week:</p> <p><a href="">Dan's post on typography in design systems</a> understandably attracted my attention. I have opinions on this subject. Naming things is often not as important as consistency and Dan settling on 'preset-1' etc is exactly the type of approach I like. Typographic style definitions is not the place to get cute with naming if you want any kind of understanding of the system at scale.</p> <p><a href="">Building a UI Kit in Figma</a>. Figma is a tool I've not yet spent time to learn. I probably should. Same with Adobe XD, and InVision Studio. Too many tools and not enough time, I guess. But setting aside the actual tool, there are some gems in there of how to organise and build a UI kit.</p> <p><a href="">Using the iPad Pro as my development machine</a>. I tried this recently on a holiday to France and it was an annoying experience. I wouldn't recommend it unless you are the type of person who likes hacking things together for an experiment. Interestingly, though, my main problem with it was the iPad is light. It doesn't work on your lap with a keyboard (like a laptop), so it means you have to sit at a table or desk. Because the screen is small, you naturally lean forward. All in all not a great experience for me.</p> Weeknotes 1 2019-03-19T00:00:00+00:00 <p>Prompted by <a href="">Paul</a>, and inspired by him and <a href="">Aegir</a>, I'm giving this weeknote thing a try. If only to just get me in the habit of writing again. Let's see how it goes.</p> <p>I'm sat writing this on the 13:21 from Mannheim, Germany to Frankfurt airport. Every month I spend a week in Heidelberg in Germany <a href="">for work</a>. It's a lovely city. This week is one of those weeks where you see that spring is just around the corner. The birds sing in the morning, buds are swelling on branches, and the sun is starting to feel warm. Just a little bit. Next time I'm here, in April, I can finally get out on my bike after work and explore the nearby hills.</p> <p>Those of you who know me know I've been a keen cyclist for a good while. That took a step up last year with a target of riding the <a href="">GF Ventoux</a>. After a wobble in August – where I was diagnosed with a very common heart complaint for endurance 'athletes' – I have since been training back to fitness in order to complete <a href="">La Marmotte</a> in France in July this year. I enjoy the process of training immensely. From the weekly slow change in my abilities, to understanding the physiology and psychology of how that change happens.</p> <p>As most weeks in Heidelberg tend to be, this one has been busy with barely a moment to catch my breath in between meetings and presentations. I have to remind myself that this is the job.</p> <p>On Monday I finally said on Twitter that I'd rebuilt this blog on <a href="">Eleventy</a>. Not redesigned, but I fancied learning something new and the direction <a href="">Statamic</a> is taking – whilst perfectly good and they have some amazing features planned for version 3 – I felt it might be a bit overkill for my needs. Plus, I also wanted my <a href="">Pinboard</a> integration working more reliably than it has done to date. I'll probably post more about this process in the coming weeks whilst it's fresh in my mind.</p> <p>A few things caught my eye this week:</p> <p><a href="">'What a day that was'</a>: Jeremy posted a wonderful account of his trip to CERN with Remy for the Web at 30 event. I've yet to write about this, but I was, once again, very fortunate to be invited to Geneva by CERN to participate in a week-long hackathon to recreate the WWW browser. It was a special week. More on that another time.</p> <p><a href="">Stu</a> posted a link on our project Slack for <a href="">this article on Smashing Magazine from Val</a> on animation in design systems. We're just starting to touch on this at work and Val's article was an invaluable leg-up for the team.</p> <p>From a recommendation by <a href="">Brian</a>, I've been listening to the <a href="">Containers podcast</a>. If you like system design, then give this a listen. Good stuff.</p> <p>I've been travelling on a week on/week off basis since January so I'm very much looking forward to the next few weeks where I'm going nowhere. I'll be starting a new four week build on the bike, which means I'll no doubt be a bit fatigued, hungry and grumpy anyway. Not the best recipe for travelling.</p> The Fast and Slow of Design 2018-04-23T00:00:00+00:00 <blockquote> <p>Move fast, break things.<br> Fail forward.<br> Fail fast.<br> Always be shipping.</p> </blockquote> <p>These idioms are all around us in the tech industry. Establishing themselves in small, garage-band startups, they are now deeply entrenched in working cultures of even the most traditional publicly listed companies.</p> <p>Working fast is alluring for every board-room executive. Especially if, over the course of months, speed (and failure) results in faster product releases, more revenue, bigger and faster growth. Capitalism, right? However, I'm of the opinion that speed – and those arbitrary deadlines – create an unhealthy balance that can eventually lead to the demise of the company. Moving fast and breaking things tends to be at the expense of paying attention to slower, subtle, more stable, 'boring' aspects of a system.</p> <p>So what happens when we focus on the entire system? How can we create sustainable, balanced design systems that serve our companies and products for the long term?</p> <h2 id="the-fast-and-slow">The Fast and Slow <a class="direct-link" href="#the-fast-and-slow" aria-hidden="true">¶</a></h2> <p>My family and I moved into our current house about six years ago. At the time, we were living in a modern semi-detached house that we'd spent about ten years making our own. We knew we wanted to move into something older and a bit more characterful. A place we could grow old in. After a year or so, we happened upon <em>the</em> house; a charming farm workers cottage on the edge of town. Having a look around it the next day, we instantly fell for it. It was perfect. Sort of. Just like all old houses, we knew there was some work to do.</p> <p>Amongst many, many things that required some attention this fireplace was one of them. The house was cold – yes, the central heating was one of those things requiring work – so we needed fires in the winter. Fitting new log burning stoves required enlarging the fireplaces, and in the case of this one, opening up ones that had been blocked up.</p> <p><img src="" alt="My fireplace"></p> <p>The day before this photograph was taken, Dai – our Welsh stonemason – called me at work and asked me not to come home for a while. That sounded ominous. In their wisdom, the builders who had blocked this chimney had thrown the rubble down it. He managed to dislodge about three tonnes of rubble that came down in a small explosion in our living room. We could taste the resultant dust for weeks. This is just one example, over the past six years, where this house has surprised us. When you start peeling back the layers, you start to see what a building is made from. What its story is.</p> <p>In his book, '<a href="">How Buildings Learn</a>', Stewart Brand has a useful concept to explain this.</p> <p><img src="" alt="Building shearing layers"></p> <p>He describes a building having layers that age at different speeds. These 'shearing layers' are very apparent in my house!</p> <p>In his follow-up book, <a href="">The Clock of the Long Now</a>, he expands this concept and applies it to our world.</p> <p><img src="" alt="Pace layering from The Clock of the Long Now"></p> <p>On the top layer there is rapid change. On the bottom, change happens at a glacial pace. It's this combination of everything, from seconds at the top, to millennia at the bottom, that give resilience to the system. As he says <a href="">in this talk</a>:</p> <blockquote> <p>'The fast parts learn, the slow parts remember'</p> </blockquote> <p>A key concept to this is that each layer has to respect the pace of another. There are examples of when this has gone wrong in the past in society:</p> <p>Regime change in Iraq – removal of governance in a system – has resulted in change to all layers. The system collapsed and we are still feeling the effects of this today and into the foreseeable future.</p> <p>In 2008, as so wonderfully documented in the film 'The Big Short', the housing market in the US failed. The cause was complex, but central to it was the failure of the CDO – the not-so-wonderfully-titled '<a href="">Collateralized debt obligation</a>' – and the sub-prime mortgage market. The collapse of both put modern global civilisation on the brink. A decade later, we look set to <a href="">make the same mistake</a>.</p> <p>The part of this diagram I like the most is that it forces you to think in <em>time</em> instead of other ways of organising things. As this relates to design, time – or rather longevity – is not generally a consideration. Like much of our lives, modern design gravitates to those upper layers of commerce and fashion. We get paid well to make desirable things that people consume. Once we're done with one thing, we move onto the next.</p> <p>But how can we apply this thinking to design? How can structure design organisations and systems based on time rather than resources or products?</p> <h2 id="why-is-this-hard%3F">Why is this hard? <a class="direct-link" href="#why-is-this-hard%3F" aria-hidden="true">¶</a></h2> <p>I'm currently just a few months into the job, but already it's clear <a href="">EMBL</a> (the European Molecular Biology Laboratory) is a special place. Like <a href="">CERN</a>, and other organisations that provide infrastructure for basic research, the currency of EMBL is science. Not profit. Or shareholder value. But by providing the very best environment for groundbreaking scientific research to happen. And it's precisely this reason that makes design in places like EMBL challenging.</p> <p>Perched on a hill outside <a href="">Heidelberg</a> in Germany is the headquarters of EMBL. Like its other campuses in Barcelona, Rome, Grenoble, Cambridge, and Hamburg, the Heidelberg campus is a small gathering of laboratories and supporting buildings. It feels more like a university than a multinational organisation; full of students and young scientists embarking on their career. It's a place of energy.</p> <p>There's amazing work <a href="">going on at EMBL</a>. <a href="">This story recently caught my attention</a>.</p> <p>In about 40 years, the demand for data storage will outstrip the supply of silicon. Our need to store data will continue to increase, but we will need to focus the usage of silicon on more critical things such as computer chips. To address this, scientists have been working for a little while to encode digital data in DNA. Turns out there's quite a bit of space available but at the moment it's costly. A few years ago it cost about $13000 per megabyte to encode. Like all things, the price comes down as the technology and methods improve, but even this is palatable where long term storage is considered.</p> <p>Recently, scientists at <a href="">ETH Zurich</a> did a study into the stability of DNA data storage. The results showed incredible stability. Data would be stable for ~2000 years at 10C and over a 1,000,000 years at -18C. And the additional benefit of DNA is it's really, really tiny. Last year a new method at Columbia University estimated that DNA has a 215 petabyte: 1 gram storage ratio.</p> <p>The latest instalment on this 40 year deadline, was last year Nick Goldman of EMBL-EBI encoded an encrypted bitcoin into some DNA and gave away samples at a conference with a simple challenge to the attendees: decode it and you can keep it. Recently, <a href="">someone did just that.</a>.</p> <p>Why am I telling you all of this? Basic scientific research spans the pace layers. From fast. To slow. The field of scientific research is structured to accommodate this; except for senior staff and scientific research group leaders, EMBL employees are not at EMBL very long. The result is a startup-like culture working fast on problems that span decades. Since working with scientific institutions like CERN, now EMBL, it's also the answer to the question I ask myself almost every day: 'Why is this hard?', and why structuring design systems by <em>time</em> may be more useful.</p> <h2 id="what's-in-a-system">What's in a system <a class="direct-link" href="#what's-in-a-system" aria-hidden="true">¶</a></h2> <p>If we look at the constituent parts of a design system, we might see something like this list:</p> <ul> <li>Governance</li> <li>Patterns</li> <li>Tokens</li> <li>Logo</li> <li>Typography</li> <li>Colours</li> <li>Icons</li> <li>Content</li> <li>Tooling</li> <li>Documentation</li> <li>People</li> <li>Committees</li> <li>Infrastructure</li> <li>Animation</li> <li>Data entry</li> <li>Data display</li> <li>Layout</li> <li>Localisation</li> <li>Markup and style</li> <li>Messaging</li> <li>Search</li> <li>Navigation</li> <li>Voice and tone</li> <li>Accessibility</li> <li>Grid</li> <li>Image</li> </ul> <p>That's quite a lot. And, if you look at a <a href="">lot of existing design systems and style guides</a>, this stuff tends to be categorised into large groups such as 'Brand', 'Marketing', or 'Product'.</p> <p><img src="" alt="Typical design system groupings"></p> <p>But if you look at a system more holistically, there are many other things:</p> <p><img src="" alt="More holistic view of a design system"></p> <p>These large, holistically focussed groups can be layered according to their <em>rate of change</em>:</p> <p><img src="" alt="Pace layers view of a design system"></p> <p>Remember, rate of change at the top is rapid, at the bottom, things should barely ever change. If we start to map on top of this our items from our lists...</p> <p><img src="" alt="The layers of a system"></p> <p>Let's look at each one in turn. Starting at the top with 'Tooling'</p> <h3 id="tooling">Tooling <a class="direct-link" href="#tooling" aria-hidden="true">¶</a></h3> <p>Tooling is fashionable. The way we design, build, deploy and update digital products changes as fast as users consume them. This will probably always be the case, and, you know what, that's ok <em>if</em> your system is built to accommodate it. For me, that means ensuring that the means by which the system is distributed and deployed is in step with your organisation's way of doing things. The moment these two things don't match, tooling becomes an issue.</p> <h3 id="patterns">Patterns <a class="direct-link" href="#patterns" aria-hidden="true">¶</a></h3> <p>Design patterns are closely linked to product design and user behaviour. As these things change, patterns need to change too. In this layer I'd include the look and feel of design patterns in addition to their code. Admittedly, there is somewhat of a grey area there with tooling – many design patterns are linked to methods of deployment and distribution. According to this model, that isn't a great idea. When tooling – which changes at a different rate – is combined with patterns, it leads to what Stewart Brand calls 'layer turbulence' and often the answer to my question: 'why is this painful?'.</p> <h3 id="people">People <a class="direct-link" href="#people" aria-hidden="true">¶</a></h3> <p>The people in a system are seldom acknowledged as a component of a system. Instead, they are people who act on a system. I think this is a mistake. People take work. In most organisations, the people of a system represent continuity and sometimes the only thing stopping it from being rebuilt and redesigned from external HIPPO (Highest Paid Person's Opinion) influence. How I'd define people would be any real person interacting with the system; the team building it, stakeholders, open source community etc.</p> <h3 id="documentation">Documentation <a class="direct-link" href="#documentation" aria-hidden="true">¶</a></h3> <p>As we move down the layers, things become more stable. There are many things in documentation that require stability. Change needs to be more visible and apparent, such as repo commit messages, or 'last updated' footers on website content. Documentation could also include design principles, brand guidelines, or editorial guidelines. For many systems, this represents the lowest layer of stability, but I think we need to go further.</p> <h3 id="governance">Governance <a class="direct-link" href="#governance" aria-hidden="true">¶</a></h3> <p>Systems need governance. How else is change managed? A key thing to note here is that the work of governance is managed at a higher level in 'People' as it's faster. This layer is concerned with the process and methods of governance; <em>how</em> a system is governed rather than the act of governance.</p> <h3 id="foundations">Foundations <a class="direct-link" href="#foundations" aria-hidden="true">¶</a></h3> <p>Like the foundations of a building, the foundations of a design system should not change. Examples that I would consider foundational are things like the URL of your design system; elements of the brand; the repository; the design system and brand nomenclature.</p> <p>With all that in mind, let's have a look at those idioms again:</p> <blockquote> <p>Move fast, break things.<br> Fail forward.<br> Fail fast.<br> Always be shipping.</p> </blockquote> <p>These phrases drag us to the top layer and keep us there. They prioritise speed over stability. I'm interested in creating sustainable systems with longevity, so I don't think it's an appropriate way of thinking. What might be more appropriate, but probably more boring, is:</p> <blockquote> <p>Structure for pace.<br> Move at the appropriate speed.</p> </blockquote> <p>But I guess that doesn't sound as cool.</p> <p>Note: This article is a rough transcript of the talk I gave at SmashingConf in San Francisco in April 2018.</p> Write it down 2018-03-20T00:00:00+00:00 <p>This is a post in defence of process. Yes, I know what you're thinking: 'urgh, process is a thing put in place to make up for mediocre teams'; or 'prioritise discussion over documentation'; or 'I get enough red tape in other parts of my life'. You know the response. You've probably said it as many times as I have.</p> <h2 id="conversations-are-cheap">Conversations are cheap <a class="direct-link" href="#conversations-are-cheap" aria-hidden="true">¶</a></h2> <p>I am the first person in the room to defend the delights of working in a lightweight, agile (lowercase 'a') way. You make stuff faster, generally better, and you build team or product momentum. The real benefits I see are people benefits: a closer-knit team; shared understanding; less things on fire. The wholesale shift to this way of working – outside of slow-rotting corporations, that is – has many benefits. But the cultural distain of the 'P word' is not one them. Process has a place.</p> <p>The main issue I see time and time again is that conversations are low effort. Not only that, but certain ways of working prioritise them over slower, reflective, considered decision-making. I use one method that works to counter-act this.</p> <h2 id="'write-it-down'">'Write it down' <a class="direct-link" href="#'write-it-down'" aria-hidden="true">¶</a></h2> <p>Whenever someone asks me to do something that I think seems ill-conceived in some way, I ask them to write it down. That's it.<br> Because writing is high effort. Making sentences is the easy bit, it's the thinking I want them to do. By considering their request it slows them down. Maybe 30% of the time or something, they come back and say 'oh, that thing I asked you to do, I've had a think and it's fine, we don't need to do it'.</p> <p>This little method isn't about doing less. Well, actually it is. It's about doing <em>less important</em> things instead of important things. It's not about being obstructive. I certainly don't ask someone 'why?' five times (which is a shortcut to being called a smart-arse in my experience). This is about a light-touch way of asking someone to slow down.</p> <h2 id="time-for-reflection">Time for reflection <a class="direct-link" href="#time-for-reflection" aria-hidden="true">¶</a></h2> <p>In the UK, medical doctors are required to 'reflect on an aspect of their work' every month. This is time that is monitored as part of their self-development and self-improvement. Doctors are amongst the busiest, pressured people I know and if this wasn't mandated by the British Medical Council, then I'm pretty sure it just wouldn't happen. They have to make time. And we should, too.</p> <p>We're all running at 100mph. Making things faster and faster. In my own experience, time reflecting on work tends towards sitting in front of screen – like I am now – thinking about the next thing on my todo list, or beating myself up about the latest ball I've dropped. How does that Elbow song go? 'Cramming commitments like cats in a sack'</p> <p>These days, I welcome being asked to 'write it down'. It gives me permission to take a breath. To pause and reflect on what I'm asking. I'm convinced my heart rate drops a little. You see, in some environments this would be called 'process', or 'red tape'. 'Being asked to write something down is a blocker to my flow'. Those kinds of responses miss the mark. When being asked to 'write something down' it's really shorthand for 'take some time and think about what you're asking'.</p> <p>Next time someone asks you to do something, try it. I bet 3 times out of 10, they say 'oh it doesn't matter'. You'll have that time back. They'll be a little wiser and have a lower heart rate.</p> Editorial planning with Trello and Zapier 2018-02-09T00:00:00+00:00 <p>As long as I've been working with editorial teams a content pipeline has been a problem. Knowing the state of a story, its context to those around it, and who has done what, when, is vital in managing a content throughput. Generally, this figures itself out in a busy, noisy, physical environment. But, the more remote a team becomes, the more challenging it is to communicate on the state of stories.</p> <p>When I joined <a href="">EMBL</a> a couple of months ago, this was a problem we had. Content status was done weekly, but a continually available overview by the entire team was not. Nor was there a tool or process to push stories around. As I said, my experience is this is not unique to EMBL. Almost every editorial team I've worked with struggles with this.</p> <p><a href="">Dan</a> and I got our heads together and worked on a process that would fit with the existing team and tools. The team here use Trello extensively for planning, so we started there.</p> <h2 id="the-one-board-to-rule-them-all">The one board to rule them all <a class="direct-link" href="#the-one-board-to-rule-them-all" aria-hidden="true">¶</a></h2> <p>It was important we didn't interfere with existing processes using <a href="">Trello</a>. The team all use Trello in different, interesting ways to collaborate and manage their content; from ideas to final copy. We needed to integrate with that best we could. This is what we settled on:</p> <h3 id="1.-a-pre-production-trello-board">1. A Pre-production Trello Board <a class="direct-link" href="#1.-a-pre-production-trello-board" aria-hidden="true">¶</a></h3> <p>Once a story is ready to go into the workflow. Meaning it is agreed, planned, assigned to a priority etc, then it is added to the pre-production Trello board. This board is organised by story type: features, updates, press releases. Once a story is complete and ready to publish, it is moved into a column 'Move to Production'. <a href="">Zapier</a> then copies the card, with everything in it, over to the Production board. Once that's done, it moves it to an archive list.</p> <h3 id="2.-a-production-trello-board">2. A Production Trello Board <a class="direct-link" href="#2.-a-production-trello-board" aria-hidden="true">¶</a></h3> <p>The production board is not focussed on collaboration or story type, but arranged as a pipeline of approvals, sign-offs, edits and publishing. Once a story moves through these linear stages then published, Zapier goes in again and moves the card entirely over to the archive board.</p> <h2 id="some-notes-about-zapier">Some notes about Zapier <a class="direct-link" href="#some-notes-about-zapier" aria-hidden="true">¶</a></h2> <p>I've used Zapier a bunch of times over the years but never really had the time or focus to work on automation that fits within a team environment. It's great, but it requires some wrangling to work if you move beyond the default app integrations.</p> <p>Zapier <a href="">integrates really well</a> with Trello. There are a whole bunch of predefined tasks that you can chain together to do stuff with your Trello boards. For the most part, the challenging thing is working out the sequencing of what you want to do. For our 'move to production' task, this is what we ended up with:</p> <ol> <li>Find the Pre-production Trello board</li> <li>Find a list on that board called 'Move to Production'</li> <li>Find cards moved into that list (this is the trigger to run the whole zap)</li> <li>Get information about the card and move it to Production. (In fact, here, I didn't move it but copied it. I wanted a safe-guard in the system so that if something went wrong, there would be a backup)</li> <li>Once it's moved, confirm by then moving the card into the archive list.</li> <li>Once all that's done, check the card has actually moved.</li> <li>Then post to Slack and let everyone know.</li> </ol> <p>The only stage out of all of these that is out of the ordinary is the 'copy' task (number 4). To complete that little task we need to use webhooks in Zapier to POST directly using the Trello api. After a bit of Twitter help <a href="">Hat-ip @sprawsm</a>, we figured it out. It's probably easier if I just show you in Zapier what the important bits are:</p> <p><img src="" alt="Zapier webhooks fields"></p> <p>You can see from this image that the web hook field has a bunch of form fields. I'll concentrate on the important ones:</p> <h4 id="url">URL <a class="direct-link" href="#url" aria-hidden="true">¶</a></h4> <p>When we create a web hook, we need a URL for the api endpoint. For Trello, this is the one we need: <code> key here)&amp;token=(your token here)</code>. You can get the key and token from your Trello settings.</p> <h4 id="payload-type">Payload type <a class="direct-link" href="#payload-type" aria-hidden="true">¶</a></h4> <p>Set this as <code>JSON</code></p> <h4 id="data">Data <a class="direct-link" href="#data" aria-hidden="true">¶</a></h4> <p>These are the fields of data you are going to pass to Trello via the api. The content of these fields will be populated from the fields earlier in the Zap. It's important each of these field titles is copied exactly for the task to run. Let's go through each in turn:</p> <ol> <li>'name'. This needs to map to the title of the card to move.</li> <li>'idCardSource'. This is the ID of the card.</li> <li>'due'. This is the due date for the card if it has one</li> <li>'KeepFromSource'. This one is important. It will make sure when the card is copied from one board to another that all the cards contents are retained.</li> <li>'idList'. This is the ID of the list we want to move the card to.</li> </ol> <h4 id="wrap-request-in-an-array">Wrap request in an array <a class="direct-link" href="#wrap-request-in-an-array" aria-hidden="true">¶</a></h4> <p>No</p> <h4 id="unflatten">Unflatten <a class="direct-link" href="#unflatten" aria-hidden="true">¶</a></h4> <p>Yes</p> <p>And that's it. These are all the changes you need to make below the data fields. When it is run, this little task will take the values from the other tasks before it and populate the data fields, it will then post that to the Trello api, and Trello will copy the card into the Backlog list on the production board.</p> <h2 id="broader-use">Broader use <a class="direct-link" href="#broader-use" aria-hidden="true">¶</a></h2> <p>After using this for a little while, I realised I'd really like to use this workflow for managing my simple, personal Trello backlog. I have a pretty standard kanban-style backlog/doing/done Trello board for all sorts of stuff. A mix of personal, side-projects, work, thoughts, writing. It's a dumping ground. Every day, though, I may need to pick some cards out and replicate them on the team board or a project board. Now all I do is replicate this task. I've added a couple of additional lists in my Trello board, and I move the cards into them when I want them copied somewhere else. Zapier watches those lists and copies the cards. I'm finding it a useful way for moving cards around and getting work stuff out of my personal board, and into a work board.</p> <h2 id="a-bit-of-gaffer-tape">A bit of gaffer tape <a class="direct-link" href="#a-bit-of-gaffer-tape" aria-hidden="true">¶</a></h2> <p>Whilst this automation works well for the most part, sometimes either Zapier or Trello craps out a little bit. When that happens, it's normally some snafu with the Trello api and the post. That's why the notification is an important part of the process. Using a quick ping into Slack let's me know a couple of things: that the zap is actually working still, and that there is a new card that has been created.</p> <p>I'm sure there could be technical improvements to make here to make this a bit more robust. But as a scrappy self-serve solution for an editorial team to manage their through-put of stories, so far, so good!</p> Newish blog 2018-02-02T00:00:00+00:00 <p class="“stand" first”="" markdown="1">A new year. A new blog design. The first time I've mucked about with my site in ages, actually. But why the renewed interest?</p> Ever since [Statamic]( released version 2 a little while ago, I've been meaning to rebuild my version 1 site. It was more of an exercise in just learning something new than anything. However, about 18 months ago – maybe longer – I tried and then swiftly gave up. There was just too much of a gap between v1 and 2 that I could bridge at the time. Not enough head space. Turns out, it took something going wrong with my head to finally give me mental space to give it a go over new year this year. <p>In December, one Sunday, I fell off my road bike. I fractured both my hands, cut my eye and gave myself a nasty concussion. Whilst recuperating turns out that learning and building this new website was just the physiotherapy I needed both for my brain and my fingers. Finding myself with a bit of spare time, when I should've been out on my bike, meant I set to work migrating the old stuff from version 1, and, typically, redesigning in the process.</p> <h3 id="so%2C-what's-new%3F">So, what's new? <a class="direct-link" href="#so%2C-what's-new%3F" aria-hidden="true">¶</a></h3> <p>I wanted a design refresh. In all honestly, I wanted to use fonts that <em>weren't</em> Monotype fonts! So, I have a bit of a thing for <a href="">Retina</a> from Frere Jones, after trialing it for a project with Conde Nast over the summer. And what better pairing than <a href="">Exchange</a> which is a beautiful serif.</p> <p>From a content perspective, I've also got a new section called <a href="">reading</a> where I pull in Pinboard links that interest me and others might find interesting. I've also been working on a portfolio. Haven't had one of those for a while. I've done some interesting work over the past ten years and it's nice to document it. For my sake more than anything.</p> <h3 id="so%2C-what's-technically-new%3F">So, what's technically new? <a class="direct-link" href="#so%2C-what's-technically-new%3F" aria-hidden="true">¶</a></h3> <p>Under the hood, quite a lot. Have a read of the site <a href="">colophon</a> for a swift introduction. The site now runs on version 2 of Statamic. Which brings with it a whole load of advantages and features. <a href="">Statamic</a> is built on top of <a href="">Laravel</a>, so locally, I use the nifty <a href="">Valet</a>. Keeping with the Laravel theme, I use the excellent <a href="">Forge</a> service to build and manage a server using a Digital Ocean droplet. I used to use Mediatemple, like, <em>forever</em>, but this setup is absolutely fabulous in comparison. Everything Just Works. The sweetener is that Forge automatically deploys from Github. All I need to do to add content, or make a change to the site is commit the changes to my production branch and that's that.</p> <p>Now, I know to many of you reading this, all that I've just explained has been doable for a million years and what am I getting so excited about? Well, I think that's certainly the case but it hasn't been until recently that there have been a series of interconnected services available for people who are, yes, still, anxious about using the command line.</p> <p>CSS wise, I've tried using CSS grid. A few things might be amiss as I continue to work on the layout and I get my head around CSS Grid and its possibilities.</p> EMBL 2017-12-01T00:00:00+00:00 <p class="“stand" first”="" markdown="1">Today is my first day working at the [European Molecular Biology Laboratory - EMBL]( I'll be leading digital communications and to say I'm excited by the challenge is probably a bit of an understatement.</p> <p>I've had nearly a year of working on a few bits and pieces of consulting for a few new clients in addition to several two week design sprints for EMBL on their holistic corporate design. It was during these sprints that I got a growing sense of the work that needed to be done.</p> <p>Back in 2012, I was knee-deep working on redesigning the <a href="">CERN</a> website. It was, to date, the most fulfilling work of my career. Not because of the result, or the process, or the commitment of the client and their team, but because of the work being done at CERN. It matters. And I have the same feeling now about EMBL. Fundamental scientific research matters. It matters to the human race, to our understanding of the world around us, and how we might overcome some of life's greatest challenges on this planet and beyond. When I first started my design career, I wanted to work for projects that meant something. After ten years of almost exclusively commercial work, I'm thrilled to be getting my teeth stuck into something meaningful..</p> Defining design principles at EMBL 2017-10-04T00:00:00+00:00 <p class="“stand" first”="" markdown="1">For a little while, since leaving Monotype, I've been working with the communications team at the [European Molecular Biology Laboratory]( (EMBL) on a holistic corporate design project. It's pretty exciting work.</p> <p>I'm lucky that the project is being headed by Dan Noyes, who I worked with at CERN, so he and I know how to work together pretty well. There is a fabulous team in place, and we've been tackling some fundamentals of the brand, the strategy to implement the it, all within the context of a complex scientific organisation.</p> <p>To help keep us arrow straight whilst navigating this problem we defined design principles to do it. Now, I'm sure there are many ways to define principles but here's how I do it and it's really quite simple. I was shown this by Leisa when we defined design principles for the redesign of Drupal 7 years ago. All you do is be mindful of when the team repeats design desires. This could be several members of the team say the same thing in a slightly different way, or that you keep circling around and around a problem but struggle to articulate it. By being mindful at all times to this a team can quickly pull together principles that are derived from doing the work on their particular problem rather than principles which are imposed on the work. An important difference.</p> <p>Throughout the sprint, we defined the following design principles for EMBL:</p> <ol> <li>Make it sustainable</li> </ol> <p><em>We will create a long-term, sustainable system. Designed for efficiency, re-use, and scale.</em></p> <p>Sustainable systems are diverse and productive indefinitely. Being holistically focussed on how EMBL interacts with its audiences internal and external, means we create meaningful, sustainable experiences over the longer term.</p> <ol start="2"> <li>Show our work</li> </ol> <p><em>We will prioritise demonstration over discussion. Through prototyping we will show how these principles and values apply to the work.</em></p> <p>We will embrace modern design practices by starting small and iterating quickly. We will avoid big reveals and develop a process of publishing early and often. This requires a change of mindset of the team: to be comfortable with ‘not done yet’; to be satisfied to prioritise function over form; to get the things we make in the hands of our audience so we can understand their needs more quickly.</p> <ol start="3"> <li>Keep it simple</li> </ol> <p><em>We will do the difficult work to keep the things we make simple, approachable, and put the user’s needs first.</em></p> <p>EMBL is complex. As are the audiences, services, applications, and communications material that operate within the brand. We will do the hard work to uncover and expose the simplicity of the core.</p> <ol start="4"> <li>We are all one organisation</li> </ol> <p><em>We will cultivate cross-pollination of services, products, ideas, and collaboration.</em></p> <p>We will proactively seek out opportunities to collaborate on the design of services across all channels throughout EMBL and invite feedback and new perspectives. We will share and discuss our methods.</p> <ol start="5"> <li>Physical, digital, and environmental are in sync</li> </ol> <p><em>We will ensure a holistic approach for one system for all printed, digital and environmental touch-points.</em></p> <p>Design systems across media evolve at different rates. We will ensure systems across all channels are relevant to the media, but also share nomenclature, design patterns, and are built from the same principles. We will think and act as a cross-disciplinary design team.</p> <ol start="6"> <li>Pave the cowpath</li> </ol> <p><em>We will make the design language accessible where people are already working.</em></p> <p>Forging a new path is hard. And sometimes a waste of energy. By understanding how the brand is expressed currently, we develop new ways to provide the ingredients of the brand to the people already doing the work, in the place they are doing it. We will invent new ways with which to distribute the brand across a constantly moving, evolving system. We shouldn’t press pause.</p> <ol start="7"> <li>Repeat the words we use</li> </ol> <p><em>Through consistency and repetition, we will create and maintain a design nomenclature that will become part of the EMBL vernacular.</em></p> <p>The words we use are important. By repeating these words about EMBLs products and services, they can remind us many times every day what we believe. Changing the words we use can help change the culture of an organisation to be more design and brand aware.</p> <p>Another important aspect to these is the way they are structured. A design principle is a belief. It's something we promise to do and should be worded as such.</p> <p>You can read more about the <a href="">design process on EMBL's communications blog</a>.</p> Moving on from Monotype 2017-04-21T00:00:00+00:00 <p class="“stand" first”="" markdown="1">Last week was my last week working at Monotype. It's been a whirlwind three years and I've learnt a lot. Of course, I'll miss my colleagues and what's left of the team we built at Mark Boulton Design.</p> <p>But now it's time for other things. But what things? Well, I see two paths in front of me.</p> <p>We're at a really interesting inflection point in the industry. Organisations are still figuring out how to invest in design. Design leadership is a scarce commodity. The impact of design at all levels – from product and commerce to strategy and research – is having a challenging time to find a symbiotic relationship with business. I can help there.</p> <p>The other path for me is consulting. Many organisations are either not ready to commit to building design capacity on a full-time basis, or rolling back in-house design commitment after a failure to some degree. Maybe they are just starting out. Or it's simply a matter of budgets and structuring. Regardless, I saw this a lot when I ran an agency. It's why and how we got the work. I can help here, too.</p> <p>I'll be taking a few weeks off, but then I'll be looking to commit to one of these paths. If you're looking for a design leader, or you maybe have a project you think I could help with, then <a href="">get in touch</a>.</p> Design systems and Postel’s law 2016-05-17T00:00:00+00:00 <p class="“stand" first”="" markdown="1">I was first made aware of Postel’s law by [Jeremy]( in his fabulous talk about design principles. Incidentally, he’s documenting lots of design principles [here](</p> <p>Postel’s law – or the Robustness principle - states:</p> <blockquote> <p>Be conservative in what you do, be liberal in what you accept from others (often reworded as “Be conservative in what you send, be liberal in what you accept”). From <a href="">Wikipedia</a></p> </blockquote> <p>Jon Postel was talking about TCP and how implementations should follow this principle. Putting TCP and networks to one side for a minute, you can see how this principle can apply to many systems where there is input and output. Specifically, design systems.</p> <p>The basic premise of Postel’s law is that what comes into a system can, and invariably, is a mess. Non-Compliant, delivered in a weird way, unconventional.</p> <p>When thinking about this, I recall some work I did years ago on a ticketing system for a help desk. The single biggest hurdle, in order for the system to be successful was it had to be liberal in what it accepted. Tickets needed to be created from email, phone applications, web applications, voice recognition etc. The hardest part was getting stuff into the system. Only then could a single ticket be created - from various sources, in varying quality of data – in a single useable ticket for use with the large team.</p> <p>Be liberal in what you accept (from emails, apps, voice, websites) and conservative with what you do (creating a single, well-defined ticket).</p> <p>I see this same principle being applied to design systems.</p> <p>Collaborating across an organisation to create a meaningful, impactful design system means you have to be liberal in what you accept from others into the system. Be it code, thoughts, design work, content, or criticism. That input can also come from many different teams, strategy, executives, products, people. You see, it’s a big mess! And the only way, really, to work with a system like this is to be open to all input from wherever it comes, in whatever form takes. To be <em>liberal with what you accept</em>.</p> <p>This approach does a few things:</p> <ol> <li>Makes people feel involved, consulted, and listened to. This a good thing.</li> <li>Exposes the system to the dirtiest, out-of-date, horrendous use-cases possible. This is also a good thing. Mostly these use-cases are ignored because they are horrible.</li> <li>Helps turn a system that is <em>owned</em>, to one that is <em>shared</em>.</li> <li>Helps identify themes across an organisation.</li> <li>Helps the design system core team operate at a holistic level.</li> </ol> <p>Policing a design system never works in my experience. It never works because people don’t like rigid systems, being told what to do, and will straight up do the opposite. Being liberal in accepting things into the system, and being liberal about how you go about that, ensures you don’t police the system. You collaborate on it.</p> <p>So, what about the output? Remember: be <em>’conservative in what you do’</em>. For a design system, this means your output of the system – guidelines, principles, design patterns, code, etc etc. – needs to be clear, unambiguous, and understandable. It needs to turn the messiness of a liberal input into a defined, purposeful output that people can easily slot into their workflow and use.</p> <p>Once again, I find myself in a place banging heads with <em>how work happens</em> rather than <em>what the work is</em>. Someone once said to me that ‘design principles are the stars to sail our ship by’. I’m certainly going to be using Postel’s law to sail my particular ship in the months and years ahead.</p> Design systems in difficult places 2016-02-18T00:00:00+00:00 <figure markdown="1">![A street in Manchester](/images/dsidp/dsidp-1.jpg)</figure> <p class="“stand" first”="" markdown="1">This is Manchester. I grew up on the outskirts of Manchester. I have memories like this picture. Black and white. Snowing. Wildlings. It’s grim north of the wall.</p> <p>But what this picture doesn’t show is the rich visual culture that Manchester had throughout the 80’s and 90’s. All that rain and grim weather makes people creative. It’s no accident most of the best music in the world came from the North West of England.</p> <p><img src="" alt="Tony Wilson"></p> <p>This is <a href="">Tony Wilson</a>. Tony was a journalist in Manchester, appearing on <a href="">Look North West</a> as a roving reporter. I have lasting memories of his wind-swept hair, stood in a gaudy cagoule talking to a farmer on some moor somewhere. He was on telly every evening at teatime when Look North West was an ‘appointment to view’ (as they call it in telly-land) across the region. But as well as being a journalist, Tony was also involved in <a href="">Factory Records</a>, founding it with Alan Erasmus in 1978. Factory went on to define an era of music in the 80’s and 90’s signing bands such as Joy Division, New Order, and the Happy Mondays. I’m not a big fan of the music, but of the graphic design produced at the time.</p> <p><img src="" alt="Graphic design from Factory Records"></p> <p><img src="" alt="Graphic design from Factory Records"></p> <p>This work was everywhere in Manchester. On every street corner. In every record shop. In every music shop. There were posters, fliers, newspapers, TV adverts. The hum of the city became entwined with the output of Factory. And, without really noticing it, started to take on this DNA. It became Manchester’s design system. It’s visual life-blood.</p> <h3 id="imposing-order">Imposing order <a class="direct-link" href="#imposing-order" aria-hidden="true">¶</a></h3> <p>The challenge with any design system is they normally don’t work, don’t get adopted, don’t grow or get used if they are imposed top-down without an awful lot of consultation. Like any language, they have to be adopted by the masses through continued daily use. The tricky thing for us designers is that is rarely how we’re engaged to create these things.</p> <p>Normally the brief goes something like this:</p> <blockquote> <p>We’d like you to design us a living style guide (replace with ‘pattern library’, ‘design language’, ‘brand guidelines’, ‘identity’). We’ll then use that to provide consistency to our entire product range – of which we’d like you to help us.</p> </blockquote> <p>Now, this works in some circumstances if control is maintained by a marketing department or brand manager. But, it’s my experience, that unless design is valued then control is absent. Nobody has the authority to own this. They just have some budget and see a problem that needs addressing, but do not have the money, authority or organisational environment to make this work succeed. So what do you do then?</p> <p>Well, you just do it anyway. But over the years – taking some inspiration from my home town – I have a few principles…</p> <h3 id="1.-repeat-yourself-consistently">1. Repeat yourself consistently <a class="direct-link" href="#1.-repeat-yourself-consistently" aria-hidden="true">¶</a></h3> <p>Let’s get one thing out of the way first. Meetings are not bullshit. Suggesting that is actually bullshit. Meetings – where people talk and resolve things, plan, decide – are probably the most important thing you can do to get a design system off the ground in a difficult place.</p> <p>Remember, you have no authority. Your client, or stakeholder, has no authority. You’re doing this for better, holistic good of an organisation that almost everybody there <em>cannot see</em>. So you have to persuade, provide insight and data, and in my experience you have to do it over and over and over again.</p> <h3 id="2.-establish-a-mandate">2. Establish a mandate <a class="direct-link" href="#2.-establish-a-mandate" aria-hidden="true">¶</a></h3> <p>Over the last 10 years i’ve worked on quite a few, large scale design systems. In all of them, there was a distributed technical system that had grown organically. A few CMS’s here and there. PHP, .net, etc etc. It’s not like you could create a bunch of HTML and it would work everywhere. Far, far from it.</p> <p>And then, editorially, many of the departments of these organisations were creating content without any joined up thinking. It was common for them to have their own budgets to create their own mini projects (yes, with their own CMS) and they’d hire a little design firm to do it.</p> <p>From a branding perspective, there was normally a small, internal, over-worked branding team who were constantly and consistently putting out fires that the organisational structure creates. Everywhere you look people were degrading the brand.</p> <p>In my experience, this is the norm. How do you create a design systems that not only gets adopted, but thrives, in this environment? You have to establish a mandate. An editorial, technical and brand mandate. A troika of disciplines working together to establish order.</p> <h3 id="3.-be-where-the-creator-is">3. Be where the creator is <a class="direct-link" href="#3.-be-where-the-creator-is" aria-hidden="true">¶</a></h3> <p>In the case of Manchester, the work of Factory was in front of every young designers eyes. Everybody looked up to the work of <a href="">Peter Saville</a> and created work to replicate it. So, on every street corner, the inspired work appeared. All of a sudden, Manchester’s visual DNA expanded beyond the world of record shops and club night posters, and made it into plumbing brochures, margarine packaging and pub fliers. The bread and butter for jobbing designers in the North West.</p> <p>This was because the work was accessible and in the places designers where looking for inspiration.</p> <p>I like to apply the same thinking for the adoption of a design system: be where the creator is. A few examples:</p> <ul> <li>Provide ready-made templates for design tools. Not just for in-house designers, but so external designers (you know, hired by the small department trying to use their budget before the end of the year) can use them too.</li> <li>Provide tools to make things. If you’re building digital things, provide a UI library and maybe prototyping and deployment tools that make consistency easier.</li> <li>Be where they are. If an organisation uses Sharepoint, or some other God-awful intranet software, then put your tools <em>where they are</em> and don’t try to force other documentation if it won’t fit.</li> </ul> <h3 id="how-do-you-know-you%E2%80%99ve-been-successful%3F">How do you know you’ve been successful? <a class="direct-link" href="#how-do-you-know-you%E2%80%99ve-been-successful%3F" aria-hidden="true">¶</a></h3> <p>I get asked this a lot. How do you know if your work will stick? You’ve spent a year designing a new design system. How do you know it will really hold? I’ve learnt to look out for a few indicators…</p> <ul> <li>The design system becomes how design is talked about in an organisation. It becomes a shared vocabulary. And not just by other designers, but by management and all levels of an organisation.</li> <li>The quality of design (and editorial and technical) becomes self-policing. It’s no longer the responsibility of just one person or team, but ownership becomes distributed. <em>People start to care</em>.</li> <li>Design and KPIs. Clear lines get drawn between good design and measurable outcomes.</li> <li><a href="">Lagging and Leading indicators</a> become more apparent. So you can better predict how those indicators affect quality, brand, product roadmap. In this case, design can help indicate the health of an organisation.</li> </ul> <h3 id="what%E2%80%99s-manchester-got-to-do-with-all-of-this%3F">What’s Manchester got to do with all of this? <a class="direct-link" href="#what%E2%80%99s-manchester-got-to-do-with-all-of-this%3F" aria-hidden="true">¶</a></h3> <p>You may well ask. When I was growing up in Manchester, I never really took much notice of the graphic design around me. It was only when I left – or years later – when I decided to become a designer that this stuff leaked out of me. It was stored somewhere deep inside my brain and with it, I like to think, I absorbed some of that taste. By being part of the Zeitgeist.</p> <p>What you do now for your client or in-house will have an effect that will be felt years later. You will change how people think about design. Change their relationship with the company they work for. All by consistently using Helvetica, or something. It’s not that hard. Is it?</p> The difference between a goldfish and a human 2016-02-16T00:00:00+00:00 <p class="“stand" first”="" markdown="1">In the 2012 Olympics, the [UK cycling team dominated the track]( Winning 12 medals: 8 Golds, 2 Silvers, 2 Bronzes. They also broke 7 World Records and 9 Olympic Records.</p> <p>The French cycling team director <a href="">suggested that the UK team were using ‘magic’ wheels</a>. That was until it was pointed out the <a href="">wheels were designed and manufactured in France</a>.</p> <p>No, aside from the unbelievably hard work of the team, the superb conditions of the track and the humidity of the building, there was one person who was credited as the brains behind the performance; <a href="">Sir Dave Brailsford</a>. Sir Dave is also credited as instilling a culture of measurement, data, and, ultimately, well-being into the team. A key component of this was a philosophy of ‘Marginal Gains’.</p> <blockquote> <p>“The whole principle came from the idea that if you broke down everything you could think of that goes into riding a bike, and then improve it by 1%, you get a significant increase when you put them all together.”</p> </blockquote> <p>This is also something he applied to his job as manager of the <a href="">Sky cycling team</a>.</p> <p>When Brailsford formed the commercial cycling team he had one goal: to win the Tour de France. Clean. Within five years. <a href="">He did it in two</a>. And then again. And again.</p> <p>The challenge he had was this: cycling has long been a sport which uses performance enhancing drugs. In order to compete against teams using these drugs, Team Sky – and any other clean team – had to bridge a gap of about 16-19%, depending on which source you read. Regardless, that is an enormous distance in performance in any professional sport. And they did it through the aggregation on marginal gains. Looking at every aspect of an athlete’s life – their diet, weight, sleeping patterns, physiology, well-being, the pillow they use at night. Even how they wash their hands – they were able to bridge that gulf.</p> <p>I’ve been a fan of professional cycling for a long time. Even before I owned a road bike and rode myself. But recently, I’ve become interested in how coaching has created this performance. How Team Sky’s, and before it Team GB, management team has created a culture for riders to succeed by the continued improvement of tiny, tiny little things. But, I’m also interested in the opposite.</p> <h3 id="marginal-degredation">Marginal Degredation <a class="direct-link" href="#marginal-degredation" aria-hidden="true">¶</a></h3> <p>Here’s a few fun facts…</p> <ul> <li>Gorillas share 98.4% of our DNA</li> <li>Goldfish share 68%</li> <li>Bananas share 50%</li> </ul> <p>Bananas. Are 50% the same as us.</p> <p>Well, you think about it, it kind of makes sense. We’re all made from the same elements. The same star dust. Just arranged in different ways. But, we’re very, very different to bananas.</p> <p>Let’s talk about design for a second.</p> <p>What happens if 1.6% of your brand is left unchecked? Or 1.6% of your user experience of your product. Doesn’t seem a lot, does it? How about 32% Again, for some, this is within acceptable margins. Especially if your brand or product is growing quickly, acquiring companies here, there and everywhere.</p> <p>But, 32% is the difference between a human and a goldfish. Even just 1.6% – probably acceptable margins for almost every brand or product out there – is the difference between a gorilla and a human. Think about that for a second.</p> <p>Your brand or design is supposed to be a human, but people perceive it as a gorilla. Or a banana.</p> <h2 id="applying-marginal-gains-to-brand-or-product-design">Applying Marginal Gains to brand or product design <a class="direct-link" href="#applying-marginal-gains-to-brand-or-product-design" aria-hidden="true">¶</a></h2> <p>What can you do about this? How do you stop a distributed organisation degrading itself? Well, entropy happens and this is always the struggle with any branding or design work on an ongoing basis. Like any garden, it needs tending.</p> <p>But, here are some of the things I do to stop the rot:</p> <ul> <li>Keep talking. To everyone. My job is to help create the environment in which marginal degradation doesn’t happen. I do this by talking to everyone across an organisation - so they feel involved, empowered, excited, free to be creative. I did this before working at Monotype too, but with other companies.</li> <li>‘Show the mess’. Design work is not that scary. Expose people who are not designers to the design process. By doing this you get better buy-in, involvement, and culture.</li> <li>Maintain a holistic view. It’s so easy to get dragged into the weeds. But sometimes, the weeds is exactly where some delightful little design problem exists. Who knows, maybe I end up doing some actual design work. You know, keeping my hand in. Well, no. Keep above the weeds.</li> <li>Draw straight lines between design and KPIs. This is a big one. What design and brand do should be measurable. Not by some <a href="">data Goloms</a> like the Net Promotor Score, but by committing to understanding your customer’s behaviour. You can only make incremental tiny improvements on a foundation of understanding. Measuring against real-world indicators puts design in black and white numbers all levels of an organisation can understand.</li> <li>Just be consistent. Even if you know it’s not ideal. It’s not something you’d do. Maybe you inherited a design system, or jumped on board half way through it’s creation. Maybe you just don’t like it anymore. That’s ok, you can take your time to get it changed, but in the meantime, be purposefully consistent.</li> <li>If you do deviate, make sure you do it with a plan. If you plan on being a gorilla, and deviating that 1.6%, then do so with purpose, not just because you are lazy.</li> </ul> <p>Plugging away at this tiny stuff is relentless. It’s the tiny details that, when viewed together, look big and insurmountable. But, taking one tiny improvement at a time, in the bigger scheme of things, you may be surprised at how quickly your product or brand starts perform. Not only that, but now you have a way to measure it.</p> Designing a good portfolio 2015-05-06T00:00:00+00:00 <p class="“stand" first”="" markdown="1"> It’s 1998 and I’ve just arrived in Bangkok and it’s 90F at night. I’ve arrived at a small hostel just around the corner from the Khao San Road and, just like everyone else travelling or on a gap year, I’m a walking stereotype. From my flip flops, overly loose trousers, consumption of banana fritters and cheap Thai beer. Oh, and well-thumbed copy of [The Beach]( </p> <p>Like I said; a walking stereotype. Except for lugging around the 2kg A3 sized portfolio case rammed into my already weighty backpack.</p> <p>It’s 1998. The web is still in its infancy, but it’s there and pretty good. Fireworks was on version 1. I used <a href="">Internet Explorer 5</a> and <a href="">Eudora</a> The first iMac had been recently released. Not really the dark ages, but here I am, lugging around an additional 2kg of dead trees for two months around South East Asia. Why? Well, I wanted a good job when I got to Sydney. And, as a designer, a good portfolio – or ‘Book’ as it’s called in advertising – would get me one.</p> <p>Let me back-peddle a bit to my first job as an intern at an ad agency in Manchester. There worked an Art Director called Tom. Tom was quiet mannered, quick to smile and laugh, and much quicker to point out a small opportunity for improving a design. Together with the other Art Directors, he taught me about hierarchy and how to make type fit on a page (this was a distinct problem when designing plumbing catalogues). But he also taught me the value of a good Book. How to design one; how to tell a story through your work; how to present your work and do enough in the portfolio to get you a foot in the door which is what junior designers needed so much back then.</p> <h2 id="%E2%80%9Cleave-your-book-and-pick-it-up-tomorrow%E2%80%9D">“Leave your book and pick it up tomorrow” <a class="direct-link" href="#%E2%80%9Cleave-your-book-and-pick-it-up-tomorrow%E2%80%9D" aria-hidden="true">¶</a></h2> <p>My experience of looking for a job early in my career was probably quite usual amongst my peers: I never replied to a job advert. Instead, I was encouraged to get together a list of the places I’d like to work and then to sell my portfolio around them. So, there I was; fresh out of school, full of ‘I got a First Class honours degree’ confidence selling myself from agency to agency. It was a baptism of fire. I remember the first day was particularly horrific. Out of the six or so agencies I’d arranged to visit, only one was happy to let the art director see me rather than just leave my Book and pick it up tomorrow. And then, my work was systematically ripped to shreds by an Art Director with too little time on his hands.</p> <p>Now, this isn’t meant to sound like ‘oh, woe was me and my hard time finding a job’. But, I am trying to recall how my portfolio was the start of a conversation. And, generally, a conversation I wasn’t there for. I didn’t really plan for that so had to adapt the work to invite that second meeting.</p> <h2 id="oh%2C-those-soft-skills">Oh, those soft skills <a class="direct-link" href="#oh%2C-those-soft-skills" aria-hidden="true">¶</a></h2> <p>So much of what we do is working with people. Sometimes, though, I think I need to have experience in counselling or negotiation tactics in order to usher through design changes which impact organisations at their core. It’s difficult work. And, if you’re not the type of person who like talking to other people, then the impact of your work will only go so far. The question is, how do you demonstrate this in your portfolio? How can you demonstrate the value of design games, or collaborative moodboard exercises? Or that it took six months of negotiating with dozens of facets of an organisation in order for a content strategy to be adopted? My advice would be to write a story. Show photographs of workshops. Demonstrate how you approach these things. List the methods you’ve used and those that have worked. List those that haven’t and the reasons why.</p> <p>This may seem odd for a portfolio, but if you think about it, design agencies have been doing this for decades. This is because they have similar problems. A lot of agencies sell the <em>process</em> of design, not the end result. In order to charge money for things like strategy, research, collaboration and what-not, all of which is difficult to <em>show</em> in a piece of design, they have to demonstrate it in other ways; case studies, stories, photographs. Packaging the work to show the full range of what was worked on.</p> <h2 id="a-few-pointers-tom-gave-me-(and-a-few-of-my-own)">A few pointers Tom gave me (and a few of my own) <a class="direct-link" href="#a-few-pointers-tom-gave-me-(and-a-few-of-my-own)" aria-hidden="true">¶</a></h2> <p>Let me take you back to Manchester in 1995. I think it was early in a week in July. It was probably raining, as is usual in my home city. Anyway, Tom and I are discussing university and where I’d like to work and doing what. I start talking to him about my final year and the projects that await and he begins to advise me on not leaving my portfolio work too late. That I should be working on it throughout my final year and how I shouldn’t under-estimate the amount of work it will take. A year! Surely it couldn’t take a year, I said. It’s just a dozen prints after all. ‘No’, he said. ‘It’s probably the most important piece of work you’ll do in your final year, and one you won’t get marked on until you try and find a paying job’.</p> <p>Over a nice hot cup of tea, he and I chatted for an hour or so about what makes a great portfolio and all of the things he considers when a dozen or so would land on his desk every single week. At the time, this was for a print portfolio, but looking at these now, you could easily see how they’d apply to all types of portfolio, including those for a small studio or agency.</p> <p>Here are the highlights…</p> <h3 id="snapshot">Snapshot <a class="direct-link" href="#snapshot" aria-hidden="true">¶</a></h3> <p>Who was the client? When did you work on this. What was the Date? What was your role? What was the value to the client? But keep this brief. This meta data way-finding is important when skimming through a portfolio.</p> <h3 id="show-a-progression">Show a progression <a class="direct-link" href="#show-a-progression" aria-hidden="true">¶</a></h3> <p>Show work that didn’t cut it. Demonstrate your ability to change and iterate and show variance to get to a solution. This also demonstrates your graphic design capability, copywriting, and visual thinking.</p> <h3 id="be-honest">Be honest <a class="direct-link" href="#be-honest" aria-hidden="true">¶</a></h3> <p>If you worked under a senior, say so. Talk about why projects might not have been completed. Honestly, if you bend the truth, it’ll catch up with you at some point.</p> <h3 id="breadth">Breadth <a class="direct-link" href="#breadth" aria-hidden="true">¶</a></h3> <p>If your work is just a bunch of posters, of a certain type of client or work, then it’s easy to pigeon hole you. If you just design icons, that’s the type of work you’ll get. Demonstrate breadth, even if it means working on your own side projects or setting yourself your own briefs.</p> <h3 id="fewer-and-better">Fewer and better <a class="direct-link" href="#fewer-and-better" aria-hidden="true">¶</a></h3> <p>Be very, very picky about what you show. If you only done three projects you are really proud of, then just show them. Talking passionately about how it went, what your contribution was, and what happened after it was finished will shine much brighter than ten single pieces of work. It’s easy to spot things made with care and love, even those commercial projects that fell short of the mark (and it’s ok to say that if you know the reasons why).</p> <h3 id="walk-the-walk">Walk the walk <a class="direct-link" href="#walk-the-walk" aria-hidden="true">¶</a></h3> <p>If you can code, then demonstrate it. If you can’t, be clear about why you don’t think that’s applicable for your role and growth. Either way, conviction in your own abilities or not will tick boxes.</p> <h3 id="work-is-more-about-pictures">Work is more about pictures <a class="direct-link" href="#work-is-more-about-pictures" aria-hidden="true">¶</a></h3> <p>The big difference between junior designers on the web and print is quite stark, but the more experienced you become, the roles become similar. It becomes less about pretty pictures, and more about facilitating a process from beginning to end. Think about how you can convey something before hand that isn’t a picture. This is where writing about your work trumps showing pictures. Because sometimes there just aren’t any pictures to show.</p> <p>And, the last point I think nicely rounds off this post.</p> <h3 id="it%E2%80%99s-the-start-of-a-conversation">It’s the start of a conversation <a class="direct-link" href="#it%E2%80%99s-the-start-of-a-conversation" aria-hidden="true">¶</a></h3> <p>This was applicable when I started my first job, when I ran a small agency, and now I work in-house at Monotype. Any portfolio is the start of a conversation. It needs to invite discussion, further questioning, and that all important call-back.</p> <p>Going back to that stereotype traveller type, wandering around Asia with an extra 2kg in his backpack… Well, I arrived in Sydney. I had a very short list of studios I wanted to work for and proceeded in doing what I’d done before: making myself a nuisance until I had the opportunity to either leave my Book, or talk it through with someone. I managed to get the job I wanted with a great little company in Sydney called Spike. It was my first web design job. All thanks to Tom and his advice. And a sturdy rucksack.</p> A Design SDK 2015-03-16T00:00:00+00:00 <p class="standfirst" markdown="1">A [software SDK]( is a set of tools that allows the creation of applications for certain software, or video games, or a hardware platform. A hit could be as simple as a bunch of APIs or [software that talks]( to embedded or proprietary systems. An SDK is a collection of tools to make something with. It’s a leg-up for development. And they’re needed for design, too.</p> <h2 id="guide-me%2C-don%E2%80%99t-tell-me">Guide me, don’t tell me <a class="direct-link" href="#guide-me%2C-don%E2%80%99t-tell-me" aria-hidden="true">¶</a></h2> <p>When working with identity guidelines, pattern libraries, or styleguides, the biggest pushback I hear from designers is ‘I don’t want to be this specific. Point me in the right direction, but don’t be prescriptive’. The chances of a pattern library or styleguide answering every design problem that comes along is slim, but providing an overall understanding of a system is probably the best position you can put a designer in in order for them to do good work. That, and providing them with the right tools.</p> <p>Giving someone a design SDK may be better than asking people to look for, navigate and understand an entire website dedicated to your design language.</p> <p>For example, let’s say you work for a large bank in their in-house design team. Your design language is years old and grown organically to become a place of internal collaboration for stakeholders and silos – not really the place for external suppliers. One day, you need to get a very small web project designed and your team is maxed out so you outsource it to a freelancer. Now you’re faced with a problem.</p> <p>Your design language documentation and collaboration site is housed internally, behind the company firewall, and you can’t give her access. You try to collect some material together for her, but it takes all morning before you even have an idea of what might be needed. And then you can’t find the logo in the right format. All you really need to do is send her what is needed and <em>nothing more</em>.</p> <p>All of this takes too much time. And a styleguide doesn’t solve the problem. A design SDK is what you need.</p> <p>A style guide is about providing the right help for every use case all in one place. An SDK is about providing the right help for a specific environment. In software development, APIs may have middleware wrappers like a PHP and Ruby. But regardless of the wrappers, the endpoint is always the same: the software at the end of the API. In the same way, a Design SDK should provide an end-point — a design language — typically via different methods such as HTML and CSS, or Sketch files, or Photoshop files, or text documents, or InDesign swatches.</p> <p>The key to this is to <em>be where the designer is</em>. Learn where your designers and design partners do their work and provide tools that help get your design language adopted in those tools.</p> <h2 id="the-problem-with-style-guides">The problem with style guides <a class="direct-link" href="#the-problem-with-style-guides" aria-hidden="true">¶</a></h2> <p>Style guides can be great for documenting a design system and providing a way for design to be consistent across multiple projects, products and people. But they can also be a shackle for creativity. A firehose of difficult to navigate content that compromises clarity for brevity. The key thing with style guides is they rely on you going hunting for what you need. They are everything for everybody. They are pull rather than push.</p> <p>A design SDK I’m talking about is push rather than pull. It’s given to you, and it contains just what you need and nothing more.</p> <h2 id="what-would-be-in-a-design-sdk%3F">What would be in a design SDK? <a class="direct-link" href="#what-would-be-in-a-design-sdk%3F" aria-hidden="true">¶</a></h2> <p>The key here is to provide just enough for someone to get going with their work. For some projects, this may be all of the following, but for others, it could just be a couple.</p> <ul> <li>Moodboards and inspiration</li> <li>HTML boilerplate</li> <li>CSS or Sass snippets</li> <li>Template assets</li> <li>Suitable example images</li> <li>Icons in various formats</li> <li>Licensed typefaces or links to the correct typefaces</li> <li>Branding identity guidelines</li> </ul> <p>It would be ideal for me if an SDK could be created on the fly for different people based on project needs. So, for example, for freelancer ‘A’, I don’t want to send them HTML or CSS as I know they’re not building anything, so I just send them mood boards and inspiration, image assets and branding guidelines. For freelancer ‘b’, a front-end developer, I send boilerplate, CSS, template assets and icons. I mix and match and <em>provide</em> the design SDK, rather than send along a URL and expect them to know what they need and how to use them.</p> <h2 id="%E2%80%98isn%E2%80%99t-this-just-for-big%2C-in-house-teams-and-projects%3F%E2%80%99">‘Isn’t this just for big, in-house teams and projects?’ <a class="direct-link" href="#%E2%80%98isn%E2%80%99t-this-just-for-big%2C-in-house-teams-and-projects%3F%E2%80%99" aria-hidden="true">¶</a></h2> <p>No, I don’t think it is. There were plenty of times when I ran my design agency that we could use a design SDK as a deliverable for a client. Because, after you have finished working with them, chances are they will need other people to take forward your design in one way or another. And maybe the client isn’t the best person to determine what is needed to do that. A design SDK would be a great deliverable to ensure design integrity is maintained after you move onto other projects.</p> Visual Design might be a thing 2015-02-02T00:00:00+00:00 <p class="standfirst" markdown="1">If you recall, a few years ago, [I wrote about my belief that the term ‘visual Design’](/journal/visual-design-is-not-a-thing) was propagating through the UX community and the potentially damaging effect that was having on the problem-solving roots of graphic design practice. This was swiftly followed up by a [longer piece for The Manual]( </p> <p>I’ve had a lot of comments from people since then – either agreeing or disagreeing (y’know, the web) but over the past six months or so I’m coming around to the idea that Visual Design might actually be a thing. It’s just incredibly rare and is dependent on a number of rarely addressed factors.</p> <h3 id="following-the-problem">Following the problem <a class="direct-link" href="#following-the-problem" aria-hidden="true">¶</a></h3> <p>Michael Bierut explains in his piece ‘<a href="">You’re so Intelligent</a>’ that graphic design has long suffered from what he calls ‘Problem Definition Escalation’:</p> <blockquote> <p>Like many designers, for years I used a tried-and-true tactic to hoist my way up the respect ladder, a technique I will here call Problem Definition Escalation. If you've listened carefully to the lyrics to &quot;Gee, Officer Krupke&quot; in West Side Story you already know how this works. The client asks you to design a business card. You respond that the problem is really the client's logo. The client asks you to design a logo. You say the problem is the entire identity system. The client asks you to design the identity. You say that the problem is the client's business plan. And so forth. One or two steps later, you can claim whole industries and vast historical forces as your purview. The problem isn't making something look pretty, you fool, it's world hunger!</p> </blockquote> <p>This behaviour is everywhere I’ve looked and worked for my whole career. From designers to content strategists, product managers to researchers. Almost always though, unlike Mr Bierut, I don’t think this is a need to elevate ones self through any sort of professional low esteem. I like to look at this a different way.</p> <p><em>This is a result of people trying to find the problem</em>. It just so happens the problem is rarely the logo.</p> <h3 id="from-board-room-to-your-users-and-everywhere-in-between">From board room to your users and everywhere in between <a class="direct-link" href="#from-board-room-to-your-users-and-everywhere-in-between" aria-hidden="true">¶</a></h3> <p>If you think of Visual Design as being on top of a stack of other activities and functions, it might look something like this:</p> <ol> <li>Visual Design</li> <li>Stuff</li> <li>Customer needs / Value proposition</li> <li>Board of Directors / Leadership</li> <li>Organisation environment / culture</li> </ol> <p>‘Stuff’ of course is a big, fat catch-all for all other tactical product design and development.</p> <p>Customer needs have to be balanced with the product value proposition and opportunity. This is built up on a capable and supportive leadership team. But the bottom layer is probably the most important of them all. The environment.</p> <p><a href="">The environment</a> has to be right for all of the other things to happen. Unfortunately, ‘environment’ or company culture is hard to define and replicate. But how we use processes – such as agile, or defining market opportunities, through to how you refer to customers and evaluate designs - is probably the most important of them.</p> <h3 id="the-problem-story">The Problem Story <a class="direct-link" href="#the-problem-story" aria-hidden="true">¶</a></h3> <p>It wasn’t until I saw <a href="">Leisa Reichelt</a> talk through how the <a href="">UK Government Digital Service team</a> work – from the Creative Director through to the developers and researchers – that I saw a corporate culture and structure where Visual Design could be a thing. Why? Because the problems had been defined, researched, worked through, solved, iterated upon in the layers below. Doing this means that probing the problem results in answers quite quickly. And the more the problem is probed, instead of it all unravelling, it builds into a cohesive narrative. The problem has a story that can be easily tracked back.</p> <h3 id="visual-design-might-be-a-thing">Visual Design might be a thing <a class="direct-link" href="#visual-design-might-be-a-thing" aria-hidden="true">¶</a></h3> <p>If the problem has a story that can be traced back, the environment is supportive, and answers are available, then I can certainly see instances where designers learn not to go hunting for the problem. And, thinking about it, I wonder if this behaviour is more probable in in-house work, rather than agencies? Why? Because agency designers are used to clients coming to them with bigger problems than they initially present. This is how agencies generally get more work from larger clients – we follow the problem and, together, make projects to address them.</p> <p>But, anyway, back to visual design.</p> <p><em>If</em> the problems are solved. If the designer is used to not going hunting for the <em>real</em> brief. Then, and only then, I think visual design could be a thing. When a designer has the right information, is working on the right graphical problem where she can focus on, what Michael Bierut describes as:</p> <blockquote> <p>our miraculous fluency with beauty, our ability to manipulate form in a way that can touch people's hearts… the gifts that matter, and the paths through which we create things that truly endure.</p> </blockquote> <p>Yeah. Maybe that’s when visual design might well be a thing.</p> Adventures with Plex 2014-10-10T00:00:00+00:00 <p>I've <a href="">written before about going completely digital</a> for our home entertainment. To recap: I have a big, shared hard drive attached to an iMac that two Apple TVs share to using <a href="">ATV Flash</a> This was fine for a while, but, frankly, ATV Flash is a little buggy over our network and the Apple TV struggled with any transcoding (converting one file type to another) and streaming – especially in HD. So, we needed something better. In steps a few things: <a href="">Netflix</a>, <a href="">Plex</a> and a Mac Mini.</p> <p>Plex has been on my radar for a few years and up until recently didn't really make much sense for me. But as ATV Flash was becoming more unstable as Apple updated their OS, then Plex started to look like a good alternative.</p> <h2 id="the-hardware">The hardware <a class="direct-link" href="#the-hardware" aria-hidden="true">¶</a></h2> <p>As you may have read from my older post, I did have shared hard drive with all the media on hooked up to an iMac which the Apple TVs shared into to browse the media. The issue here became network and sharing reliability. Quite often, the shared hard drive was invisible because the iMac was asleep, or the network had dropped. Sometimes this happened in the middle of a movie. Not ideal.</p> <p>The new setup is almost identical, but instead of using the Apple TVs as hardware to browse the library, they are now being used just as a device to Airplay to. I barely use the Apple TV UI at all. Browsing from my iPad and then air playing to the Apple TV. What's cool here is that the iPad just acts as a remote, the file itself is being transcoded on the server and just pushed to the Apple TV directly.</p> <h3 id="what-about-a-standalone-nas-(network-attached-storage)%3F">What about a standalone NAS (Network Attached Storage)? <a class="direct-link" href="#what-about-a-standalone-nas-(network-attached-storage)%3F" aria-hidden="true">¶</a></h3> <p>Plex does run on a NAS , but the issue there is most consumer NAS boxes don't have the hardware grunt to do the on-the-fly transcoding. So, I finally decided to ditch my iMac in favour of a headless Mac Mini to run as a decent media box, running Plex.</p> <h2 id="getting-started-with-plex">Getting started with Plex <a class="direct-link" href="#getting-started-with-plex" aria-hidden="true">¶</a></h2> <ol> <li> <p><a href="">Download it</a>. Get the Media Server on your computer or NAS of choice (Plex has huge device support). Also, get hold of the mobile apps. Once you're done there, download Plex for your connected apps: from Chromecast, Amazon Fire TV, Roku, Google TV or native Samsung apps and, now, the Xbox One, too. The app support is really quite incredible.</p> </li> <li> <p><a href="">Plex Pass</a>. Even though the software for Plex is free, there are some additional things that are left for a subscription that you have to buy. The good thing is, you can get a lifetime subscription and the cost is very reasonable at $149.99. For that, you get early access to new builds, syncing content remotely, things like playlists and trailers. But the killer feature of the Plex Pass is the ability to create user accounts for your content. Now this is something I've been after for ages on the Apple TV, and even more important now my eldest daughter regularly watches films on it. I need the ability to filter the content appropriately for her.</p> </li> <li> <p>Setting up a server is a breeze. Once you've installed the server software, get yourself a user account on the Plex website and set up a server. This launches some web software for you to start adding files to your libraries and fiddle away to your hearts content with all the settings.</p> </li> <li> <p>If you did get the Plex Pass, I'd recommend creating multiple user accounts and playlists with the features Plex Pass gives you. The way I did this was to have email addresses and user accounts for server-plex, parents-plex and kids-plex. server-plex is for administering the account and has all the libraries shared with it. 'parents' for Emma and I, and 'kids' just has the 'children's' library shared with it. Now, by simply signing in and out of the iPad, I can access the appropriate content for each user group.</p> </li> </ol> <h3 id="next-up%3A-streaming%2C-or-'how-do-i-watch-the-film-on-my-telly!%3F'">Next up: streaming, or 'How do I watch the film on my telly!?' <a class="direct-link" href="#next-up%3A-streaming%2C-or-'how-do-i-watch-the-film-on-my-telly!%3F'" aria-hidden="true">¶</a></h3> <p>There are a few options:</p> <ol> <li> <p>Native apps (Samsung, XBox One etc)<br> These are apps installed directly on your TV or Xbox. To watch your content, simply fire up the app and away you go. Yesterday, I installed the Xbox One app and was up and running in less than three minutes.</p> </li> <li> <p>iOS and Airplay<br> This is what I described earlier. Simply download the iOS apps and hook up to your plex server. Once you're done, browse your library, press play and then airplay to your Apple TV.</p> </li> <li> <p>iOS and Chromecast<br> Exactly the same as above!</p> </li> </ol> <p>Now, there are some disadvantages and advantages to streaming.</p> <p><em>Disadvantages</em>: From what I understand, adding Airplay into the mix does have a slight performance hit. Not that I've seen it, though. I'm only generally streaming 720 rather 1080 resolution, so the file sizes are coming up against network limitations. I do expect this to change in the coming years as resolution increases.<br> <em>Advantages</em>: It's a breeze. I use my Plex app on my iPad, choose a film or TV show I want to watch and then just stream it via Airplay. When I'm travelling, I take a Chromecast with me to plug into the TV and stream to that (more on that in another post).</p> <h3 id="'hacking'-the-apple-tv">'Hacking' the Apple TV <a class="direct-link" href="#'hacking'-the-apple-tv" aria-hidden="true">¶</a></h3> <p>Currently there is no native app for the Apple TV, but there is a way to get around this by 'hacking' the Trailers app to directly browse your content on your plex server using PlexConnect or <a href="">OpenPlex</a>. Now, there's a lot to read to get up to speed on this, so I'd recommend a good look through the <a href="">plex forums</a>. I followed the <a href="">instructions here</a> to install the OSX app, add an IP address to the Apple TV (to point to the plex server) and, so far, so good.</p> <p>To be honest, though, I tend to just Airplay these days. The iPad remote / Apple TV combination is quite hard to beat. It's fast, flexible and stable.</p> <h2 id="is-this-it-for-my-digital-home-needs%3F">Is this it for my digital home needs? <a class="direct-link" href="#is-this-it-for-my-digital-home-needs%3F" aria-hidden="true">¶</a></h2> <p>For a good few years now I've been looking for the optimum solution to this problem. My home media centre needed the following:</p> <ul> <li>Multi-user accounts</li> <li>Full-featured remote</li> <li>Large file format support</li> <li>Manage music, photos and movies</li> <li>Fast transcoding and streaming (minimum 720)</li> </ul> <p>Both iTunes, ATV Flash, Drobo (in fact, any domestic NAS) fail on all or most of these points. Plex not only ticks every single box (if it's run on a decent machine for transcoding), but provides very broad device support, an active developer community and a <em>really</em> good UX for the interface.</p> <p>Who knows how long I'll stick with Plex as I do have a habit of switching this around as often as I change my email client (quite often!). But, for now, it's working just fine!</p> It's not you, it's me 2014-09-07T00:00:00+00:00 <p class="standfirst" markdown="1">Dear web conferences, </p><p>It's not you, it's me. Something's changed and it's not your fault. I'm just on a different path to you. Maybe we'll be friends in a while, but at the moment I just want some space to do and try other things.</p> <p>I still love you. But we just need a break.</p> <p>Love,<br> Mark</p> <p></p> <hr> <p>I'm taking next year off speaking at web conferences. It's not that I don't have anything to say, or contribute, but more that I have better things to do with my time right now. Speaking at conferences takes about two weeks per conference if it's overseas once you factor in preparing and writing the talk, rehearsing, travel, and the conference itself. That's two weeks away from my wife, my daughters, my new job and a team that needs me.</p> <h2 id="two-conferences-the-world-over">Two conferences the world over <a class="direct-link" href="#two-conferences-the-world-over" aria-hidden="true">¶</a></h2> <p>What I've noticed this past year or so is, largely, we have two different types of web conference running the world over: small independents and larger corporate affairs. The former is generally run by one person with hoards of volunteers and is community-focussed (cheap ticket price, single track). The latter is big-budget, aimed at corporations as a training expense, maybe multi-track and has A-list speakers.</p> <p>As well as these two trends, I see others in the material and the way that material is presented. 'Corporate' conferences expect valuable, actionable content; that is what corporations are paying for. Schlickly delivered for maximum ROI. 'Community' conferences have their own trends, too. Talks about people, empathy, community, and how start-ups are changing the world. Community conferences are frequently an excuse to hang out with your internet mates. Which is fine, I guess.</p> <p>My problem with both of these is I'm not sure I fit anymore. I'm not what you would call a slick presenter: I 'um' and 'ah', I swear, I get excited and stumble on stage in more ways than one. Some would say I'm disrespectful to the audience I'm talking to. I'm lazy with my slides, preferring to hand-write single words and the odd picture. I've never used a keynote transition. I'm not really at home amongst the world's corporate presenters who deliver scripted, rehearsed, beautifully crafted presentations. They're great and everything, but it's just not me. Not for the first time in my life, I don't quite fit.</p> <p>And then there's the community conferences. I feel more at home here. Or at least I used to. This year, not so much. A lot of my friends in this industry just don't really go to conferences that much anymore. They have family commitments, work to do, and – frankly – just aren't that into getting pissed up in a night-club after some talks with 90% men. Younger men at that.</p> <h2 id="time-for-something-different">Time for something different <a class="direct-link" href="#time-for-something-different" aria-hidden="true">¶</a></h2> <p>All of that may sound like I'm dissing the conference industry. That's not my intention, but more like a realisation that, after nearly ten years at speaking at events, I think it's time I had a little break. Time away to refresh myself, explore other industries that interest me like typography and architecture. Maybe an opportunity to present at one of these types of conferences would present itself; now that would be cool.</p> <p>I know it's a bit weird me posting about this when I could quietly just not accept any invitations to speak. To be honest, I've been doing that for a little while, but not for the first time, writing things down helps me clarify my position on things. For a while I was angry at web conferences in general. Angry at the content, disappointed with speakers, disappointed at myself. Then I realised, like so many times before, that when I feel like that it's just that my 'norm' has changed. I'm no longer where I used to be and I'm getting my head around it.</p> <p>It's just this time, I'm going to listen to my head instead of burying it two feet in some sand.</p> <p>Laters.</p> A Purple Princess 2014-06-12T00:00:00+00:00 <p>When I told my eldest daughter, Alys, about <a href="">Rebecca Meyer passing away</a>, she wanted to draw her a <a href="">purple</a> picture. Rebecca was the same age as Alys and she knew ‘exactly what she’d like’. So, here it is:</p> <p><img src="" alt="A purple princess for Rebecca Meyer from Alys Boulton"></p> <p class="caption">A Purple Princess for Rebecca Meyer from Alys Boulton, Age 6</p> <p>In memory of Rebecca, whose favourite colour was purple.</p> My Handbook – Environment 2014-06-05T00:00:00+00:00 <p class="standfirst" markdown="1">I’ve been doing a talk this year called ‘My Handbook’. it’s a rather silly little title for a bunch of principles I work to. They are my ‘star to sail my ship by’, and I’m going to start documenting them here over the coming months, starting with Environment – a post about how, for me, design is more about the conditions in which you work.</p> <p>I’d describe myself as an armchair mountaineer. I enjoy reading about man’s exploits to get to the roof of the world, or to scale precipitous walls under harsh conditions for no other reason than the same reason George Mallory said he was climbing Everest: ‘Because it’s there’.</p> <p>In any expedition to a mountain, great care and consideration is taken over the kit, the climber’s skill, the team around them, the communications, the list is seemingly endless. But, the biggest single factor in a successful trip are the conditions of the mountain. Will the mountain let them up. And back down again. Assessing the condition of a mountain takes experience, time and careful consideration; it may be snowing, too warm, too much snow on the ground, too cold, too windy. The list of variables is endless, but the climber considers all of them, and if necessary moves to adjust the route, or simply doesn’t attempt the climb.</p> <p>Now, let’s shift to design – not necessarily web design, but commercial design of almost any kind. Let’s say you take a brief for a project, you begin the work and suddenly in the project, other stakeholders come on board and start to have comment on your work and direction on strategy that was unknown to you. We’ve all had projects like those, right? Suddenly, your work becomes less about what you may think of as ‘design’, and more about meetings, project management, account management, sales, production work. You know, all of those things that have a bad reputation in design. Meetings are, apparently, toxic. Well, I’ve started to look at this in a different light over the past few years.</p> <p>As I’ve grown as a designer, like many, I’ve found myself doing less ‘design’. Or, rather, less of what I thought was design. Five years ago, I thought design was creating beautiful layouts, or building clean HTML and CSS, or pouring over typefaces for just that right combination. Now, this is design. But, so are meetings.</p> <p>Experienced designers spend time making the environment right whilst they are doing the work. Because, frankly, you can push pixels around forever, but if the conditions aren’t right for the work to be created and received by the client in the right way, the work will never be as good as it could be. But, what do I mean by ‘conditions’? Here are a few practical things:</p> <ul> <li> <p><em>The physical space</em>: I see a large part of my job as making the environment in the studio as conducive as possible for good work to happen. That means it’s relaxed, and up-beat. Happy people make good things.</p> </li> <li> <p><em>A Shit Umbrella</em>: It’s my job to be a filter between client and my team on certain things. Someone recently described this as being a ‘Shit Umbrella’.</p> </li> <li> <p><em>Politics</em>: Wherever you get people, you get politics – because people are weird. I spend a lot of time on client projects trying to traverse a landscape of people to understand motivations, problems, history or direction. Once you understand the landscape, you can assess, and work to change, the conditions.</p> </li> <li> <p><em>People first, process second</em>: We fit the processes to the people rather than the other way around. Our team runs things that works for us, but that’s the result of a lot of trying &amp; discarding. Like tending a garden, this is a continual process of improvement.</p> </li> <li> <p><em>Just enough process</em>: I’m a firm believer in working to the path of least resistance. Being in-tune with how people work, and changing your processes to suit, helps create a good environment. But we ensure we impose <em>just enough</em> structure. To much, and it gets in the way. This doesn’t work if you don’t do the previous point, in my experience.</p> </li> <li> <p><em>Talk. Do. Talk.</em>: It really is true that the more we talk, the better work we do. We talk in person, on Slack, on Skype, on email. Just like meetings, there is an industry-wide backlash against more communication because the general consensus is we’re getting bombarded. But recently, we’ve been working to change that perception in the team so that talking, and meetings, and writing <em>is</em> the work. It’s tending the garden. Making the conditions right for good work to happen.</p> </li> <li> <p><em>Making things is messy</em>: This is actually another point from my ‘handbook’. Since the 1950’s clients and designers have been sold a lie by advertising. Design generally isn’t something that happens from point A to Z with three rounds of revisions. It’s squiggly, with hundreds or thousands of points of change. A degree of my time is spent getting people – clients, internal clients, the team – comfortable with the mess we may feel we’re in. It’s all part of it.</p> </li> </ul> <p>I see all of this as design work. It’s also my view that much of the disfunction from large agencies to other organisations is that this work isn’t being done by designers because they don’t see it as the work. It’s being done by other people like account managers who may not best placed to get the conditions right. Designers need to take responsibility for changing the environment to make their work as good as it can be. Sometimes, that means sitting in a board room, or having a difficult discussion with a CEO.</p> <p>Mountaineering is so often not about climbing. You may do some if the conditions are right. Design is so often not about designing beautiful, useful products. But, you may do some if the conditions are right.</p> Ingredients 2014-05-13T00:00:00+00:00 <p class="standfirst" markdown="1">[Jeremy wrote something special yesterday]( That’s not unlike Jeremy, but this blog post in particular struck a chord with me. </p> <p>A couple of weeks ago, <a href="">Google Chrome has toyed with the idea of removing most of the URL </a> because it’s a “power user” feature in favour of a simple, easy to understand signpost of where the user is. Jeremy’s point is there is a deeper warning here of ease of use.</p> <blockquote> <p>… it really doesn’t matter what we think about Chrome removing visible URLs. What appears to be a design decision about the user interface is in fact a manifestation of a much deeper vision. It’s a vision of a future where people can have everything their heart desires without having to expend needless thought. It’s a bright future filled with seamless experiences.</p> </blockquote> <p>I read Jeremy’s post and kept re-reading it. My instant thought was of food.</p> <p>I enjoy cooking – have done for a decade – and the more I do, the more I care about ingredients. Good produce matters. Now, I’m not talking about organic artisan satsumas here, but well grown, tasty ingredients; in season, picked at the right time, prepared in the right way. The interesting thing is most people who eat the resulting dish don’t think about food in this way. They experience the dish, but not the constituent parts.The same way some people experience music – if you play an instrument, you may hear base-lines, or a particular harmony. If you enjoy cooking, you appreciate ingredients and the combination of them.</p> <p>But ingredients matter.</p> <p>And they do of websites, too. And the URL is an ingredient. Just because a non-power user has no particular need for a unique identifier doesn’t mean it’s any less valuable. They just experience the web in a different way than I do.</p> <p>Without URLs, or ‘view source’, or seeing performance data – without access to the unique ingredients of websites – we’ll be forced into experiencing the web in the same way we eat fast food. And we’ll grow fat. And lazy. And stop caring how it’s grown.</p> <p>As Jeremy says: Welcome aboard the Axiom.</p> A new beginning for Five Simple Steps 2014-05-08T00:00:00+00:00 <p class="standfirst" markdown="1">I'm so happy to tell you that [Five Simple Steps]( has been acquired by Craig Lockwood and Amie Duggan. The dynamic duo behind Handheld conference, The Web Is, FoundersHub and BeSquare. Before I tell you again how thrilled I am, let me take you way back to 2005...</p> <p>Next year, it will be ten years since I wrote a blog post called <a href="">Five Simple Steps to better typography</a>. The motivation behind the post was simple: the elements of good typesetting are not difficult, and, with a few simple guidelines, anyone could create good typographic design. That one article became part of a small series of five posts: five simple steps, with each article containing five simple steps. It was a simple formula, but it turned out pretty well.</p> <p>Soon after that initial post, I wrote <a href="">Five Simple Steps to designing grid systems for the web</a>, then the <a href="">same for colour theory</a>. This was now 2006 and I'd just left my job at the BBC. It was a dreary October day and, whilst sat in a coffee shop in Bristol after just visiting one of my first freelance clients, I was talking over email to the Britpack mailing list about compiling my posts into a book. In 2008, Emma and I hired my brother to help me design it and in early 2009, we finally released it. And with the release of that first book, Five Simple Steps Publishing was born. But we didn't know it at the time.</p> <p>Over subsequent months and years other authors saw what we produced and wanted us to publish their books. Before we really knew it, we were a publisher with a catalogue of titles and providing a uniquely British voice to the web community. But publishing is tough. As we found out.</p> <p>All over the world, publishers' profits are being eroded; from production costs to cost-difference in digital versions. And – except for a couple of notable companies – you see it in the physical books that were being produced for our customers by competitors: terrible paper quality, templatised design, automated eBook production. Everywhere, margins are being squeezed, and the product really suffers.</p> <p>Our biggest challenge was that Five Simple Steps started as a side project, and always stayed that way. Over time, we just couldn't commit the time and money it needed to really scale. We had <em>so</em> much we wanted to do – there was never any shortage of great authors wanted to write a book – but could never find the time and energy when we had to run a client services business. Oh, and also during this time, Emma and I had two children. Running and growing two businesses is somewhat challenging when you're being thrown up on and have barely four hours sleep a night.</p> <p>So about a year ago, Emma and I sat in our dining room and faced a tough decision: wind down Five Simple Steps, sell it, or give it one more year. We chose the latter. It was a tough year, but Emma, Nick and the team worked to make the Pocket Guide series a great success. So much so, it required tons of work and compounded the problem we had: Five Simple Steps needed to take centre stage rather than be a side project.</p> <p>A month ago today, Emma and I announced that Five Simple Steps was closing. The team were <a href="">joining Monotype</a>, and Five Simple Steps could no longer be sustainable as a side project. The writing had been on the wall for a while, but the stop was abrupt for us, the authors and the team. We tried to find the right people to take the company forward before the sale, but we couldn't find the right people. Luckily, immediately following the announcement, a few people got in touch about seeing if they could help. Two of those people really said some interesting things and got us excited about the possibilities: <a href="">Craig Lockwood</a> and <a href="">Amie Duggan</a>.</p> <p>Craig and Amie live locally in Wales. They run conferences: <a href="">Handheld conference</a> and <a href="">The Web Is</a> conference later this year. They also run a co-working space in Cardiff called <a href="">FoundersHub</a>. They have a background in education and training, and together with their conferences and <a href="">BeSquare</a> – a conference video streaming site – they have the ecosystem in place to take Five Simple Steps to places we could only dream of. As you may gather, we're chuffed to bits that Five Simple Steps is going to live on. Not only that, but it's in Wales and in the competent hands of friends who we know are going to give it the attention it deserves.</p> <p>Emma and I can't wait to see where it goes from here.</p> Conference speakers, what are you worth? 2014-05-02T00:00:00+00:00 <p class="standfirst" markdown="1">Over the past couple of days, there have been rumblings and grumblings about speaking at conferences. How, if you're a speaker, you should be compensated for your time and efforts. My question to this is: does this just mean money?</p> <p>I've been lucky enough to speak at quite a few conferences over the years. Some of them paid me for my time, some of them didn't. All of them – with the exception of any DrupalCon – paid for my travel and expenses.</p> <p>When I get asked to speak at a conference, I try to gauge what type of conference is it. Is it an event with a high ticket price with a potential for large corporate attendance? A middle sized conference with a notable lineup. Or, is it a grassroots event organised by a single person. In other words, is it 'for-lots-of-profit', 'for-profit', or 'barely-breaking-even'. This will not only determine any speaker fee I may have charged, but also other opportunities that I could take for compensation instead of cash.</p> <h3 id="back-to-bartering">Back to bartering <a class="direct-link" href="#back-to-bartering" aria-hidden="true">¶</a></h3> <p>When I ran a design studio, speaking at conferences brought us work. It was our sales activity. In all honesty, every conference I've spoken at brought project leads, which sometimes led to projects, which more than compensated me for my time and effort if it kept my company afloat and food on the table for myself and my team. The time away from my family and team was a risk I speculated against this. Conference spec-work, if you will.</p> <p>In addition to speculative project leads for getting on stage and talking about what I do, I also bartered for other things instead of cash for myself or my company. Maybe a stand so we could sell some books, or a sponsorship deal for Gridset. Maybe the opportunity to sponsor the speaker dinner at a reduced rate. There was always a deal to be done where I felt I wasn't being undervalued, I could benefit my company, product or team, but still get the benefit of speaking, sharing, hanging out with peers and being at a conference together.</p> <h3 id="it's-about-sharing">It's about sharing <a class="direct-link" href="#it's-about-sharing" aria-hidden="true">¶</a></h3> <p>If every speaker I knew insisted on charging $5000 per gig, there will be a lot less conferences in the future apart from the big, corporate, bland pizza-huts of the web design conference world.</p> <p>My advice to anyone starting out speaking, or maybe a year or so in, is have a think about why you do it. If you're a freelancer, let me ask you: is speaking at a conference time away from your work, and therefore should be calculated as to how much you should charge based on your hourly rate? Or, is it an investment in yourself, your new business opportunities, and the opportunity to <em>share</em>. Of course, the answer to this is personal, and – for me – depends on what type of conference it is.</p> <p>This community is unique. We share everything we do. We organise conferences to do just that. Most of the conference organisers I know come from that starting point, but then the business gets in the way. Most speakers I know, get on stage from that starting point, but then the business gets in the way.</p> <p>There's nothing wrong with valuing yourself and your work. If speaking is part of your work, then you should be compensated. But next time you're asked to speak by a conference, just stop for a moment and think about what that compensation should be.</p> Why? 2014-04-24T00:00:00+00:00 <p class="standfirst" markdown="1">Just like most two year olds, my daughter likes to ask 'why?' Recently, I've tried responding to every 'why' to see where it leads. It's like a cross between improv and some perverse version of [Mallet's Mallet]( Here's a transcript of a conversation I recorded in the car earlier today:</p> <ul> <li><em>Me:</em> We're going into Cardiff today.</li> <li><em>Two year old:</em> Why?</li> <li><em>Me</em>: To go to the castle</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Because it's better than watching TV, and it's a nice day!</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: That's what happens when the sun shines</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Because there are no clouds</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: It's due to high pressure</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Because that's how weather works</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: There's lots to it: solar radiation, air movement, global warming...</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Weather is complicated</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Lots of factors. That's why we have people telling us what the weather will be.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: So we know when to wear a coat</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: So we don't get wet</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Because wearing wet clothes is miserable, and it'll give you a cold.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Because, apparently, it can make you more at risk of infection.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: Maybe your immune system. Everyone has one.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: To stop you getting sick.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: So you can continue living.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: To procreate.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: To continue the human race.</li> <li><em>Two year old</em>: Why?</li> <li><em>Me</em>: You know, i've no idea.</li> <li><em>Two year old</em>: OK.</li> </ul> <p>A conversation like that has happened almost every day for the past few weeks. This was the longest. And deepest.</p> Mark Boulton Design and Monotype 2014-04-08T00:00:00+00:00 <p class="standfirst" markdown="1">Today is a big day for me. One of the biggest of days. I’m delighted to announce that <a href="">Mark Boulton Design</a> has been acquired by <a href="">Monotype</a>. You can <a href="">read the full press release here</a>, but before you do, I’d like to take you back a few years…</p> <p>Eight years ago, Emma and I were driving down from visiting my parents near Manchester. It was a sunny, blustery day in June 2006.</p> <p>During this time, we both worked for the BBC – Emma in Audience Research, and me in, what was then called, New Media. As a lot of designers do, I was working some freelance work on the side. A couple of weeks prior to that car trip, however, I’d been offered a freelance project that was too good to turn down, but it was big. Bigger than a few hours a night when I got home from the day job. On that car trip, we decided that one of those jobs had to go: my freelance work, or the job at the BBC. I chose the latter, and the very next day, handed in my resignation at the BBC. It was time to head out alone.</p> <p>Eight years later and it’s time for another change.</p> <p>Running a design studio has been a fabulously rewarding experience. I’ve worked with some talented people on some great projects for wonderful clients. But, all through this time, there has been a niggling problem, one that I’ve talked about at a couple of design conferences this year. When we’re hired by a company to work on their project, just by the nature of the engagement, we’re not as close to the problem as we need to be. We’re not in-house. We’re not experiencing them day by day. And, quite often, we’re not in the position to help fix the problems in the organisation as we uncover them. Having the opportunity to be closer to the problem really excites me, and that's why this change is such an important decision for me at this time in my career.</p> <p>We know the web is going through an interesting time right now. This is not so much being felt by us in the industry, but by the myriad of companies who publish content that are struggling to cope with the changes and demands their readership and customers put on their services. Being close to that problem excites me, and that’s just what this opportunity with Monotype represents. We’re going to be working with some of smartest people I’ve met on a broad range of tools and services that cross the boundaries of two fields of design I hold dear: web design and typography. What could be better than that?</p> <p><a href="">Five Simple Steps</a> will also be closing its doors. For five years, Emma and I have been accidental publishers and, together with the team here, and some talented authors, have produced many practical and influential books. Those books aren’t going away, though. As of today, Five Simple Steps is ceasing to trade, but is giving those books back to the authors to distribute as they see fit. We’re also <a href="">freely distributing our ePub template and process</a>, to help people self-publish just like I did five years ago. And, today, I'm also giving away my book, <a href="">Designing for the Web</a>. You can freely download it in PDF, ePub and Kindle (.mobi) formats.</p> <p>Our responsive grid application, <a href="">Gridset</a>, is currently being considered as how it can sit alongside Monotype’s <a href="">Typecast</a> product. Since both services launched, I’ve lost count of the amount of people who use the two together and asked us to integrate somehow.</p> <p>The last eight years has been quite a ride, but as I said, it’s time for a change. And, for me, a great change at that. The team here at Mark Boulton Design will still be working with me. We’ll still be contributing to the community the best way we can. I’ll still be harping on about something or other on Twitter.</p> <p>Today marks the closing of one chapter and the beginning of another. It's the part in any story that I love the most, because, to my mind, it's the best bit.</p> Collaborative Moodboards 2014-04-01T00:00:00+00:00 <p class="standfirst" markdown="1">Creating moodboards is something I was taught from a very early age. In primary school, they were a simple mixed-media way of expressing a form of an idea.</p> <p>The thing I find interesting about mood boards is not the end-result, but the process of creation. Watching my children make posters from torn up bits of newspaper and magazines is really no different to watching my clients do it. Similar to watching other activities – such as affinity sorting, or depth interviewing – it's the <em>listening</em> that I find interesting. Every moodboard tells a story, and as a designer, listening to your clients tell that story when they make them can be very insightful.</p> <h3 id="making-moodboards-for-you%2C-not-for-me.">Making moodboards for you, not for me. <a class="direct-link" href="#making-moodboards-for-you%2C-not-for-me." aria-hidden="true">¶</a></h3> <p>I have to be honest, I don't make moodboards for myself. Not physical ones anyway. When I familiarise myself with a brand, or make some suggestions for design context, I always try to place those things in a context the client understands. This is where design visuals are important. They are almost unsurpassed in their immediacy of understanding for a client because they show the design <em>in context</em>. Of course, replace that with a high fidelity prototype, and you get the same thing. But, I want to step back a little here, as to when I find creating moodboards valuable.</p> <p>Let me ask you a question: how many times have you heard this from a client?</p> <blockquote> <p>'I'm not so sure I think the design is heading in the right direction'. 'It needs more pop'. 'It's just not <em>us</em>'.</p> </blockquote> <p>These are all because a client cannot communicate about design at the same level we do. So, it's abstract. Either that, or:</p> <blockquote> <p>'I don't like that green'. 'That button is great! But, it needs more pop'. 'The logo needs to be bigger'.</p> </blockquote> <p>Then things get subjective and extremely detailed. Why? Because these are approachable things people can comment on. More often than not, these comments are a failing that should rest firmly on our shoulders. We need to give our clients the words and understanding to express their thoughts. Either that, or we tease out these issues earlier in the process, in a way that is abstracted from the design work that will come later. This is where I feel collaborative moodboards work extremely well.</p> <p>So, why would want to try and run one of these sessions?</p> <ol> <li> <p>When a client's brand is repositioning, sometimes we're brought in very early on the back of a strategy. No tactical work as been done. So, it's up to us to navigate the waters of implementing the branding strategy. Making design work on the back of a few bullet points in a slide deck can be challenging.</p> </li> <li> <p>Usually in a discover process, I will get a few red flags from speaking with a client. Generally these come through when talking about competitors, or things they like.</p> </li> <li> <p>When I get conflicting stories from different stakeholders. The homepage team has a completely different view on the branding than the marketing team.</p> </li> <li> <p>When branding needs evolving. A lot of organisations have mature branding collateral for print and advertising. Not so much for web (still!), so these are useful exercises to start to tease out differences or how they can align to the web in future.</p> </li> </ol> <p>I'm sure there are more, but those are few I can think of off the top of my head for now.</p> <h3 id="how-to-run-a-collaborative-moodboard-session">How to run a collaborative moodboard session <a class="direct-link" href="#how-to-run-a-collaborative-moodboard-session" aria-hidden="true">¶</a></h3> <ol> <li>Get the stakeholders in a room. 3-4 is ideal. 9 is way too many.</li> <li>Bring with you lots of magazines, newspapers, flyers – just physical paper stuff – that you can all cut up.</li> <li>Glue. Lots of glue. One tub each.</li> <li>Large (A1) pieces of paper.</li> </ol> <p>The thing about this that I find interesting from a people-watching/behaviour perspective, is that the act of cutting things up and sticking them down is something that most of these people wouldn't have done since school. The process involves collaborating, getting stuck-in and discussing the work. I find it a great leveller for the client team (hierarchy quickly disappears), and a very good ice breaker.</p> <p>You set the brief for the morning/afternoon (all day is generally too long for the making part of this process). The idea is to find content that communicates part of the visual story of the product – and that could be anything:colour, type, texture, image – and stick it down.</p> <p>For the agency team, it's our job to ask questions throughout the day. To tease out the insights as people are in the <em>moment of choice</em> – before they've had chance to post-rationalise. And you know what? Answers like: 'I just really like this green' are great, because our next question is 'Why?' and it forces rationale. Without us being there, and asking that, almost always post-rationalising and 'business stuff' gets in the way of finding the truth behind those choices.</p> <p>Quite often, just like cave paintings, moodboards are an artefact of a conversation. We often discard them from this point because they have served their purpose. We have the insights. The marketing team are best buddies with the homepage team. We all heading in the same direction.</p> <p>So, next time you start a project and you need some steer on branding, or reconciling differences of opinion on a client team, try collaborative moodboarding as a way of coming together to try and solve the problem.</p> Responsive Web Design – Defining The Damn Thing 2014-03-10T00:00:00+00:00 <p class="standfirst" markdown="1">Unlike many design disciplines, web design goes through cyclical discussions about how to define itself and what it does – anyone who's ever spent any time in the UX community will know about this.</p> <p>I was prompted to write about this from reading <a href="">Lyza's column on A List Apart</a>, and <a href="">Jeffrey's follow-up post</a> this weekend.</p> <p>In 2010, I attended An Event Apart in Seattle. During that show, I saw three or four presentations – from <a href="">Eric Meyer</a>, <a href="">Dan Cederholm</a>, <a href="">Jeremy</a>, and of course, <a href="">Ethan</a>. All of them, independently, talked about how using media queries and CSS we could change the content using a fluid layout. It was a perfect storm, and indicative of the thinking that led Ethan to write – and <a href="">A Book Apart</a> to publish – Responsive Web Design a year later. The rest, they say, is history.</p> <p>Responsive Web Design had a simple formula: fluid grids, media queries and flexible images. Put them all together, and your web product will be responsive. As Jeffrey said:</p> <blockquote> <p>If Ethan hadn’t included three simple executional requirements as part of his definition, the concept might have quickly fallen by the wayside, as previous insights into the fluid nature of the web have done. The simplicity, elegance, and completeness of the package—here’s why, and here’s how—sold the idea to thousands of designers and developers, whose work and advocacy in turn sold it to hundreds of thousands more. This wouldn’t have happened if Ethan had promoted a more amorphous notion. Our world wouldn’t have changed overnight if developers had had too much to think about. Cutting to the heart of things and keeping it simple was as powerful a creative act on Ethan’s part as the “discovery” of #RWD itself.</p> </blockquote> <p>The idea of responsive design has taken a few years to go from cubicle to board room. But <em>now</em> it is a project requirement coming directly from there. For the past eighteen months, at <a href="">Mark Boulton Design</a>, we've seen it as a requirement on RFPs. And with that, it brings a whole other set of problems. Because <em>what does it mean?</em> Hence, we have to Define The Damn Thing all over again. And recently, to be honest with you, I've stopped doing it. Because, depending on who you speak to, responsive web design has come to mean everything and nothing.</p> <p>There are some who see it as media queries, fluid grids and scalable images. There are those who see it as adaptive content, or smarter queries to the server to make better use of bandwidth available. There are those who just see it as web design.</p> <p>Me? I think it's just like Web 2.0. And AJAX. It's just like Web Standards (although to a lesser extent) and exactly like HTML5 (in the minds of those of you who aren't developers) and its rather splendid branding. Responsive design has grown into a term that <em>represents change</em> above all else. To me, responsive design is more about a change in the browser and device landscape. A change in how people consume content. A change in how we make things for the web. And responsive design is just the term to encapsulate that change in a nice, easy solution that can get sold to a board of directors worrying about their profit and loss.</p> <blockquote> <p>'Responsive design is forward-thinking and means it will work on a phone, and that's where things are headed'.</p> </blockquote> <p>We've heard this line time and time again over the past couple of years. You see, responsive design is a useful term and one that will stick around for a while whilst we're going through this change. How else do we describe it, otherwise? Web design? I don't think so. No board member is going to get behind that; it's not new enough.</p> How we work 2014-02-24T00:00:00+00:00 <p class="standfirst" markdown="1">I've had a few people ask me recently about how we work at [Mark Boulton Design]( And, the truth be told, it slightly differs from project to project, from client to client. But the main point is that we work in an iterative way with prototypes at the heart of our work every step of the way.</p> <h3 id="work-from-facts-and-your-intuition">Work from facts AND your intuition <a class="direct-link" href="#work-from-facts-and-your-intuition" aria-hidden="true">¶</a></h3> <p>We always start by trying to understand the problem: the users of the website or product, the organisation on their customer strategy, the goals and needs of the project, who's in charge and who isn't. There's a lot to take in on those early meetings with a client. One of the first things we do is to try and put in place some kind of research plan: what do we need to know, and how are we going to get it.</p> <p>This could be as simple as running some face to face interviews with existing or potential customers coupled with a new survey. Of course, good research should provide some data to a problem, not just 'what do you think of our website?'. Emma has <a href="">written some good</a>, <a href="">quick methods for doing this yourself</a>.</p> <p>We couple that with trying to extract the scope from the client. I say that because, half the time, we're given a briefing document – or something similar – and most of the time that document hasn't been written for us. It's been written for internal management to sign off on the budget of the project. So, rather than ask for a new document, we run a couple of workshops to tease out those problems:</p> <h4 id="user-story-workshop">User story workshop <a class="direct-link" href="#user-story-workshop" aria-hidden="true">¶</a></h4> <p>This workshop is designed to tease out the scope of the project – everything we can think of. We ask the client to write user stories describing the product. Nothing is off the table at this point and our aim is to exhaust the possibilities.</p> <h4 id="persona-%2F-user-modelling-workshop">Persona / user modelling workshop <a class="direct-link" href="#persona-%2F-user-modelling-workshop" aria-hidden="true">¶</a></h4> <p>Personas have been called bullshit in UX circles for years now. Some say they pay lip-service to a process, or they're ignored by organisations. Whatever. I think, sometimes, something like personas are useful for putting a face to that big, amorphous blob of a customer group. Maybe that's just a set of indicative behaviours or maybe a lightweight pen-portrait of an archetypical user. The tool is not the important thing here, but how you can use something to help people think of other people. To help an organisation to think of their customers, or designers to think of the audience they're designing for, or the CEO to think in terms of someone's disability rather than the P&amp;L.</p> <p>What I find generally useful about running a workshop like this is that it exposes weaknesses in an organisation. If a client pays lip-service to a customer-centric approach, it will soon become very evident in a meeting like this that that's what's going on.</p> <h4 id="brand-workshop">Brand workshop <a class="direct-link" href="#brand-workshop" aria-hidden="true">¶</a></h4> <p>This is a vital workshop for me. As a design lead on a project, I need to understand the tone of a company. From the way it talks about itself, through to the corporate guidelines. But, my experience is, that's only half the story if you're lucky. So much of a brand is a shared, consensual understanding in an organisation. Quite a lot of that can go un-said. This workshop is, again, about teasing out those opinions, views and arguments.</p> <h4 id="bonus!">Bonus! <a class="direct-link" href="#bonus!" aria-hidden="true">¶</a></h4> <p>The first three workshops have the added bonus of finding out who runs the show in an organisation. I make it my business to find out – and get on side – the following people:</p> <ul> <li>The founders / CEO. This should be a given.</li> <li>The people with a loud mouth. It's useful to find the people who have a loud voice and get them around to our way of thinking. Then they can shout about our work internally.</li> <li>The people with influence. Sometimes, these are the quiet, unassuming people, but they carry great sway. If we want things done, these people need to be our friends.</li> </ul> <p>That's quite a lot of people to keep happy, but if we get these three groups on side, we find projects run a lot smoother.</p> <h3 id="prototype-your-ux-strategy">Prototype your UX strategy <a class="direct-link" href="#prototype-your-ux-strategy" aria-hidden="true">¶</a></h3> <p><a href="">Leisa</a> gave a great talk at last year's Generate conference in London about prototyping your UX strategy. The crux of this was it is way more efficient to demonstrate your thinking and design, than it is to talk about it. If you can quickly make something, test it, iterate a bit, and then present it, then you can massive gains to cutting down on procrastination and cutting through organisation politics like a hot knife through butter. Showing that something works is infinitely more preferable to me than arguing about whether something would work or not.</p> <p>Wherever possible, we've been making prototypes in HTML. It gives us something tangible and portable to work with. We can put it in front of users, show a CEO on their mobile device to demonstrate something.</p> <h3 id="the-right-tool-at-the-right-time">The right tool at the right time <a class="direct-link" href="#the-right-tool-at-the-right-time" aria-hidden="true">¶</a></h3> <p>I've spoken before about designing in the browser, or designing in Photoshop, or on pencil, or whatever. Frankly, we try to use the most appropriate tool at the right time. Sometimes that's a browser, but a client may respond dreadfully to that because they're are used to seeing work presented to them in a completely different way. Then, we change tack and do something else. My feeling is the best design tool you can use is the one that requires the least amount of work to use: be it a pencil, Photoshop or HTML.</p> <h3 id="agile-not-agile">agile not Agile <a class="direct-link" href="#agile-not-agile" aria-hidden="true">¶</a></h3> <p>I feel that design is a naturally iterative process. We make things and then fix things as we go. Commercial design, though, has to be paid for. And so, in the 1950's, the Ad industry imposed limits to this iteration – 'you have three changes, then you must sign off on this creative'. Of course, I can understand this thinking; you can't just get a blank cheque for as many iterations as you like for a project until something does (or does not) work. But, what we gain in commercial control, I've found we've definitely lost in design quality. It takes time to make useful, beautiful things.</p> <p>So, from about 2009, Mark Boulton Design have been working in the following way:</p> <ul> <li> <p>We work in sprints that are two weeks long. We never have a deadline on a Friday. Sprints run from Monday to Monday, with a release end of play Monday.</p> </li> <li> <p>'Releases' are output. Sometimes code. Sometimes research. Sometimes design visuals.</p> </li> <li> <p>We front-load research into a discovery sprint. This is to get a head-start and give the designers (and clients) some of the facts to work around. Organising, running and feeding back on research takes time.</p> </li> <li> <p>Together with the client, we capture the scope of the project with user stories. These are not typical Agile user stories – for example, we don't find estimating complexity and points, useful in our process – but they are small, user-centred sentences that describe a core piece of the product. It could be a need, or a bit of functionality, or a piece of research data. The key point here is, for us, they are points of discussion that are small and focussed. This helps keeps us arrow-straight when we prioritise them sprint on sprint.</p> </li> <li> <p>We conduct research each sprint if it's required. This is determined by the priorities for that sprint. For example, if the priority for the sprint is focussed on aesthetics, or typography, or browser testing, then usability testing is not going to be of much use for those.</p> </li> </ul> <h3 id="and-now-for-some-of-the-commercial-considerations%3A">And now for some of the commercial considerations: <a class="direct-link" href="#and-now-for-some-of-the-commercial-considerations%3A" aria-hidden="true">¶</a></h3> <ul> <li> <p><em>Contracts are most often fixed-price</em>, but broken down into sprints. Each sprint has an identical price.</p> </li> <li> <p><em>We bill as we go</em>. The client pays a degree up-front, and that is then factored into cost of each sprint.</p> </li> <li> <p><em>We explain to prospective clients</em> how we work: each sprint, we work on agreed priorities, with no detailed functional spec to work against.</p> </li> <li> <p><em>Points</em>. In the past, we've worked on Agile agreements where we would be delivering against agreed estimated points. This was to see if we could make web development agile work in a project environment. It didn't. We found we were delivering to the points, rather than to the project. Plus, if we didn't hit the points for that sprint, we were penalised financially.</p> </li> <li> <p><em>Coaching our clients</em> through this process is as challenging as coaching through clients of a responsive design project. When the project is in the early-mid messy stages – when client preconceptions are being challenged, the prototype is not being received well by users – it takes a strong partnership to push through it. Design is messy. Iteration, by it's very nature, is about failing to some degree or another. Everyone has to get used to that feeling of things not working out the way they first thought.</p> </li> <li> <p><em>The sticky end</em>. When we get to the final stages of a project, we should be in a good place. The highest priority items should be addressed, we will have buy in and sign off from the right people and we should be focussed on low priority features. But sometimes, that's not the case. Sometimes, we've got high priority things left over which are critical. And that's the time when we have to go back to the client and discuss how these need to be addressed. Sometimes that's an extra sprint or two. Sometimes it's an entirely new contract.</p> </li> </ul> <h3 id="what-we-don't-do-from-'agile'">What we don't do from 'Agile' <a class="direct-link" href="#what-we-don't-do-from-'agile'" aria-hidden="true">¶</a></h3> <p>We don't do:</p> <ul> <li> <p><em>Estimating tasks</em>. We don't assign time to design tasks. In our studio, work just doesn't happen that way. Generally, things are a bit more holistic.</p> </li> <li> <p><em>Tracking velocity</em>. For the same reason above, if we're not measuring delivering against user stories in a numeric way, we can't track our velocity.</p> </li> <li> <p><em>Retrospectives</em>. We don't run traditional retrospectives on sprints. Maybe this is more a symptom of a close, high-communication level of our team. We're talking all the time anyway. We have found that retrospectives have been a useful forum for clients to feed back on how they're feeling about progress in the past, but this has felt like a somewhat forced environment to do it. So, recently, we have points of checking in with a client to see how they're feeling about things.</p> </li> </ul> <p>So, that's about it. A whistle-stop tour of how we like to work. As much as possible, we've tried to tailor our process to what works for us, built on some useful structures that agile gives us. I guess the most important thing for us is that we're not wedded to our processes at all. We regularly shift focus, or the way we work, to meet the needs of particular clients or projects. Just as long as we align those processes to how design naturally happens, then I'm happy.</p> Net Awards 2014 Nominations 2014-01-28T00:00:00+00:00 <p class="standfirst" markdown="1">It's that time of year again. The [2014 .net award]( long list is published and I'm rather chuffed that [Mark Boulton Design]( is nominated across community, technology and design categories.</p> <ul> <li>Team of the year: <a href="">Five Simple Steps</a></li> <li>Agency of the year: <a href="">Mark Boulton Design</a></li> <li>Redesign of the year: <a href="">CERN: Mark Boulton Design</a></li> <li>App of the year: <a href="">Gridset</a></li> </ul> <p>It's also really nice to see <a href="">CERN nominated for the Line Mode Browser hack days</a> we helped organise last September.</p> <p>Being nominated in these awards is like a nice pat on the back for all the hard work my team do. From trying to help communicate one of human-kinds most important discoveries, to building a tool to help us make websites a little bit easier, to making books for our community. It makes the nomination for Agency of the year, for the second time, that little bit more special.</p> <p>If you feel that inclined, a vote would be nice!</p> Al Jazeera & Content shelf-life 2014-01-28T00:00:00+00:00 <p class="standfirst" markdown="1">From speaking at the phenomenal [MK Geek Night All Dayer](, to launching a project three years in the making for [Al Jazeera](, the [releasing a new design language for one of the oldest university in London](, to [Mark Boulton Design]( being nominated in four categories in the [Net Awards]( It's been a busy couple of weeks.</p> <p>Last week, I was up in London visiting a client when I heard that another project of ours was to be launched shortly. It was part of a project we've been working on for just over three years: the global design language for Al Jazeera Network digital, with the first two products being launched in <a href="">Turkey</a> and a <a href="">beta of the Arabic news channel</a>.</p> <p>There is so much to talk about on a project of this scale. Here are just a few highlights:</p> <ul> <li>Spending time with journalists and the newsroom to understand how news is reported.</li> <li>Working with Al Jazeera during the Arab Spring; from the uprising in Egypt to Libya.</li> <li>Course-correcting throughout the project. Responsive Design wasn't really a thing three years ago.</li> <li>Designing in four languages – Arabic, English, Turkish and Slavic – when the MBD team primarily speaks one.</li> <li>Adopting an Object Oriented approach from content through to code. Modular, transferrable and scalable. It required a level of detailed thought right down to how content types were defined in the CMS.</li> <li>Working with three development partners across three independent content management systems.</li> </ul> <p>I could go on and on. And I probably will at some point. Needless to say, none of the above could achieved without a patient, smart and agile client-side team. Good job the Al Jazeera team are just that.</p> <p>There are many buzz words you could label this project with: content-first, responsive, atomic, OOCSS. Again, I could go on. But the one thing that <em>was</em> first, central and always through prototyping and early strategy was good research. It was a research-first project. That probably won't come as a surprise to some of you given we have our own in-house researcher, <a href="">Emma</a>. What may come as a surprise, however, is the degree in which that early research led approach laid the foundation for a fundamental shift in how Al Jazeera thought about their content.</p> <h3 id="content-shelf-life.">Content shelf-life. <a class="direct-link" href="#content-shelf-life." aria-hidden="true">¶</a></h3> <p>Many news journalists think of their content as a few distinct types:</p> <ul> <li>Rolling news: Typically taken straight from the wire and edited over time to fit the growing needs of the story.</li> <li>Editorial: Longer form piece. Still highly topical and timely.</li> <li>Op-ed: Opinion piece from a named author.</li> <li>Feature: A story. With a beginning, a middle and an end. Long-form content, and not necessarily timely.</li> </ul> <p>These can all be mapped to timeliness; both in terms of how long they take to create and their editorial time-life. The more timely a piece, the shorter it takes to create and the shorter the shelf-life.</p> <ul> <li>Rolling news: timely, short shelf-life.</li> <li>Editorial: timely, long-form, short to mid shelf-life.</li> <li>Op-ed: Long-form, mid shelf-life.</li> <li>feature: Long-form, long shelf-life.</li> </ul> <p>Publication schedules are often focussed around this creation with journalists having several pieces of the different types in various degrees of completion to various deadlines focussed on different stories. This is a comfortable mental model, one that newspapers have been arranged around for decades. But it isn't necessarily how users of websites look for content. Users will not typically look for a type of content, but will look for a context of a story first: the topic.</p> <p>The new information architecture of the Al Jazeera platform has been built around a topic-first approach. But also, the modular content and design allows for the rapid changing of display of the news as a topic or news story moves through the various content types. It's a design system, connected to a CMS that accommodates what news naturally does. It changes.</p> <h3 id="the-design-system">The Design System <a class="direct-link" href="#the-design-system" aria-hidden="true">¶</a></h3> <p>The whole platform is built on top of <a href="">Gridset</a> using modular design principles. The content is modular and multifaceted, designed for re-use, as is the design. For years now at Mark Boulton Design, we've not designed websites, but an underpinning design system with naming conventions, rules, patterns. This is particularly useful when many CMS software thinks of content objects in this way. Our systematic thinking can applied all the way through CMS integration. Software engineers love designers giving them rules.</p> <p>It's funny, we seem to have just discovered this in web design, but many other design disciplines have been approaching their work in this way for decades. Some for centuries. Take typography, for example. The design process of creating a typographic design is systematic thinking at its purest. Designing heading hierarchies and the constituent parts of written language can be approached in an abstracted way. This is <em>exactly</em> the right approach when designing for other languages.</p> <p>Arabic has obvious challenges for an English-speaker. Not only is it written right to left, but the glyphs are non-roman. To approach this as a English-speaker, we needed to create tools and process to help. Words no longer look like words, but shapes of words. Page designs no longer look like familiar blocks of text, type hierarchy and colour. We saw form more than we saw function.</p> <h3 id="just-the-start">Just the start <a class="direct-link" href="#just-the-start" aria-hidden="true">¶</a></h3> <p>Three years is a long time to work on a project. I'm so delighted to finally see the design system in the wild. For such a long time, we only saw it in prototype form, but you can only take prototypes so far. We needed to pressure-test content types, see where it breaks, adjust a hundred and one small details to make it <em>work</em>. All of this just underpins the fact that now the system is being rolled out, there needs to be changes made every day to evolve the system. This is the web after-all. It's a feature, not a bug.</p> The story is the link 2014-01-06T00:00:00+00:00 <p class="standfirst" markdown="1">2013 brought with it more work in and amongst editorial processes for [Mark Boulton Design]( And with it, some challenges designing systems that can react to the speed of the story.</p> <p>News happens quickly and therefore needs to be captured quickly. This is why news organisations have latched onto the immediacy of publishing platforms like Twitter, blogs, Instagram and the like. The flow from story to pixel is dramatically reduced compared to incombant editorial processes. Sure, journalists will cry of the death of <em>proper</em> journalism; story-telling will suffer at the hands of snippets of information drip-fed to hungry millenials. We've all heard the horror stories. The truth is that these services allow for a story to happen in near real-time, and as such, the emphasis on an editor's work is no longer writing, but on guiding, the story. Creating connections between content to build a bigger picture in the reader's mind, but, certainly, in a near-live environment, many news organisations are not authoring this content; it's being created elsewhere by other people.</p> <p>I've had a long-standing professional interest in content management systems. I've designed a few along the way, and almost without exception, the project has started as a software design project, and ended up a process design problem. The problems lie with people, not with user interfaces or technology.</p> <p>In his recent post <a href="">How to design a CMS for a modern newsroom</a>, Lee Simpson from the <a href="">Guardian</a> eloquently describes the situation:</p> <blockquote> <p>So much has changed in the ‘electronic publishing’ landscape in the last year. For every month of 2013 there was a hot new writing application, hip new publishing platform or collaboration silver bullet for writers, newsrooms and media organisation to run through the mill. Tools and applications for content publishing had matured in such a short period of time, individually they lacked the cross workflow power to be of complete use to a newsroom like The Guardian’s, but collectively it was starting to look a lot more interesting.</p> </blockquote> <p>He goes on to say:</p> <blockquote> <p>The software requirements for a modern, paper producing newsroom, are vast. The needs of the newsroom are increasingly difficult to define due to the nuances in production processes across desks, publications and offices, a moving target that is getting faster by the day.</p> </blockquote> <p>In my experience, the faster and more important a story was, the less likely it was to follow established processes – especially where convoluted and difficulty to use software was concerned. It quickly devolved into Post-it Notes, hushed whispers and hurried editing. News journalists are human, and sometimes the speed of the story is just too fast for software. It gets in the way.</p> <p>Given the change in how this type of content is created, curated, edited, processed and published, more and more organisations are finding they need new tools. New content management systems to help solve their publishing problems. My fear is, they're looking in the wrong place.</p> <hr> <p>Last year, I <a href="">spoke at Handheld conference</a> about how content is created over time. How a story moves from being a snowflake to a snowball; gathering pace, other content, debris. Before an editor knows it, the story is no longer a page, but a bunch of different things: links, images, words, video, other articles, tweets, blog posts. The list goes on. But they all share two things in common: the topic of the story, and the <em>link between them</em>. This is where I feel we need to focus our attention.</p> <p>The hyperlink is at the very core of what the web is: an interconnected <em>hyperlinked</em> bunch of resources. The hyperlink is everything to the web, yet it is the thing we take the least care of. URLs die. Links rot. This isn't a post about digital preservation, or a rant about how we should be taking care of these links for future generations, but that we should be taking care of them <em>now!</em>. As I hope I've demonstrated, the link between content is going to become increasingly important as we create more fragmented and modular content for display in multiple contexts. If we don't look after these links, the story will be lost. Because the story isn't a page anymore. <em>The story is the link</em>.</p> <hr> <p>Modern content management systems should be focussed on exposing links between content. Making it easy for editors and journalists to make connections between things and not just when a story is created; stories live over many days, weeks, months or years. Modern content management systems should allow for constant editorial iteration and creation by showing the links between things.</p> <p>It's interesting to me to see this happen in a parallel industry. Just as designers and developers are struggling to adapt to the increasingly rapid changing web, writers and journalists are, too. Creating news content for the web is no longer about writing a page and hitting publish. It requires a fastidious approach to content curation over a longer period of time. It means being where your readers are; Twitter, Facebook, the TV. It requires pulling together all the various fragments of a story into a cohesive narrative. Now, does that sound like your CMS is designed to help? No. I thought not.</p> Some social good 2014-01-01T00:00:00+00:00 <p>I was going to do a usual year-end wrap up for this blog post as I have done in previous years. But, as it's the start of the new year already, I thought set my stall out for the coming year. What do I want to do, rather than what have a just done.</p> <p>A couple of days ago, I was reminded of a video I watched a while ago about Free Enterprise via my friend <a href="">Andy Rutledge</a>.</p> <p class="caption" markdown="1">"Don't Eat Your Dog: The Surprising Moral Case for Free Enterprise. Based on his best-selling book "The Road to Freedom," AEI President Arthur C. Brooks explains how we can win the fight for free enterprise by articulating what's written on our hearts."</p> <iframe width="100%" height="400px" src="" frameborder="0" allowfullscreen=""></iframe> <p>I'm always interested in how other country's politics, viewpoints and economics work, and this was no exception. Rather than to bat down things like capitalism, I'm making a concerted effort to understand the nuance in such things.</p> <p>As someone who runs a <a href="">design studio</a>, a <a href="">publishing company</a> and a <a href="">web-based design tool</a>, you could count me in the group of people who work hard for what I get. And I'm rewarded for that. I don't expect a free ride. I don't expect anything beyond the realms of what is offered in the country I live in (such as state health care and education etc. In fact, I pay for that through my taxes – the NHS is <em>not</em> free). But before I disappear into a politics hole, I want to bring this back to design.</p> <p>Running a design company, we charge clients for the work we do and for the customers who use our products and buy our books. In doing so, we create jobs, and more tax revenue for the government. But one thing I don't agree with from the video above is that what i'm doing is a purely selfish exercise. I'm not <em>just</em> doing business to pay the bills, design great products for clients, and give people work to do. To me, there is more to making things than just making things.</p> <p>I believe my job is not only about doing work for clients but that I have a social responsibility to make the world a better place through the work I do. Design is a powerful tool to affect social change. However small.</p> <p>Let me give you an example.</p> <p>You're out for a walk at lunchtime. You come at a road crossing and there is a family by your side waiting to cross the road. The crossing indicator is counting down the seconds, but you spot a small gap in the traffic for you to cross. You just skip across the road, running in between cars and carry on. The family is left waiting for a safe gap in the traffic.</p> <p>Do you:</p> <ol> <li>Think that what you did was fine? It was safe for you to cross. No problem.</li> </ol> <p>or</p> <ol start="2"> <li>Do you think that you should've waited next to the family to build upon the good example the parents were trying to show to their small children that they should wait for a safe gap in the traffic to cross?</li> </ol> <p>It's a small but important thing. And this is social responsibility. A responsibility to help the community around you, and not through just helping yourself. Next time you take on a design project, just stop for a second and think:</p> <blockquote> <p>&quot;beyond getting paid for this, and making my client's business better, what is the benefit in doing this work? What is the social good?&quot;</p> </blockquote> <p>In addition to the work itself, ask them if you could blog about the process, or speak about the work at a conference. If it's something you really believe in, could you offer do it pro-bono, or heavily discounted? Could you open source the code produced? How about aspects of the design – such as icons? Could you have one of their team members sit with your team for the whole project to soak up your skills? How could you benefit the web design and development community and <em>still</em> get paid well?</p> <p>We're in an incredibly fortunate position as designers to create change in the world. Many people can't. Or simply won't. Through our products, our work, and how we talk about it, we can have a much greater benefit to society that just lining our pockets.</p> <p>This is exactly what I plan on doing in 2014. Happy New Year!</p> Running ragged 2013-12-24T00:00:00+00:00 <p class="standfirst" markdown="1">In my [fourth article for 24ways]( over the years, I wrote about typesetting the right rag.</p> <p>One of the first little typesetting trips I was taught – in my internship at an advertising agency – all those years ago, was how to make text fit within a given space, but still read well. This involved a dance of hyphenation, letter-spacing, leading and type-size. But a crucial ingredient of this recipe was the soft-return.</p> <p>Scanning a piece of text I was looking for certain criteria – or <a href="">violations</a> – that needed a soft-return (or, in Quark XPress, shift-return). Using those violations, I would typeset the right-rag of the piece of text, and then use hyphenation, and what-not, to tease the rag into as smooth a line as possible. All whilst ensuring the content was pleasurable to read. In a perverse kind of way, I always enjoyed this part of the typesetting process.</p> <p>My article on 24ways is about how we can apply this thinking to the web, where the inherent lack of control on the medium means we have to apply things in a slightly different (read: clumsy) way.</p> <p><a href="">Emma</a> read the article this morning and pretty much summed up the way I feel when I read text sometimes.</p> <blockquote> <p>“Another article by <a href="">@markboulton</a> which gives me a glimpse into how broken the world looks through his eyes” – <a href="">Emma Boulton</a></p> </blockquote> <p>Just like a musician listens to music, I view text in a different way to most people. I just forget that I do it most of the time.</p> <p>I can hardly believe that 24ways has been running <a href="">since 2005</a>. In the web years, that’s like 72 years ago. It’s a credit to <a href="">Drew</a>, <a href="">Brian</a>, <a href="">Anna</a>, and <a href="">Owen</a>. It’s not easy running this year in, year out, on a daily publishing schedule for a month. Hours and hours of work go into this, and we should all be thankful for their time and effort. Oh, and let’s not forget <a href="">Paul</a>, who has given 24ways a lovely redesign this year (you can <a href="">read more about that</a> on his blog)</p> My Do Lecture 2013-12-22T00:00:00+00:00 <p class="standfirst" markdown="1">In April 2013, I spoke at the Do Lectures in West Wales.</p> <p>The video of my talk, about embracing change, is <a href="">now available to watch</a>.</p> <p>I've written about <a href="">being at the Do Lectures before</a>; it's a special place, an intimidatingly smart audience, and generally freezing. This video doesn't do justice to how cold I was there up on the stage. Should've worn my coat.</p> <p>If you fancy attending – some would say – a life-changing little conference, <a href="">Do are running an event in Australia</a> in April. Do yourself a favour and grab a ticket.</p> The Undemocracy of Vale of Glamorgan Planning 2013-12-15T00:00:00+00:00 <p class="standfirst" markdown="1">The democracy of the Vale of Glamorgan planning process is absent and favours wealthy developers over citizens.</p> <p>My house is situated between a narrow country road leading into an old village and farmer's fields. In April this year, we were sent a letter by the <a href="">Vale of Glamorgan</a> planning department that a housing development of 115 houses was planned and we have just a few weeks to register our objections.</p> <p>Now, it's understandable we'd object; we live next to the proposed site. But, there are some issues that have some serious cause for concern:</p> <ol> <li> <p>A public right of way crosses the site and over an unmanned railway crossing of a line soon to be electrified.</p> </li> <li> <p>A pond is proposed to capture the water from the often-waterlogged field. The town has a history of flooding and this field acts like a large sponge safeguarding this part of the town.</p> </li> <li> <p>The roads leading to and from the development are designed for sheep and horse carts. Fifty percent of them are unpaved, single-carriage and pose a risk to pedestrians.</p> </li> </ol> <p>You can read more about this application, if you like, <a href="">on our website</a> and the <a href="">planning department website</a>. But, this journal post is not just about documenting the history and problems of the site (that could last a while). This is a journal post about the <em>sickeningly undemocratic process</em> that the Vale of Glamorgan council has undertaken, and I'm sure, it is somewhat similar throughout the country.</p> <ul> <li> <p>As a citizen of the England and Wales (Scotland and Northern Ireland have different planning laws) I am not entitled to appeal against a planning application directly. However, a developer can appeal.</p> </li> <li> <p>The Vale of Glamorgan undertook <em>no independent review</em> of reports commissioned and presented, with questionable findings, might I add, <em>by the developer</em>.</p> </li> <li> <p>The Vale of Glamorgan are recommending the development despite <a href="">Network Rail</a> <em>objecting on the grounds of safety</em> with the un-manned right of way over the railway line.</p> </li> <li> <p>The vale of Glamorgan undertook <em>no independent risk assessment</em> of either the <em>open pond</em> or <em>unguarded railway crossing</em>. Both of which are a grave concern for me having two small children.</p> </li> <li> <p>The Vale of Glamorgan undertook <em>no independent review</em> of the flood risk assessments despite the developer's reports showing multiple failed percolation tests.</p> </li> </ul> <p>I could go on about the deviations from what I'd view as an independent and democratic process. There have been many, but these pose the greatest dangers in my view.</p> <p>As a father of two small children, I worry about them. My children are beautifully curious. Wonderfully full of energy. But, despite my best efforts, woefully oblivious to the danger they put themselves in. Just like every other child out there. The Vale of Glamorgan planners, and planning committee – who we <em>elect</em> into those positions, let's not forget that – has a <em>social responsibility for the well-being of the citizens of this country</em>. Instead, throughout this process, I saw the opposite.</p> <ul> <li> <p>I saw an over-worked, under-resourced council making bad decisions.</p> </li> <li> <p>I saw an undemocratic process that favoured negotiation with the developers over hearing the concerns of local residents.</p> </li> <li> <p>I saw a council under pressure to meet housing quoters by paving over the green fields rather than the more difficult option of brown field sites.</p> </li> </ul> <p>And I've had enough of it.</p> <p>Many people locally have been saying that the building of this development will result in more flooding in the village. It will result in more congestion on roads designed for horse carts and sheep. With the dangers of the railway line and open pond, it may result in the injury or death of one of the new residents. Is that when the planners would sit up and listen? Maybe verify the developers reports with independent review?</p> <p>The cynic in me says 'probably not'. The apathetic in me says 'who cares? We all know politics is corrupt'. But, this is the <a href="">second time in a year that I've voiced my concerns</a> about the local government's ability to make good decisions.</p> <p>I know we need more, and affordable, houses in this country. But new developments need proper, independent scrutiny from experts. And this proposal has not had that.</p> <p>The proposed development goes before the planning committee on Thursday 19th December. It is being <em>recommended</em> by the overworked planning officer – despite the points above. A copy of this journal post is being forwarded to the local councillors; the members of the Vale of Glamorgan planning committee; the Vale of Glamorgan planning department; my local Welsh Assembly Member and Member of Parliament, in addition to the BBC and local newspapers.</p> <p>Just as local government has a duty to behave in a democratic way, I have a duty to act as a citizen of the UK and to stand up and say when something is not right.</p> Design Abstraction Escalation 2013-12-12T00:00:00+00:00 <p class="standfirst" markdown="1">What are we losing by abstracting our design processes? Could it be as fundamental as losing a sense of humanity in our work? </p> <p>A few years ago, <a href="">Michael Bierut</a>, wrote about a natural progression in a designer's career.</p> <blockquote> <p>&quot;The client asks you to design a business card. You respond that the problem is really the client’s logo. The client asks you to design a logo. You say the problem is the entire identity system. The client asks you to design the identity. You say that the problem is the client’s business plan. And so forth.&quot;</p> </blockquote> <p>He calls this <em>Problem Definition Escalation</em>. Where a designer takes one problem and escalates it to a 'higher' plane of benefit and worth – one where it will have greater impact, and ultimately, make the designer feel like they're doing their real job.</p> <h2 id="constituent-parts">Constituent parts <a class="direct-link" href="#constituent-parts" aria-hidden="true">¶</a></h2> <p>Designing in a browser, in your head, on paper, on a wall, on post-it notes. It doesn't really matter. What matters is the work. Is it appropriate? Does it do the job well? Will you get paid for it? Does the client understand the benefits?</p> <p>Really. Who cares how you get there? We're all coming around to the idea that designing responsive web sites in Photoshop is inefficient and inaccurate (if things like web font rendering matter to you).</p> <p>Let's look at the arguments:</p> <ol> <li> <p>For those familiar with the tools, designing in Photoshop is just as efficient as designing in code.</p> </li> <li> <p>I design using the tools of least resistance. Preferably a pencil, sometimes Photoshop, and a lot of HTML. Photoshop is my tool of choice for creating website designs.</p> </li> <li> <p>Presenting static visuals to clients is different than using them as a tool yourself as a means to an end.</p> </li> </ol> <p>All of that is good news. Good for clients. Good for the work. Good for us.</p> <p>A natural result of this is abstraction.</p> <hr> <p>Design patterns are everywhere. The often-repeated chunks of content that we find ourselves designing and building time and time again. User's get used to seeing them in certain ways, and over time, perhaps their performance is hindered by deviating from the norm. We see this all the time on e-commerce websites, or in new user registrations. Over time, we all collect these little bits of content, design and code. They build up, and eventually they need organising.</p> <p>Why not group them all together, categorise them, and iterate on them over time? Throw in your boilerplate templates, too. Maybe group them together as a 'starter kit' with included navigation, indicative content – for different types of sites like ecommerce, blogs or magazine sites?</p> <p>And... wait a second, you've got all you need to churn out site after site, product after product for clients now. Excellent. All we need to do is change the CSS, right? Maximise our profits.</p> <p>No. It's not right.</p> <p>Conformity and efficiency have a price. And that price is design. That price is a feeling of humanity. Of something that's been created from scratch. What I described is not a design process. It's <em>manufacturing</em>. It's a cupcake machine churning out identical cakes with different icing. But they all taste the same.</p> <p>Documenting things that repeat is an important thing to do. I have my own pattern library that I've been adding to for years now – it's an electronic scrapbook where I take snapshots of little content bits and bobs that I find interesting, and that keep on cropping up. It'll never see the light of day. I'll never use it on a project, because what I'm doing is building up a head full of this stuff so that when a problem presents itself, I will have a fuzzy recollection of something – maybe – that is similar. Instead of going straight to my big 'ol database of coded examples, I'll try to recreate this little pattern from memory – and that's when something interesting happens.</p> <p>Recreating something just slightly differently – from memory – means you end up with something new.</p> <p>That's why I wanted to be a designer, after all. To create new, beautiful things.</p> The Business of Responsive Design 2013-12-01T00:00:00+00:00 <p class="standfirst" markdown="1">Responsive design affects a lot more than just our website's layout. From content, and how it's created, to the structure of teams and organisations can all be affected by the processes responsive web design brings. </p> <p>This post is a rough transcript from my talk at <a href="">Handheld Conference</a> last week in <a href="">Cardiff</a> on just that.</p> <p><img src="" alt="Opening slide for talk on the Business of Web Design"></p> <p>I've a confession to make. I'm an armchair mountaineer. I'm too much of a coward to actually put myself in the type of risk mountaineers do, but for the last decade or so, I've been reading as many mountaineering books as I could get my hands on. And I'd like to start by telling you a famous story of Alpine mountaineering.</p> <p class="caption" markdown="1">The Eiger Nordwand in the Bernese Alps in Switzerland. An 6000 ft, vertical, concave face perpetually shrouded from the sun. Facing North, the Eiger's north face has been the scene of some of the Alp's greatest mountaineering victories, as well as perilous catastrophies.</p> ![The North face of the Eiger]( <p>This is the North Face of the <a href="">Eiger</a> in the Bernese Alps in Switzerland. The Eiger (meaning: Ogre) is a staggeringly difficult face to climb. Nearly two vertical miles high of ice-coated loose rock. It's a treacherous place. It's also the place I proposed to my wife in 2003. But that's another story. The story I'm going to tell you starts in 1936.</p> <p class="caption" markdown="1">Andreas Hinterstoisser, a talented German climber, in the meadows below the Eiger enjoying the sunshine.</p> ![Andreas Hinterstoisser]( <p>In the winter of 1936, Andreas Hinterstoisser (pictured), Toni Kurtz, Willy Angerer and Edi Rainer set about tackling the face of the Eiger – then unclimbed. They'd established the rough route, and after a day had reached an impassable, sheer area of rock just underneath the Rote Flüh – a prominent feature on the face.</p> <p>Let's leave that story there for now and come back to it later.</p> <p>Let's talk about responsive design.</p> <p>Responsive design has changed my work and, ultimately, how I do business. This talk is about how it's done that. But before I do that, I'd like to tap about the definition of responsive design.</p> <p>If you talk to some people, responsive design is just fluid grids and media queries. To other people, it's that your website fits on a tablet or mobile phone and changes to adopt. To others, it's the way to save money by consolidating teams. Responsive design – like AJAX, or Web 2.0 – has become a buzz-word to represent a change. A change in our industry. A change in the way people are consuming content. That's the type of responsive design I'm going to talk about.</p> <p>I'm going to talk about three specific areas of how it has challenged the way we work at <a href="">Mark Boulton Design</a>.</p> <h2 id="1.-structured-content">1. Structured content <a class="direct-link" href="#1.-structured-content" aria-hidden="true">¶</a></h2> <p>It's strange to think that there was a time on the web where content was a second-class citizen. As a student of editorial design, I've always found this odd. In the past, whenever I heard 'content is king', my response was generally 'er, yes'.</p> <p>Responsive design has challenged how we commission, create, edit and design for content. I'd like to talk a little bit about how this has affected two clients of ours. Firstly, our work with <a href="">CERN</a>.</p> <h3 id="different-content-for-different-people%2C-at-different-times%2C-on-different-devices.">Different content for different people, at different times, on different devices. <a class="direct-link" href="#different-content-for-different-people%2C-at-different-times%2C-on-different-devices." aria-hidden="true">¶</a></h3> <p>I've talked about CERN before at conferences, but not really in this amount of detail. When we started working with CERN a few years ago, the whole project was framed in one sentence by the head of the CERN web team…</p> <blockquote> <p>We have a content problem.</p> </blockquote> <p>And they did. They didn't really know who their audiences were, how to talk to them, or what they wanted. Following months of research, it became clear the audience for the CERN site was comprised of students, scientists, the general public and CERN staff. Interestingly, all of those four large groups had a common need: <em>updates</em>. They wanted to know what was going on. But here is the problem: each group of people needs to hear the same update in different ways. Let's take an imaginary use-case of an announcement for a new particle that's been discovered.</p> <p>For the general public, they are generally learning a lot about CERN from elsewhere. Not on the CERN site. So, they are coming to the site from another trigger – either another website, or the TV, or a magazine or newspaper – and their overall comprehension of the work done at CERN is minimal. The update needs to be worded to accommodate that. But that update also needs to appeal to scientists working in high energy physics and associated fields. They want the detail, in the language that suits them. Already, our one update is fragmented. Throw in students and educators, then our update is going to have to work very hard if it's just one piece of content.</p> <p>Therefore in the CERN redesign process, the editorial structure of updates needs to be fragmented and structured in such a way to accommodate different words for different audiences. A responsive design challenge that has nothing to do with how something looks, but how it is structured and how it works in the CMS.</p> <p>This brings me onto my second point on structured content.</p> <h3 id="fractured-content">Fractured content <a class="direct-link" href="#fractured-content" aria-hidden="true">¶</a></h3> <p>We've also been working with <a href="">Al Jazeera</a> for a few years on redesigning their digital platform. Throughout that process, in just that short space of time, we've seen the rise of responsive design and how it affects how content is created and viewed. One example of this is just the process of how news works.</p> <p>We often think of a news story as a page. A useful, familiar construct. It has a headline, a stand first, some paragraphs and maybe an image or a map. But after studying how their editors work, it became clear that this is not what a news story is. News is always moving.</p> <p><img src="" alt="Drawing of a seed"></p> <p>A story starts as a seed. Something that comes down the wire…</p> <blockquote> <p>There has been an earthquake in Japan.</p> </blockquote> <p>Nothing more. Not yet.</p> <p class="caption" markdown="1">Content starts as a seed. Something small. Then grows over time to pull in various content types.</p> ![Diagram showing content being pulled together]( <p>Then, over time, the story grows and, like a snowball rolling down a mountain slope, more content starts getting attracted to it – maybe a tweet, other articles, images, video, timelines, quotes etc.</p> <p>Because a news story is not a page. A story is the link between bits of content. The question here is how do we – meaning editors and designers – curate and cajole this content to most effectively tell the story?</p> <p><img src="" alt="Meta Data is the New Art Direction"></p> <p>The answer does not lie only in design. The answer lies in how content is structured and categorised. <a href="">Meta-data is the new Art Direction</a>.</p> <h2 id="2.-process">2. Process <a class="direct-link" href="#2.-process" aria-hidden="true">¶</a></h2> <p>Responsive design has been perhaps most visible in its ongoing challenges to process. How we do what we do is coming under increasing pressure, and here are several ways in which I've noticed how.</p> <h3 id="proximity">Proximity <a class="direct-link" href="#proximity" aria-hidden="true">¶</a></h3> <p>I started out working in advertising. As a student, I was an intern for a couple of years at an agency in Manchester. Other than the work, one of the things that has become clear now I run my own design business.</p> <p>When advertising agencies talk about work, they talk about it in terms of accounts, not projects. When you win work, you win an account – for a period of time. An account is commitment over a period of time.</p> <blockquote> <p>We will work with you on all our projects for 12 months.</p> </blockquote> <p>This means a client will invest in you, and the time it takes you to learn their business, familiarise yourself with the challenges and give you the space (and budget) to do great work.</p> <p>Projects are not a commitment. Projects are relatively risk-free.</p> <blockquote> <p>You will deliver this website for this much money in this time-frame.</p> </blockquote> <p>Approaching work this way leaves little room for any ongoing commitment, from client or agency. It's like a first (and only) date. And with that comes a distance.</p> <p>Over the past couple of years, I've seen my peers move from agencies and studies move to products and client-side. In doing so, they are closer to the problems. With the space to move in an agile way without the constraints of any binding commercial relationship. This reminds me of a story from Kevin Spacey about his work on the <a href="">House of Cards</a></p> <p>Kevin Spacey recently gave a rousing talk at <a href="">The Telegraph</a> in which he talked about how TV commissioning works in the US. He went to all the networks in the US to pitch the show. They were all interested, but each one wanted to do a pilot. A pilot which, in 45 minutes, would establish the major plot-lines, introduce the characters, the love-triangle, the cliff hanger.</p> <p class="caption" markdown="1">Kevin Spacey delivers one of the best talks I've ever seen (oh, to be an actor with this sort of delivery!) about why and how the House of Cards was commissioned on Netflix.</p> <iframe width="100%" height="400px" src="" frameborder="0" allowfullscreen=""></iframe> <blockquote> <p>&quot;It wasn't through arrogance that we weren't interested, but we wanted to tell a story that took a long time to tell. We were creating a sophisticated, multi-layered story with complex character that would reveal themselves over time and relationships that would need space to play out.&quot;</p> </blockquote> <p>The House of Cards was about the long game.</p> <p>To me, many web projects can feel like a pilot. Relatively low risk, low on commitment to work together without the time and space for the problems to play out. Proximity to the problem – a hand forced by responsive web design's challenges – comes from working closely, over a long period of time. An account, not a project. <em>A season, not a pilot</em>.</p> <h3 id="the-project-rope-a-dope">The project rope-a-dope <a class="direct-link" href="#the-project-rope-a-dope" aria-hidden="true">¶</a></h3> <p>In 1974, Muhammad Ali and George Foreman fought in the 'Rumble in the Jungle' in Africa. Forman was the favourite having beaten Ali three years before. he was strong. Young. And a great boxer. He was sure to win.</p> <p class="caption" markdown="1">Muhammad Ali vs George Foreman in the 'Rumble in the Jungle' in 1974.</p> ![Muhammad Ali vs George Foreman]( <p>Throughout the fight, Ali let himself get hit on the ropes. To give the impression he was tired, lose, and close to defeat. All the while, he was whispering in Foreman's ear 'You've got nothin''… 'nothin''. Forman blew himself up trying to knock Ali out. In the dying moments of the fight, Ali knocked Forman out and won the fight. This technique was coined the 'rope-a-dope'.</p> <p>Just going back to my last point for a moment. One of the results from being closer to the problem is that you have more exposure to the mess of design. Making things is messy. And to some people – especially clients, who can expect nice shiny things handed to them – may not be expecting to be exposed to that.</p> <p>Sometimes they will freak out. And it's our job to sit back on the ropes and take it on the chin. But, instead of goading them, we should offer words of reassurance. We should shift our process to something that may feel more comfortable. You have to break a few eggs to make an omelette, after all.</p> <h3 id="where-is-the-design%3F">Where is the design? <a class="direct-link" href="#where-is-the-design%3F" aria-hidden="true">¶</a></h3> <p>Getting in the browser sooner. Looking at content sooner. Iterate. All of these things have a knock-on to design and how it's received by a client.</p> <p class="caption" markdown="1">The Fidelity Curve. As a project time-scale increases, so does the fidelity of the design work being done.</p> ![The Fidelity Curve]( <p>For a few years now, I've talked about the fidelity curve. A simple graph to explain to clients that over time, we increase the fidelity of a prototype and slowly layer on the visuals. This is so we can fail quickly on low-risk, low-fidelity work. Mostly this is good and works well, but recently, I had an interesting discussion with a client in which they asked where the design was.</p> <p>It's an interesting question, because in this process, the design is everywhere. And unless you take the client along every step of the way – knee deep in the mess of design, being closer to the problem – then how do you manage the expectation that, at some point, a client will expect a presentation, or a reveal' of how the product will look.</p> <h2 id="3.-the-trend">3. The Trend <a class="direct-link" href="#3.-the-trend" aria-hidden="true">¶</a></h2> <blockquote> <p>&quot;I want a responsive…&quot;</p> </blockquote> <p>As I said, responsive design is a trend. Or, rather, an awakening. As such, a lot of organisations and businesses are behind the curve . But one thing many people aren't asking (and, I know this because I ask) is 'is it worth it?' or 'Do you really?'</p> <p>In 2011, our first responsive site was a site for <a href="">World Skills London</a>. It was a fun project, geared around a single event in London in which 200,000 visitors would attend and watch the various activities in the competition. As part of this project, we designed a responsive map. A cool diagram with a responsive image map that would scale and allow users to get from A-Z in the event by using their phone. Cool.</p> <p><img src="" alt="The World Skills London 2011 Map"></p> <p>Except, during the project retrospective, it became clear that, actually, only 25 people used it. It was not needed.</p> <h2 id="back-to-hinterstoisser">Back to Hinterstoisser <a class="direct-link" href="#back-to-hinterstoisser" aria-hidden="true">¶</a></h2> <p>Let's go back to the Eiger and Hinterstoisser and three other men trying to climb the North Face. If you recall, after a day or so, they had arrived at a seemingly impassable face of rock under the Rote Flüh. After much deliberation about trying to re-route, Hinterstoisser decided to have a go at traversing the feature. And he succeeded, and with that, opened the gateway to the rest of the face and rest of their climb.</p> <p class="caption" markdown="1">The Hinterstoisser Traverse on the North Face of the Eiger is a 150ft pitch of vertical, and often ice-glazed, rock. Now, with a fixed rope in place, the traverse was undertaken by Hinterstoisser by tensioning a rope high above him and traversing downwards and across.</p> ![The Hinterstoisser Traverse]( <p>Today, the same traverse is still used across the same slab of rock.</p> <p>Last week, <a href="">I did a survey on Twitter</a> about the business of responsive design. After 500 or so responses, it's clear that everyone is finding everything hard right now. The change is so big, and so rapid, that we're struggling to keep our heads above water. And this especially goes for those working in-house or clients.</p> <p>Breaking new ground is always difficult.</p> <p>But, just like Hinterstoisser, take heart in knowing that what we're working on right now is a legacy for designers and developers in the months and years ahead.</p> The Lull 2013-11-21T00:00:00+00:00 <p>There is a storm coming.</p> <p>For those of you reading this who have experienced a severe weather event know all too well the sequence of events leading up to it. First, there is a warning – either through the media, verbally, or from the old woman in town who can feel it in her bones. Then, there is the sense of it coming, and that can take minutes, hours or days. Either way, there is a feeling of calm before the havoc. Battening down the hatches, preparing your self, property, business and family. Preparation is important in surviving something potentially catastrophic.</p> <p>I read a post today from the Karen Mcgrane called <a href="">Responsive Design Won't Fix your Content Problem</a>. It was nicely validating for me reading what mirrored so many of <a href="">Mark Boulton Design</a>'s clients, especially over the last eighteen months. The post describes the difficulty organisations are with adapting to their digital content being published across a variety of channels. Reconciling that against existing business and technology structures is hard for big organisations but, in my experience, that's what's been happening for the past years.</p> <p>Responsive design is our storm. Acknowledging the way the web really is, and reconciling it against the plethora of new devices and reading behaviours has been a seismic shift in the creation and reading of digital content. Organisations have been spending the last couple of years coming to terms with it.</p> <p>Quoting Karen's article from a recent project she was working on:</p> <blockquote> <p>Our executives assume that since they made the decision to go responsive, every other decision would just be tactical details. In fact, implementing responsive web design raises issues that strike right at the heart of our business and the way we work. We need to fix our review and approval processes, our content management system, our asset management system, our design standards and governance. We need to clean up our outdated, useless content. But it’s hard to get people to step up to solve these bigger problems, because they don’t think they’re part of “responsive design.”</p> </blockquote> <p>This <em>exactly</em> mirrors my experience.</p> <p>What starts out as desire to change for the better, to make a web product responsive, is the start of problem escalation. Before you know it, organisations are talking about needing structured content, but to do that they need a new CMS, but to do that, they have to procure a new CMS and migrate content. Now, that's not all bad. Organisations have been doing this. Preparing solid foundations on which to create digital experiences for wherever the user may be.</p> <p>The storm. The critical mass of creating content for an increasingly broad digital space is just around the corner. Are you prepared?</p> Conference organiser tips (from a speaker's perspective) 2013-11-16T00:00:00+00:00 <p>Following on from my post about <a href="">speaker and audience tips</a>, I thought I'd also share a few tips for conference organisers from a speaker's perspective.</p> <p>I've spoken at well over fifty events over the past few years to upwards of about four thousand people. Along the way, I've had mixed experiences of what it's like to speak at conferences big and small. Mostly, of course, the experience has been great. Organisers are lovely people, who work extremely hard and appreciate you being there and look after you well. But, as always, the devil is in the detail. If you're thinking about organising a conference this coming year, maybe bear some of these details in mind.</p> <ol> <li> <p><em>Logistics</em>. Well in advance, give the speakers the logistical details; who's meeting them at the airport, where they're staying and for how long, what time the parties are, what other commitments they have etc. If you don't have them, let them know you don't have them yet and that you haven't forgotten them.</p> </li> <li> <p><em>Pay them</em>. Even if it's a small amount, but especially if your conference is for profit and relies on the quality of their talks to sell tickets. Of course, travel expenses should be covered. Now, this may not apply to some 'community' conferences with many, many speakers. But, for most, it applies.</p> </li> <li> <p><em>Arrange travel</em>. Book their flights (and make sure you ask for their frequent flyer number), pick them up from the airport, ferry them around if need be. They're not to be pampered, but don't underestimate peoples anxiety in foreign countries.</p> </li> <li> <p><em>Put them in a nice hotel</em>. Again, consider the details. Make sure the hotel has confirmed the booking, and they know when the speaker is expected to arrive. Once, when arriving late at a conference hotel, I was told I didn't have a room and ended up sleeping in a meeting room on a makeshift bed for the night.</p> </li> <li> <p><em>Confirm with them the pre and post talk events</em>. Is there a speaker's dinner? If so, where, when, what time (and where) is everyone meeting.</p> </li> <li> <p><em>Sound and technical check</em>. A lot of speakers like to get this out of the way before their talk. They will want the name of the person they need to report to – either a stage manager, or a conference volunteer – in order to sort that out.</p> </li> <li> <p><em>Dongles</em>. Make sure you have every known projector dongle available. People lose them all the time. Also, spare clickers and batteries is a good idea. Most speakers will be well-prepared and carry their own, but just in case.</p> </li> <li> <p><em>Tea</em>. This is personal. Not everyone drinks coffee, and I would like tea at my breaks.</p> </li> <li> <p><em>Alcohol</em>. Again, this is personal, but not everyone likes a piss-up. So, the after party should not necessarily be at a club where you can't hear yourself think with as much free spirits as you can drink. Consider attendees may want to talk amongst themselves in a grown-up setting after a long day sat down. We're not all party-animals.</p> </li> <li> <p><em>Green rooms</em>. It's important that speakers have somewhere to go and work, or cram their slides, or be by themselves with their nerves. This is very important for me. Last thing I want to do before I go on is mingle. I'm generally nervous and want to focus on the job at hand. It has been known for me to hide in the toilets for a while.</p> </li> <li> <p><em>Rights</em>. Don't ask for exclusive rights over speaker's content. This happens, and increasingly so, actually. A conference will explicitly say that you are not allowed to talk about the same stuff in other places. Nope. That will not do. A lot of speakers produce one or two talks for the entire year.</p> </li> <li> <p><em>Video</em>. If you're going to video me speaking, and charge for those videos of me and my content, you should explicitly ask me. Not because I'll say no (not every time), but because it's nice to be asked. And, sometimes, I may be talking about content which I want to actually use at a later date for myself in a filmed workshop, or talk.</p> </li> <li> <p><em>Get a good MC</em>. If you have someone introducing each speaker – and you should – then make sure that person is energetic, funny, personable and just plain pleasurable to listen to.</p> </li> <li> <p><em>Have a stage monitor</em>. I use scant notes in my talks, but the most important thing for me are my pace notes <a href="">see point 14</a>. If those notes are on my laptop screen all the way over on the lectern, it's sometimes a bit unnatural for me to be flitting back and forth. It's much better, if you can, to have a monitor on the front of the stage showing Keynote's presenter display.</p> </li> <li> <p><em>Set the expectation for Q &amp; A</em>. If you plan on doing Q &amp; A let everyone and the speaker know. If you don't plan on it, then don't – after the speaker has finished – say 'thanks, Mark. So, any questions audience?'. Invariably there won't be any, because nobody – including the speaker – was expecting it. Also: it's generally a bit of a bum note after the rousing ending to a talk <a href="">see point 11</a>.</p> </li> <li> <p><em>Your conference is not your ego trip</em>. Everybody, including the speakers, are incredibly grateful for the effort you've put in over the year to produce a great conference. But, chose a time and a place to thank people. In between each talk isn't it. Also: my guess is that most people in the audience have bought tickets to hear what the speakers have to say, rather than as a favour to you.</p> </li> <li> <p><em>Your conference is not your platform</em>. Building on point 16, I've been to a few conferences where there is an agenda – a point to be made by the organisers – either by who is speaking, or about what. If you have one, and that maybe fine, but please let speakers know before hand.</p> </li> <li> <p><em>Talk to your speakers about their content</em>. This is important. Many speakers will not have their talk ready until right at the last minute (especially me). But, they will have a pretty good idea of what they will be talking about. Talk to them. <em>design</em> the conference and the material. Create an experience for the attendees on underlying threads in the talks. It's my feeling attendees should feel like they've been to a show, than seen a collection of people speak. It should feel united.</p> </li> <li> <p><em>360 Degree Feedback</em>. As a speaker I'd welcome the opportunity to feedback to the conference organisers about the conference. Consider a method of gathering feedback from speakers.</p> </li> <li> <p><em>Feedback from the audience</em>. Feedback on speaker's talks is generally through Twitter, which is an almost immediate response and gauge on how you've done. Mostly, it's a good tool in that regard. Other conferences use questionnaires. I find this a clumsy tool and metric on which to base a speaker's performance. One glance at Twitter, and a few conversations in the hallway, should confirm to you if it was well-received or not. I welcome constructive feedback. I don't welcome 'I can't understand this Englishman's accent', or 'that was boring'. That's not a conversation. It's a verbal drive-by. I know people have quit speaking because of this type of 'feedback'. It's not helpful.</p> </li> </ol> <p>That's it for now. It's worth saying I've never organised a conference, but I do know how much time, effort and money it takes to do so. I've nothing but upmost respect for people who do. That said, I hope these few tips help in a little way if you're thinking of giving a conference a go.</p> Speaking and Audience tips 2013-11-15T00:00:00+00:00 <p>I've been speaking for a good few years now, and over that time, I've amassed a bunch of little tips and tricks I use to make it more of a pleasurable affair. This post was prompted by a colleague of mine, <a href="">Nathan Ford</a>, who, this morning, asked for some tips as he has a couple of speaking gigs lined up next year.</p> <p>So, here we go. Some tips for speakers, and for audiences (from a speaker's perspective).</p> <ol> <li> <p><em>Smile</em>. This is a fun thing to do and you are thrilled to be there (even if you want to vomit in your shoes at that point).</p> </li> <li> <p><em>Check your flies.</em> You don't want that breezy feeling half way through a code demo.</p> </li> <li> <p><em>Take off your lanyard.</em> It can bang against your mike.</p> </li> <li> <p><em>Take off your earrings.</em> If you have long, dangly ones they can interfere with headset microphones.</p> </li> <li> <p><em>Do a sound check and walk the stage</em>. If it's being filmed check for black spots on the stage and avoid them. Get comfortable with the size of the stage, especially if you plan on wandering around.</p> </li> <li> <p><em>Never apologise</em>. You know your mistakes, your mistakes in your slides, things you forgot to say, technical issues. What the audiences doesn't know, doesn't hurt them.</p> </li> <li> <p><em>Make sure you have water</em>. A bottle by the lectern is enough. But, don't drink it all the way through your talk like some kind of nervous tick. It's just there for emergencies.</p> </li> <li> <p><em>Use a good clicker</em>. Check the batteries.</p> </li> <li> <p><em>Check your radio mike is off before you go for an emergency pee</em>. You don't want to do a <a href="">Naked Gun</a>.</p> </li> <li> <p><em>Don't fall off the stage</em>, but if you do, don't acknowledge it. See point 5 to avoid this.</p> </li> <li> <p><em>Finish strong</em>. Empower the audience. Encapsulate your main point in one sentence. That last sentence should stay with everyone. Pause. Then say 'Thank you'. Then the crowd will clap.</p> </li> <li> <p><em>Don't hide behind the lectern</em>. It can feel like a barrier (or a safety net). Sometimes this is tricky if people are doing code demos or the like, but personally, I can feel like it's a barrier between me and the audience.</p> </li> <li> <p><em>Gaffer tape!</em> If you do stay behind the lectern, pack some gaffer tape in your bag. Lectern's have a habit of having a small lip that Macbook Airs tend to ride ride over. On a number of occasions, I've had to tape my laptop to the lectern.</p> </li> <li> <p><em>Pace yourself</em>. Put in pace notes in your slides. Just a simple 5:00 will do. Meaning, 'At this point, I should be 5 minutes in'. This helps me know when to speed up, or fill. Plus, it's a good barometer of your overall pace.</p> </li> <li> <p><em>Make your point</em>, but don't make it angrily. Passion can sometimes come across as shouty arrogance.</p> </li> <li> <p><em>Don't say 'can you hear me?'</em>. If they can't, they'll let you know. Good sound crews will fade up your mike as you start speaking.</p> </li> <li> <p><em>Focus on your words more than your slides</em>. Again, this maybe personal, but I'd rather listen to well considered points, than look at pretty slides.</p> </li> <li> <p><em>Find a friendly face in the first few rows</em>. Try to block out the people looking angry, bored or just asleep. Yes, people fall asleep.</p> </li> <li> <p><em>If you finish early, don't worry</em>, it just means people get more coffee.</p> </li> <li> <p><em>Dress comfortably, not necessarily smartly</em>. That doesn't mean a suit, or a blazer, or a fancy dress. It means dress so you're not thinking about your clothes. If you're thinking about uncomfortable you are – for whatever reason – you'll be off your game. People aren't there to see what you have on, but what you have to say.</p> </li> <li> <p><em>Don't sell yourself, your company or your product</em>. It's not the place. People will not listen and get angry.</p> </li> <li> <p><em>Questions and Answers</em>. I'm not one for Q &amp; A, but if there is, then make sure you repeat the question before answering it. Don't take for granted everyone else has heard, plus, if your talk is being recorded, then listeners will need to hear it.</p> </li> <li> <p><em>Is it being recorded?</em> If the talk is being recorded make sure, when referencing something visual, you also provide enough context over audio so that people listening understand. Less of 'this thing over here', more of 'I'd like to draw your attention to the heading in this example'.</p> </li> </ol> <p>I think, above all else, remember that if you're planning on speaking this coming year is to enjoy yourself. Yes, it's stressful. You'll be nervous, you'll be thinking 'why am I doing this?', but there can be so much fulfilment in sharing your work with your peers. And, really, that's what it's all about, isn't it?</p> <p>And, now, if you're attending a conference this coming year, then here are a few tips, from a speakers perspective, on how to get the best out of attending the actual talks.</p> <h2 id="audience-tips">Audience tips <a class="direct-link" href="#audience-tips" aria-hidden="true">¶</a></h2> <ol> <li> <p><em>Be in the room</em>. Personally, I'm not one for laptops, iPads or phones being on, but I understand people take notes on them. People also Photoshop pictures of the Queen and engage in Skype conversations with their mum. My guess is, these people aren't listening.</p> </li> <li> <p><em>Try not to fall asleep</em>. I get it. You're tired, you were out late last night, it's warm and dark. But, really, it's quite off-putting if, as a speaker, you've spent weeks fretting over the next 45 minutes and some bloke is catching flies in the front row.</p> </li> <li> <p><em>Huddle up</em>. Move along the row to the centre so people can get a seat.</p> </li> <li> <p><em>Don't talk, or heckle</em>. Only the most experienced speakers (and I don't count myself in that group) can deal with that kind of interruption. Plus, it annoys the people around you.</p> </li> <li> <p><em>Be a friendly face</em>. It means a lot to catch a friendly face in the audience. A disgruntled face can derail a speaker or a talk.</p> </li> <li> <p><em>Be on time</em>. Get in your seat in plenty of time before the scheduled session.</p> </li> <li> <p><em>Listen and think before you tweet</em>. I'd like to think people give talks the time to play out before forming an opinion. Sometimes, it can take 20 minutes for a speaker to make their major point.</p> </li> </ol> WYSIWTFFTWOMG! 2013-09-03T00:00:00+00:00 <blockquote> <p>I get the content in Word, copy into the various boxes in the CMS and then see how it looks. Normally I spot a few typos, or it doesn't appear where I want it to, then I have to go back and find the article again – which isn't so bad, it's normally at the top. The real pain is when I have to add another link to that list over there. (whispers) Normally I ask James (a developer) to do that for me, though as I can't do it.</p> </blockquote> <p>This was a conversation I had with a person recently about how they use their CMS. A real-life content person. I say content person, not 'creator' as you may have noticed she doesn't write the content. She just 'gets it'. She's a piece in the publishing workflow. A cog in a machine. And our tools are failing her and are only going to get worse.</p> <p>In that workflow, there is a bit that's a clear trend amongst the people I've spoken to about this.</p> <blockquote> <p>then see how it looks.</p> </blockquote> <p>And that's the thing, right there.</p> <p>Since we've been using computers to make websites we've tried to make them like print. Of course, early on, that was fair enough. It was familiar. We knew the rules and tried to make the web like it. Even now, with the realisation that the web has changed – or rather, we're being honest to the way the web is. It never really changed, we just tried to make it something it wasn't – we're still enforcing a print-like mental model on it. Not necessarily us designers and developers, though. This is coming from people who write and manage content. Just like printing out an email before they send it, they will want to preview a website to see how it looks.</p> <p>The problem is this: The question content people ask when finishing adding content to a CMS is 'how does this look?'. And this is not a question a CMS can answer any more – even with a preview. How we use the web today has meant that the answer to that questions is, 'in what?'.</p> <h2 id="wysiwtfftwomg!">WYSIWTFFTWOMG! <a class="direct-link" href="#wysiwtfftwomg!" aria-hidden="true">¶</a></h2> <p>Let me first off define what I see WYSIWYG. WYSIWYG is not a limited toolbar for adding semantic value to your document.<br> The kind of toolbar you find on Medium, or on Basecamp. As you can see they are similar. They are used for applying semantics to document structure; giving words emphasis, making unordered lists, or numbered lists, making words headlines. However, they're not there for the user to get creative. They do not change the colour of a word.</p> <p>When I think WYSIWYG, I think of the Word toolbar. This type of WYSIWYG is for adding tables, images, forms, type and colour. It's a toolkit to create pages of content. Just like desktop publishing. And that's the dangerous thing. Content creators are used to having these tools at their disposal so they can craft their document. Why? Because writing isn't done in a CMS, it's done elsewhere.</p> <h2 id="times--are-changing--have-changed">Times -are changing- have changed <a class="direct-link" href="#times--are-changing--have-changed" aria-hidden="true">¶</a></h2> <p>It's been a turbulent few years for web designers and developers. We've had to relearn what we've created and finally acknowledge – through the timeliness of Responsive Design – that the web is a fluid and chaotic place, and we should be embracing it and not making it like print. We've learnt to deal with the loss of control. The problem is, though, our content people are still thinking of pages. They're still thinking of previewing. Of designing for the desktop. They're writing in Word and fine with it.</p> <p>So, that's the challenge. How can we help people – just as we have – relearn how the web is now?</p> <p>Just like when people have a content management problem, a lot of people are turning to technology for the answers. And just like content management problems, my experience is software can't fix it. Because it's a people problem, not a software problem.</p> <h2 id="the-three-places-of-content-management">The three places of content management <a class="direct-link" href="#the-three-places-of-content-management" aria-hidden="true">¶</a></h2> <p>There are three spaces * for content people – not creators, because not all content people create loads of content. Some just manage it – push it from here to there. Those places are:</p> <ol> <li>A space for writing. For writing and structuring.</li> <li>A space for management. For adding meta data, workflow, configuration and managing roles and people.</li> <li>The website space. Basically your website. A place where you begin the access user journey. Or preview your content. Generally the starting points for lots of little administration tasks.</li> </ol> <ul> <li>There are other spaces, too. The developer space, where the site is administered and created, managed and evolved. Sometimes this is through an administration interface, but not always. Sometimes it's just through an API.</li> </ul> <p>The problem I see is that the CMS tries to deal with all three spaces equally well. And as such, generally fails to deliver an optimal experience because it's trying to do too much. What if your content management system was actually three distinct applications designed to work together? Just a thought.</p> <p>But, back to WYSIWYG.</p> <p>The issue with WYSIWYG for me is that by using them the content person is considering the content as what they see. But content is more than that. Especially if it has meta data, and is split up and compiled from here and there. A 'page' maybe a dynamic template pulling in content from a dozen places. How do you change meta data there?</p> <p>If we consider the majority use-cases of correcting typos, restructuring slightly, or small on the fly editing, then the smaller toolbars for adding semantic value are useful. But for most use cases, a WYSIWYG is not useful for content people. It's just familiar.</p> <h2 id="inline-access%2C-not-inline-editing">Inline-access, not inline-editing <a class="direct-link" href="#inline-access%2C-not-inline-editing" aria-hidden="true">¶</a></h2> <p>One of the other pain points of a complex dynamic website, where 'pages' are created with bits of content from all over the place is 'where the hell do I go to find that bit of content to edit it?'. That is a painful moment in a content person's daily life. Normally, after watching them, they go off deep into search, or ask someone else who knows better. Accessing these smaller nuggets of logic-based content is problematic. This is why inline-editing and WYSIWYG is coming to the fore – addressing the use case in the live environment.</p> <p>Why is this a problem?</p> <p>As I said before, it's hiding the truth. That being, the content is more than you can see. Instead of inline editing of the content, why not just make the start of that journey a little easier? Why not provide a way of quickly getting to exactly that bit of content with a link? There we will see all of the stuff that is the content but not the words: the display logic, taxonomies, meta data etc. But if we want to change a type, we can do that with our little toolbar.</p> <h2 id="not-one-tool%2C-but-many.-not-one-way%2C-but-many.">Not one tool, but many. Not one way, but many. <a class="direct-link" href="#not-one-tool%2C-but-many.-not-one-way%2C-but-many." aria-hidden="true">¶</a></h2> <p>Structured content is the right way to go. It makes our content portable and malleable. In fact, it makes it much more useful. Slapping a WYSIWYG on top of a form field is not the way to go. That's not structured. Live WYSIWYG is not the way to go for large-scale websites because it reinforces that content is just what you see. When, in fact, a piece of content could have a whole bunch of other headlines and summaries that would only be displayed in certain contexts, along with meta data and rules. We need access to ALL THE CONTENT and provide simple, little tools to let people make typo changes and apply semantic structure and the like once they're looking at the content in a staging environment.</p> <blockquote> <p>'How does this look?'</p> </blockquote> <p>should change to:</p> <blockquote> <p>'How does this read?'</p> </blockquote> <p>Device agnostic. Screen size independent and devoid of design. Let's help content people focus on what the words and pictures are, rather than what the words and pictures look like.</p> I'm not a Craftsman 2013-07-16T00:00:00+00:00 <p>My uncle is a quiet man. He smokes a pipe with a wry smile. Like he knows something you don't. For years he restored traction engines; huge, victorian, steam-driven machines. He did it for the love of it. I have wondered if he did to escape. Like a lot of men that age, he spent a lot of time in his shed on his own, surrounded by the smell of oil, grease and pipe tobacco. A dusty pile of tabloid newspapers in the corner. Slowly whittling away on a small piece of metal, making some grommet or flange or something.</p> <p>Sounds romantic doesn't it?</p> <p>Now, how many times have you heard web designers and developers talk this way about their work? For me, it's been increasingly. And personally I find it concerning. For starters, it's a designer-centric way of working. It's a selfish exploit to pour love into your work. If you're working commercially, who pays for that time? You? Well, that's bad. The client? Well, that's ok if they see the value. But many don't.</p> <p>Giving your work love is not just about giving it time. But, time can often be better spent than whittling away on some nubbin' or grommet just because <em>you</em> think that's where you can give the work your love. Your craft.</p> <p>Over the past few years, I've spent more time on projects <em>not</em> whittling. Whittling happens in the very latter stages of work and I really don't find myself in that place very often. Mostly that's because the clients I work for have a myriad of big, sticky problems that need working out before you start 'crafting a user interface', whatever that means. I'm more often than not in a place where my own job, as a designer, is to not make something I love. But to make something appropriate. Something that does the job well. Something that responds to a hypothesis and serves a need. Not necessarily something loved and beautiful. And that's ok.</p> <p>Craft is an emotional word not appropriate to describe the job of designing. It's too self-centred. Too mired in arts and crafts and puts a difficult-to-measure parameter into the minds of clients.</p> <blockquote> <p>'I want a beautifully crafted interface from a passionate designer'</p> </blockquote> <p>Translates to:</p> <blockquote> <p>'I want a self-centred designer to spend way too long on the shiny than actually solving the problem or having the difficult discussions'.</p> </blockquote> <p>If my uncle was restoring traction engines for a living, he would've been out of business. Craft is love. And love takes time. And time is scarce and probably best spent elsewhere.</p> The First Website 2013-04-30T00:00:00+00:00 <p><a href="">Twenty years ago today</a>, <a href="">CERN</a> published a statement that made the World Wide Web freely available. To mark this anniversary, CERN – together with <a href="">Mark Boulton Design</a> – are <a href="">starting a project</a> to restore <a href="">the first website</a> and the associated assets of the World Wide Web project.</p> <p>I first started using the internet in about 1988. I had a mate whose dad worked for IBM so he had an early PC connected – via the phone line – to a rather sophisticated little modem. The internet wasn't the web back then, it was a mix of bulletin boards, rudimentary email clients and IRC. You may think that it was a primitive, but in reality, the prospect of near live discussions and collaborations with people all over the world was pretty incredible. As friends do, we lost touch, and my connection to the internet was lost with it. I did other things: failed my A-levels, learnt martial arts, chased girls, learnt the guitar and went to art college. My connection with internet picked up again in 1994. And, oh boy, was it a different place entirely. In just a few short years, the web went from idea to proposal to freely available. And the world was changed forever.</p> <p>As web designers and developers, we spend a lot of time trying to explain the difference on the web. &quot;It's not TV, it's certainly not print&quot; (oh, no, it's definitely not that). The web is its own thing. But unlike other media – ones which have physical artefacts, which get left behind to rot, to be found and stuck on a shelf in a museum – the web doesn't have that. Pixels don't decay, they just disappear. Forever.</p> <p>Preserving our digital heritage is as important as preserving our physical heritage. There are a few people and organisations in the world who get this: <a href="">The Long Now Foundation</a> and <a href=""></a>, to name a couple, but I'm not sure that's enough. The need to preserve must come from our desire to learn from the past. I have two young children and I want them to experience the early web and understand how it came to be. To understand that the early web wasn't that rudimentary but incredibly advanced in many ways. Currently, it's impossible to do that. And, together with CERN, that's what we're hoping to provide.</p> <p>From today, we've started work on <a href="">the project objectives</a>. The talented web team at CERN have already <a href="">reinstated the first URL</a> and uploaded a version of the website from about 1992. The restoration has begun.</p> <p>To keep up to date on the project you can <a href="">read the project blog</a> where we'll be posting updates on progress. You can also follow on Twitter <a href="">@thefirstwebsite</a>.</p> <p><a href="">Read the announcement</a> from CERN and two opinion pieces from <a href="">Robert Cailliau</a> and <a href="">Vint Cerf</a></p> UI is visible. Type is visible. 2013-03-14T00:00:00+00:00 <p>In 1955, Beatrice Warde gave a presentation to the Typographer's Guild in London (now, the <a href="">International Society of Typographic Design</a>) which later became an essay titled: <a href="">'The Crystal Goblet, or Printing Should Be Invisible'</a>.</p> <p>A wonderful piece of writing in which Warde describes the role of typography – or rather the role of the designer - in printing. The general premise is that good typographic design shouldn't be seen.</p> <blockquote> <p>When you listen to a song in a language you do not understand, part of your mind actually does fall asleep, leaving your quite separate aesthetic sensibilities to enjoy themselves unimpeded by your reasoning faculties. The fine arts do that; but that is not the purpose of printing. Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.</p> </blockquote> <p>Let's take that last point. Morgan Freeman has a memorable, wonderful speaking voice. One that adds colour and weight to the words. His words are not just audible, and understandable, but they are rich with personality. His voice adds to the words he speaks.</p> <p>I disagree with Warde. Type should not always be invisible, it should be appropriate. Sometimes, it's a typeface's job to be overt, loud and suggestive, in order to communicate the content in the best way. But, yes, sometimes typography has to melt away into the background. To support the content and the reader. To help them.</p> <p>On the web, because we're quite often presented with long-form text (and by that, I mean more than a few paragraphs), we get a little obsessed with body copy. Good typesetting of body copy should be like that of setting a novel; the type should disappear. But, not all typography is body copy, and to consider it in these narrow terms is to do the practice of typographic design a huge disfavour.</p> <p>Whenever we design with words, we're designing with type. And words are not always long form paragraphs designed to be very easy on the eye. Sometimes it's a logotype, a button, a richly designed layout, a data table or form. The application of typographic design is just so broad that to say it all has to be invisible is to imply the goals of typographic design are the same across the board.</p> <p>Legibility is a baseline requirement for typesetting anything. It's like edible food. It shouldn't really be a measure of what is good or not. Just like audibility and comprehension are baseline requirements for speech. There is more flavour in words; spoken or printed. There is more flavour in type, that if applied well, transcends content from being merely legible, to that of being pleasurable. After all, that's why we have different typefaces: each brings with it characteristics that flavour the words.</p> <p><a href="">Nick Cox</a> says in his article, '<a href="">Typography should be visible</a>':</p> <blockquote> <p>In my opinion, there is merit to visible typography because in the hands of a competent typographer, a text can truly sing. Not because they have left their mark out, but because they have worked their art on the words.</p> </blockquote> <p>I agree which him completely. It's the difference between something edible and exquisite. The difference between average and better. Which is why all this invisible, reductionist UI approach is starting to grate on me a little because it suggests we have the same goal for all our work; to make it invisible. It's more complex than that. It's an over-simplistic measure of success that is put far more eloquently than in <a href="">this post</a> from <a href="">Timo Arnall</a>.</p> <p>Of course, I say all of this under the one big caveat that, in typography, there are no rules. Just good decisions. But, let's make some decisions shall we? Not make everything invisible because, apparently, that's the way it should be.</p> ATLAS 2013-03-13T00:00:00+00:00 <p>Eighteen months ago, I blogged that we'd started working with <a href="">CERN</a> on redesigning their site. A dream project for me. And one that is in its final chapters as the site went live last week. But, as with all great stories, as one chapter draws to a close, another starts.</p> <p>This week I'm at CERN in Geneva, but I'm not working for CERN. <a href="">Mark Boulton Design</a> has been asked by <a href="">ATLAS</a> to help them redesign their public website. It's another dream project.</p> <p>ATLAS is a collaboration of three thousand physicists, engineers, computer scientists and support staff, in forty countries, in one hundred and seventy institutions from around the world. One big scientific melting pot, who have built one of the most complex machines known to man which is connected to the Large Hadron Collider. They're one of two experiments to <a href="">independently observe a particle</a> that behaves consistently with the Higgs Boson. In other words, whilst they share similarities with CERN, they're actually quite different.</p> <p>I'm thrilled to be working with such a progressive, interesting group of some of the smartest people on the planet, working on some of the most historically important work that humans have ever done.</p> CERN 2013-03-11T00:00:00+00:00 <p>Last week, <a href="">CERN</a> quietly redirected their URL to the new site. And <a href="">Mark Boulton Design</a> and the CERN project team saw the chapter close on nearly two years of work.</p> <img src=""> <p>There is much to talk about with a project of this scale. Probably the first thing to say is that this was not a website redesign project. The project started with the very simple statement: 'we have a content problem'. I'd like to think it's a problem we solved, but it also went much deeper than that.</p> <h2 id="community">Community <a class="direct-link" href="#community" aria-hidden="true">¶</a></h2> <p>CERN is an organisation that supports collaboration. In fact, CERN is comprised of many collaborations; more community than organisation. We have a bit of experience designing with communities, and the teeth we cut with the <a href="">Drupal community</a> came in very useful here.</p> <p>As we all know, the question 'why wasn't I consulted?' can derail almost any endeavour. This was no exception. So, early on in 2011, the Mark Boulton Design team spent months talking and listening. In fact, the majority of our first six months on the project was spent trying to understand CERN's audience – both internal and external – and what CERN does for them.</p> <p>As in 2008 and 2009, when we worked with the Drupal community, designing for community relies on one thing: listening for trends. Design by committee doesn't work because there are relatively few stakeholdersm and sometimes with big egos. Design by community works because of the sheer numbers and relatively flat hierarchy. Instead of ensuring the boss is consulted, it's more important to consult with just two types of people: those who have influence, and those who have a big mouth. Get both of them on-side, and your job will be easier.</p> <h2 id="content">Content <a class="direct-link" href="#content" aria-hidden="true">¶</a></h2> <p>CERN started with a content problem. To really understand how content was to be reorganised, rewritten, and – in some cases – deleted altogether, we needed a plan. Not only that, we needed to understand how this content was being consumed and where. We needed a content strategy.</p> <p>We embarked on a good few months of content research – audits, interviewing, process-audits and the like – before producing a strategy that sat alongside a new Communications strategy from the CERN comms team. Together, these would redefine how content is created and managed at CERN, and how it gets published to the web.</p> <p>The new content for CERN is Future Friendly. It's adaptive – meaning it's carefully chunked into small fields in the CMS and tagged with really great meta data so it's able to shift and flex into different containers. No WYSIWYG here. Just really smart, well-structured – and reusable – content.</p> <h2 id="research">Research <a class="direct-link" href="#research" aria-hidden="true">¶</a></h2> <p>To my mind, good design decisions rely on good research. And for this project, we had some great research throughout. A broad amount of data was gathered by various means and filtered down to the design and product team. Not by way of reports and documents, though. In my experience, these often get cast aside. No, in our team we had Emma embedded with the design team. Always present with up-to-date insights into the audience needs so that she could literally sit beside us to help us guide some of the design decisions.</p> <p>But it's not just for us.</p> <p>CERN now has <a href="">detailed information about their users</a> available for anyone who creates a website, or writes for the web, at CERN.</p> <h2 id="design-strategy">Design strategy <a class="direct-link" href="#design-strategy" aria-hidden="true">¶</a></h2> <p>I've written about the design strategy for CERN before. How the content needed to inspire, educate and inform the various audiences of the website, but we needed a simple model in order to map the content and the subsequent presentation of the content. Our Make Mantra – <a href="">Create Wonder</a> – was born, and is still used today as way of gauging how content is to be created and presented.</p> <p>Practically, we did a <em>lot</em> of prototyping and very little else. Prototypes became the way we experimented with concepts, discussed and communicated ideas, worked on responsive elements. These prototypes then quickly moved from static HTML into dynamic lo-fi Drupal prototypes. This was so editors could get writing content quickly – actually using the tools they would eventually use on the site. All the while, we were continuing to iterate. In all, I think there were 5 or 6 alpha releases, 8 betas and many, many pre-alpha prototypes.</p> <h2 id="drupal">Drupal <a class="direct-link" href="#drupal" aria-hidden="true">¶</a></h2> <p>The new CERN public website runs on <a href="">Drupal 7</a> (the most recent version of Drupal, that <a href="">we designed the UX and UI</a> for). It's mostly an out-of-the-box installation with a few bespoke modules that integrate with internal services such as CDS (CERN's media server) and Indico (the event management database).</p> <h2 id="team">Team <a class="direct-link" href="#team" aria-hidden="true">¶</a></h2> <p>I don't often do it, but this is the bit where I get to gush a little. The people involved in the project is pretty epic. But, there was a core team of designers, developers, product leads, researchers, content strategists and journalists that deserve a mention. Without them, this project would not have turned out the way it did.</p> <h3 id="mark-boulton-design">Mark Boulton Design <a class="direct-link" href="#mark-boulton-design" aria-hidden="true">¶</a></h3> <ul> <li><a href="">Nathan Ford</a>: Creative direction, Design</li> <li><a href="">Emma Boulton</a>: Research lead</li> <li><a href="">Alex Morris</a>: UX</li> <li><a href="">Jo Brewer</a>: Project management</li> <li><a href="http://www,">Jen Simmons</a>: Drupal theming / Front end development</li> <li><a href="">Relly Annett-Baker</a>: Content Strategy</li> <li><a href="">Andrew Travers</a>: Research</li> <li>Yours truly: Design strategy, Creative Direction</li> <li>Mark Boulton Design team: <a href="">Nicola Jones</a>, <a href="">Nick Boulton</a>, <a href="">Colin Kersley</a> &amp; Jan Colyer.</li> </ul> <h3 id="cern">CERN <a class="direct-link" href="#cern" aria-hidden="true">¶</a></h3> <ul> <li>Dan Noyes: Project lead</li> <li>Silvia Tomanin: Drupal development</li> <li>Cian o'luanaigh: Editor</li> <li>James Gillies: Department head, project sponsor</li> </ul> <p><em>Such a smart team</em>. There are of course countless others – probably hundreds of people – I could thank. But, this isn't the Academy Awards. If you helped, you know who you are, and I'm very grateful.</p> <h2 id="a-special-project">A special project <a class="direct-link" href="#a-special-project" aria-hidden="true">¶</a></h2> <p>This project always was a bit different. CERN is a special place, yes, but it takes a degree of risk and subsequent trust for an organisation of this scale to work with an external company for such a length of time. CERN invested time and energy to work with us at Mark Boulton Design. When we suggested radical changes to process due to our research findings – things that have had disruptive effect on the communications of the organisation – they didn't flinch. They knew it was the right thing to do. And supported us in our proposals. That takes a very special type of client; one that is willing to truly <em>partner</em> with a design company. And, I'd like to think the results speak for themselves.</p> <h2 id="not-just-a-website">Not just a website <a class="direct-link" href="#not-just-a-website" aria-hidden="true">¶</a></h2> <p>When I reflect on the past two years work on this project, it's easy to think of it as 'bloody hell, that's a long time to make a website'. Well, yes, it is <em>if</em> that's all we did. But, in the words of James Gillies, Head of CERN communications team and project sponsor:</p> <blockquote> <p>The launch will mark a significant change in how the Organization facilitates communications within the CERN community, as well as how it presents itself to the world. The first thing that you will notice is that the website looks different, but the most significant changes run deeper, and they form the basis for a new communications architecture.</p> </blockquote> <p>He goes on to say:</p> <blockquote> <p>There are many ways we could have chosen to build the new CERN website. We could have asked designers to create something beautiful. We could have created a template for content. Or we could have tweaked our existing websites. Instead, we went back to basics and reflected on who we want to reach and what their needs are. Then we asked them to help us. All our stakeholders have had an opportunity to influence our new website, and many of you have taken that opportunity. We have conducted regular audience research through online polling, usability testing, and in-depth one-on-one interviews, receiving feedback and input from thousands of users. I would like to thank everyone who got involved: your feedback has directly shaped many of the design decisions and turned this into a real community effort.</p> </blockquote> <p>You see, it wasn't just a web site. It was helping CERN understand who they're talking to, what they're saying, and how to say it. Then, giving them the means to do it.</p> <p><a href="">You can read more about the CERN launch</a> from James Gillies.</p> The In-Between 2013-02-14T00:00:00+00:00 <p>Breakpoints. Break. Points. Points at which things break in your design.</p> <p>But, at what point did they start becoming 'the point at which I will create a new layout entirely', or 'the point at which I introduce a new canvas'. What started out as a method to optimise your designs for various screen widths has turned, ever so slowly, into multiple canvas design. We're <a href="">creating pages</a> again, and we probably need to stop it.</p> <p>A breakpoint should not necessarily be a point at which we wholesale swap out to another layout. It can be – and I think there are good reasons to make some of those big, macro changes to grid system or navigation patterns. BUT, I think we're missing a trick for using breakpoints to make lots of subtle design optimisations.</p> <p>Jared Spool said in his recent article <a href="">strategy for responsive design</a></p> <blockquote> <p>A responsive design can have multiple breakpoints, say for a small-screen phone, then a large-screen phone, then a tablet, then a laptop/desktop. Many teams try to decide on breakpoints using average screen sizes.</p> </blockquote> <blockquote> <p>However, it’s better to look at what the content and navigation wants to be. By letting the content and navigation drive the breakpoints, teams find they can often get away with fewer screen configurations. For example, a high-resolution Retina iPad might easily share the same configuration as a well-constructed laptop display, while lower resolution tablets might just need a little adjustment to that same configuration.</p> </blockquote> <p>Our experience at <a href="">Mark Boulton Design</a> is that we can actually tend towards more breakpoints than fewer if we take the approach of optimisation rather than a device-centric, display-size approach. We're moving towards including all media-queries in-line in the CSS, rather than abstracting them into their own 480.css file, and we keep the big macro-layout changes in the <a href="">Gridset</a> CSS. But, interestingly, what we're seeing is we have less <em>styles</em> associated with more breakpoints as we're not creating a whole slew of different, fixed layouts and all that goes with that.</p> <h2 id="'but%2C-what-is-content-out-design%3F'">'But, what is content-out design?' <a class="direct-link" href="#'but%2C-what-is-content-out-design%3F'" aria-hidden="true">¶</a></h2> <p><a href="">I first discussed the idea of content-out design</a> in the context of a page. A page with edges that is used to define an aesthetically pleasing layout within. On the web – especially the responsive web – we don't have edges, so it's best to define your layout from your content. But – and I get asked this a lot – what does that actually mean in practice?</p> <p>Firstly, it means defining your grids (your big macro break-points, and the columns and what-not) from <em>actual content</em> and not from devices or screen widths. This could be the size of an image, or an ad-unit, or the typographic measure. Just some 'fixed' constraint. This will give you your grids.</p> <p>As you're building out your responsive design, you should be focussed on watching how the content adapts as the viewport changes. Somethings I look out for:</p> <ul> <li><em>Type size and leading</em>. Does it need to change?</li> <li><em>White space (macro and micro)</em>. Do you need to adjust margins and padding?</li> <li><em>Vertical space</em>. Do you need to reduce it and make the content more or less dense?</li> <li><em>Flow</em>. How is the readers eye movement going to change as you change these elements?</li> <li><em>Words</em>. Are there now too many on one line? Or too few?</li> <li><em>Source order</em>. Are the right things in the right place?</li> </ul> <h2 id="focus-on-the-in-between">Focus on the in-between <a class="direct-link" href="#focus-on-the-in-between" aria-hidden="true">¶</a></h2> <p>Content-out design means defining your underpinning design structure from your content, and then <em>focusing on what happens in between 'layouts'</em>. This approach of optimising your design by adding media queries (I like to call these optimisation points than <em>break</em> points, because nothing is broken without them, just <em>better</em>), means you are always looking at your content as you're working. You become more aware of the micro-details of how the content behaves in a fluid context because your focus shifts from controlling the design in the form of pages, to one of <em>guiding</em> the design <em>between</em> pages.</p> <p>For more reading on this, have a look at '<a href="">There is no breakpoint</a>' by <a href="">Ben Callahan</a> in which he details optimisation points in a little more technical detail.</p> <h2 id="things-are-a-changin'">Things are a changin' <a class="direct-link" href="#things-are-a-changin'" aria-hidden="true">¶</a></h2> <p>I find this period of change we're in right now fascinating. Not only is centuries old design theory being rewritten, but the process of how design <em>happens</em> is changing too. It's becoming more collaborative, more fluid, lower fidelity. Less about being squirrelled away in a dark corner crafting a beautiful thing, and more about <em>scribbling</em> away in public and repeatedly throwing our work in a big trash can. And the more we're doing that, the better we're getting.</p> <p>Optimisation points are just one way we can start thinking content-out. And thinking content-out is what we need to be doing to create truly native experiences on the web – wherever the web is.</p> Change your mind 2013-02-08T00:00:00+00:00 <p>My four year old daughter attends a rural primary school in the Vale of Glamorgan in Wales. The school performs in the top 3% in Wales. Consistently. It's over-subscribed with waiting lists to attend. The head teacher greets every pupil – by name – at the school gates in the morning. She even knows my name. It's a school you feel part of. And the government wants to close it.</p> <p>We learnt this week that, as parts of plans to change catchment areas for secondary schools, that my daughter's wonderful school is in a list of a few schools that are pencilled in for closure. The pupils will be sent to other, under-performing, under-subscribed, urban schools. We have a small window to fight these changes, but it seems that once this process gets started, it's difficult to reverse.</p> <p>When I picked my daughter up yesterday, she told that the head teacher had told them in assembly that everyone is going to fight for their school. That mummy's and daddy's should write letters, they should too, and we should make posters. A wonderfully simple attitude to a dreadful situation. I gave her a hug.</p> <p>As soon as we got through the house door, my daughter went straight to her desk and asked me if she could write a letter to the men in charge. This is it:</p> <img src=""> <blockquote> <p>Change. I love my school. Please don't close it. Change your mind. Love, Alys Boulton.</p> </blockquote> <p>This is what the men in suits don't see. They don't have to sit there and explain it to a four year old that thinks it's all going to be stopped with a couple of posters. They don't think about the illogical idiocy of closing a <em>top</em>, over-subscribed primary school. They think about numbers and averages. They don't think about rural communities, or try to understand <em>why</em> this school is doing so well. No. Thinking about averages leads to average. And who wants that?</p> <p>So, we're going to fight. With every last breath, I'm sure this school is not going down without a fight.</p> Design is veneer 2013-01-15T00:00:00+00:00 <p>On the run up to Christmas, that wonderful annual advent calendar <a href="">24 Ways</a> published an article called: <a href="">How to make your site look half decent in half an hour</a> . In some designer quarters, this was jumped upon as a load of unconsidered twaddle written by a developer who shouldn't be dishing out design tips. <a href="">Aral Balkan</a> took this task and has <a href="">written a great</a> article that follows my thinking as to what 'design' is. All good. But, I'd like to comment on what I thought that 24 Ways article was about, and really the indication of a perception of design across web professionals.</p> <p>For the past few years, I've been teaching a workshop based on my book, <a href="">Designing for the web</a>, to lots of web people, but mostly to developers, front-end devs, UX folk and project managers. All of them have come along to the workshop to learn just one thing:</p> <blockquote> <p>'How do I make this thing I've done look less shitty?'</p> </blockquote> <p>Now, if you've read my book, or my blog for a while, you'll know that I see design as a holistic practice; a practice of understanding content, of audience needs and goals, of brand, of psychology, and, of <em>making things look less shitty</em>. As much as designers would like to think we're the guardians of all things considered practice, taste, and learned process. We're really not. Some of the best designers i've worked with have embraced the passionate learning of students and amateurs. People who are not interested in becoming professional designers, but want <em>just enough</em> knowledge about an aspect of design to make their thing better: be it their resume, their website or their father's cafe menu.</p> <h2 id="getting-stuck-in">Getting stuck in <a class="direct-link" href="#getting-stuck-in" aria-hidden="true">¶</a></h2> <p>There is nothing wrong with getting stuck in. I'm not a carpenter, but I'll get stuck in and learn and renovate my bathroom. I'm not a bike mechanic, but I'll learn enough to maintain my road bike. I'm not a developer, but I'll hack around with a bit of PHP to get to where I need to be. Many people would not class themselves as designers, but they <em>can</em> arm themselves with techniques to make themselves better at <em>an aspect or technique</em> of design.</p> <p>There are many ways to <a href="">Define The Damn Thing</a>, but for me, design is really just the result of a bunch of questions and answers. These questions may be asked by the materials you're working with, the constraints of the project, or the audience you're designing for. They may be big questions such as 'how can we increase quarterly revenue by redesigning this checkout procedure?' Or, they may just be small questions like: 'how can I make this content just look a little less shitty?'. These are both equally valid questions.</p> <p>The answers to these questions are design. Some answers are big. Some are difficult. Some seem like magic. But most, in my experience, are well-trodden cowpaths of practiced techniques. Simple little things we do to make less shitty things.</p> <p>So, design <em>is</em> veneer. But Aral is right, it's not <em>just</em> veneer. Even if you wanted it to be, <a href="">visual design is not a thing</a>, and we should be mindful to not present it as such. But that's not to say we shouldn't help people who aren't designers make less shitty things by giving them a few hints and tips along the way.</p> Sparkicons and the humble Hyperlink 2013-01-10T00:00:00+00:00 <p>The <a href="">humble hyperlink</a> is an incredibly simple, powerful tool on the web. In fact, many would say that our ability to link one resource to another via hypertext is what makes the web what it is. But, I think this humble link could do a little more than it currently does.</p> <h2 id="what's-the-problem-with-links%3F">What's the problem with links? <a class="direct-link" href="#what's-the-problem-with-links%3F" aria-hidden="true">¶</a></h2> <p>When the web was invented, the hyperlink linked resources together. That hasn't changed. What has changed is the <em>type</em> of resource that may be linked. In the early days of the web, resources were documents of text. They then changed to images or tables of data within text, but it was still text. Now, an html document is still the resource, but the <em>primary</em> piece of content maybe something completely different: video, audio, a download to a file, it may be secure. A link may trigger an action along with linking, such as going fullscreen, a pop up, or linking to another site. All of these things are valid links, but we have just one element with a bunch of attributes in the code to describe them. I'm not so sure it's enough any more.</p> <h2 id="what-do-i-get-when-i-get-there%3F">What do I get when I get there? <a class="direct-link" href="#what-do-i-get-when-i-get-there%3F" aria-hidden="true">¶</a></h2> <p><a href="">Here's a link to some content</a></p> <p>It's correctly marked up in the HTML, but perhaps badly framed editorially. You, as the reader, do not know what that destination is until you click it. 'Just make the link text better', you may be saying. Ok, how about this:</p> <p><a href="">Here's a great article about cats</a></p> <p>That's better. It's implying a link to an article. The meta data for the user expectation of this content is in the content itself. But, we can't always rely on our content creators to reliably do this. And what if the content was more complex, like a report:</p> <p><a href="">Read our annual report</a></p> <p>Is this a link to a web page, a PDF, a word file, a link to download an app from the app store? What is this?</p> <p>And that's the issue. <em>I'd like to know what I'm getting before I click it</em>. I think we need more meta data around our hyperlinks that can give us more of an indication what we're getting <em>before</em> we get it. I became painfully aware of this just a couple of days ago when I clicked a link and started downloading an HD video, over Edge, that started auto playing. Luckily I wasn't on data roaming at the time.</p> <h2 id="how-can-we-give-more-meta-data-with-our-links%3F">How can we give more meta data with our links? <a class="direct-link" href="#how-can-we-give-more-meta-data-with-our-links%3F" aria-hidden="true">¶</a></h2> <p>There could be a few ways we could do this. Obviously, we could just write the type of link, destination and other stuff in the content. But, if that destination changes somehow, that's an added overhead for the content creator. Plus, you could end up with quite verbose link texts.</p> <p>We could use the <code>&lt;type&gt;</code> attribute introduced in HTML5 to specify the Media type (formally MIME type) of the linked document. This is exactly what we should be doing, actually, but the options don't necessarily map to our content needs, or provide all of the content type requirements. For example, I may want to link to a video, as that's what I want the reader to watch, but the HTML resource is not a video at all, but a video embedded in an HTML page with a whole bunch of other things. In that case, the <code>&lt;type&gt;</code> attribute would be inappropriate. The same could be said for audio, or any other primary content that is embedded within an HTML document.</p> <p>I feel we need two things: some visual affordance for the user that they're going to a particular <em>type</em> of content; and this affordance is rendered through an attribute, or something similar, in the HTML of the link.</p> <h2 id="we're-already-doing-this.-sort-of.">We're already doing this. Sort of. <a class="direct-link" href="#we're-already-doing-this.-sort-of." aria-hidden="true">¶</a></h2> <p>In designing around this problem, I've noticed through my research that we're already doing this. We already have conventions used on sites like Wikipedia, and others, for indicating, after a link, what will happen when you click it. Here's are two examples from the BBC and Wikipedia.</p> <p><img src="" alt="Wikipedia example showing icons in list items"><br> <img src="" alt="BBC example showing icons in list items"></p> <p>Typically done with CSS or Javascript and it just includes an icon after the link. But, that's it.</p> <p>The thing is both of these examples use the icons to append list items. They're not in paragraphs immediately following the link wherever that link may be.</p> <h2 id="sparklines">Sparklines <a class="direct-link" href="#sparklines" aria-hidden="true">¶</a></h2> <p>Like <a href="">Jeremy</a>, I like <a href=";topic_id=1">Sparklines</a> a lot, too. Edward Tufte describes them as:</p> <blockquote> <p>…a small intense, simple, word-sized graphic with typographic resolution.</p> </blockquote> <p>Sparklines are efficient representations of complex data that typically sit within content to provide additional semantic value to the content. They're a small hit of additional information. A picture speaking a good few words.</p> <p>And I think he's onto something there and it's something we could use for this problem.</p> <h2 id="sparkicons">Sparkicons <a class="direct-link" href="#sparkicons" aria-hidden="true">¶</a></h2> <p>What would it be like to expand on what we have now? How could we provide more meta data – where appropriate – than just an icon as demonstrated on Wikipedia and the BBC.</p> <p>What we could do, is include some more information, for quick visual digestion, alongside an icon. We could take Tufte's Sparkline rationale and apply it to this small, inline iconography. We could use a <em>Sparkicon</em>.</p> <p>I'm defining a <em>Sparkicon</em> as a small, inline icon with additional link meta data to describe either the content and/or the behaviour when the user clicks the link.</p> <p>I've looked a couple of examples of how this might work. The first example shows two icons to indicate behaviour when we click the link. The first is a full screen icon, the second is one we already know: an 'external site' link.</p> <p><img src="" alt="Example Sparkicons showing full screen and external site behaviour"></p> <p>The second set of examples are icons for particular content or media types: comments and video. The comments includes a count of existing comments attached to the link document. The video spark icon includes a video duration. This could also include things like aspect ratio, or HD, or whatnot.</p> <p><img src="" alt="Example Sparkicons showing comments and video"></p> <h2 id="degrading-the-reading-experience%3F">Degrading the reading experience? <a class="direct-link" href="#degrading-the-reading-experience%3F" aria-hidden="true">¶</a></h2> <p>I think the challenge with sparkicons would be to give enough feedback to the user to let them know what's going to happen, or where they're going to go, or download and <em>what are the consequences of clicking this link</em>. That's the important thing, and history tells us we can't rely on the words to do that.</p> <p>But we also need to be mindful how much of an interruption this will be to the ebb and flow of reading long form content. Also, how much added visual noise would this add? At this point, I just don't know, but I plan on putting this to test soon on a couple of projects: both personal and professional.</p> <p>There are plenty of challenges, particularly how this could just be some kind of applied graphics through a simple addition to a link attribute. Standardisation is also an issue – this type of icon would be only <em>really</em> useful if it's a shared convention.</p> <p>But, it's just an idea right now that i'm plugging away at. More to come.</p> <p><em>Updates</em>: <a href="">Joe Gooden</a> pointed out on Twitter that this of course is of particular importance on touch devices where we do not have the benefit of hover interactions (such as Alt text reveals), and status bar</p> Abstractions After The Fact 2013-01-08T00:00:00+00:00 <p><a href="">Pattern primers</a>, <a href="">style guides</a>, <a href="">pattern libraries</a>. They're all the rage. And they make good sense, but I think we're in danger of working back to front.</p> <p>At <a href="">Mark Boulton Design</a> we get quite a few project enquiries and over the past twelve months we've seen an increase in requests for these repositories as a project delivery. This is just fine for us, as we tend to propose them anyway in some form or other to document our work. But there is an inherent concern in delivering this type of thing to a client. When is it done? And how is it created? And making sure that is discussed with a client, in depth.</p> <p>My first exposure to style guides was through print and branding. Corporate style guides are rules of execution; position this logo like this, use these colours, this type, crop photos this way. Adherence to the guide is critical and there's always someone policing them. Having been involved in the creation of a few of these printed style guides, they are always designed after a body of work and then – almost without exception – never updated to reflect slight organic changes as a brand or design system grows. This is why digital style guides are good. They allow growth.</p> <p>I've read recently that some designers are starting with patterns. Taking small modularised chunks of content and then compiling for display in different circumstances. This, of course, if great for taking an <a href="">adaptive content approach</a>. Thinking of our content in small chunks is useful. But, I can't help but thinking that approaching design in this way is a folly and will result in generic, cookie cutter work.</p> <h2 id="when-to-abstract%3F">When to abstract? <a class="direct-link" href="#when-to-abstract%3F" aria-hidden="true">¶</a></h2> <p>DHH from 37signals <a href="">wrote a great post recently</a> about the abstraction of code and when it should be done.</p> <blockquote> <p>Future coding is a lot like playing the roulette. If you can guess where the requirements of tomorrow will land today, you’ve just scored the ultimate programmer’s prize: looking like a wizard. You saw the future and you were right! High five, brain!</p> </blockquote> <blockquote> <p>That’s the almost irresistible draw of “flexibility”—often just a euphemism for building half or whole features before you know how they’re supposed to work or whether you need them. Just like in Vegas, the worst thing that can happen is to be right about this once in a while.</p> </blockquote> <p>And that's exactly how I feel about creating style guides. There's a lot of talk about us designing <em>systems</em> for the web. Well, sometimes, we're not designing systems at all. We're designing a couple of pages for a marketing web site. Creating a whole pattern library for a project like that is not only overkill, but completely inappropriate.</p> <p>But the same can be said for a large scale project too. If you don't know what the patterns are, you could be abstracting too early – bowing to the lure of future flexibility.</p> <p>I guess it's a question of balance, and one I'm becoming acutely aware of recently. For me, style guides are still there to document a design system. But they're not a tool kit of parts. Before you design a tool, you have to know what to fix first.</p> Shorter Long Form 2013-01-07T00:00:00+00:00 <p>I started this blog in 2004. Nearly a decade later, I'd like to think my motivations for writing this blog are are same: it's a diary, first and foremost. A place where I can document my thoughts, observations, theories, design critique and more. It's also a place where I can engage in a wider discussion. My blog post responds to yours – or your tweet – and so we go around.</p> <p>Over the past couple of years, we've seen more and more great industry-focussed magazines that publish online and off, but the flip side to this is I'm noticing more people writing for these magazines and less so on their own blogs. Why is this a problem?</p> <p>Considered, well-written, edited, and produced content is hard – and time-consuming – to do. Writing an article for one of these successful publications is not an easy thing (well, for me it's not). Not only do you have to have something notable and interesting to say, but you have to stick with it through the editorial process. You get pushed, prodded and cajoled along the way – mostly for the good, I should say. But sometimes, you may begin with a pithy throw-away idea that wouldn't amount to a couple of paragraphs on a blog (kind of like this blog post, really), but through the process it gathers weight – and in some cases bloat – to fit the requirements of 'an article'. And articles are different to blog posts.</p> <p>In traditional news journalism, this is the difference between a <em>feature</em> and a piece of <em>news</em>. A feature is a story. It has a beginning, a middle and an end. It's designed to have a less time-sensitive, longer shelf-life. But 'news' is transitory – documenting a period in time. It doesn't have a structure like a feature does, and probably doesn't have to adhere to the same editorial workflow. What we're seeing on this increasing number of publications are features. And because the authors are writing these pieces, we're seeing less shorter form writing because that type of content has no-where to live, other than blogs and everyone's busy.</p> <p>I'd like to see more balance again. More short, scrappy blog posts (like this one), written off the cuff and in the moment. Sometimes, I'd like to read the author's <em>actual</em> voice, instead of a homogenised edited one. There has to be a space between 140 characters and 3000 word feature. We all need to blog more, I reckon. <a href="">Roll on March</a>.</p> Two Thousand and Twelve 2013-01-01T00:00:00+00:00 <p>Every couple of years I write a short post to document the year before. This was my Two Thousand and Twelve.</p> <p>The year started with me taking a month off client work to finish <a href="">writing my book</a>. It went well, but one year on and i've still not finished it. It'll be done soon.</p> <p>I blogged more in 2012! Hurray! I redesigned this blog and took it back to how I wanted it: simple, designed for long-form content. Most importantly, it now runs on <a href="">Statamic</a> and is designed for how I write. I'm really rather enjoying it so far.</p> <p>2012 saw Emma, Alys, Nansi and I take a holiday in Portugal for a couple of weeks well-earned rest. Alys started school and in September, we all moved house. Going from a relatively new house that we'd spent ten years getting exactly how we wanted it, to a two hundred year old cottage that we're currently ripping to bits. It's been interesting and 2013 will be the year I skill-up on DIY. From plumbing to plastering, I plan on doing it all myself, starting with the bathroom.</p> <p>The summer was amazing. Non-stop sport for three months: from <a href="">Le Tour</a>, to <a href="">Wimbledon</a>, to <a href="">Euro 2012</a>, to the <a href="">Olympics</a>. I'm still suffering withdrawal.</p> <h2 id="%E2%80%A6working">…working <a class="direct-link" href="#%E2%80%A6working" aria-hidden="true">¶</a></h2> <p>This year has been a great one for <a href="">Mark Boulton Design</a>. We've worked with some great clients, and continue to work with them into 2013 on some really exciting projects.</p> <p>We launched a product in 2012, too! <a href="">Gridset</a> continues to thrive helping people make responsive grid systems for the web in a jiffy without miring themselves in all the difficult maths.</p> <p><a href="">Five Simple Steps</a> released <a href="">A Practical Guide to Managing Web Projects</a>, and <a href="">announced a series of smaller books</a> coming up in the next couple of months. We're really rather excited about it. Five Simple Steps continues to be a heap of work for Emma and the team, but ultimately rewarding despite the late nights!</p> <h2 id="%E2%80%A6travelling">…travelling <a class="direct-link" href="#%E2%80%A6travelling" aria-hidden="true">¶</a></h2> <p>I travelled quite a lot in 2012 with conferences and business trips. All in all, I was away 80 days and visited nine countries: United States, Doha, Dubai, Australia, Germany, Netherlands, France, Switzerland and Portugal. I spoke, and taught workshops, at some fantastic conferences this year – a great mix of local, small single-track events and larger multi-track events: <a href="">IA Summit</a>, <a href="">UX Bootcamp</a>, <a href="">Future of Web Design</a>, <a href="">Reasons to be Appy</a>, <a href="">DrupalCon Munich</a>, <a href="">Reasons to be Creative</a>, <a href="">Smashing Conference</a>, <a href="">Refresh LX</a>, <a href="">Fronteers conference</a>, <a href="">Web Directions South</a>, and <a href="">Beyond Tellerand</a>.</p> <p>I'll still be speaking next year, with a couple of events already lined up in the first half of the year that I'm very excited to be part of.</p> <h2 id="%E2%80%A62013">…2013 <a class="direct-link" href="#%E2%80%A62013" aria-hidden="true">¶</a></h2> <p>What does the new year hold? I'm not a big one for predictions or a follower of trends, but this is where my focus will be:</p> <ol> <li> <p><em>Writing, speaking, teaching</em>. As I said a few weeks ago, <a href="">speaking and teaching is an important part of our work</a> and I'm honoured to participate of a community where we (largely) welcome it.</p> </li> <li> <p><em>Balance and Focus</em>. I'm reading a lot, recently, about people ditching social networks, over-sharing, spending more time making axes and keeping bees etc. But this is happening to a certain age of person who's been doing this web-thing a while. This reactionary behaviour is something socialogists have been seeing for a couple of decades now in the general public in the UK with regards to technology. What it represents is a desire for balance. I've spent the last two years working on balance, and up until the last few months of this year, I've been better at it. And that doesn't mean using Twitter less. It means making sure I give myself, my family and my work equal amounts of time and attention. I'll be spending 2013 getting even better at doing that.</p> </li> </ol> <p>On to work stuff…</p> <ol start="3"> <li> <p><em>Community</em>. I hope it's a more considerate year. I've had a gut-full of embarrassing, unconsidered discourse on Twitter and I hope we see a lot less of it this year in favour of responses in blog posts or in person. I hope it's a year of respect.</p> </li> <li> <p><em>Web Design</em>. I don't think responsive web design will be the defacto method of web design. Not yet. As long as advertising revenue models exist, and platform channels (eg. m.sites with their own profit and loss), there will be difficulties getting that to work responsively. As I talked about at the end of this year, designing responsively impacts many parts of organisations. But, I do think responsive web design is no longer a trend. It's a bunch of techniques that have proved themselves useful and relevant, and will probably continue to be so.</p> </li> </ol> <p>I hope it's a year of a CMS shake-up. I hope it's a year in which open source CMS communities break out of their IRC bubbles and start working with writers, editors and designers. I hope they become less feature-focussed, and more human and organisation-focussed. I hope we see as much effort going into the design of our back-end systems and work flows as we put into our web site designs and user flows.</p> <p>I hope it's a year where we stop Defining The Damn Thing. Design is design. I hope the term 'visual design' stops getting used. <a href="">It's not a thing</a>.</p> <p>I hope Google stops giving us great, free, cool things and then <a href="">deprecating them</a>. I'll pay from the off.</p> <p>I hope Twitter starts behaving like a media platform instead of a product. I'll pay for flexibility, freedom and content.</p> <p>I hope Adobe stops acquiring everything. They need a big, scary, <em>great</em> competitor.</p> <p>I hope it's a year we have a more balanced industry view. I think we need more publications, more voices, more speakers, more blogging, better journalism, better reportage, broader guidance, better conferences, more meet-ups. We rely too much on a small set of voices that guide the industry one way and another.</p> <p>I hope we all take a moment, every day, and think about the importance of what we do. We're defining, designing, launching, and iterating upon a <a href=""><em>medium</em></a>. It's big. And important. But… if you have a bad day, nobody died, right? That's important to remember.</p> <p>So. That's that. I can but hope.</p> <p>Oh. And, in 2013 I hope I stop starting sentences with the word 'so'. I'm British, and we don't do that.</p> <p>I hope everyone has a successful, fruitful, happy 2013. Thanks for reading.</p> A New Canon 2012-12-09T00:00:00+00:00 <p>The evolution of the grid from geometric form and canons of page construction is quite clear. In no other period of history was the grid used as a core aesthetic as was in the 1950s and 60s where it emerged – almost simultaneously – from several design schools in Europe. From then, the grid system’s influence has been pervasive.</p> <p>Today, the grid is viewed by many designers with equal amounts of distain and fervore. Its detractors – and there are many – claim a grid system is visual straight-jacket, designed to inhibit creativity and that using one produces dull work. Of course, I think that’s rubbish; there are no bad grids, just bad designers. In the hands of a competent designer, a well-constructed, considered grid system is the frame on which the fabric of the design is hung. It should create balance, provide landmarks and visual cues. It should allow the designer to exercise just the right amount of creativity and provide immediate answers to layout problems.</p> <h2 id="canvas-in">Canvas In <a class="direct-link" href="#canvas-in" aria-hidden="true">¶</a></h2> <p>For the past 800 years, the printed page has been constructed in pretty much the same way; from the edges. The desire to create the most aesthetically pleasing book always starts with the size of the physical page. That page is subdivided to give us the optimum place to put our text and images.</p> <p>Fast-forward 800 or so years to 1997.</p> <p>The web is just about hitting the mainstream. I was working as a junior designer in a small firm in Manchester, UK. Typically, as the young guy in the studio, it was my job to create the websites for clients whilst the ‘serious’ designers looked after the large fee-paying clients on their branding, print design and advertising and what not. Remember, this is the early days of the web.</p> <p>Designers who were exclusively designing for medium back then were doing what they knew; applying the rules of print design to the screen. We used tables for layout, shim-gifs and all manner of terrible ways to achieve our goal of ordered, controlled layout. And it drove us all crazy. And you know what? Despite all the great progress made in the last 15 years – web standards, inclusive design, UX, semantic thinking etc. – when you really think about it, as designers we haven’t really grown that much. Or rather, we’re still trying to force what we know into a medium that it doesn’t quite fit. Our practice of creating designs for the web is still mired in the great thinking that was done over the last 800 years. But who can blame us? 800 years of baggage is hard to get rid of! But that’s what we need to start doing; we need to start thinking in a new, and different way.</p> <h2 id="%E2%80%98there-is-no-spoon%E2%80%99">‘There is no spoon’ <a class="direct-link" href="#%E2%80%98there-is-no-spoon%E2%80%99" aria-hidden="true">¶</a></h2> <p>For print design, the ‘page’ is the starting point for creating your layout. The proportions define the grid within. The content is bound the book for pleasing effect. The ratio of the page is repeated in the smaller bodies of text for a feeling of connectedness when the reader moves from one page to another. For print design, the process of designing grids, and the layouts that sit on top of them, is a process with one fixed and knowable constraint: the Page. On the web, however, there is no page.</p> <p>Consider the browser for a moment. The browser is a flexible window into the web. It grows and shrinks to the users screen size. The user can move it, stretch it, scroll it. The edges are not fixed. It is not a page, but a viewport.</p> <p>Let us pop back to 1997 again. I’ve just been asked to design a website for a new art &amp; architecture gallery in Manchester. The project is an exciting one, with some great potential for some really creative design and layout work. Typographically, it was a bit of a dream project. I’d been involved in the branding, the logotype design and the design work for the publications. I’d designed a grid system that would work across all of the media from flyers to signage – a kind of universal grid with the proportions of the logo as its starting point.</p> <p>The time came when I had to knuckle down and design the web site. I started the design, as I usually did, on paper. Then Photoshop. Then Dreamweaver (trying to avoid looking at the code it produced – not because I was purist, but because it scared me to death!). The website design I created was based on a fixed width, fixed height modular grid. It had it all: ambiguous navigation, hidden content, images instead of text, all created with tables. It was cutting edge. But I know now, I hadn’t created a website, I’d created a brochure that happened to be on screen. I knew then, as I do know, that it was wrong. What I’d created had no place on screen at all – the wrong design for the medium. Instead of trying to understand the web, and the browser, I’d taken my existing thinking and shoe-horned my controlled design into it.</p> <p>Now, let me ask you a question. If you replace Photoshop with Fireworks, Dreamweaver with Textmate, and tables for layout with Web Standards, how many of you are still designing this way? How many of you are still thinking of pages and edges? It’s ok. I am still, too.</p> <p>800 years of baggage is hard to shed. There’s a lot of engrained thinking. Thinking that is, in fact, really great design and compositional theory. But, because of the attachment to the fixed page, we’ve not accepted the web for what it really is: fluid, chaotic, unordered, open. On the web, there is no page.</p> <h2 id="content-out">Content Out <a class="direct-link" href="#content-out" aria-hidden="true">¶</a></h2> <p>If there’s no page, no thing with edges, then how can we begin to define a grid? One of the goals – as described by Jan Tschichold – was to create a layout that is bound to the book. How can we bind anything on the web if there is no page from which to start? I propose we stop trying to find the browser’s edge. We stop trying to create a page where there isn’t one, and we welcome what makes the web, weblike: fluidity. We start creating the connectedness Tschichold talked about by looking at what is knowable; our content.</p> <p>It has been said that as web designers, we’re not designing around content, but rather we’re designing places for content to flow into. Particularly in large organisations, it was commonplace for designers not to know what the content is, or would be, but rather, at best, they’d have some idea of how the content would break down. At worst, they wouldn’t have a clue and basically guess. ‘Oh, this is an article page, so it must have a bunch of headings, some body copy, some lists’. Feel familiar?</p> <p>Separation of content and presentation is the mantra of the Web Standards movement. So you may think this disconnect started when the web standards movement was in full flow, but it started way before then. I look back at when I worked in web design agencies in the early 2000’s and, as a designer, I was off in my little corner designing the three templates that the client was paying for, and that the Information Architect had defined. I had wireframes of these exemplar templates and was pretty much following them the number. What I was doing was designing in the dark. I had my blinkers on. I had no idea what the content would be in 6 months, 1 year, 2 years time. In fact, I’m pretty sure the client didn’t, either.</p> <p>What I was doing was designing a box. A straight-edged, inflexible box that couldn’t grow with the content as it didn’t take into account existing graphical assets, either. Thankfully, skip 10 years to the present day and things are getting better. We have content strategy. We have a relatively mature UX industry. As designers, we’re in a much better position to know, not just what the content will be right now, but what it will be in 1,2 ,3 years time. Now we have this knowledge, we can use it to our advantage: by using it to create our grid system.</p> <h2 id="a-new-canon">A NEW CANON <a class="direct-link" href="#a-new-canon" aria-hidden="true">¶</a></h2> <p>I’ve talked about baggage. Hundreds of years of thinking in the same way: canvas-in. We’ve taken grid design theory from the world of the physical page and tried to make work in a medium where there are pages with no edges. A medium where the user is able to manipulate the viewport. Where context matters – is the reader sitting at the TV, a desk, using an iPad or hurredley walking from one meeting to another snatching some news on the way on their mobile device. Where do we begin to design on these shifting sands and still retain the reason for using a grid system? Before I get on to that, let’s remind ourselves what those reasons are:</p> <ol> <li> <p><em>Creates connectedness</em><br> Grid systems help connect or disconnect content. They help people read and aid comprehension by chunking together similar types of content, or by regular positioning of content, they can help people navigate the content. Connectedness helps brands tell a consistent story in layout.</p> </li> <li> <p><em>Help solve layout problems</em><br> We all need answers to layout problems. How wide should a table be? What should the whitespace be around this boxout? Grid systems help us with that with predefined alignment points.</p> </li> <li> <p><em>Provides visual pathways for the readers eye to follow</em><br> A well-designed grid system will help use whitespace dynamically and in a powerful way. By filling a space with negative space instead of content, we can force the direction of the readers eye more effectively than anything else.</p> </li> </ol> <p>As with the printed word, the word on screen would benefit from some rules of form; a new canon of page construction for the web. A way of constructing harmonious layouts that is true to the nature of the web, and doesn’t try to take constraints from one medium into another. That starts with the content and works out, instead of an imaginary fixed page and working inwards. I’m going to repeat that, because it’s important: we start with the content and work out. Instead of starting with an imaginary fixed page and work in.</p> <h3 id="design-principles">Design Principles <a class="direct-link" href="#design-principles" aria-hidden="true">¶</a></h3> <p>The new canon can be best described as an approach. A series of guidelines, rather than a single diagram to be applied to all. This first part of the canon are a series of design principles to adhere to. These design principles were created to provide a simple thought framework, an Idea Space; a set of guiding principles to be creative with.</p> <ol> <li> <p><em>Define a relationships from your content. If none exist, create some</em>.<br> A grid for the web should be defined by the content, not the edge of an imaginary page. Look to your content to find fixed sizes. These could be elements of content that is out of your control: syndicated content, advertising units, video or, more commonly, legacy content (usually images). If none of those exist, you must define some. Make some up. You have to start somewhere, and by doing it at a content level means you are drawing content and presentation closer together.</p> </li> <li> <p><em>Use ratios or relational measurements above fixed measurements</em>.<br> Ratios and relational measurements such as pixels of percentages can change size. Fixed measurements, like pixels, can’t.</p> </li> <li> <p><em>Bind the content to the device</em>.<br> Use CSS media queries, and techniques such as responsive web design, to create layouts that respond to the viewport. Be sympathetic to the not only the viewport, but to the context of use. For example, a grid system designed for a small screen should be different to that intended to be viewed on a laptop.</p> </li> </ol> <p>By using these principles to design to, we're drawing closer relationships between our layout, content <em>and</em> device. Tschichold would be proud.</p> <p>– This blog post is an excerpt from my <a href="">upcoming book</a> on designing grid systems for the web, published by Five Simple Steps.</p> Participation 2012-12-08T00:00:00+00:00 <p>Last week, there was an argument on the internet.</p> <p>As usual, it started on Twitter and a flurry of blog posts are cropping up this week to fill in the nuances that 140 characters will not allow. So, here's mine…</p> <p>[Aside: I did actually make a promise to myself that I wouldn't get involved, but, I find that cranking out a quick blog post, gets my head in the space for writing generally.]</p> <p>I started speaking at web conferences in 2006. After attending SXSW the year before, I proposed a panel discussion (with the lofty title: Traditional Design and New Technology) with some design friends of mine: <a href="">Khoi Vinh</a>, <a href="">Jason Santa Maria</a> and <a href="">Toni Greaves</a> and moderated by <a href="">Liz Danzico</a>. I was terrified. But, in the end, it was fun – there was some lively debate.</p> <p>I wanted to do a panel at SXSW since seeing <a href="">Dave Shea</a>, <a href="">Doug Bowman</a> and <a href="">Dan Cederholm</a> sit on a CSS panel at SXSW in 2004. Not because I saw the adulation, but because I saw – for the first time – what it was like to contribute to this community. To be part of it. To give back: be it code, techniques, thoughts, debate or discussion. And I wanted a part of it. So, that's what I did. I started blogging – I felt I had some things to say, about typography, grids, colour theory. All of the traditional graphic design stuff that mattered to me. Not because of some egotistical trip, but because I genuinely wanted to make things better. Trite, I know.</p> <p>Fast forward a couple of years and I'm speaking at the inaugural <a href="">New Adventures</a> conference in Nottingham for my friend <a href="">Simon Collison</a>. On that day, every speaker up on stage was trying to give the best talk they could. Not because of the audience, not because of who they were, but because of Simon. It was personal.</p> <p><a href="">The talk I gave at new Adventures</a> took about two years to write. Yes, it took me that long to write a twenty five minute talk. You throw that into the equation, a high-risk personal favour for a good friend, plus my family and best friend in the audience, and you've got a recipe for bad nerves and vomit. And I did vomit.</p> <p>But, I got up there. Cast aside the nerves and held my head up and spoke for twenty minutes on things I've been thinking about for years. It was received well. Afterwards, all I did was sit in the green room for about two hours and didn't really speak to anyone.</p> <h2 id="my-natural-preference">My natural preference <a class="direct-link" href="#my-natural-preference" aria-hidden="true">¶</a></h2> <p>It may surprise you that most speakers I know are not extroverts. I don't mean extroverts in the way you may think, either. I mean it in the Myers Briggs type: they are not the type of people who gain energy from other people, they gain that energy from themselves. I'm one of these people, too.</p> <p>Being on stage is firmly out of my comfort zone. Firmly. I've had to learn to harness the nerves and put them to good use. A good friend of mine calls this 'peak performance' – the nerves help you bring your 'A' game.</p> <p>My natural preference is to be on my own, working. Either thinking, sketching, writing, building, exercising… whatever. All through my life, I've enjoyed solitary sports and pastimes, from angling to cycling. Now, that's not to say I'm a hermit. I'm not. I'm pretty sociable when I need to be, but it's not my preference. So being on stage – sticking my head above the parapet – takes incredible effort, and then afterwards, I generally want to go and hide in a corner for a bit. It wipes me out.</p> <p>So, why do I do it? Why does anyone do it in this community? If you're a regular speaker, or your first time? Almost everyone I know does it because they want to give back. They have something they'd like to share in the hope it may help someone else in a similar position.</p> <p>This brings me full circle to my opening sentence. Why, then, knowing all of this, is there a general feeling of discontent in a vocal minority that speakers who do this regularly are:</p> <ul> <li>In it for the ego</li> <li>Not doing any real work</li> <li>Not leaving room for new speakers</li> </ul> <p>I'd like to address these points from my own experience.</p> <h3 id="in-it-for-the-ego">In it for the ego <a class="direct-link" href="#in-it-for-the-ego" aria-hidden="true">¶</a></h3> <p>Why would someone get up on stage and speak to hundreds of people? Sure, some may get a kick out of that. People applauding you feels nice. But, let's be clear: that's not egotistical. That's being rewarded, and there's nothing wrong with that.</p> <h3 id="not-doing-any-real-work">Not doing any real work <a class="direct-link" href="#not-doing-any-real-work" aria-hidden="true">¶</a></h3> <p><a href="">I wrote about defining 'work' last week</a>. I see speaking as part of my work as a graphic designer. If you've studied graphic designers, art directors, ad copywriters and the like, you'll know that a lot of them speak to their peers – either at conferences or through publications. Writing and talking about what we do with each other <em>is</em> work. Not only that, it's fucking important work too. Without it, there would be no web standards, no open source, no progression.</p> <h3 id="not-leaving-room-for-new-speakers">Not leaving room for new speakers <a class="direct-link" href="#not-leaving-room-for-new-speakers" aria-hidden="true">¶</a></h3> <p>Experienced speakers leave room for everyone. Experienced speakers do not run conferences: conference organisers do. And conference organisers need to put bums on seats. Just like a big music festival, you need the draw, but also you need the confidence that a speaker will deliver to the audience. Every experienced speaker I know works damned hard to make sure they deliver the best they can, every single time. They're professional. They don't screw it up, or spring surprises. They deliver. And <em>that's</em> why you may see their faces at one or two conferences.</p> <p>A couple of months ago, I saw Heather Champ talk at <a href="">Web Directions South</a> in Sydney. Amongst many hilarious – and equally terrifying - stories of how she's managed and curated communities over the years, she came out with the nugget:</p> <blockquote> <p>&quot;What you tolerate defines your community&quot;<br> — <a href="">Heather Champ</a></p> </blockquote> <p>At this point, I'd like to ask you this:</p> <p><em>What will you tolerate in this community?</em></p> <p>Will you tolerate a conference circuit swamped by supposedly the same speakers and vote with your wallet? Or will you tolerate conference organisers being continually beaten up for genuinely trying to do the right thing? Will you tolerate speakers being abused for getting on stage and sharing their experiences?</p> <p>Will you tolerate harassment, bullying and exclusion?</p> <p>As I've said before, Twitter is like a verbal drive-by. It's fast, efficient, impersonal and you don't stick around for the consequences. Let's stop it.</p> Work 2012-11-29T00:00:00+00:00 <p>is…</p> <ul> <li>Speaking</li> <li>Listening</li> <li>Learning</li> <li>Promoting</li> <li>Researching</li> <li>Teaching</li> <li>Playing</li> <li>Thinking</li> <li>Sketching</li> <li>Lecturing</li> <li>Persuading</li> <li>Negotiating</li> <li>Tinkering</li> </ul> <p>To me, this is all design. This is all my work.</p> <p>… And long may it continue.</p> Dirty Hands 2012-11-08T00:00:00+00:00 <p>There is a gardening TV presenter on UK TV called <a href="">Christine Walkden</a>. She's from the north of England and has a wonderful turn of phrase. A few years ago, she was presenting <a href="">Chelsea Flower Show</a> on BBC TV and – whilst discussing the merits (or lack thereof) of some modern garden designs and designers she said something that has stuck with me. A single phrase which I think encompasses what it means to learn and practice a craft:</p> <blockquote> <p>I'm not sure about a lot of these fancy designs and designers. For me, you have to spend some time with your hands in the dirt.</p> </blockquote> <p>She was talking about learning by doing. Knowing your materials. <em>Putting the time in.</em></p> <p>I moved house a few weeks ago. I went from a modern house with all modern trappings: heating, insulation, double glazing – things I'd come to expect as a bare minimum. I moved to a 250 year old Welsh cottage. There is double glazing, but it's 20 years old and crap. There's no damp proof course. There was barely any loft insulation and the walls are two feet thick stone. It's cold. There are drafts. To combat this, there is a wood burning stove and over a few short weeks, as Jack Frost starts nipping, I've grown to love burning wood to keep myself warm.</p> <p>Burning oil or gas in a big mechanised boiler abstracts the value you get from heating. You pay for your supply, it burns in a big white box, and your house gets warm. With wood, you have to care for it. You have to chop it then season it for at least a year to remove the moisture. You only get out what you put in when caring for your wood supply, otherwise – as I've found out – you'll find yourself either without any wood at all, or crap wood that won't burn and soot up your chimney. These are all problems you don't have to think about when owning a modern house. But recently – oh, maybe in the last week or so – I've started to look at these as just the process, not the problems.</p> <p>Owning an old house brings with it a responsibility. Not only of looking after it, restoring it, giving the building what it needs, but also a responsibility to learn new skills in order to do that. For me that means buying a decent axe, learning how to store wood well and looking after my chimney. And there are a hundred and one of these new things I have to pick up to run this old house. At first, it was getting me down. But now, I'm realising it's a process I can't rush and I have to spend some time with my hands in the dirt.</p> CSS Spreadsheets, er, I mean Grids 2012-11-06T00:00:00+00:00 <p>Today, the <a href="">working draft of the CSS Grid Layout module</a> was published.</p> <p><a href="">I wrote about this last year</a> voicing my concerns that the proposals do not match a designer's mental model of how grids – and subsequent layouts – are constructed, and the historical terminology. I wrote an open letter to to the W3C CSS working group, too:</p> <blockquote> <p>In reference to: <a href=""></a></p> </blockquote> <blockquote> <p>I'm confused as to the need to invent new terminology with regards to grids that have existed for centuries. I'm also a little concerned that the mental model this terminology builds is one more similar to tables and spreadsheets (where these terms could be interchangeable) than to grids and layout.</p> </blockquote> <blockquote> <p>Specifically on the terminology:</p> </blockquote> <blockquote> <ul> <li>Grid Lines are known as Gutters.</li> <li>Grid Cells are known as Modules (or Units – the term is interchangeable). They represent the smallest building block of the grid.</li> <li>Combinations of modules vertically are Columns <em>if</em> they run the full height of the grid.</li> <li>Combinations of modules horizontally are Rows <em>if</em> they run the full width of the grid</li> <li>Combinations of modules both vertically and horizontally are Fields.</li> </ul> </blockquote> <blockquote> <p>There's a lot of great stuff in this draft, but some of the theory of designing grids has been around for centuries. If we could start to align CSS with existing terminology, and existing mental models of how layout is designed, then all the better.</p> </blockquote> <blockquote> <p>Just a thought…</p> </blockquote> <blockquote> <p>For more information on this, I <a href="">wrote a blog post last year</a> that expands on some of this thinking.</p> </blockquote> <blockquote> <p>Thanks for your time and consideration,<br> Mark Boulton</p> </blockquote> <p>A number of people replied from the group, but a few notable points were discussed:</p> <p>Tab Atkins <a href="">responded</a> by saying:</p> <blockquote> <p>We're killing grid lines, but more importantly, the grid concept of &quot;gutters&quot; will be added properly, so you can actually have separation between grid cells. (Right now, &quot;grid lines&quot; are just an alternate placement mode - you can place items by their edges rather than by the cells you want them in.)</p> </blockquote> <p>Which I was pleased to see, but dismayed to see today – a year later – that it was still in the draft. This doesn't address my concerns over terminology. Basically engineers inventing words for things that have been called something else for, oh, maybe a hundred years.</p> <p><a href="">Bert Bos then replied</a>, beginning with a sweeping statement:</p> <blockquote> <p>Mark. I think our terminology is based on table terminology (rows, columns and cells) on purpose. Just about everybody is familiar with tables, so building on that shared knowledge makes sense.</p> </blockquote> <p>I'm not so sure about that. Yes, everyone understands tables because we hacked them for layout in the bad old days. We've spent a decade unlearning that only to replace layout with the same broken mental model? Designers understand grids. We understand the terminology, and it's really not that difficult for other people to learn it, too. I know, I've taught them.</p> <p>Bert went on to discuss my proposal for a better way to do things – more aligned with how designers think about grids, and how we might unite development and theory that's been around for ages.</p> <p>And then the discussion pretty much stopped. And it seems the underlying theory of this proposal is still built on nothing more than &quot;people understand tables, so we think this makes sense&quot;. May as well say, &quot;well, people understand spreadsheets, so we're doing it like this&quot;. If the W3C adopted this stance when they first looked at proposing basic typography for the web, then we'd be in a world of 'line spacing' with no 'ems' or 'ens'. But they didn't! They adopted – largely – good typographic terminology and theory. What happened? And why does layout and grids have to be any different?</p> <p>There are other issues, too. The proposal combines the idea of layout with the underlying foundation of a grid. To my mind, that's just confusing. Like separating content from presentation – one of the fundamental principles on which web standards is built – applies to grid design, too. Grids should be abstracted from layout – they facilitate layout, but combining the two words is just potentially confusing for me.</p> <p>I think there is an opportunity to get this right. The typographic control we have in browsers is generally built on existing, good typographic design theory. There is no reason why layout and grids shouldn't be either.</p> Doing less 2012-11-01T00:00:00+00:00 <p>Mr Katzmarzyk was my art teacher in high school. A fresh-faced man in his 40's, he was a pivotal influence on me learning some of the craft of art and design I still use today. He taught me 3-point perspective, pencil techniques like cross-hatching, colour theory, how to see tone and line. But the single most important lessons he taught me – back in 1984 – was to be patient with my work, to discard first ideas, and to look at my work with a view to removing, rather than to adding. Pretty heavy lessons for an 11 year old. But they stuck fast. He would have me redraw and redraw the same still life study, not with a view of perfecting, but to explore the subject and the way I was representing it. Every time, the drawing was more simple, elegant and efficient.</p> <p>He also taught me about noise. Noise in my work, noise in my technique. He described efficiency of thought and process in a way my child-like brain could grasp. He taught me that by doing less, we can get to something in our work so much more appealing. And that underpinning concept is something that I realised only recently I refer to almost every day. It's in my design DNA. I can still smell the power paint as he told me:</p> <blockquote> <p>&quot;Doing more is easier than doing less&quot;.</p> </blockquote> <p>And that's it.</p> <p>When someone hires me for my work, they're not paying me for what I give them. They're paying for what I don't give them: the iteration, the obvious ideas, the sub-optimal solutions, the years of experience, the learning I do. They're paying me to make mistakes, to produce work that isn't quite right <em>so I can get to right</em>. I rarely get to right first time.</p> <p>I may produce more quantity of work this way, but the end result is always less than when I started. More simple, elegant, efficient.</p> <p>When designing a user interface ask yourself not 'what does this need?', but 'what can this do without?'. As <a href="">Brendan Dawes</a> says: '<a href="">Boil, Reduce, Simmer</a>'. Remove, iterate, remove some more. <a href="">Sleep on it</a>. Come back in a day or so. Chances are, you'll need to remove some more. Get back to the essence of the materials you're working with.</p> <p>So, for all of this, when someone asks me what they get. I tell them: they'll get less, but they'll get better. And for that, thank you Mr Katzmarzyk.</p> Look Mum! No gutters! 2012-10-24T00:00:00+00:00 <p>Here's a small tip about designing grids for single column use. If you hit <em>shift command G</em>, you should see an overlay of the grid used on this blog.</p> <p>At desktop, it's a 9-column asymmetric grid – which means the columns are different widths. I'm using the columns in this grid to define margins and gutters, not just space to fill with text. The grid is based on the golden ratio, too. Why? Well, the gutters and margins are also different sizes.</p> <p>The column 'd2' is twice the width of the column 'd5'. The former is being used as a margin, and the latter as a gutter between columns. Also, d1 and d9 are acting as margins, but in <a href="">Gridset</a>, these are all being defined as columns with gutters set to zero percent.</p> <p>Reduce the width a little, and you'll see how the grids shifts to ditch a couple of columns to go to a seven column grid (the 't' grid). Reduce a little further to the 'm' grid and you can see that the final grid is using s1 and s3 as the margins.</p> <p>Just a little under-the-hood explanation of how this blog is constructed.</p> Goodbye, Ceefax 2012-10-24T00:00:00+00:00 <p>Yesterday, after 38 years, the BBC's <a href="">Ceefax</a> ceased transmission in line with the UK <a href="">digital switchover</a>. And with that, the digitally disenfranchised across the country have lost a trusted, faithful news service.</p> <p>When I worked for the BBC one the little known facts about news consumption stays with me: that a large portion of the older generation get their news from the children's news program – the long running, <a href="">Newsround</a>. Newsround is to TV what mobile-first is to web design: simple (not simplistic), economic, no-nonsense news reporting. Which is also like Ceefax.</p> <p>Ceefax was the world's first <a href="">teletext</a> system. Initially developed as a way of transmitting closed-caption information for programming, it quickly morphed into a system for delivering other information as well. For many, including me, it was a pre courser to the web.</p> <p>I spent many-a-day checking the local weather service, TV listings and football scores. Like the web we take for granted today, Ceefax came into its own for on-demand content for breaking and developing news stories. I remember this distinctly for one example: the <a href="">Manchester IRA bomb</a> in the 1990's. I'm from near Manchester and this event was local to me, and impacted me directly. Ceefax filed the gaps between scheduled news bulletins on the TV. And it was perfect for my generation who never quite got used to the idea of consuming up-to-date news information on radio. But, it was – up until yesterday – the same continued source of information for people who don't have access to the web in their living room. They may have it on a computer somewhere else, but they don't own a tablet, don't use their phone for the web, or don't even think to. They just want to check the football scores as they have done every Saturday for the last 30 years in their comfy chair. And with it's speed, reliability and trust, Ceefax was the best place to go.</p> <p>Ceefax also embodies a wonderful creativity with the constraints of the system. Low resolution, 8-bit colours, pixel fonts. The only thing missing was bleep, bleep music. As it happens, Ceefax transmitted with <a href="">a rolling soundtrack</a> that blended into the background and you began very quickly associating with the content: football scores to the &quot;Treasure Eyes&quot; by Robin Jap.</p> <p><img src="" alt="Ceefax screen"></p> <p><img src="" alt="Ceefax screen"></p> <p><img src="" alt="Ceefax screen"></p> <p><img src="" alt="Ceefax screen"></p> <p><img src="" alt="Ceefax screen"></p> <p>As you can see with these images, the designers at Ceefax were inventive, creative and, well, funny with how they squeezed every last ounce of power out of this wonderfully simple little system.</p> <p>As you may tell, I'm going to miss it too.</p> Adaptive Content Management 2012-10-19T00:00:00+00:00 <p>Yesterday at <a href="http://http//">Web Directions South</a> in Sydney, I gave a talk about Adapting to Responsive Design. I didn't talk about media queries, responsive images or fluid grids (yes, I know – that's not like me). Instead, I talked about some of the other things that responsive design challenges: process, business, advertising and content. In the fifteen minute segment on content, I very briefly touched on something I've been thinking about for an awfully long time: content management.</p> <p>The first content management system I worked on was in 1995. It was built in <a href="">Hypercard</a>, it didn't publish to the web – in fact, it didn't publish anyway other than a local, hacked together network in university. Never-the-less, I was pretty happy with it. Fast forward ten years and I'm working at the <a href="">BBC</a> in Wales working on the design of a new content management system that will drive all of the websites the BBC produced in Wales – for <a href="">English</a> and <a href="">Welsh</a> language. I was part of a small, three person team: a designer (me), a developer and an editor. Together, we created a system designed around reusable content objects with really great meta data. Of course, back then, the content objects were being slotted into a fixed width page template according to the editor's wishes.</p> <p>Fast forward to today.</p> <h2 id="dumb-content.-smart-systems.">Dumb content. Smart Systems. <a class="direct-link" href="#dumb-content.-smart-systems." aria-hidden="true">¶</a></h2> <p>My friend, <a href="">Karen Mcgrane</a>, talks about adaptive content. If you haven't seen her talk of the same name, <a href="">go and watch it now</a>, then come back.</p> <p>Go on.</p> <p>Seriously.</p> <p>Okay? Good wasn't it?</p> <p>Now, when Karen talks about adaptive content, I don't think she's actually talking much about the content being smart enough to respond to its environment. It's not content's job to know how, when and where to be used. That's the job of the content management system and the business and display logic to say: 'hey, you there! Bit of content! Yes, you! So, in this instance, you need to display like this'. The content goes: 'oh, ok'. See? Dumb content. Smart System.</p> <p>What Karen is talking about is a system that can display content gracefully in given circumstances based on some content management rules. As she points out, this relies on a few things:</p> <blockquote> <p>&quot;adaptive content you need to create multiple sizes, you need to have meaningful metadata attached to it, and it needs to be written for reuse&quot;</p> </blockquote> <p>She cites <a href="">NPR</a> as an organisation who has taken this to fruition with their publishing methodology: <a href="">COPE</a>: Create Once Publish Everywhere.</p> <p><a href="">Daniel Jacobson</a>, then from NPR – now <a href="">Netflix</a>, says that:</p> <blockquote> <p>&quot;The goal of any CMS should be to gather enough information to present the content on any platform, in any presentation, at any time&quot;</p> </blockquote> <p>He goes on to explicitly describe the difference between Content Management Systems (CMS) and Web Publishing Tools (WPT):</p> <blockquote> <p>&quot;WPT’s capture content with the primary purpose of publishing web pages. As a result, they tend to manage the content in ways focused on delivering it to the web. Plug-ins are often available for distribution to other platforms, but applying tools on top of the native functions to manipulate the content for alternate destinations makes the system inherently unscalable. That is, for each new platform, WPT’s will need a new plug-in to tailor the presentation markup to that platform. CMS’s, on the other hand, store the content cleanly, enabling the presentation layers to worry about how to display the content not on how to transform the markup embedded within it.&quot;</p> </blockquote> <p>He continues…</p> <blockquote> <p>&quot;True CMS’s are really just content capturing tools that are completely agnostic as to how or where the content will be viewed, whether it is a web page, mobile app, TV or radio display, etc. &quot;</p> </blockquote> <p>And here's the thing. To create responsive design experiences, we need to use content management systems – as defined by Jacobson – not web publishing tools. Why? Because web publishing tools publish web <em>pages</em>, not chunks of content with great meta data that are agnostic to how they're displayed.</p> <p>And think about it, what are you using in your organisation? Or for clients? A CMS or a WPT?</p> <p>As Karen says in her presentation:</p> <blockquote> <p>&quot;what we have today are publishing tools, we have content management systems that force us to think about content management + authoring and content publishing + display as the same thing.&quot;</p> </blockquote> <p>And this is a problem for producing content, especially the type of content we need for designing responsive web sites.</p> <h2 id="a-form-is-a-form-is-a-form">A form is a form is a form <a class="direct-link" href="#a-form-is-a-form-is-a-form" aria-hidden="true">¶</a></h2> <p>Since 2004, and working on the content management system at the BBC, I've been involved in a number of content system designs: from a peer publishing tool for <a href="">Biomed Central</a> – a system designed for facilitating and publishing peer reviewed scientific papers, to the most recent version of Drupal: <a href="">Drupal 7</a>. Without exception, all of these systems share the same DNA: They're complex forms, big data tables and buttons. Maybe the odd list. But that's about it.</p> <p>Now let's think about the process of publishing content a minute.</p> <p>A writer may use <a href="">IA Writer</a>, <a href="">Notepad</a> or <a href="">Apple Pages</a>. But most likely, they'll be using <a href="">Microsoft Word</a>. They'll create the content, edit it, save it, re-edit, print it and scribble all over it, get it reviewed, talk about it, throw it away, re-write it. Once they've done all of this, they'll need to publish it – or maybe they'll just need to put it in the editorial workflow for review. To do that, they generally copy and paste paragraphs into the CMS. They'll then need to fill in all of these other required fields: some meta data, pick some categories, a 140 character standfirst, a standfirst for the mobile display, upload some images, but damn, they forgot to crop them.</p> <p>You get the idea. And so it goes on. Publishing content with a content management system is a royal pain in the arse. Almost without exception.</p> <h2 id="a-page-is-a-page-is-a-page">A page is a page is a page <a class="direct-link" href="#a-page-is-a-page-is-a-page" aria-hidden="true">¶</a></h2> <p>People think in pages: users, authors, writers. You. Me. My mum. It's a comfortable metaphor. We have the word 'scroll'. There are web <em>pages</em>. A location on the web is talked about as having edges, and we all know that's a problem that's not getting any better with new devices with new screen resolutions and physical sizes. In swallowing the <a href="">red pill</a> of responsive design, we also need to feed that pill to our users, readers and producers of our content management systems. We need to start talking about content in terms of bits, not pages. And we need systems that help us think that way.</p> <h2 id="a-better-way">A better way <a class="direct-link" href="#a-better-way" aria-hidden="true">¶</a></h2> <p>As Karen says, a CMS is not an authoring environment, it's a management environment. Mostly, it's a painful environment and the headwind from these tools is increasing, especially as we start to think about breaking out content into chunks, not pages. In doing so, our management of that content – meta data, images, display rules – also grows. So what do we do?</p> <p>In-house development teams developing content management systems need to focus a little more on workflow and a little less on features. Understanding the needs of editorial teams goes a long way. A suggestion might be to start a CMS working group that is comprised of designers, developers, editorial, product and other stakeholders who can guide the system more holistically. Create tools that allow for curation. Content management needs to allow for the ebb and flow of content, not just the creation and publication.</p> <p>We've all started talking about content again. For a long while, our content problems were hard problems and nobody wanted to confront them. But as far back as the monks, good designers have always concerned themselves with content however difficult it was. So let's not think about our pages of content anymore, let's think about bits of content. Let's think about stories as collections of resources, meta data and links that never have a beginning, middle and end. Let's think of our stories as adaptive. And let's build systems so we can make them that way.</p> New design, new CMS, a return to writing. Hopefully. 2012-10-09T00:00:00+00:00 <p>Since it was released, <a href="">IA Writer</a> has changed the way I write. Including on this blog. It has changed to such an extent that Wordpress – the blogging software I used to run this site previously – started to get in my way. I wanted a way of simply publishing words, rather than getting all wrapped up in php, theming files and database problems. All of which I seemed to be doing more of.</p> <p>What I needed was a way of publishing markdown files easily. That would fit more with my writing process with Writer. I tried <a href="">Jekyll</a> and fell at the first hurdle because of my lack of Ruby know-how. What I needed was all the things Jekyll offers, but with the ease of PHP. Now, if it had a similar tempting language to Expression Engine and a good dose of YAML thrown in, then I'd be on to a winner. In steps <a href="">Statamic</a> to save the day. I'm not going to harp on <em>too</em> much about it, but it lets you write your posts in Markdown, then you just upload the file – no database, no clunky admin interface. Just you and your words.</p> <p>This new design is a return to a design I ditched a little while ago. Single column. Sized to be easy on the eye. There's a bit of <a href="">Gridset</a> in there to create the grid. Type from <a href="">Process type</a> – specifically, the serif is the rather lovely <a href="">Elena</a> and the sans serif is <a href="">Colfax</a>.</p> <p><em>Note</em>. There are bugs and bits and bobs not complete. RSS, some squiffy type, margins, padding etc. I'll get to them, but I'd rather get it out there and fix those as I go.</p> Gridset and the Red Pill 2012-08-23T00:00:00+00:00 <p>Last week was an exciting one. After nearly a year in the design and development, <a href="">Gridset</a> launched – our tool for making grids on the web. The beta is now closed, although if you signed up, don't worry, you still have your account and all the grids you created. If you're new to Gridset, head on over, create a free account and have a play.</p> <p>Last year, at <a href="">Mark Boulton Design</a>, we were working on about five or six concurrent responsive website design projects. All of them were at various stages, but mostly they were in various stages of prototype – from the <a href="">grey-box</a>, to the high fidelity.</p> <p>One of them included advertising. Two others were asymmetric: meaning one or more of the columns wasn't the same width as the others. Some of the requirements came mid-way through a project which meant we had to go back and refactor CSS and HTML to accommodate it. All of them were sizeable projects. The maths got difficult quickly, and we sat down and had a chat about making something to make our lives a little bit easier. That Wednesday, the seeds of Gridset were sown.</p> <h3>Responsive by default</h3> <p>Responsive design is time-consuming. Not just writing the code, but all the way back to content requirements, typography, layout, managing client needs and expectations, Q.A and bug testing. Making websites this way adds time. In some cases, too much. Or rather, we're spending time on the wrong things.</p> <p>One of the things that is clear, is that if you build websites this way, you need to get out of Omnigraffle or Photoshop and into a browser sooner. You need to get content into a real browser environment soon to see how it responds to different screen sizes etc. We found that we were spending too much time either a. coding layouts over and over, b. bug fixing things we shouldn't. </p> <p>Luckily, grids – along with some other things like iconography and typography – can be abstracted from our design work. They can be worked on independently before coming together in the browser. This way, we spend more time focussed on answering some of the design problems than banging heads with layout code and the responsive headwind is a steady breeze instead of a gale.</p> <h3>Choosing the Red Pill</h3> <p>I can't design just in a browser. <a href="">Neither can other people</a>. Which is fine, I think; architects don't design using steel, glass and bricks. Personally, I design using a bunch of tools that I have a good knowledge of: pencils, paper, Photoshop and HTML. You may do something different. But over the course of the past couple of years, as <a href="">responsive design</a> has jolted us from our lie of control on the web, we've needed to do more in the browser because doing it in Photoshop doesn't make sense anymore.</p> <p>Sometimes I hate Responsive Design. Like <a href="">Cypher</a> in the Matrix, if I had to choose between the Matrix and the real world, I'd choose the Matrix. Why? Because designing for the web before responsive design was easier. And most people – including me – want an easy life. But once we've accepted the <a href="">reality of designing for the web</a>, I don't think there's any other way to work now. Even if you can't design in a responsive way – because of <a href="">advertising</a>, or content problems, or your <a href="">CMS</a> makes it difficult – then you shouldn't ignore it. </p> <h3>The tools we use</h3> <p>The next step on the web, now this disruption is settling down a little, is for us to invent new tools to help. Tools that are fit for purpose – specialist – and that do one thing well. I'm very much looking forward to the next few years where more people swallow the red pill and we start producing more and more web products using these tools. It can only get better, right?</p> Beyond Tellerrand 2012-08-10T00:00:00+00:00 <p>This is eventual content for the speaking engagement</p> Open letter to W3C CSS Working Group re CSS Grids. 2012-08-02T00:00:00+00:00 <p>Since I'm knee-deep in grids at the moment – both the <a href="">book</a> and <a href="">Gridset</a> – the theory, and thoughts on how it could and should apply on the web, is very much at the front of my mind. Last night I had a reminder on Twitter of the upcoming <a href="">CSS3 Grid Layout</a> draft. I recalled <a href="">I wrote about it last year</a> proposing some slight amendments regarding the addition of the module attribute. This would be a big change. It'd be great if it were considered, but I'm not hopeful.</p> <p>However, that change not withstanding, one thing that really needs to change in this draft is the terminology used. Terminology (with some slight interchangeable differences) that has not really changed for many years in grid and layout design. Why reinvent it? Why define existing terminology to that more suited to spreadsheets and tables?</p> <p>So, this morning, I emailed the working group to consider these changes. I'm posting this here for those who are not on the working group who may have opinions on this who can get in touch with me. I'd love to hear your thoughts, concerns and questions regarding this draft and how it fits with the established graphic design theory. I am of course on <a href="">Twitter</a>, or you can <a href="">email me</a> on this site.</p> <blockquote> <p>In reference to: <a href=""></a></p> <p>I'm confused as to the need to invent new terminology with regards to grids that have existed for centuries. I'm also a little concerned that the mental model this terminology builds is one more similar to tables and spreadsheets (where these terms could be interchangeable) than to grids and layout.</p> <p>Specifically on the terminology:</p> <ul> <li>Grid Lines are known as Gutters.</li> <li>Grid Cells are known as Modules (or Units – the term is interchangeable). They represent the smallest building block of the grid.</li> <li>Combinations of modules vertically are Columns *if* they run the full height of the grid.</li> <li>Combinations of modules horizontally are Rows *if* they run the full width of the grid</li> <li>Combinations of modules both vertically and horizontally are Fields.</li> </ul> <p>There's a lot of great stuff in this draft, but some of the theory of designing grids has been around for centuries. If we could start to align CSS with existing terminology, and existing mental models of how layout is designed, then all the better.</p> <p>Just a thought…</p> <p>For more information on this, I wrote a blog post last year that expands on some of this thinking: <a href=""></a></p> <p>Thanks for your time and consideration,</p> <p>Mark Boulton</p> </blockquote> Responsive Content is not a thing 2012-06-06T00:00:00+00:00 <p>Last year, I spoke at <a href="">New Adventures about A New Canon</a>: three rules by which we can create modern websites. At the start of that talk, I spoke about responsive design. Not Responsive Web Design, as such, but the practice of responsive design more generally.</p> <p>To summarise: responsive design is a design approach whereby a design system has three components: a sensor (a thing that senses stuff, whatever that may be); a design system (that takes the sensed data and applies system rules and logic); and then an actuator that actually does stuff that the design system tells it. A simple example of a responsive design system is your central heating in your house or apartment. A thermostat senses the temperature. Normally, this thermostat also has a bunch of programs in there (a design system) that tell the boiler (the actuator) to turn the heating on or off.</p> <p>An understanding of this, and how it relates to web design –- and specifically at this time of responsive-adaptive-mobile-contentfirst-progressive time –- is useful for us. Why? Because responsive design is an emergent practice outside of the web –- notably in architecture, but also in environmental design and engineeering. And when things are so confused right now, <em>semantics matter</em>.</p> <h3>Responsive Content is not a thing</h3> <p>Recently, I've been hearing rumblings of content being talked about as responsive or adaptive – mostly in the mobile context. 'If I'm near a thing, maybe the content on a website changes to tell me that'. That's great! Of course, that would be useful. But it's not the content that is adapting there. The content isn't doing anything. It's just static. The content is being controlled by a responsive design system. Let's break it down:</p> <ol> <li><strong>Sensor</strong>: In this case, it would be location. Something on your device is letting the web site or app know where you are.</li> <li><strong>Design system</strong>: The logic in the code that takes the sensed location data and does stuff with it. This could be a CMS or some other type of publishing system.</li> <li><strong>The Actuator</strong>: The code that tells the system to swap out the content for something that is of more value for you. This could be a bunch of technologies from server-side changes, or client-side.</li> </ol> <p>Nowhere in that system is the content doing anything intelligent. It's just existing in different forms and being pulled in based on the Design System's rules. And that's the thing.</p> <h3>Dumb(ish) content</h3> <p>For great responsive design systems, we need good output. The output that we're lacking at the moment are the fragments of content that <a href="">Karen McGrane talks about</a>. Content that travels around with a set of rules or meta data that will allow responsive design systems to make good use of them. But this does not make this content responsive. On its own, it's pretty dumb: just floating around with additional information attached to it, until some smart design system grabs it and displays in the right context.</p> <p>I've been working with a news network for about eighteen months now on doing just this. And it is <em>incredibly</em> difficult to even come close to making it work. Why? Well, in a high pressured newsroom, it turns out that people don't generally have the time to re-write the same story umpteen different times for different contexts and outputs. Let alone add the meta data differences to each one. And that's just a process problem. What about the tech? What about the design?</p> <p>I guess this is a post about being careful about tacking on trendy adjectives to a process that organisations have been trying to do -- and generally failing -- for a long time. We need to be careful about the services we sell to our clients and the industry in general.</p> Digital Patina 2012-05-30T00:00:00+00:00 <p>The opening scene in <a href="">Jaws</a> still gives me goose-bumps.</p> <p>It's a dark, moonlit night and a group of increasingly drunk teenagers are sat in the dunes playing guitar and listening to the crackle of a camp fire. You can almost smell the smoke and pheromones.</p> <p>Chrissie, and her would-be admirer, take off for a swim. Where she is promptly attacked, and eaten, by the star of the film. That first scene is horrific. Mostly because it seems so real. The actress is crying, screaming and writhing in completely believable pain. That's because -- according to some -- she was. The frame that was holding her was attached to the sea floor and then two ropes were taken up to the beach where teams of men pulled them back and forth. Apparently, she broke ribs in that scene.</p> <p>It's over an hour before we see the fish in Jaws. And that was accidental. Everything broke. 'Bruce' -- the name of the fish -- just broke down all the time. The film we see, when we watch Jaws, is not how it was intended. Instead, the music was the fish.</p> <p>Jaws is coming up for thirty years old. Over that time, Jaws has aged well. What I find interesting is that the 'Patina' of the film didn't rely on fancy technology. Accidently, it relied on being honest with the materials it used: sound, light and great acting.</p> <p>We talk about Patina as sheen -- a thing that changes appearance over time. That change can be damaging, or it can give an object more value. It does this by demonstrating what it's been through. In the case of a pair of jeans, it's the little rip, the pen mark, the small hole that's been repaired in the pocket.</p> <p>In chinese cooking, a wok is seasoned to make it non-stick. A well seasoned pan will go beyond simply making the pan non-stick. It will impart flavour to the food in what the Chinese call 'wok hey', or 'breath of wok'. You see, to me, Patina is more than surface level sheen, or the aging of something. It's the flavour. It's an individual 'taste' that can only come from that thing. Not all woks are alike. This one is mine. And all that.</p> <p>Working with this definition of flavour as a Patina -- which is imparted over time -- got me thinking about digital products. The problem with digital products -- our websites, applications, phone applications etc -- is they don't age the same way as some physical things. They either don't age at all: locked in a permanent state whilst the world changes around them. Or they age in the same way plastic does: slowly decaying into tiny chunks that float about for eternity. Always there. Never to be used. Of little significant value. You see, producing digital products is not a sustainable practice.</p> <p>How can we impart a digital patina on the things we use. What is the flavour of an application? Iteration? Code? UX?</p> <p>I believe digital patina can be achieved in products that are designed to last. Built honestly, using the true materials of the web and minimal on cliched skeuomorphic concepts. Being true to our materials will produce better, more sustainable stuff. Stuff that will age well. Stuff that will become more useful and more beautiful with age. How can we impart flavour to our work?</p> <p>Let's stop designing things that turn into little bits that float about. Always decaying.</p> <p>That's a sad story.</p> It's Not Working For Me: #crit 2012-05-10T00:00:00+00:00 <blockquote> <p>"What we have is bricks. I don't see a house, yet."</p> <p>Don Draper</p> </blockquote> <p>I started 'formal' art and design training when I was about fourteen years old. I took Art as an option at secondary school and progressed to an exam when I was sixteen. For some reason, I then decided I wanted to be a Forensic Scientist and pursued the sciences as a route to doing that. Big mistake. I failed, and went back to Art and Design for the next 7 years; ending up with a degree in typographic design.</p> <p>In the middle of all that time, I did a one year course called 'Art Foundation'; a gateway course into University. I went to a good school to do this: one which had a long, traditional history in Fine Art. As part of the course, we were given an project to do over the preceding summer. This was a 'reinterpretation' project: taking a familiar work of art and recreating it. I chose to repaint the <a href="">Madonna dal collo lungo</a> by Italian painter <a href="">Parmigianino</a> but to recreate it in <a href="">post-impressionist</a> style similar to <a href="">Paul Gauguin</a>. I toiled over this painting all summer using oils and just a palette knife. It stood a little over three feet high and in parts was over a centimetre thick in paint. It was a labour of love.</p> <p>The day came when I started the new course: a Monday in September. It was sunny in Stockport, and my Dad had given me a lift to the college with the painting stuffed in the back of the car. I was nervous. In fact, I felt a little sick.</p> <p>The intake that year was about sixty five students or so. All of us were of a certain standard as we'd had to be interviewed and accepted onto the course, but standing there I felt crippled by self-doubt. Pinning my painting on <a href="">The Wall</a>, the lecturers proceeded in walking the length of the wall observing the work like a doctor quietly observes sick patients in a hospital ward. And, as it turned out, the prognosis wasn't good.</p> <blockquote> <p>"Hello everyone. Welcome to Stockport Foundation Course." Said the head lecturer.</p> </blockquote> <blockquote> <p>"Please come and collect the work you've just put up and throw it away."</p> </blockquote> <p>You can imagine the looks on our faces. Thousands of hours had gone into this work. There were tears, anger, but mostly just disbelief.</p> <blockquote> <p>"On this course, we want you to unlearn all you've done before. It's crap. We're not here to teach you how to draw. Or paint. Or sculpt. We're here to teach you how to look and how to think."</p> </blockquote> <p>And with that, we were divided into groups and sent to various rooms to start the course. Every couple of days – extending to every week – all of us got together in a room, stuck our work up and had it ripped apart by the lecturers. It was like bootcamp. People left (about 20% of the intake). People cried every two weeks. But slowly over the weeks and months, we all learnt the Rules. The public critique (crit, for short) had rules and a framework. It wasn't personal: everything was about the work. We learnt to take harsh, harsh comment from lecturers and peers alike. We learnt not to take things quite so personally. Our defence mechanisms were tempered.</p> <h3>In Work</h3> <p>My first professional job, whilst at University, was an internship with an advertising agency over summer. I worked in the studio learning what it was like to be a junior designer. I worked in the cutting room inhaling way too much Spray Mount. I learnt what it was like to critique work in a professional environment.</p> <p>Critique at work is different to what I was used to. All through my design education, critique was a discussion: sometimes harsh, sometimes heated, but was always a multi-way thing involving lecturers and my peers on the course. All with the aim of taking the work as far as you could. And in academia, you had time. In a professional setting, time is at a premium: my time, my Creative Director's and our clients. Time is, quite literally, money.</p> <p>Professional critique still operated within the rules, though. It wasn't personal, it wasn't dictatorial: it was about efficiency. I lost count of the amount of times my Creative Director looked over my shoulder and immediately zoned into an element of the content that was causing problems.</p> <p>"That's not working", he would say. Sometimes he'd walk off leaving you to sort it out. Other times, on asking why, he'd sit down and go through the problems with you. Design critique from an experienced designer is efficient, clear and without ego.</p> <p>Over time, I found my academic critique 'muscle' atrophying. I find long debates over whitespace, or interaction patterns, or whatever, quite tedious. In my job, I have to do what my old Creative Director did: identify a problem very quickly and steer the design in the right way. Sometimes suggesting, sometimes telling, but always within the Rules of critique.</p> <h3>Web Designers</h3> <p>There are many designers in our industry who have never attended traditional design school. I feel there is a glass ceiling for people who haven't, and one of the aspects of that is design critique. Design critique is a learnt skill. It's something you do within an academic environment where you have the time and the space to learn it without the fear of losing your job.</p> <p>Many web designers have learnt their craft to an exceptional level but lack the personal contact with an experienced designer who can conduct critique in the right way. Distributed teams are a problem, in this regard: your peers are not available in person to attend a crit. All in all, I feel the web industry is not a place where design critique happens. And it's because most of us are either out of practice, or haven't been taught in the first place.</p> <h3>In practice</h3> I feel crits are a place where you can fail without the fear of failure. A place where you can explain your work, debate outcomes, and move the <em>work</em> forward. We do them all the time at <a href="">Mark Boulton Design</a>. We get a comp, prototype or whatever up on a screen. We stand around and we have a proper design critique. Our work is better for it, and we are too. <p>I'm finding Twitter a great tool for initiating critique, too, because of the constraints (140 chars), it forces brevity. Brevity that is similar to a busy Creative Director who drops the 'It's not working' bomb. The trick is to understand the tweet in the right content. If it's framed within The Rules, we know not to take it the wrong way. And this brings me onto just that.</p> <h3>#crit</h3> <p>From now on, when I critique design (or a product or something) on Twitter, I'm going to append the tweet with a #crit hash tag. This means I'm saying this within the rules of critique:</p> <p>1. <strong>Listen</strong>: Then talk. Don't interrupt. Don't judge. Wait.</p> <p>2. <strong>The Work</strong>: It's not personal, it's about the work.</p> <p>3. <strong>A Conversation</strong>. I want you to explain. It's the start of a conversation, i'm not dropping a bomb and walking off.</p> <p>4. <strong>It's Public</strong>. The benefit is in a shared conversation. You can't get this in a book, and with many web designers working in distributed teams, they don't get from a real person, either.</p> <p>5. <strong>What's said in the Crit, stays in the Crit</strong>: Things can get heated. Feeling can get hurt – it's human nature where you feel emotionally attached to the work you do – but, it's important to keep those comments in the framework of the crit. Don't keep a grudge.</p> <p>This gives us a framework of understanding. Of course:</p> <blockquote><p>"This is <em>SHIT</em> #crit" </p></blockquote> <p>is not really in the spirit of the thing.</p> <h3>Not kinder, just better</h3> <p>Snark, ill-feeling, trolling. These are things we see on Twitter every day and they have no place in design critique. Design critique is not a place to be mean, but it's also not the place to be kind. You're not critiquing to make friends. Kind designers don't say what they mean. 'Kind' is not about the work, and design critique exists to make us better, but mostly, it's to make the work better. As soon as you throw words around like 'bullying', 'being mean' etc you are not critiquing design. You're being personal and defensive. Let's stop that.</p> <p>So please join me in starting proper, considered design critique on the web. If you use the hashtag, I'll know your intent.</p> A New Make Mantra: A Statement of Design Intent 2012-03-24T00:00:00+00:00 <p>When I first worked in a design studio, I was taught that the first thing to do, as part of the project discovery, was to 'interrogate the brief', or 'rewrite the brief'. This normally involved getting a brief from a client, for us to ask questions, conduct research and then write our own brief and deliver it back to the client to demonstrate our understanding of the project and what we've learnt about their business. It's important to note, this isn't a proposal. This brief did not include the <strong>how</strong>, it was the <strong>what</strong>. What is the project.</p> <p>At some point in my career, I stopped doing that. I still spent time trying to understand audiences and business, but the 'creative brief', as we called it, was something that wasn't produced. Instead, we normally had a plan. This would exist as documents, or conversations, or outcomes from workshops. The point is, they were many things - all collectively known as 'The Strategy'.</p> <p>Recently, I've been trying to go back to something a bit more formal and create a single, actionable sentence that can be used to guide a project. This started out as a selfish endevour: I had trouble keeping all of this project stuff in my head in a way that could help my design work. It needed to be simpler.</p> <h3>A Make Mantra</h3> <p>Guy Kawasaki <a href="">wrote about something similar</a> in 2006, calling them a 'Make Mantra'.</p> <blockquote><p>A mantra is three or four words long. Tops. Its purpose is to help employees truly understand why the organization exists.</p></blockquote> <p>The examples he cites, if he had his way to create some, were:</p> <blockquote> <ul> <li>Federal Express: “Peace of mind”</li> <li>Nike: “Authentic athletic performance”</li> <li>Target: “Democratize design”</li> <li>Mary Kay “Enriching women’s lives”</li> </ul> </blockquote> <p>So, in 2006, they could be used by organisations to describe themselves. However, what I wanted to do was something different. The statement I was after was not a description of what an organisation does, or the story it's telling its customers, or how it talks about itself, but rather a <strong>description of what we must do on the project</strong>. A Statement of Design Intent. A new Make Mantra for the Maker, not for the organisation.</p> <h3>Why do this?</h3> <ul class="bulletlist"> <li>It's a guide. When you meander on a project, it can help bring you right on track</li> <li>It's a springboard for ideas.</li> <li>It helps frame an otherwise complex strategy into an easily digestible statement that creates pictures in your head.</li> <li>They help communicate change. In big organisations, and big projects, change is painful.</li> </ul> <p>These statements of intent are a tool. Used to communicate, guide, as a springboard for ideas. A central theme on which to build. They're a star to sail your ship by.</p> <h3>Putting it into practice</h3> <p>Since last year, <a href="">Mark Boulton Design</a> has been working with <a href="">CERN</a> in Geneva redesigning the public website and creating a design language to be used throughout all their other websites. </p> <p>Redesigning the CERN website is a complex project. It involves a lot of discussion, research and laying the foundation to ensure we can do our best work. A key part of that work for me was to distill our design strategy into something I could use daily. So how did we do that?</p> <h3>How?</h3> <p>The important thing about these mantras is they are tools that you should use every day, not just some strategy artefact, to be created, delivered, agreed and then forgotten. How did we use it in practice?</p> <ul> <li><strong>Research</strong>. For CERN, we ran spent a few months talking to people: internal stakeholders, and visitors to the main public website. We gathered a <em>lot</em> of data and then we spent weeks doing the analysis. Really distilling the data to try and define who the audience was and what they want.</li> <li><strong>Competitor Analysis</strong>. Find out who is doing something similar. How does that apply to your project? </li> <li><strong>Understanding the problem</strong>. Through the research, we spent a long time learning about CERN, learning about the problems with the existing site and editorial workflows.</li> <li><strong>Create a clear strategy and goals</strong>. What are you trying to achieve and how you're going to do it. My experience is this <em>always</em> changes following the research. </li> <li><strong>Boil, simmer, reduce</strong>. Through a number of workshops and discussions, we reduced the strategy into a single statement of design intent. </li> </ul> <p>Through our research, we know that people are curious, inspired and intrigued by what goes on at CERN. But the content they read on the CERN site does not – in a large part – delivers on the 'can this user accomplish this task' success criteria. </p> <p>We also knew that the different audience groups we identified for the project need to be spoken to in very different ways: the general public needs to be spoken to very differently to high energy physicists. </p> <p>Through our competitor analysis, we identified <a href="">NASA</a> as doing similar work on a human scale: the exploration of science. But, you see, it's really easy for NASA to inspire people visually because they have pictures of space rockets and planets. CERN had pictures of magnets the size of a house and lots of wiring. Cool, but only to a certain amount of people. We needed to show that what NASA is doing with outer space, CERN is doing for inner space. We needed to Create Wonder. To inspire, to inform, to tell the <em>right</em> story. So, that became our simple, two word statement:</p> <blockquote><p><strong>'Create Wonder'.</strong></p><p></p></blockquote> <p>We use this simple statement in the project every day this way:</p> <ul> <li>To check that we're on track with the design language. Even as simple as something like a photograph. Is is doing this?</li> <li>To talk about our design strategy in CERN to stakeholders. Not just initially, but as we design new elements of the site too.</li> <li>To create pictures in our heads. It is a challenge to us when we're approaching the work: 'go on… create wonder'.</li> <li>As a scale: The Wonder Scale.</li> </ul> <h3>The Wonder Scale</h3> <p>The strategy very quickly morphed into a scale we could apply to different audience groups. The issue was that presenting some content in a wondrous design would not be appropriate for some audiences. For example, the latest research that's been published by one of the experiments at CERN should not necessarily be highly visual. The content should be clear, legible, easily scannable etc. But it shouldn't be shiny. And the opposite is true for other content that is designed to inform, inspire and educate the general public. In that case, the wonder is 'high', the former, it is 'low'. </p> <p>Let's have a close look at this.</p> <img src="" alt="CERN's Wonder Scale" title="wonder_scale_1"> <p>On this diagram, you can see our four audience groups: Scientists, Educators, Students and General Public. We created personas for each of these, and each of them had a comprehension level: how much they understood about the work CERN does. This went from high for scientists, to low for the general public.</p> <img src="" alt="CERN's Wonder Scale" title="wonder_scale_1"> <p>We can then map an inverse 'Wonder Scale' on this. The more comprehension you have, or closer you are to the science or organisation, then the lower the Wonder.</p> <img src="" alt="CERN's Wonder Scale" title="wonder_scale_2"> <p>So, we had this scale based on our statement of design intent. How did we actually use it in the design work?</p> <h3>How does it look?</h3> <p>This is a screenshot of our latest prototype for the homepage of CERN. Let me walk through what we're trying to do.</p> <img src="" alt="CERN Alpha Screenshot" title="alpha1_screenshot_home"> <h3>The Goals.</h3> <ul> <li>Create Wonder. The CERN homepage needed to <strong>show</strong> what CERN was doing as well as <strong>say</strong> what it was doing.</li> <li>The main thing that came through time and time again from the research we conducted was that all the different audience groups need updates. They need to know what's going on. That was probably the largest need.</li> <li>Demonstrate that there are more experiments going on at CERN than just the Large Hadron Collider.</li> <li>Effectively funnel people into sections of the site that are appropriate for them.</li> </ul> <h3>The How</h3> <ul> <li><p>Create Wonder. Because the work going on at CERN is subatomic, it's very difficult to get imagery that is remotely interesting. You can't photograph these particles, and as such, the default option is to rely on imagery of the engineering. The engineering at CERN is unique, and awesome, but you'd need to know what you were looking at to appreciate it. The level of comprehension required is high. What we settled on was Event Visualisations.</p> <p>Every 600 million times a second, protons are smashed together at near the speed of light at various points in experiments in CERN. The computer than creates an image of this. Part of our strategy for the homepage (and how we 'Create Wonder') was to <em>show</em> what was happening at CERN <em>right now</em>. Demonstrate these collisions were happening in real time.</p></li> <li>All about the updates. We make the updates panel the primary content on the homepage. It's updated with links to articles, research, press releases, but also includes statements such as 'LHC shutdown for Holidays'.</li> <li>A lot of people think CERN is just <a href="">the LHC</a>, but the LHC provides the beam of protons and there are many, many experiments that use it. The small panel on the bottom right will rotate through a status update of a selection of experiments.</li> </ul> <p>Throughout this process, 'Create Wonder' was an invaluable tool to sense check our progress. Are we on the right track? Is this content appropriate for this audience, and how should it be presented? Are the stakeholders on board with this strategy?</p> <h3>A New Make Mantra</h3> <p>Now, this is an example from a big, complex project, but you can use these for small projects, too. It's just the time you take to get to it might be shorter. I'd highly recommend giving them a try: stick them up next to your desk, refer to them constantly, use them as a metric to define how you talk to potentially different audiences for your designs.</p> <p>I'm excited to use these in my work more. They move a Make Mantra from being about the organisation to a tool for designers to use. Moving it from the organisation to the Maker.</p> Visual Design 101 2012-03-20T00:00:00+00:00 <h2>The slides</h2> <dl> <dt><a href="">Content outlines</a></dt> <dt><a href="">Slides (no notes)</a></dt> <dt><a href="">Slides (no notes)</a></dt> </dl> <h3><b>RESEARCH</b></h3> <h5>Moodboards</h5> <dl> <dt><a href="">Style tiles</a></dt> <dd>Style tiles are one step more than a moodboard, but not a design comp. Useful for framing discussions with clients without committing to layouts.</dd> <dt><a href="">Dribbble</a></dt> <dd>Filterable thumbnails (by colour & tags). Useful for detail.</dd> <dt><a href="">Pinterest</a></dt> <dd>Great addition to the designer's toolbox.</dd> </dl> <h5>Icons</h5> <dl> <dt><a href="">Icon Finder</a></dt> <dd>Icon finder is Google for icons.</dd> <dt><a href="">The Noun Project</a></dt> <dd>The Noun Project is a database of svg-based icons.</dd> </dl> <h5>Imagery</h5> <dl> <dt><a href="">Crestock</a></dt> <dd></dd> <dt><a href="">iStock Photo</a></dt> <dd></dd> <dt><a href="">Flickr</a></dt> <dd></dd> <dt><a href="">Google Images</a></dt> <dd>Tip: Search for 'large images' and filter by date for better results.</dd> </dl> <h5>Tools</h5> <dl> <dt><a href="">Little Snapper</a></dt> <dd>A great tool for snapping web pages and building up your inspiration database.</dd> </dl> <h3>TYPOGRAPHY</h3> <h5>Font embedding services</h5> <dl> <dt><a href="">Google Fonts</a></dt> <dd>free fonts you can download, use and/or embed.</dd> <dt><a href="">Typekit</a></dt> <dd>Font embedding service based on an annual membership.</dd> <dt><a href="">Fontdeck</a></dt> <dd>Similar to Typekit, but uses per domain charging.</dd> </dl> <h5>Articles, Websites & Presentations</h5> <dl> <dt><a href="">Web Typography Sucks</a></dt> <dd></dd> <dt><a href="">On Web Typography</a></dt><dt> <dd></dd> </dt><dt><a href="">Typedia</a></dt><dt> <dd></dd> </dt><dt><a href="">Fonts in Use</a></dt><dt> <dd></dd> </dt><dt><a href="">More meaningful typography</a></dt><dt> <dd></dd> </dt></dl> <h5>Books</h5> <dl> <dt><a href="">Elements of Typographic Style</a></dt> <dd><strong>The</strong> manual of typography. Read it.</dd> <dt><a href="">Chicago Manual of Style</a></dt> <dd></dd> <dt><a href="">Oxford style (or Hart's Typesetting Rules)</a></dt> <dd>Book based on Hart's Rules for Compositors.</dd> </dl> <h3>GRID SYSTEMS, LAYOUT & COMPOSITION</h3> <h5>Articles, Websites & Presentations</h5> <dl> <dt><a href="">Bibliotype</a></dt> <dd></dd> </dl> <h5>Frameworks & Tools</h5> <dl> <dt><a href=""></a></dt> <dd>Almost the standard CSS grid framework. Useful for prototyping.</dd> <dt><a href="">Gridset</a></dt> </dl> <h5>Books</h5> <dl> <dt><a href="">Grid Systems: Principles of Organizing Type</a></dt> <dt><a href="">Grid Systems in Graphic Design</a></dt> <dt><a href="">Ordering Disorder: Grid Principles for Web Design</a></dt> </dl> <h3>Colour</h3> <h4>Tools</h4> <ul> <li><a href="">Kuler</a></li> </ul> Ideas Of March 2012-03-15T00:00:00+00:00 <p>Last year, <a href="">Chris Shiflett</a> -- together with a <a href="">few</a> <a href="">other</a> <a href="">people</a> -- decided to get behind blogging again and post a series of posts called 'Ideas of March'. What followed, throughout March, was some exciting and insightful reading. Having an initiative to blog around seemed to help get people away from Twitter and back to blogs again. <a href="">I did it, too</a>. And it helped.</p> <p>I've been blogging – on and off – since 2003. That's close to 10 years (!) and I still find it a useful way of capturing my thoughts. The very act of writing something down for other people to read is a process I enjoy: often it means taking disparate pieces of information, thoughts, conversations and compiling it all into some kind of order. But along the way, there's been a problem for me. Blogging started to be about other people instead of myself. </p> <p>When I write longer articles, or I get more people reading them, I can very quickly start writing to their expectations. I begin thinking more about an article as a design problem needing to be solved for a particular audience, rather than a simple creative outlet – just for me, nobody else. </p> <p>Since last March, I've blogged the most i've done since 2007. I think that's not only a reflection of me being more selfish with my approach and understanding – finally – that blogging is part of my creative expression. I don't write because I want to, I do it because I need to. And it's taken me the longest time to understand that. But also, I've blogged more because I feel there's been more to say. We're wrestling with some exciting problems right now, and half of the articles I've written have been as a direct result of heated discussion in the <a href="">Mark Boulton Design</a> studio, or from Twitter. </p> <p>Twitter is no comparison to blogging. That's not to say it's not useful. For me, Twitter is the point of fertilisation of ideas, debate or discussion. Brief conversations that happen there are often where ideas are sown, but it's here -- on this blog -- where those ideas are nurtured and grown into something more. The very act of considering what I write is what makes my blog an integral part of my design toolkit.</p> <p>As with all the Ideas of March posts today, this is just a promise to myself. A promise that I'll continue to understand why I write, and therefore, not stop. For me, writing about design, and the problems I face with it, is as important as the work itself.</p> Gridset 2012-03-05T00:00:00+00:00 <p><img src="" alt="The Gridset Logo" title="gridset_logo"> Last Friday, <a href="">Mark Boulton Design</a> announced something we've been working on for the past six months or so: <a href="">Gridset</a>. A tool for creating advanced grid systems on the web.</p> <p>For a long while now, we've been designing tools and frameworks to help us create grids from HTML and CSS. Some of these frameworks give us a lot of flexibility, and some of them tie us down quite closely with the type of HTML markup we have to use. Since about 2007, this has all been very helpful is giving us some code structure to help us understand, and then build, fairly simple grids.</p> <p>But, then <a href="">something happened</a>.</p> <p>Building responsive grids has forcefully jolted us from our 12-column comfort zone. Now, we're having to think about appropriate grids for different device widths. This in turn is having the effect of making us readdress our needs for desktop. It's certainly my experience over the past year or so, that this rather cookie cutter approach for designing grids needs re-evaluating, but we're lacking good tools to help us with the sometimes painful maths and advanced CSS chops.</p> <p>Gridset will help with this. And more.</p> <p>I've had a few questions since Friday around some of the features we announced. I'd like to address some of those here:</p> <blockquote> <h4>Gridset is a tool, not a generator.</h4> <p>Nothing is prescribed… you build a bespoke grid system for your project.</p> </blockquote> <p>Gridset is not a bunch of code you download from Github. It's a browser-based tool to create grid systems.</p> <blockquote> <h4>Create advanced grid systems.</h4> <p>It can create asymmetric grids, golden ratio grids, or completely bespoke arrangements, not just a row of columns. It allows for fine-tuning of column widths.</p></blockquote> <p>For the past few years, the grid systems we've seem on the web have all been evenly spaced columns (usually either 12 or 16), and that thinking is now being applied to the latest crop of responsive grids. There is simply more to grids than 12 or 16 columns and Gridset is designed to allow the creation of many, many types of grid.</p> <blockquote> <h4>Generate smart CSS.</h4> <p>There is no need to add lots of classes for offsets and margins. It anticipates every possible configuration and styles accordingly, allowing you to focus on layout.</p></blockquote> <p>CSS grid frameworks are great if you're flexible enough to not worry about an extra div here or there, or a particular class syntax in your CSS. If, however, you care about the semantic structure of your markup then this is a problem. We care. So Gridset has been designed to anticipate every column, margin and padding column configuration of your grid and give you the appropriate classes to use. </p> <blockquote> <h4>Designed for your workflow.</h4> <p>Tinker, save, return. Iterate and publish. Your grids are there whenever you need them.</p></blockquote> <p>I'm of the opinion that good grid system design can be abstracted from layout design. Layout gets built on a grid. Most good design systems work this way: the grid is designed, locked down and then layouts are used on top of it. Think of Gridset as your library of grids in one place. There for you to create, iterate and publish. To be used with simply the addition of a single line of CSS.</p> <h3>What next?</h3> <p>Gridset is currently in a pre-alpha stage: working with a few people in the industry that represent what we think our core audience will be. We'll be quickly moving into a closed Alpha and then a semi-closed Beta selected from the people who <a href="">sign up to the list on the site</a>. We're shooting for a summer launch.</p> <p>In the coming weeks, we'll be talking more and more about what we're doing. Follow <a href="">@Gridset on Twitter</a> for more updates.</p> Responsive Summit: The One Tool 2012-02-27T00:00:00+00:00 <p>Last week at the <a href="">Responsive Summit</a>, we discussed tools a fair bit. Especially in relation to <a href="">workflow</a> and how it effects a designer and their output.</p> <p>Since 1997, I've been working almost exclusively on the web. Throughout all of that time, the realisation of what the projects would look like are done in Photoshop. That means, yes, I've been using Photoshop in a production environment for fifteen years. Malcolm Gladwell said it takes 10,000 hours, or 10 years of repetitive use, to become an expert in something. I guess that means I'm an expert in creating pictures of websites. Photoshop is like an extension of my mind. To use Photoshop for me is as effortless and almost as fast as a pencil. I get stuff done; quickly.</p> <p>The change in process to Responsive Web Design means we need to get in the browser faster. But please don't read this as '<em>we need to get rid of Photoshop and/or equivalent tools</em>'. It doesn't mean that at all. What it means is that we need to be aware and understand our materials. That means we need to understand how -- when you're designing in Photoshop, or Fireworks -- you have one half of your mind in a browser. Not necessarily HTML, or CSS, but thinking about behaviour.</p> <p>There has been talk for a while of designing a tool for the web that is more aligned with our processes than Photoshop. A lofty goal. And I'm not even sure how worthy a goal, to be honest. Because, at this point in time with Photoshop, HTML prototyping and a pencil, my workflow and tools are okay, thank you. I don't think i'm suffering as a result of having inappropriate tools. That's because I understand how each of them works, the material they work with, and how they all come together in my mind. </p> <h3>Understanding materials</h3> <p>I think one of the key aspects of a good designer is to understand your material; be it pixels, ink or markup. That doesn't necessarily mean you have to design in that medium. Print designers don't design in ink (well, not much anymore). Architects don't design in bricks and steel. And web designers shouldn't need to design in HTML or a browser canvas. If you're any good at your job, you will understand that media, create for it well and then communicate that well to other people.</p> <p>Our takeaway last week that the tools we have for certain parts of our job could be better. Photoshop could be better. So could fireworks, and the browser and CSS... the list goes on. RWD adds some complexity to the mix, because we need a good way of increasing fidelity of our work over time, in the browser, whilst retaining some of the things that, say, Photoshop gives us.</p> <p>Last week, I tweeted: '<em>You can't have happy accidents designing in the browser</em>'. <a href="">Jeremy</a> corrected me: <strong>I</strong> can't have happy accidents in a browser when I'm writing specific rules and then watching the results in a browser. There is too much in the feedback loop. Photoshop is an extension of my mind and my hand. Through 15 years of continuous professional use, the feedback loop is small. My mind is free to explore options whilst my hand (via the mouse) executes them. Rinse, repeat, explore, iterate. For me, writing explicit instructions in code and hitting refresh in a browser is a long, long way from this.</p> <p>I said during last week's Summit that in all likelihood a Web Design Photoshop tool is not likely going to solve any problem we have now. Maybe a small suite of tools will where we can extract certain parts of our process: like designing a responsive grid, for example, or defining a colour palette, or iconography. But when it's a holistic process, then a designer's own experience, preferences and ability will trump any tool. Each very much to their own.</p> Snark 2012-02-24T00:00:00+00:00 <p>I'm not usually one for talking about how criticism affects people: either on Twitter, at conferences or elsewhere.</p> <p>I am of course talking about the community's reaction to a few of us getting together in London yesterday for the <a href="">Responsive Summit</a>. Yes, yes. Stupid name.</p> <p>But today, I've had enough.</p> <ul> <li>Repeatedly attacking someone, or a group of people, for trying to do the right thing is not cool. </li> <li>Inferring that a bunch of friends and peers are elitist simply because they decided to get together to talk about something is not cool. </li> <li>Expecting said people to ignore personal and professional attacks is not cool.</li> <li>Expecting said people to 'not be defensive' is not cool. How would you feel?</li> <li>Think. Would you really say some of those things to people's faces?</li> </ul> <p>Attacking someone on Twitter is like a verbal drive-by: it's at a distance and you don't stick around to see the consequences.</p> <p>I'd like to ask you how you would feel? Personally, I attended yesterday's meeting leaving a sick family in Cardiff – who could really have done with me being there. I went because I felt it was important: not for me, my business, but for this period in time of web design. People have said it before, it feels like just before Web Standards happened. I was there for that, but wasn't directly involved. I have a chance to be involved in this, and I'm trying any way I can to help. I ask those people: <strong>what are you doing?</strong></p> <p>This isn't really about me feeling sorry for myself. For once, I'm reacting to being attacked. The notion of <em>'not feeding the trolls'</em> is equivalent to saying to a victim of bullying: <em>'oh, just ignore them'</em>. At some point, you have to stand up for who you are, what you believe and defend yourself. Because if you don't, who's going to?</p> <p>To answer some of the concerns that come up again and again about yesterday:</p> <ul> <li><strong>'Summit'</strong>: Yes, we know it was a dumb name, and we're sorry.</li> <li><strong>'Elitist wankers'</strong>: It wasn't invite only, people asked to attend and they did.</li> <li><strong>'Why wasn't I invited?'</strong>: It was a small room, so the whole internet couldn't fit. It was pulled together very quickly.</li> <li><strong>'What did you talk about?'</strong>: We're going to blog about what we discussed. </li> <li>We're collaborating on techniques and tools.</li> <li>We're not telling anyone how to do stuff and deciding your fate (how could we even do that?)</li> </ul> <p>I'm finishing off a long blog post about yesterday covering some of the things we discussed about workflow, and talking about how we work here at <a href="">Mark Boulton Design</a>. I'll post that later today.</p> Responsive Summit: Workflow 2012-02-24T00:00:00+00:00 <p>These are my notes, conclusions and thoughts from yesterday's <a href="">Responsive Summit</a> in London.</p> <p>Last week, <a href="">Alex Morris</a> – UX Director at <a href="">Mark Boulton Design</a>, <a href="">Chris Armstrong</a>, Designer from <a href="">Front</a>, the company responsible for <a href="">Typecast</a>, and <a href="">Josh Brewer</a>, Principle Designer at <a href="">Twitter</a>, were discussing the idea that – whilst Josh is in the UK – we should all get together and have a chat about Responsive Web Design; the problems we share, the tools and solutions we're individually developing, and how we can collectively we can get a better understanding of what RWD means for us and our daily business.</p> <p>Yesterday, the 'Responsive Summit' took place in Microsoft's offices in London. And huge thanks must go to <a href="">Martin Beeby</a> from Microsoft for not only providing the room and also the tea, coffee and lunch. Oh, and cake.</p> <p>In attendance were: </p><h3>In Person</h3> <ul> <li><a href="">Josh Brewer</a>, Twitter</li> <li><a href="">Alex Morris</a>, Mark Boulton Design</li> <li><a href="">Chris Armstrong</a>, Typecast</li> <li><a href="">Nathan Ford</a>, Mark Boulton Design</li> <li><a href="">Mark Boulton</a>, Mark Boulton Design</li> <li><a href="">Paul Mckeever</a>, Typecast</li> <li><a href="">Paul Lloyd</a>, Clearleft</li> <li><a href="">Josh Emerson</a>, Clearleft</li> <li><a href="">Ringo Moss</a>, Nerv</li> <li><a href="">Phillip Davies</a>, Nerv</li> <li><a href="">Lewis Nyman</a>, Freelance</li> <li><a href="">Katherine Cory</a>, Freelance</li> <li><a href="">Mark Hurrell</a>, GDS (formerly BBC News)</li> <li><a href="">Elliot Jay Stocks</a>, Viewport Industries</li> <li><a href="">Natalie Downe</a>, Lanyard</li> <li><a href="">Cennydd Bowles</a>, Freelance</li> <li><a href="">Anna Debenham</a>, Freelance</li> <li><a href="">Martin Beeby</a>, Microsoft</li> </ul> <h3>On Skype</h3> <ul> <li><a href="">Tim Brown</a>, Typekit</li> <li><a href="">Dan Mall</a>, Super Friendly</li> <li><a href="">Trent Walton</a>, Paravel</li> <li><a href="">Ryan Essmaker</a>, Crush+Lovely</li> <li><a href="">Scott Robbin</a>, Weightshift</li> </ul> <p></p><p>Ahead of yesterday I was a little sceptical as to the format and the practical value from getting 25 people in a room and have them discuss Responsive Web Design. I thought it'd be a bit of a bun fight. But, actually, that couldn't be much further from the truth. The people who attended represented a broad range of websites, products, agencies and clients. We had people representing websites and products that have issues of massive scale: the BBC and Twitter. Through to individual freelancers working on site designs and builds for primary schools. The range of considerations on the table was therefore also as broad.</p> <p>Last week when Chris, Alex and Josh decided on trying to make this happen this week, they had the brainwave of putting a form up on a website to gather questions, concerns or comments from the community. We had a hundred responses or so. All of these were broadly grouped around the following topics:</p> <ol> <li>Workflow</li> <li>Layout</li> <li>Sensors</li> <li>Images</li> <li>Advertising</li> </ol> <p>This first blog post of mine is just about the first point. Specifically, these are my thoughts based on the discussions <strong>not</strong> necessarily the consensus of the day.</p> <h3>Workflow</h3> <p>We broadly agreed that from our experience, Responsive Web Design affects workflow considerably. Speaking personally, <a href="">Mark Boulton Design</a> have been building all our projects responsively for the past 18 months – typically HTML/CSS templates for handover to clients or development partners. And it affects workflow a lot. Here's what we used to do:</p> <ol> <li>Create planning and design artifacts: site maps, wireframes, user flows and journeys, scenarios etc. All of these were up for revision and change by the client.</li> <li>Create flat Photoshop comps based on those artifacts, but only when they were signed off. Oh, and typically that would tally with a billing point.</li> <li>Build templates from signed off comps.</li> </ol> <p>Typically waterfall process. This doesn't work well for us with Responsive Design. For the past few years, we've been working the following way, but only in the last 18 months or so has it become increasingly crystal clear for me that there has to be a structure of project flexibility to accommodate the inherent fluid nature of RWD.</p> <ol> <li><strong>Sketch</strong>. Get the ideas down *amongst* the requirements. Meaning, we don't have design specification documents, we dont have lengthy requirements documentation. We have user stories (or something similar) and we combine them with research, thoughts, sketches, ideas to document the scope of the project.</li> <li><strong>Prototype</strong>. In HTML. This allows us to get the product – in whatever form – in front of the client. The aim is to remove <em>The Big Reveal</em>. It also lets them see how the site responds on different screen sizes. Also, we can start to think about problems that may arise due to a responsive approach *now* instead of when the templates are being integrated into a backend, or at other production sensitive times.</li> <li><strong>Design</strong>. However you increase the fidelity is up to you. I use Photoshop, other people use Fireworks, some do it in a browser. </li> <li><strong>Iterate</strong>. Have a project structure that embraces change. That means a focus on priorities.</li> <li><strong>Talk</strong>. This approach requires much more collaboration with a client. I mentioned The Big Reveal: the thing designers do where they squirrel away for a few days and then come back and go 'ta da, look what I made!'. That's just so risky. </li> </ol> <p>Some of you will think I just described an Agile process – and partly that's right. There are some things from Agile that are useful for us when designing Responsive sites: prototyping working code, iterating based on priorities, increasing the fidelity of your design work in the browser instead of comps.*</p> <p>* Note: I'm not saying design in the browser. I'm saying increase the fideltiy, or apply a design system, not do it all in there.</p> <p>Yesterday, we discussed similar issues around this process. How, in large agencies which are crippled by siloing of design and front-end development resources and their own immovable processes, are finding it very difficult to work with RWD. It's not because RWD is difficult, appropriate for a project or anything else. It's because their process can't accommodate it.</p> <p>One of the issues is to do with the delivery of design 'comps' to a client. The old way was easy: we do wireframes, we make comps from those wireframes, clients sees them, signs them off, we build it. We can't do that now because we'd be delivering comps for every viewport size. We can't do that. More the point: we shouldn't do that. This is when RWD comes under criticism for not being commercially viable. It's because it's trying to be shoe-horned into an existing, fixed-canvas, inflexible process.</p> <p>The take-aways for me, based on yesterday's discussions, were that we're on the right track. Prototyping in HTML early, showing and involving clients in the process early – so they can see how a site will respond to different viewports – actually showing them in different devices helps mitigate the 'The Big Reveal' and the associated risk. It helps clients understand – and this was a great point made by Cennydd – that RWD is sustainable design and a cost effective, future-compatible, approach to building websites for an ever-increasing myriad of display sizes.</p> <p>The next part of the day was to discuss Layout. But, I'll leave that for the next blog post.</p> A Responsive Experience 2012-02-15T00:00:00+00:00 <p>Since I saw <a href="">Ethan's talk</a> in <a href="">An Event Apart in Seattle 2010</a>, I've been thinking a lot about Responsive Design. Not just the layout techniques Ethan gave name to and <a href="">wrote the book on</a>: fluid grids, plus media queries and flexible images, but taking a step back from that into the field of responsive architecture and abstracting that into responsive design in general.</p> <h3>Responsive Design is everywhere</h3> <p>As I discussed in <a href="">my talk at New Adventures Conference</a> last January, Responsive Design is comprised of three things:</p> <ol> <li>Sensors: Things that sense the environment (not the weather, but the stuff around it - whatever it is)</li> <li>Systems: A system that takes the information from the sensors and tells the actuators what to do.</li> <li>Actuators: The things that actually do the moving. The motors, the CSS, the cables.</li> </ol> <p>A simple example of this is your central heating. Mapping central heating to those three:</p> <ol> <li>Sensors: This is your thermostat. It measures the temperature.</li> <li>Systems: This is the software in your thermostat, or on your boiler, that you can programme.</li> <li>Actuators: This is the thing that turns your boiler on or off.</li> </ol> <p>This is a responsive design system. Now, looking at web design, let's try and map Responsive Web Design to it:</p> <ol> <li>Sensors: This is the browser</li> <li>Systems: This is our CSS -- specifically the @media declarations</li> <li>Actuators: This is our CSS too -- specifically what falls within our @media queries</li> </ol> <p>You see, in the browser world, it's not so cut and dry. Using @media queries, the browser detects the width. The browser is the thing that is sensing here. The system -- the bunch of rules that tell the actuators to do something -- they live in our @media queries. At this width, do this. The actuators are also in our CSS. They are the 'this' in the previous statement. eg. At this width, make this button blue. System > Actuator.</p> <p>For the past year or so, we've been getting to grips with the Actuators and the Systems through using CSS and Javascript. What's proving difficult, is the Sensors.</p> <h3>More sensors, please!</h3> <p>At the moment, all that we can do reliably (well, fairly), and knowably, is use the browser as our single sensor by which to sense. We have one sensor. We need more. Just for a moment, let's consider what would be useful information for us:</p> <ol> <li>Network infrastructure</li> <li>Device capabilities</li> <li>Screen size</li> <li>Context</li> <li>Content</li> </ol> <p>If we could have sensors that could detect if you are browsing on a particular browser, could detect what screen size, network and context -- eg. on your couch, on a train in a certain geo-locale -- we'd be going in the direction of Responsive Architecture and Responsive Design generally. As it stands –– and this is fine for now –– we're changing layouts based on a screen size. We're capable of so much more.</p> <p>Now, am I talking about device specificity? Is this the browser detection days gone nuts? I don't think so. I'm not talking about deviating from standards here. I'm talking about having better tools to monitor the browsing environment, whatever that is.</p> <h3>A Responsive Experience</h3> <p>Responsive Design (the field) changes a thing because of the environment. Responsive Web Design currently changes a layout because of the environment. I think Responsive Web Design will grow into a practice of changing an experience because of the environment. That means: content, layout, behaviour, perception, brand, feel. All of those things are open for change if we have a good set of sensors, and the right actuators to to create them. Our job will then be focussed on designing the systems knowing that all this good stuff is in place. </p> <p>It does feel that at the moment, we're very preoccupied with the component parts of responsive design: how do we sense the environment the user is browsing in,? How do we create a system to change the layout? What's the CSS to do those changes?</p> <p>That's all OK. This is still new.</p> <p>Over the past year, Responsive Web Design has quite rightly shifted the web standards based design community to a new way of thinking. It's not really just a layout technique. Responsive design –– if you consider the above sensor > system > actuator components –- is a much broader, holistic practice. It involves every step of the design process in determining the outcomes of the actuators, or defining the sensors and then designing systems around those inputs. The whole thing is involved.</p> <p>I think we're at the start of this for web design. This is exactly some of the pain we're feeling with Responsive Web Design workflow right now. And it's encouraging we're seeing a focus on techniques and tools to create better sensing, better systems for controlling more sophisticated actuators. However, I'd love to see more joined up thinking. How does Responsive Design effect our content? Our messaging? The story? How can we shape better experiences by using these simple inputs and outputs?</p> <p>Responsive Web Design is just the start of us challenging and rethinking our perception of what the web could be. We used to think it was like newspapers. Or computer programmes. Now, we've had a glimpse of a web that understands us and can adapt to our needs. That could either be incredibly exciting, or <a href="">bloody terrifying!</a></p> Design Compromise 2011-12-09T00:00:00+00:00 <p>My friend <a href="">Andy Rutledge</a> runs a weekly video podcast called <a href="">The Design Pro Show</a> in which he talks through his take -- as a 'Design Professional' (in quotes because <a href="">it's a thing</a>) -- on a number of subjects; from '<a href="">Process</a>', to the latest show yesterday '<a href="">On Compromise</a>'.</p> <p>Yesterday Andy asked for thoughts over Twitter:</p> <blockquote><p>Where in your work have you found benefits in compromise?</p></blockquote> <p>As you'd expect, opinion was polarised. <a href="">Andy Budd</a> perhaps encapsulated how I feel:</p> <blockquote><p>If you compromise on nothing, you're a dictator. A lack of compromise weakens the chance of discovering that you could actually be wrong.</p></blockquote> <p>And <a href="!/ia">Oliver Reichenstein</a> today:</p> <blockquote><p>Web design is engineering. Engineering is all about making the right compromises. Case closed.</p></blockquote> <p>My thoughts are this: <strong>design is an exercise in considered compromise.</strong></p> <p>Firstly, let me define what I mean by compromise. I mean <em>reaching a mutually agreeable decision based on subjective demands, conditions or variables otherwise unaccounted for</em>.</p> <p>The type of design I do is, ultimately, about people. Designing websites for people means you need to try and understand how they will behave on the website you're designing, and people are complicated things. Commercial design means doing work for money. Stakeholders are also people (yes, they are), and are subject to the same complicated thought processes as the rest of us with the added commercial complexity of generally knowing their business (and sometimes their audience) better than you do.</p> <p>Throughout a design process a myriad of potential conditions may present data that results in a compromise; a point in time where you need to course-correct to take into account new information. My understanding is that a designer will take this information and steer the ship whilst still producing an optimum solution. This is through no fault of the designer or the process. New information can surface at any time throughout a process; for example, user interviewing or usability testing may bring to light information that fundamentally changes an approach. This has happened to me on numerous occasions.</p> <p>If you're unable, or unwilling, to take on-board this new data -- to course-correct -- to compromise what you thought was the right thing, this is will result in a compromise to the design solution. Because you're ignoring critical information. Your desire to not compromise will actually compromise the end-result. Ironically.</p> <p>Someone who knew a lot about uncompromising systems was <a href="">Bruce Lee</a>. As you may know, Bruce Lee was an martial artist film star in the 60s and 70s. He was also a philosophy major and had a deep interest in understanding the physiological and psychological effects of combat. He had a deep interest in challenging the traditional martial arts styles of the time: <a href="">Shotokan Karate</a>, <a href="">Taekwondo</a>, <a href="">Judo</a> etc. despite training in a traditional style himself: <a href="">Wing Chun</a>. His problem was they are not grounded in reality. They exist as a system devoid of adapting to external data. This, of course, can be particular damaging when faced with an opponent. You rely on the system to provide you with the right tools, rather than adapting and accepting the fluid dynamics of a combat situation.</p> <p>Design is like this. </p> <p>Adhering to an inflexible system, that is incapable of reacting to new external data, or the fluid dynamics of a complicated project, generally results in failure. This is why methodologies such as Agile exist: they are designed to effectively accommodate change.</p> <p>My experience in design is that there's a lot of grey. Nothing is ever cut and dry. People are complicated. Perception and behaviour is difficult to account for, and using a design process that welcomes new data, can course-correct effectively, is a process every designer should be working to create.</p> This post won't take long to read 2011-11-22T00:00:00+00:00 <blockquote><p>Estimated reading time: 10 minutes.</p></blockquote> <p>What a presumptuous statement. How do you know how long it will take me? Do you know my first language isn't English? Do you know that have learning difficulties? Do you know I'm sitting in a public place and will likely be interrupted frequently? Do you know I've forgotten my glasses today?</p> <p>I'm seeing this small bit of meta-data associated with <a href="">more</a> and <a href="">more</a> <a href="">blog posts</a>. Just next to the post title, designed to help me make a judgement as to whether to read it, not read it, or read it later on using Instapaper or something. </p><p>I've got a problem with them. They're trying to answer a question I don't have.</p> <h3>Time</h3> <p>The question they're trying to answer is: 'do I have time for this?'. In my experience, time is very rarely a deciding factor on reading an article. The deciding factor for me is generally the content itself: does it interest me? Is it well written? The only time that time is a factor is when I'm in the middle of something else. Is this always the case? Absolutely not.</p> <h3>Value</h3> <p>The other problem I have with these little nuggets of fallacy is that I feel they devalue the content. Being so prominently placed -- generally next to a title -- implies they are a major deciding factor, and therefore they are a <strong>value statement</strong> you place on your own content. In this busy, busy world, 'short = good'. 'Long = I don't have time for that, I'm too busy'</p> <h3>Legibility</h3> <p>The final thing is they assume too much. As I described at the start of this post, this UI device assumes an awful lot of the user. It also assumes a lot about the design and legibility of the presentation of the content.</p> <h3>How do we fix it?</h3> <p>What I'd like to see is this type of device being closely associated with 'read later' functionality. Don't have the time now? Read it later. In its current form and positioning, it leads me nowhere.</p> <p>What we're really after here is trying to show length. How long is an article so I know if I want to read it. Many people on Twitter thought a scroll bar was fine. But as some pointed out, that's inaccurate as there could be a whole lot of page guff at the bottom of the page. Would word count suffice? I'm not sure.</p> <p>Document length is an important data point. Decisions about reading are based on it. Sometimes based on time, but other times on context, ability, comprehension or language. How could we better measure 'length' on the web that makes sense for people?</p> <p>So, how long did it take you to read this post?</p> A Practical Guide to Web App Success 2011-11-16T00:00:00+00:00 <p>I'm very pleased to announce that, yesterday, <a href="">Five Simple Steps</a> launched A Practical Guide to Web App Success from <a href="">Dan Zambonini</a>. You can <a href="">buy it now in DRM-free ePub, PDF and mobi formats bundle for just £15</a>.</p> <img src="" alt="A Practical Guide to Web App Success by Dan Zambonini"> <p>Like our other Practical Guide books, Dan's book is very useful. It's about taking that might seem overwhelming, complex or just plain big, and breaking it down into manageable, empowering chunks. For almost anyone working on the web, but particularly for designers and developers wanting to take an idea to market, this book is a great place to get an understanding of what's involved; starting from a scratchy beginning of a side project to a full-time venture.</p> <p>Personally, what I got from Dan's book was enough breadth to make me believe I could do the same. Not only that, but that it might just be a success.</p> <p>Of course, it looks great. Our designer <a href="">Nick</a>, and particularly our new apprentice at <a href="">Mark Boulton Design</a>, <a href="">Colin</a>, have spent many weeks crafting a beautiful experience.</p> <p><a href="">.Net magazine</a> have <a href="">published a sample chapter on 'Prototypes and User Tests', and of course, you could download the sample from the </a><a href="">Five Simple Steps website</a> if you wanted to see what it's all about.</p> <p>We're thrilled to bits with it. If you pick a copy up, please let us know what you think <a href="">@fivesimplesteps</a>.</p> Responsive Advertising 2011-11-15T00:00:00+00:00 <p>Recently at <a href="">Mark Boulton Design</a>, we’ve been working on a redesign of the global visual language for a large sports network. Like many web sites delivering news and editorial content, they rely on advertising for their revenue -- either through multiple ad slots on the page, or from video pre-rolls.</p> <p>Early on in the project, we discussed <a href="">Responsive Web Design</a> at length. From an editorial and product perspective, it makes perfect sense. Who wouldn’t want their content adapting to a device their reading it on? Who wants to pinch-zoom again and again? From a business and product perspective, we’ve seen this from multiple clients who want to take advantage of certain interactions on certain devices -- swiping for example -- for users to better engage with the content in a more native way. All good. And then advertising comes along and things get challenging.</p> <p>Here’s the problem as I see it:</p> <ul class="bulletlist"> <li>A large number of sites rely on advertising for revenue. Many of those sites will benefit from a Responsive Web Design approach.</li> <li>Web advertising is a whole other industry.</li> <li>Ad units are fixed, standardised sizes.</li> <li>They are commissioned, sold and created on the basis of their size and position on the page</li> <li>Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions)</li> </ul> <p>Let me go through each one of these in turn:</p> <blockquote><p><strong>A large number of sites rely on advertising for revenue. Many of those sites will benefit from a Responsive Web Design approach.</strong></p></blockquote> <p>The content for free expectation on the web has been around since it started. Many websites -- where you pay for the content in other forms, such as newspapers -- had to adopt this model, but use advertising dollars to pay for it. With the absence of any other revenue stream on these sites, the only other alternative is paywalls/subscriptions, and we’re seeing a few of these start to come through in mainstream newspapers now -- <a href="">The Times</a>, for example.</p> <p>As I mentioned earlier, many of these websites will benefit from a responsive web design approach. The consumption of this content has changed along with the plethora of devices and viewports. <a href="">As I’ve talked about before</a>, designing a <em>‘best fit page’</em> is becoming increasingly challenging <em>if you acknowledge how usage has changed and will continue to change in the coming years.</em></p> <blockquote><p><strong>Web advertising is a whole other industry.</strong></p></blockquote> <p>There are sub-industries within web design as a whole that generally don’t talk to each other -- such as gaming, gambling, porn, seo. Web advertising is another. These sub-sets each produce technology advances that everyone else benefits from. They deeply understand their audiences and how they interact within those verticals. But they don’t talk. Generally. For an industry that is built upon open standards, sharing, communication then this can be damaging.</p> <blockquote><p><strong>Ad units are fixed, standardised sizes.</strong></p></blockquote> <p>Hurray for standards! Because of the inherent reuse of advertising colatoral, this stuff had to be standardised. The <a href="">Internet Advertising Bureau</a> has been <a href="">documenting emerging standards in web advertising</a> for years now. </p> <p>This is all good, especially for creating grid systems. <a href="">Khoi Vinh talked about deriving a grid from an ad unit</a> (PDF slides) when I shared a stage with him in SXSW in 2007. They are a fixed content element -- unchangeable and standardised across a website. They’re knowable.</p> <blockquote><p><strong>They are commissioned, sold and created on the basis of their size and position on the page.</strong></p></blockquote> <p>This is perhaps the biggest issue for me. For example, a sales teams basically have a page ‘template’ with ad slots. Position A, B and C. In A, you can fit a Leaderboard. In B an MMU, and C a button. Also, if an advertiser pays lots of money, they can have a takeover. A takeover includes banners down either side of the page which join up to create a wrapper. Sometimes Leaderboards in position A can be pop-overs or flyouts. Sometimes, crazy stuff can happen where someone throws a ball from ad position B to A. Yes. Seriously.</p> <p>The sales team then proceeds in selling the slots to advertisers who in turn provide the ‘creative’. This could be animation, video, graphics - increasingly a combination of all three - that are embedded in the page by a scheduling application. They’re sold based on the impressions rather than clicks. </p> <p>That’s a lot of variables to account for. But, web advertising is becoming an increasingly aggressive industry. Advertisers and web sites are looking to innovate to engage users through marketing campaigns that align across multiple media. And web sites need to be accommodating.</p> <p>Sales teams through many industries are also largely commission-based. As a sales person, you have a basic salary (or sometimes you don’t), and then you earn more depending on what you sell in the month. And here’s the thing. A sales team need a simple model in order to sell ads: a template with slots and a list of ads that can go in then. Now, let’s introduce Responsive Web Design into this.</p> <p>Let’s say, you have the minimum amount of break-points: desktop, tablet and small screen. A sales team has a template with Slot A (the primary slot) that accommodates a Leaderboard for the desktop. But then that changes to a MMU for tablet. And changes again to a thin banner for small screen. A sales person has to understand they’re selling ONE slot for this. And an advertiser has to understand they’re paying for ONE slot for this. However, they’re supplying three times the amount of creative. And this is just a very simple use case. What happens with a takeover? Everyone wants as much bang for their buck as they can muster.</p> <blockquote><p><strong>Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions)</strong></p></blockquote> <p>Increasingly, ad units are not confined by their pixel borders. Take-overs combine multiple ad units to give an overall effect of taking over the page. Flyouts show and hide a layer on hover. Pop-over do the same but in a different way. Video autoplays. Animation completely breaks out of the ad unit and can fly around the screen: how ever annoying that might be. My point is that the notion of advertising being confined by their pixels is also becoming increasingly grey. How would you accommodate a flyout for a small screen, for example? Another type of flyout for each breakpoint? So now the advertiser has to produce three times the amount of complex creative for the same, single ad slot? In order to make this commercially viable, they’d be looking for a deal then.</p> <p>Those are some of the practical logistical things I can think of to challenge the notion that you can just ‘serve a different ad for each break point’. It’s just not that simple when millions of dollars are at stake.</p> <p>So what can we do to improve this?</p> <p>Well, some responsive sites are incorporating ad units now. But not many.</p> <p>Boston Globe has incorporated an MMU ad unit. They’ve done this by fixing the width of that column and have the ad unit occupy that space as the viewport is reduced down to a single column.</p> <p><img src="" alt="Boston Globe screenshots on multiple devices"></p> <p class="caption">Boston Globe screenshots on multiple devices</p> <p>The good news is, this is a problem a few in the industry are seeing as an opportunity. <a href="">ADO published a press release</a> just last week:</p> <blockquote><p>to deliver cross-media web innovation, user experience design and integrated advertising for brand, agency and publisher clients specifically around mobile full-service responsive web design.</p></blockquote> <p>Matthew Snyder, CEO of <a href="">ADObjects</a> adds:</p> <blockquote><p>We wanted to share our vision on 11.11.11 since we believe a critical part of the right digital strategy is to build a cross-media mobile strategy with complete 1-to-1 parity multi-screen design. With one recent client we were able to see 4x more traffic and 30% of the traffic to mobile via responsive design methods due to search and social link matching over conventional mobile web platforms</p></blockquote> <p>If these numbers are to be believed, then there is a considerable ROI for advertisers to work to adopt responsive design and an ad strategy that would match.</p> <p>Now, let’s get down to brass tacks. How would approach building out a complex responsive web site that had multiple slots? </p> <h3>The Standard Model</h3> <p>The existing model is based on advertiser filling slots, as shown in this diagram. Each is sold to perfectly fit an available slot. If none are sold, the website defaults down to a stand-in.</p> <p><img src="" alt="The standard model of displaying and selling ads for the web"></p><p class="caption">The standard model of displaying and selling ads for the web</p> <h3>A Responsive Model</h3> <p>Firstly, I’d sell slot ‘packages’ rather than single slots. This requires an ad sales team to clearly explain what those slots and sizes are, and they’d be served on that basis. For example, an advertiser would buy a package for slot A. The creative to deliver against that package would be a Leaderboard, an MMU and a small banner for small screen.</p> <p><img src="" alt="A proposed Responsive model of serving ads"></p><p class="caption">A proposed Responsive model of serving ads</p> <p>Then, of course, the templates need to be able to detect the various widths and serve the correct ad based on that width.</p> <p>Complex ads such as flyouts and takeovers would require much more thought and change. How could you effectively engage with an audience across the various viewport sizes when there is rich interaction involved?</p> <p>As I mentioned, of course all of this is with a caveat that the advertiser is buying a slot ‘package’, rather than a single ad to fill a single slot. And that a sales team would sell it as such. This is the crucial difference, and for me, the biggest barrier to this change - it’s cultural and not technical, that requires a lot of explaining, and they always take the longest to do. </p> <p>The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing <em>space</em> for ads needs to be broadened into <em>multiple spaces</em> for one ad <em>concept</em>. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.</p> <p>Over the past six months I’ve been working on this problem: speaking to sales teams, product owners, designers and as <a href="!/kerns/status/136402434980450304">@kerns mentioned on Twitter this morning</a>, the one thing that is plainly lacking at the moment is demand. I’d go one step further and say that the thing that’s missing is benefit. If the benefit can be clearly shown to advertisers and websites -- in terms of an increase in penetration, reach, and ultimately, revenue, then we’ll start to see some movement.</p> <p>I'd love to discuss this further on <a href="">Twitter</a>, or on <a href="">Google +</a>, you can reach me on either if you have any questions</p> White, Yellow, Orange, Red 2011-11-14T00:00:00+00:00 <p>When I was 16, I was mugged. I was taking a shortcut home from a friends house. It was winter, and dark, and I passed by a man in an alley way. He asked me the time. As I looked down to my wrist, he punched me once on the side of the face, he then tried to get my wallet from my pocket. It was a horrible experience, but at least he only used his fists. It could've been worse, as I told myself over and over again during the following months.</p> <p>From that time until about ten years ago now, I taught, and practiced Martial Arts. Specifically: freestyle karate, kick boxing and capoeira. Since then I've done a fair amount of other fighting styles and systems; from boxing to MMA. I'm not training at the moment, but may well return to it. In all honestly, martial art thinking (not necessarily practice) is such a part of my life now, I don't think I'll ever <em>give it up</em>.</p> <p>Throughout my time teaching, I'd been involved in several self-defence courses: both in university and in the work place. Central to our teaching back then was not necessarily the tools or techniques to effectively punch someone in the face, but to give people a deeper understanding of their own awareness.</p> <p>We used a system of colour codes to describe awareness that was derived from John Dean Cooper's '<a href="">The Cooper Color Code</a>'. The system does away with the notion that the best way to survive a lethal confrontation is to be a superior practitioner (in his case, a rifleman), or have better weaponry. Instead, the primary tool is that of the combat mindset. Cooper describes each <em>state</em> of awareness as colours starting with White:</p> <blockquote><p><strong>White - Unaware and unprepared</strong>. If attacked in Condition White, the only thing that may save you is the inadequacy or ineptitude of your attacker. When confronted by something nasty, your reaction will probably be "Oh my God! This can't be happening to me."</p></blockquote> <p>Most people walk around in a pre-occupied fog for most of the day. Their mind is elsewhere: the errand they're running, what they did last night, speaking on the phone, checking Twitter... Humans are great at giving our tasks <em>just</em> enough attention. The rest -- looking, watching, observing, walking, breathing -- is all done automatically. We also respond automatically to certain cues, questions, thoughts and external stimuli. Such as checking your watch when someone asks you the time. Don't be in this state.</p> <blockquote><strong>Yellow - Relaxed alert</strong>. No specific threat situation. Your mindset is that "today could be the day I may have to defend myself". You are simply aware that the world is a potentially unfriendly place and that you are prepared to defend yourself, if necessary. You use your eyes and ears, and realize that "I may have to shoot today". You don't have to be armed in this state, but if you are armed you should be in Condition Yellow. You should always be in Yellow whenever you are in unfamiliar surroundings or among people you don't know. You can remain in Yellow for long periods, as long as you are able to "Watch your six." (In aviation 12 o'clock refers to the direction in front of the aircraft's nose. Six o'clock is the blind spot behind the pilot). In Yellow, you are "taking in" surrounding information in a relaxed but alert manner, like a continuous 360 degree radar sweep. As Cooper put it, "I might have to shoot."</blockquote> <p>This is about knowing what is going on around you. Engaged in your surroundings rather than dreamily ambling along checking your phone.</p> <blockquote><p><strong>Orange - Specific alert</strong>. Something is not quite right and has your attention. Your radar has picked up a specific alert. You shift your primary focus to determine if there is a threat (but you do not drop your six). Your mindset shifts to "I may have to shoot that person today", focusing on the specific target which has caused the escalation in alert status. In Condition Orange, you set a mental trigger: "If that person does "X", I will need to stop them". Your pistol usually remains holstered in this state. Staying in Orange can be a bit of a mental strain, but you can stay in it for as long as you need to. If the threat proves to be nothing, you shift back to Condition Yellow.</p></blockquote> <p>This is an elevated state. There is a specific threat -- such as a small group of threatening men walking on your side of the road, coming towards you, and it's dark. of course, this elevated state can happen in conversation, or a business meeting, or on Twitter too. Whatever can be perceived as a threat, the state you find yourself in is one where you've established what that threat is, and are acting upon it.</p> <blockquote><p><strong>Red - Condition Red is fight</strong>. Your mental trigger (established back in Condition Orange) has been tripped. "If "X" happens I will shoot that person".</p></blockquote> <p>This is the decision to engage in the threat. Either verbally or physically.</p> <p>For the past fifteen years or so, I've been going about my day to day activities in the Yellow state. Normally I don't recognise I'm doing it, until I'm in a new situation. This weekend was one of those.</p> <p>This summer I started cycling. On the road, not mountains or footpaths. I bought a nice little bike, and we're lucky to live in a great place to get out and explore the countryside. On Saturday, as I like to do most weekends, I wanted to get some miles in and it was an unseasonably beautiful day here in Wales. I'd been out for about an hour and was heading downhill on a main road in a residential area. As I was concentrating on the road (in my 'Yellow' state), suddenly a car reversed straight out into the main road without stopping for me. After slamming on the brakes I barely missed the bonnet of the car as I screeched to a halt. The driver had still not seen me. The driver was in 'White'. And it's my experience over the past few months, many are.</p> <p>My overall point is this: be aware. Be aware of your surroundings. People around you - especially vulnerable people. Don't think, walk -- or drive -- in White. It's dangerous for you and for those around you. It's a thoughtless state of mind.</p> What is Spec(ulative) Work, really? 2011-10-31T00:00:00+00:00 <p>We all know that Spec work is bad. I've written about it <a href="">here</a> before.</p> <p>There are <a href="">professional organisations</a> that have official codes of conduct on the subject. <a href="">Industry campaigns</a> continue to educate ill-advised clients, yet the more I'm in the service industry, the more I realise the 'not doing speculative work at all' is not quite as cut and dry as these organisations would have us believe. And, taken to the extreme, could be damaging for the industry and your business.</p> <p>First of all, let's get grips with what 'spec(ulative)' in this context means. The <a href="">AIGA believes</a>:</p> <blockquote><p>...that professional designers should be compensated fairly for their work and should negotiate the ownership or use rights of their intellectual and creative property through an engagement with clients. To that end, AIGA strongly encourages designers to enter into client projects with full engagement to show the value of their creative endeavor, and to be aware of all potential risks before entering into speculative work.</p></blockquote> <p>Quite right. But what they don't do is state what that <strong>work</strong> is. Presumably they mean design consultancy producing output, be it wireframes, user interface mockups, logos, advertising campaigns etc. What they're failing to very clearly state here is the speculative <strong>work</strong> that goes on in securing a client that is not design related.</p> <p>Good client relations begin from the very first contact. At <a href="">Mark Boulton Design</a>, we probably have a similar approach to most small studios in engaging with potential clients: we spend time trying to understand them, their needs, the business and the project -- at least from a high-level perspective -- <strong>before</strong> committing to working with them. Sometimes this takes the form of a formal RFP from them and a subsequent proposal from us, but more often than not it takes place over many weeks over email, phone conversations and face to face meetings. This is before any contract has been signed. Like any relationship, we're seeing if we like each other before we commit. And just like other relationships this is speculative; you are speculating your time on a successful outcome.</p> <p>You see, to my mind, some of the work we do is inherently speculative if you are charging your clients for time. Your time = your money. Every conversation you have with a perspective client spent during a project and client discovery is time you are spending.</p> <p>So, when we talk about Spec Work in relation to web design, let's be specific: we're talking about speculative design work. Not all speculation is bad. In fact, some of it is unavoidable.</p> Being Together 2011-10-09T00:00:00+00:00 <p>A few weeks ago, I attended the <a href="">Do Lectures</a>. Luckily, for me, it's a quick trip from Cardiff to <a href=",+wales&hl=en&ll=52.003483,-4.53186&spn=0.276027,0.571976&sll=37.0625,-95.677068&sspn=45.197878,73.212891&vpsrc=6&hnear=Ceredigion,+United+Kingdom&t=m&z=11">Cardigan</a> in West Wales. I'd been looking forward to it for months.</p> <p>As I was soon to find out, Do is a magical place. Nestled <a href="">in the woods</a>, it is an intimate affair: thirty speakers and eighty attendees. You <a href="">sleep in tents</a>, share your meals seated on benches, and pack into a twin-roofed teepee to listen to the talks. You think big thoughts, whilst quietly reflecting on a wooden deck overlooking natural meadows supping freshly brewed tea. </p> <p>Do is also unlike every conference I've been to. I wouldn't even describe it as such. It's more like a retreat. The content of the lectures was also a wonderful mix of big things from small ideas and small beginnings from big ideas. Personal highlights for me was an emotional talk from a Midwife about maternal care in the developed world, and a rousing final lecture from Mickey Smith: a surf photographer who had never spoken before in public, yet his raw passion for his work made every stumbled word a vital part of his delivery, ending the lectures with <a href="">a superb film</a>. The Internets <a href="">Frank Chimero</a> also spoke. For those of you who haven't heard Frank speak before, he's like a poet. Like an American version of Richard Burton <a href="">reciting 'Under Milk Wood'</a>. I could listen to him all day.</p> <p>For me, Do was nourishing in a way I've not felt for a long time.</p> <p>We all individually have to ask ourselves: 'what nourishes us'? How do we grow? Is it grass-roots bar camps, or skipping from one web conference to another listening to the same people say similar things. Or is it just hanging out with your friends and peers discussing our work.</p> <p>I've asked myself a question over the past few years: are there too many web design conferences; what value are we *really* getting from them? For a long while, I thought the market was getting too saturated, and we've seen signs of this ripple through the industry consciousness. People see the same people say similar things time and again. For conference organisers, it's hard to find the right mix of experienced speakers – who will sell tickets – and people who are doing smart, interesting work, but don't have the speaking experience. <a href="">Andy Budd wrote a great blog post</a> on this subject a few weeks ago going into great detail on the challenges organisers face.</p> <p>Yet, more conferences appear throughout the world and more sell out. Our thirst for all getting together under one roof to share, collaborate, listen and grow is an overpowering need that will not go away. But, let's ask ourselves: do we get the nourishment from the conference, or from simply being with our <strong>tribe</strong>. And if your answer is the latter, then are big, expensive web conferences the best place to just <strong>be together</strong>. If this is all really about community, then how can we do this better?</p> <p>Since I began working with the <a href="">Drupal</a> community in 2008, I've attended – and spoken at – five <a href="">DrupalCon</a> events in Europe and the US. DrupalCon is different to other web conferences. It acknowledges that its primary purpose is for people who are working with Drupal to get together. And the result is infectious.</p> <p>DrupalCon is managed by one of <a href="">Mark Boulton Design's</a> clients, the not-for-profit association: <a href="">The </a><a href="">Drupal Association</a>. They are independent of the software and work to market Drupal, in addition to arranging and planning the bi-annual DrupalCons. They receive donations and membership from all over the world to pay for such events, and because one of their core remits is to nurture and grow the Drupal community, they keep the ticket prices down and focus on community collaboration over big-name speakers (except the keynotes) and venues. And it works. In <a href="">DrupalCon Chicago</a> earlier this year, over 4000 people packed a downtown hotel for a week. A big, collaborative soup of all kinds of people. And as a direct result of DrupalCon, every year, Drupal gets better. It's about the people, not the speakers or the glitzy conference. People speak for free. Give workshops for free. Not because they're being nice, but because they are <strong>giving back</strong> to the community and furthering a common goal.</p> <p>Remember SXSW in 2006? Remember how that felt? Right?</p> <p>So what if…</p> <p>What if there was a web design association? A not-for-profit organisation that was small - with elected members, funded by donation and membership - set up and operated in exactly the same way that the Drupal Assocation is run - whose core remit was to provide a twice yearly event: one in the US and one in Europe for people to attend to <strong>be and work together</strong>. Now, of course, there wouldn't be the central goal of 'making Drupal better'; our efforts are not open source and largely commercial (read: secretive), but there is much we share. When people get together things happen. We find common problems and solutions; ideas are born; approaches simmer and products are created. </p> <p>This would not be about profit. It would be about providing a place for us to be together. It wouldn't be expensive to attend. It would be about being inclusive, where people from all disciplines could gather round and share their work.</p> <p>Now, I'm not sure this would be at all achievable, or in fact if it's really a good idea. It would be hard work. It would be political. But what we could gain from this would be the type of nourishment I got from Do...</p> <p>Nourishment that is slowly being eroded in the web industry as the volume of conferences reduce variety...</p> <p>Nourishment that is lacking by speakers under pressure to give quick, practical info-talks rather than to inspire, challenge, provoke, debate or collaborate...</p> <p>Nourishment that is increasingly lacking in polished, high price, high cost (for the organisers), high risk (for the organisers) professional web conferences....</p> <p>Nourishment that we get from being together.</p> <p>What if we could do that?</p> <p>During the Do Lectures, speakers are encouraged to communicate a Big Do – a big idea, that may take a lot of hard thinking and hard graft, and a Little Do – something you can do right now. They also encouraged attendees to think of the same. So here's my <strong>Big Do</strong>: how can we create a place or a gathering for our community that isn't motivated by profit, but by nourishment? And my <strong>Little Do</strong>: make a conscious effort to reach outside of the community and industry to help me learn and grow as a designer. Yes, even Midwifery. Or surfing. </p> <p>What are yours?</p> Steve Jobs 2011-10-06T00:00:00+00:00 <img src="" alt="Steve Jobs" width="100%" title="steve-jobs"> <p>In 1992, I started using my first Macintosh when attending art classes at college. Frankly, it was a frustrating experience with tools that were not as immediate as pencils or paint. Yet, in that small dark room, surrounded by the smells of powder paints and musty paper, this large box attached to a CRT display captured my imagination. Next year, I will have been using Apple Macs for 20 years.</p> <p>This morning's news of Steve Job's passing was shocking and saddening. Made even more poignant by the fact I'm working in Bangalore in India currently, and this week is a Hindu religious festival called <a href="">Dussehra</a>. This festival goes on for ten days, and on the ninth day in Southern India, Ayudha Puja is celebrated. On this day, people give thanks for the tools they use everyday: vehicles, spades, kitchen tools and <em>computers</em>.</p> <p>Without these tools I use, I wouldn't be doing what I do now. I wouldn't have studied design, or studied at the university where I met my wife. It all started back then in that small, dusty room in the art rooms in college.</p> <p>Today, I'm thankful to Steve Jobs for giving me the tools to do my work. </p> Rethinking CSS Grids 2011-08-08T00:00:00+00:00 <p>Off the back of <a href="">this article</a> in Net Magazine last week, and the subsequent few tweets popping up in my stream, I've finally managed (in no small part from the help of <a href="">Nathan</a> and <a href="">Alex</a>) to pull together some of my thoughts and concerns regarding CSS grids and how they could (or, maybe, <em>should</em>) be created.</p> <h3>What's there at the moment?</h3> <h4>Multi-Columns</h4> <a href="">CSS Multi-Column</a> is really simple. Basically, you divide a element into columns. This is already well-supported in many modern browsers. <h4>Flexible Box Layout</h4> <a href="">Flexible Box Layout</a> is a module that automatically resizes elements within another element without having to do a lot of painful maths. <h4>Grid Layout</h4> Let's concentrate on <a href="">Grid Layout</a>, as this is potentially the most designer-friendly and <em>should</em> match existing mental models. <h3>The issues with Grid Layout</h3> <h4>How grids are constructed</h4> The underpinning unit of measurement in a grid is The Module. From that starting point, Modules are combined to create columns and fields. Grid Layout doesn't acknowledge the existence, let alone use, of the Module. Instead it dives straight into columns and rows. Which brings me on to my second point: <h4>Nomenclature</h4> grids have been around for quite a while and there is established words for things like Columns, Fields, Modules and Gutters. It's my feeling that the CSS grid module should speak the same language as designers, not that of developers. <h3>A proposal for change</h3> <h4>1. Start with a module</h4> <p>The starting point for any grid system is defining your module size. The module has also been referred to as a <em>unit</em>. I'm using module for reasons that will become clear.</p> <p>To summarise, a module is a repeated rectangle, with gutters in-between, that, when combined, form columns and fields. A module size should rarely be defined, but <em>derived</em> from a fixed, knowable constant to be designed with: image sizes, ad units, video sizes, to name a few examples.</p> <p>Following the Grid module's syntax, firstly we define our container div to display as a grid:</p> <code> div { display: grid; } </code> <p>I then define my grid module with 'grid-module' as 50 pixels wide, and 30 pixels high:</p> <img src="" alt="Image showing creating a grid module" title="Image showing creating a grid module"> <code> div { display: grid; grid-module: 50px 30px; } </code> <p>This of course be defined in percentages, or Ems:</p> <code> div { display: grid; grid-module: 8% 2%; } </code> <h5>A new unit of measurement, defined once.</h5> This is why I'm not using the terminology of <em>unit</em> for the module: in a grid system, the module is a unit of measurement. You combine and align content based on modules. <p>Similar to the Em, the Module becomes a user defined unit of measurement. And I'm proposing that we use that new unit of measurement to build our columns and fields.</p> <h4>2. Define the gutters</h4> <p>The next thing we need to do when building a grid is defining the gutter widths and heights. Please note, there, that gutters are also the horizontal spaces between units as well as the vertical.</p> <p>For this example, I'll stick to something simple, like 21px.</p> <img src="" alt="Image showing creating a grid gutters"> <code> div { display: grid; grid-module: 50px 30px; grid-gutter: 21px; } </code> <p>There's a reason for the 1. Quite often, you may want to visually separate columns of content with a keyline; a line that runs vertically in the middle of a column. If your gutter is an odd number, with an even number of pixels either side of it, it means that 1px is available for the keyline. The syntax for this could be similar to border:</p> <code> div { display: grid; grid-module: 50px 30px; grid-gutter: 21px; grid-gutter-keyline: 1px solid #333; } </code> <p>Of course, this keyline would be on every, single module - both horizontal and vertical. We would, of course, have to add this to columns and fields.</p> <h4>3. Define your x count</h4> <p>A module is modular. Meaning it is repeated, both on the x-axis and the y-axis. We know that the y-axis is difficult to work with on the web due to content reflow. We just can't control that vertical height yet. But, we can, and do, define the x-axis.</p> <p>We use 'grid-x-count' to define the width of the grid. And this is the first time we introduce our new unit of measurement; The Module, or 'md'. In this example, our grid is 10 modules wide, or '10md'</p> <img src="" alt="Image showing creating a grid x-count"> <code> div { display: grid; grid-module: 50px 30px; grid-gutter: 21px; grid-x-count: 10md; } </code> <p>Now, all you need to do to see your grid is to add a background colour to the module:</p> <code> div { display: grid; grid-module: 50px 30px #ccc; grid-gutter: 21px; grid-x-count: 10md; } </code> <h4>4. Define your columns</h4> <p>Next in the process of designing a grid is defining your columns. Now, you should have a pretty good idea of these from how your derived the Module. For this, I'm using the same syntax as the existing proposed Grid CSS3 module. But, for me, the exciting thing is, I can now use the new 'md' unit of measurement to define the width of my columns. So, let's say I want to create a column 2 modules wide on the left, 1 module wide on the right, and then a centre column of the rest. The 'fr' unit here is defined in the existing Grid Layout specification:</p> <p>I add the 'grid-columns', with the first column as '3md'.</p> <img src="" alt="Image showing creating a first column"> <code> div { display: grid; grid-module: 50px 30px; grid-gutter: 21px; grid-x-count: 10md; grid-columns: 3md; } </code> <p>The second column sees the introduction of a second proposed new unit: 'fr' - short for 'fraction', which is proposed in the <a href="">existing Grid Layout proposal</a>.</p> <img src="" alt="Image showing creating a second column"> <code> div { display: grid; grid-module: 50px 30px; grid-gutter: 21px; grid-x-count: 10md; grid-columns: 3md, 1fr; } </code> <p>Finally, I add the last column of 2md wide:</p> <img src="" alt="Image showing creating a third column"> <code> div { display: grid; grid-module: 50px 30px; grid-gutter: 21px; grid-x-count: 10md; grid-columns: 3md, 1fr, 2md; } </code> <p>That's my columns sorted. Now, I need to add the horizontal fields. How we might use these fields are for things like headers, content areas and footers.</p> <h4>5. Define your fields</h4> <p>We add the fields in the same was as the columns: using our new 'md' unit. Now, you may well ask: 'why can't I just use pixels for the height of my header?'. Well, you could, but then you'd have limited <em>connectedness</em> to the underpinning grid structure. As such, you header might not feel like it belonged to the other things on the grid. A grid, after all, is about creating unity.</p> <img src="" alt="Image showing creating a first column"> <code> div { display: grid; grid-module: 50px 30px; grid-gutter: 21px; grid-x-count: 10md; grid-columns: 3md, 1fr, 2md; grid-fields: 3md, auto, 1md; } </code> <p>So now we have our grid. Three columns and three fields, but all built upon a new user-defined unit of measurement: The Module.</p> <h3>Some nice to haves</h3> <p>There are other things that I would find useful for a CSS grid module to provide. How cool would it be for CSS to be able to give you pain-free baseline grid?</p> <h4>1. Baselines (vertical rhythm)</h4> <p>A baseline grid provides vertical rhythm within your grid, so that type and images align across columns. It's possible at the moment, but fragile. Wouldn't be great if it were a simple declaration that magically applied a baseline grid so that all elements would vertically snap to it?</p> <p>I'm thinking something like this:</p> <img src="" alt="Image showing creating a first column"> <code> div { display: grid; grid-baseline: 1em; } </code> <h4>2. Snap to grid</h4> <p>Speaking of snapping. Snap To Grid is a behaviour that many designers are familiar with. It's generally a toggle on/off in layout software. You create a grid with guide lines, and then you can toggle 'Snap to Grid' on so that elements that you position on the canvas, 'snap' to the grid you created instead of float nearby.</p> <p>Now, this is fine for layout software - where the behaviour is drag and drop - it's a little different when we're positioning things in a document. To be honest, I've no idea how this could work, but the goal is that instead of positioning by pixel, we could 'snap' to our grid. Making the grid and the tools smart, so we don't have to do so much work manually.</p> <h4>3. Grid positioning</h4> Now you have defined a new base unit of measurement, you can use it to position content relatively to the grid (instead of relatively to something arbitrary like pixels). <h3>The benefits of a different approach:</h3> <p>As I discussed earlier, I feel the existing proposed Grid Module for CSS has a number of problems, and what this article aims to do is rectify those.</p> <h4>The process, and mental model of how a grid is constructed, is retained.</h4> Grids are not made of columns and rows. Columns and <strong>fields</strong> are created by combining <strong>Modules</strong>. The first step in the process of creating a grid is not creating columns, but deriving and then defining your module size. Then everything else comes from that. <h4>We have a new unit of measurement</h4> By creating a new user-defined unit of measurement, we're able to continually bring the designers attention back to the grid. Not pixels, or Ems or %. Designers get this. It matches their mental model. But I think it goes beyond that. Having another unit of measurement that is specifically used for layout means that we can create a consistent, underpinning connectedness throughout our design. We can create padding and margins from the module. We can position elements relatively by the module size. Very useful, I'm sure you'll agree. <h4>Nomenclature is retained.</h4> Perhaps my biggest issue with the existing proposed Grid module is the words used for elements of a grid. Grid <a href="">Lines</a>, <a href="">Tracks</a> and <a href="">Cells</a> are not terms designers associate with grids. <p>For example, Gutters are a well understood term amongst designers for the space in between modules of a grid. They are replaced in the Grid proposal by the term Grid Lines. In my experience, the space in between a column is rarely thin enough to be called a line. In fact, quite often in layout, columns are separated by a visual keyline (as I mentioned before), with space either side.</p> <p>One of the challenges for designers trying to get into web design, particularly trying to learn CSS, is the differences in terminology and also the mental models of how things are created. It's why tables were so popular early on. It's because the process of defining tables and rows for layout was familiar to designers. The terminology for designing grid systems has been around a long, long time. It's taught in design schools all over the world, and baked into design software. It works. And if it ain't broken, why fix it?</p> <h3>A way forward?</h3> There are plenty of holes in this proposal. I'd love to take it forward into a proof of concept. Is this workable beyond simple three column layouts? How would this work for responsive designs? What about mobile? <p>But I think there's something in this. It just makes sense to me as a designer for the CSS Grid module to be using terminology I understand; for it to support the process and mental model of creating a grid; and provide me with a new unit of measurement -- the Module -- so I can use it to create <em>connectedness</em> across my design.</p> <p>There are no comments on my blog anymore, but I'd like some debate and discussion around this, so <a href="">ping me on Twitter</a> and I'll provide an ongoing QA at the bottom of this post.</p> Visual Design is not a thing 2011-08-02T00:00:00+00:00 <p>Recently, in our industry, I've noticed a disturbing increase of the term 'Visual Design'. It's often used to describe a job title, or a step in a UX design process; 'we've done the strategy, the product definition, the prototyping... now, let's make it pretty with some visual design. We need a Visual Designer to do that'. This confuses and bothers me. So, rather than have a weekly debate about it on Twitter, I thought I'd pen a few words here to make my point.</p> <p>I understand that you can design things without concerning yourself with colour, type and layout. And, yes, in a UX design process the tasks of product definition, wireframing, interviewing and a whole bunch of other techniques and tasks are done before anyone thinks about typography. But, honestly, I don't know a single <em>good</em> designer who would call themselves a visual designer, or what they do as 'Visual Design'. There is simply so much more going on that making something pink or blue, bevelled or shiny.</p> <p>Some people equate graphic design to visual design. You're dealing with the surface, with the look and the layout. Now, as a trained graphic designer, I don't think this could be further from the truth. The aesthetic aspects of graphic design are but one part of a whole bunch of necessary skills. To expand on that, here are somethings that I did whilst practicing as a graphic designer:</p> <ul> <li>Created paper prototypes of an encyclopedia</li> <li>Interviewed potential customers for a large retail organisation before working on the branding</li> <li>Audited and observed wayfinding pathways in a museum</li> <li>Worked alongside market research agencies</li> </ul> <p>Those aren't the tasks of someone who just makes things pretty. And here's the thing: understanding, talking to and observing your audience is a <em>fundamental</em> part of graphic design research. In fact, it's the first thing they teach you about communication theory: what are you trying to say, and who are you trying to say it to.</p> <p>So, you see, graphic design is not Visual Design. And given that the look of something –- in my mind at least -- can't be considered holistically without the feel of it, or the <em>use</em> of it, then how can Visual Design be separated as not only a step in a process, but as a job title? Good graphic designers concern themselves with the What, the Who, and the How. The message, the audience and the mechanics. Which is what we do on the web.</p> <p>If you feel the need to call it something, can we call it what it's always been called? Let's just call it graphic design.</p> CERN 2011-08-02T00:00:00+00:00 <p>As of a couple of weeks ago, <a href="">Mark Boulton Design</a> -- together with Content Strategist, <a href="">Relly Annett-Baker</a> of <a href="">Supernice Studios</a> -- have been tasked with redesigning CERN's public-facing website, and the organisation's intranet. Most importantly, we're helping CERN tell the right story. We're helping the scientists and researchers at CERN (all thirty thousand of them) do their job better by providing better organisation of their internal online tools. We're also helping with a branding project to make sure the brand is represented cohesively across the many thousands of user websites. </p> <p>It's a dream project. Seriously.</p> <p>The <strong>European Organisation for Nuclear Research</strong> is based in a hap-hazard collection of buildings just outside of Geneva, Switzerland. In French, The European Organisation for Nuclear Research is known as Organisation Européenne pour la Recherche Nucléaire, or just simply <a href="">CERN</a>. Yes. That CERN.</p> <p>Just after the second world war, several scientists from a bunch of countries (the so-called Founding Member States) got together to form an organisation to progress nuclear research. Over the years, many other countries joined the founding member states with a view to moving beyond study of the nucleus of an atom to that of high-energy particle physics. </p> <h3>The birth of the web</h3> <p>In 1989, Tim Berners-Lee was working at CERN and needed a simple way for sharing information between researchers. The very first website created using this system is still <a href="">online</a>. Incidently, have a look at the markup (semantically, it's as clean as a whistle). CERN is where the web was born. And I'm a web designer. And CERN is where it was born. Talk about geek-dream come true.</p> <h3>CERN's culture</h3> <p>CERN is a collaboration. A culture of sharing, debate, discussion. We need to work in and amongst that community. We need to get to know them, how they work, how they think, who has a loud voice, who is influential, who are the key drivers of change. And so the list goes on. As such, we'll be approaching this project openly. We'll be working <em>with</em> the community in CERN rather than providing them with something. </p> <p>I'll be speaking at CERN in September about Designing for Community, and sharing some of my thoughts about designing for two very different open source communities. There will be tales of woe, intrigue, victory – but above all – a story of how, together, people make amazing things.</p> <h3>Our Job</h3> <p>It may just be likely that in the near future an announcement will come out of CERN that will fundamentally change our understanding of the universe. That's an important story to tell. Not only that, but it's an important story for CERN to tell to the right people, in the right way. </p> <p>We're so excited to have the opportunity to work with some of the smartest people on the planet. To be working on a website that will communicate such rich and valuable stories from recent human scientific endeavours is both exhilarating and terrifying. And, to boot, we'll be working on the project openly within the CERN community of scientists and staff. As I mentioned, the culture of CERN is one that we simply couldn't do the 'designer locks themselves in a room for three months' type of project. We need their help every step of the way, and we'll be sharing our work as we go. </p> <p>Like I said; terrifying. But, I keep telling myself, if you don't wake up and feel slightly scared about your life, it means you're in a rut. Feeling scared is about risk. And risk is what keeps us moving forward. </p> <p>Out of the comfort-zone and around a 17 mile collider at nearly the speed of light.</p> Wanted: Web Designer 2011-07-22T00:00:00+00:00 <p>It's funny to think that 5 years ago, I left the BBC to pursue a freelance career and have, quite literally, spent every day since scared to death. Today, <a href="">Mark Boulton Design</a> is going from strength to strength. Thankfully. </p> <p>We've built a great team, a great working environment and approach to our work. We're also incredibly lucky to be working with some amazing clients: from global news organisations, to pan-European scientific organisations, to open source communities and a global sports brand. The work is varied, and we think – in our small way – we're making a difference. But, most importantly perhaps, we love what we do. Ok, enough gushing; you get the picture.</p> <p>Today, we announced we're looking for another <a href="">Web Designer</a> to join our team. I can promise interesting work, smart clients, talented colleagues and the option of drinking your own body weight in tea or coffee daily. </p> <p>Interested? </p> The difference between a Trend and a Shift 2011-06-20T00:00:00+00:00 <p>Back in 2003, when I first got wind of Web Standards, I was working at the BBC in Cardiff. I read <a href="">Jeffrey's book</a> and followed the excited writings of <a href="">Doug</a>, <a href="">Dan</a> and <a href="">Dave</a>. The web was electric with promise of a new direction. And all the while, I was working with some developers who questioned my excitement with new Web Standards pathway that was being laid before my eyes:</p> <blockquote>Why do you want to do that?</blockquote> <blockquote>Table are better, because Tables WORK!</blockquote> <blockquote>We can't change, this is the better way because we can be sure the website will behave in the same way on all browsers.</blockquote> <blockquote>CSS isn't for layout, it's for changing the colour of things. </blockquote> <blockquote>Web Standards is a trend. </blockquote> <p>And so it went. Week after week. Month after month. Until some big sites were launched that made people sit up and take notice. The Wired redesign, EPSN and the PGA site. yes, all the while, there were the naysays. The people who refused to accept that Web Standards was an acceptable way forward and, overall, a Good Thing. This is happening today with <a href="">Responsive Web Design</a>. Although, we're seeing it at a faster rate and, as a result, there's a lot of nuances that are perhaps not being addressed in the advocacy of this approach. </p> <p>Let's start at the beginning...</p> <p>Last year, <a href="">Ethan</a> wrote an important piece on A List Apart called <a href="">Responsive Web Design</a>. It detailed the combination of a few techniques he'd previously written about under one 'approach'. Then, in Seattle in March of last year at <a href="">An Event Apart</a>, that approach was combined in a 'Perfect Storm' of presentations from most of the speakers; a collective understanding that we need to move things along in a particular direction.</p> <p>A few people have been advocating this approach over the past eighteen months, myself included. To me, Responsive Web Design is a set of techniques that serve to solve a bigger problem that I've been exploring for two years: <a href="">Content Out not Canvas In</a>. I'm excited about Responsive Web Design as an approach, as it helps me frame some of my thinking into practical implementation. Flexible grids, images and media queries give me some of the tools to let me create what's inside my head. But, that doesn't mean it's for everyone, or for every project.</p> <p>Let's skip back to today...</p> <p>This morning I got wind of a blog post from <a href="">Luke Jones</a> about his frustrations with the implementation of the collection of Responsive Web Design techniques. I share some of his frustration. But, just like with Web Standards before it, we need to go through this period of discovery. Pushing boundaries and breaking them is a vital piece of the design puzzle and we're very lucky, in this industry, to be able to do this type of experimentation (you know, without anyone dying or anything). However, the interesting part of this post is the ensuing comment discussion (95 and counting at publication of this post). it's clear to see that there is an awful lot of confused designers out there trying to work out if this thing is valuable and should we use it. Let me just cherry pick a couple of comments:</p> <blockquote>That's the thing, I'm not saying it looks bad I'm just saying what's the point? I haven't seen a valid reason for changes in browser widths affected how a website is displayed. <a href="">Luke Jones</a></blockquote> <blockquote>"That it changes at all is a red mark against usability, the user loads the page, the expectation as to the structure of that page is set. " <a href="">Stuart Frisby</a></blockquote> <blockquote>Users (me especially) do not want to see a site change when resizing the browser.<a href="">Luke Jones</a></blockquote> <p>This <a href="">final comment</a> from Luke actually encapsulates the problems: <blockquote>I think that's exactly it: there is overkill and inappropriate usage going on with the new technique. I honestly think the only people who notice a lot of the responsiveness are people like us, which makes it a waste of time.</blockquote> </p><p>I agree with this. But, that's ok. Responsive Web Design is <strong>REALLY NEW</strong> and NOBODY knows how to do it properly/right/appropriately yet! We're all just experimenting. And <strong>THAT'S FINE!</strong></p> <p>If the approach is deemed to be <em>appropriate</em>, then there is no reason why it can't be done. If people do it on their own blogs, because they want to experiment, then that's fine. It really is.</p> <p><em>We're all just trying to work this out. </em></p> <p>Like it or not, web design is maturing to a state of recognising the importance of content, presenting that content in different contexts that are appropriate for the users of those websites and applications. We're also challenging web design practice that has been around for 15 years or so, and graphic and typographic design practice that has been around for close to a 1000 years!</p> <p>This will continue to hurt. And when Responsive Web Design matures, something else will come along that will challenge us again. And that's how we grow. That's how we move this thing forward. </p> <p>Just as Web Standards was a shift in how we create websites, Responsive Web Design is part of another shift. It may be a little trendy at the moment, as people grapple with how to use it, but quickly – together with other things like Content Strategy, and the One Web, and Mobile First etc. - it will become another tool in this shift to a better, 'Content Out' web.</p> Saying No 2011-06-10T00:00:00+00:00 <p>Over on the <a href="">Five Simple Steps blog</a>, <a href="">Alex Morris</a> (our User Experience Design Director at Mark Boulton Design) has <a href="">posted a piece</a> on why we don't give away free multi-format books, and why producing good quality eBooks takes time.</p> <p>Deep within this post is one line that pretty much sums up the ethos behind what we should all be doing as designers and business owners: </p> <blockquote>Saying no is an important thing for any company that cares about their products.</blockquote> <p>We say 'no' every day. In fact, more than we say 'yes'. Saying no:</p> <ul class="bulletlist"> <li>is a place to begin constructive discussion</li> <li>gives you the power to retain your integrity</li> <li>generally leads to things being better (products, your sanity, your design work, your clients, your projects)</li> <li>gives you balance in your life</li> </ul> <p>Everybody wants to please other people. Even now, I struggle with saying no. I'm too generous with my time. Too eager to please my family, friends, clients and customers. Everytime I say 'yes', when I'd rather say 'no', is<strong> time away from myself</strong>. And, if you're like me, time to yourself is what keeps you sane.</p> <p>So, do yourself a favour. Say no.</p> Welcome Nathan and Colin 2011-04-26T00:00:00+00:00 <p>I don't often talk about work on this blog, but today is the exception. We're enjoying a particularly busy time at <a href="">Mark Boulton Design</a>. We're working on some great projects for some fantastically great clients – from major global sport and news organisations, to open source content management systems. We're so busy, in fact, we need more people. In February this year, we advertised for a designer and an Apprentice web designer. We got a lot of interest in both positions which is great.</p> <h3>Welcome Nathan</h3> <a href="!/nathan_ford">Nathan Ford</a> wrote to me a couple of weeks after advertising the position. Nathan currently works at <a href="">Unit Interactive</a>, alongside none other than <a href="">Andy Rutledge</a>. Andy and I have exchanged emails over the years. I read his blog, he reads mine. We both started small design studios at around about the same time. I've got a lot of time for Andy, and knew straight away that anyone who's been working for him for three years will be something pretty special. <p>As it happens, I've known of Nathan for a while too. I've read articles he's published, follow him on Dribbble and <a href="!/nathan_ford">Twitter</a>. I like what he has to say and the work he produces. We're also thrilled he's taking the opportunity to move to the UK with his wife and work with us in South Wales.</p> <p>Exciting times ahead, and I can't wait. Welcome Nathan!</p> <h3>Welcome Colin</h3> When we announced the Apprenticeship position at Mark Boulton Design, it caused a bit of a ripple in our small industry. Fed up with the idea of internships, we wanted to commit to someone. We wanted to educate throughout a fixed two year contract, where the apprentice would be working on real projects from day one. Projects that matter to us. Projects that we hope will matter to them. <p>Well, from the that first tweet, we got a lot of responses. In fact, we had about 50 from as far away as Alice Springs in Australia, and as close as Cardiff.</p> <p>In the end – and it was a very close thing – <a href="!/alt_aesthetics">Colin Kersley</a> got the job. Here's a photograph of one of his 'hand-written application':</p> <p><a href="" rel="attachment wp-att-1419"><img src="" alt="" title="colin_1" width="700" height="937" class="alignnone size-full wp-image-1419"></a></p> <p>He's smart, funny, creative, hungry, and a damn good illustrator. We're very happy to have him on board. Welcome Colin!</p> <p>With Colin and Nathan starting at Mark Boulton Design I'm fulfilling a bit of a dream that I had for the company when I first started. We're growing a team of some of the best talent the industry has to offer, and also committing and giving back to the local community.</p> A sneaky peek: Codex 2011-04-26T00:00:00+00:00 <p>Over the past week or so, I've had the absolute pleasure of having a sneaky peek at an upcoming typography journal that promises to blow your mind. Created by typographic tour-de-force, John Boardley – of <a href="">I Love Typography fame</a> – and my good friend, <a href="">Carolyn Wood</a> (Editor-in-Chief), <a href="">Codex</a> is nothing short of incredible. Firstly, let me tell you this: it is stunning. Beautifully crafted; both in prose and design. This is more than a journal, it's a work of art.</p> <p></p> <p><a href="" rel="attachment wp-att-1408"><img src="" alt="Codex spread" title="codex-v67a-all-with_notes" width="500" height="349" class="alignnone size-full wp-image-1408"></a></p> <p><a href="" rel="attachment wp-att-1407"><img src="" alt="Codex drop caps spread" title="codex-v67a-all-with_notes2" width="500" height="695" class="alignnone size-full wp-image-1407"></a></p> <p>In their own words:</p> <blockquote><p>"Codex is a hybrid of magazine and journal. Beautifully designed, visually appealing, an immersive experience with a lively voice, it is also serious about its subject: authoritative, scholarly at times, but not dry in tone. It’s serious, but not stuffy. It loves the people, tools, and type associated with this craft, from the man carving beautiful cherubim into wood blocks in the 1400s to brilliantly formed modern interpretations and departures. It embraces the web and is watchful for the future’s classics."</p></blockquote> <p>As a member of the <a href="">International Society of Typographic Designers</a>, I receive their journal on an annual basis. The content is engaging, deeply respectful of the craft, its roots and future direction. If there's one criticism I have, is that the journal has yet to provide me with any worthwhile content about typography on the web. Typography is a craft that permeates so many design disciplines, and there needs to be a regularly published journal that covers that breadth. Codex promises to do that, and so much more. I for one can't wait.</p> <p><a href="">The website opens tomorrow for pre-orders</a>. Do yourself a favour, order one.</p> A Richer Canvas 2011-03-24T00:00:00+00:00 <p>In 1927, <a href="">Jan Tschichold</a> published his seminal manifesto: <a href="">Die neue Typographie</a>. As with all manifestos, it's a work of vision, new ways we should think; a work of unwavering principles on how we should design printed material. Abandonment of serif typefaces aside, one of the guiding principles was pointed out to me by my university lecturer regarding designing the perfect layout:</p> <blockquote>‘‘Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life.’</blockquote> <p>The methods and rules Mr Tschichold is talking about are realised in <a href="">Canons of Page Construction</a>. Geometric systems that create beautiful text for books. Text that belongs. Text that feel connected to the physical form in a binding manner that should make it invisible. It's about comfort. Creating a comfortable, invisible reading experience.</p> <p>Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection. But with all paper-based design, they start with paper. Paper that has edges, ratios that can be repeated. A canvas. And here's the thing. Creating layouts on the web has to be different because <em>there are no edges</em>. There are no 'pages'. We've made them up.</p> <h3>A richer canvas</h3> If we take that basic desire of creating layout systems: binding content for a comfortable (read: native) experience. On the web, we have to abandon this notion of a page. Let's look at this practically. To design a layout system for a website we now have to consider: <ol> <li>Screen resolution ranging from 2560px wide and above, down to 300px wide and less and, quite literally, everything in between.</li> <li>Different devices all with potentially different pixel densities.</li> <li>Context and usage. We have mobile, tablet, laptop, desktop, TV, fridge, car... etc.</li> </ol> <p>To my mind, it's becoming increasingly unrealistic to impose a best-fit 'page' when the variables are so far-reaching and are only getting more so. This isn't going to get any simpler anytime soon, folks. It's my belief that in order to embrace designing native layouts for the web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and <em>create layouts from the content out.</em></p> <h3>Content out</h3> Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid. In book design, that constraint is defined by the page through subdivision. Book designers take the page, divide it up into a modular grid of spaces. These spaces (called modules) are then combined to create rows and columns. These are then filled with content (images and text). The text feels like it belongs because the columns are related to the physical object: the page. <p>How should we do it on the web? Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don't start from an imaginary page.</p> <h3>Think responsively</h3> <a href="">Ethan's</a> superb <a href="">article</a>, <a href="">talks</a> and <a href="">upcoming book</a> have given us the tools to make this approach a reality. We can now design effective adaptive layouts that respond to their environment. If these layouts are based on a system that defines its ratios from the content, then there is connectedness on two levels: connectedness to the device, and connectedness to the content. The layout isn't just 12 columns because that's what my CSS framework gave me to use. <h3>The time is now</h3> The conditions are right. <p>With Responsive Design, CSS3 &amp; browsers, we have the tools. Thanks to people like <a href="">Kristina Halvorson</a> and <a href="">Relly Annett-Baker</a> and all the other content strategists out there, we're taking content by the scruff of the neck and we're able to determine what is knowable much earlier in the design process. Above all, we have the desire and the ability to re-write the rules that have matured over literally centuries of graphic and book design practice.</p> <p>Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They're holding us back.</p> <p><em>Start designing from the content out, rather than the canvas in.</em></p> <p>For those who may want a little bit more than this rather high-level blog post, I'll speaking about this very topic - with plenty of practical application - in my upcoming talk at <a href="">An Event Apart in Boston</a> in May, and <a href="">my book</a> which will be out this summer.</p> <p>Oh, and incidently, the blog post is in response to <a href="">Chris Shifleft's</a> call for more blog posts. His <a href="">Ideas of March</a> post has already prompted many people to blog more than they could ever do through Twitter. I too pledge to blog more in 2011 than I did last year. Promise.</p> The Icon Handbook by Jon Hicks 2011-02-24T00:00:00+00:00 <p>It is with great pleasure that, today, after much discussion, I can announce that <a href="">Five Simple Steps</a> will be publishing The Icon Handbook by <a href="">Jon Hicks</a> later this year.</p> <p>Icon design is hard. I find it one of the most challenging aspects of our craft. It's a complex process with a fair degree of magic involved. But with all Five Simple Steps titles, our aim is to break down the 'magic' and complexity into something that is practical. Something you can do today, even if it's just a simple technique.</p> <p><a href="">Jon's work</a> is everywhere in my dock. The Firefox logo, Shopify, Silverback, Thunderbird, Mailchimp. The list goes on. I couldn't think of anyone more suitable to explain to us all how he creates such beautiful and distinctive work. We know this book means a lot to him. He's thought a lot about it for many years now, and finally, he's at a place where he wants to write it and we're thrilled he's chosen us to help him create a beautifully designed and produced book.</p> <p>More details will be forthcoming on when it will be available and what will be covered, please <a href="">follow Five Simple Steps on Twitter</a> to keep up to date with where we're up to.</p> <p>Excited? I can barely contain myself!</p> Want to be our Apprentice? 2011-02-16T00:00:00+00:00 <p>Today, the small design agency I run announced our plans to <a href="">hire a Web Design Apprentice</a>. It's something that has been in my mind for ages now, but we've finally had the time to work out exactly what the role will be, how this person will work with us, and how, after 2 years we can make you into a web designer.</p> <h3>Why an Apprentice?</h3> Internships are the norm in our industry. I did it, and it was mostly great. But the thing is; it didn't pay well and I was only there for a few months. At which point, I was only just learning the ropes and finding my feet in the company. Then it was time to move on. <p>As is natural in a busy studio environment, dedicating the time to an intern is challenging. They're there to learn, sure, but there is typically no program of learning with an outcome. You're there to soak it up. Whatever <em>it</em> is.</p> <p>An Apprentice is something completely different. It's a commitment to teach and nurture you over a given period of time. You'll also be earning as you learn. It's providing web design education in a way that is supportive and fair, but most of all: industry-relevant.</p> <h3>Are you our Apprentice?</h3> If you're reading this thinking 'I'd love to do that', then I want to hear from you. <a href="">Pop over to the page on Mark Boulton Design</a> and read the application details very carefully. The Making of Tron: Legacy 2011-01-04T00:00:00+00:00 <p>I've not seen the film yet, but judging from this short video, it looks visually stunning:</p> <iframe src="" width="100%" height="50%" frameborder="0"></iframe><p><a href="">The Making of Tron: Legacy</a> from <a href="">Michael Keane</a> on <a href="">Vimeo</a>.</p> Two Thousand and Ten 2011-01-01T00:00:00+00:00 <p>For the last couple of years, I hadn't really bothered summarising the year on this blog. Which is a real shame, actually, because now I kind of don't remember what happened in detail – only the big moments. So, this post is really just a reminder for me of what happened with me this year so in later years, I can look back all wistfully and what I can look forward to next year...</p> <h3>January</h3> The start of the year got off to a typically hectic start. Mark Boulton Design were knee deep in a big design and technical project working with – the then development release – of Drupal 7. Leisa Reichelt and I announced our little side project on trying to make Drupal 6 (and eventually 7) a nicer place for content creators and administrators: <a href="">Project Verity</a>. There was snow and ice. For the first time in nearly ten years of living by the coast, Emma, Alys and I were snowed in. It was Emma's birthday. Nick (my brother) and I cook a Thai feast for eight guests. It was fun. <h3>February</h3> Went snowboarding to Chamonix with family. No new snow in a week. Cold and icy. Not so great for snowboarders. Malarkey and I sat in an old pub and discussed an idea that came to fruition later in the year. <h3>March</h3> Attended the best web conference in Seattle. <a href="">An Event Apart</a> was astoundingly good. Released my <a href="">book online, for free.</a> <h3>April</h3> Alys' 2nd birthday. How time flies. <h3>May</h3> My birthday. Three more years and I'll be 40. <h3>June</h3> Went on a short break with the family. I spoke at <a href="">@Media Web Directions on Designing Grid Systems</a>. Five Simple Steps turns the dial up and launches <a href="">A Practical Guide to Information Architecture by Donna Spencer</a>. <h3>July</h3> Emma and I spend a child-free couple of days in Amsterdam thanks to my parents. <h3>August</h3> Five Simple Steps is in launch mode as we publish Brian Suda's <a href="">A Practical Guide to Designing with Data</a>. Speak at <a href="">DrupalCon Copenhagen</a>. <h3>September</h3> Went on holiday to Portugal. Attended my brother's wedding in Portugal. Gave a workshop at <a href="">dConstruct</a> in Brighton. <h3>October</h3> Spoke at <a href="">Webdagene</a> on Designing Grid Systems. Ate raw whale sushimi. It was amazing. Spoke at <a href="">Web Developer's Conference</a> about clients. Launched <a href="">Hardboiled Web Design</a> by Andy Clarke. It was a big hit. <h3>November</h3> Attended <a href="">Build</a> in Belfast. The conference, like last year, was a special little event with a great community. I'll be back again next year. Thought I was going to die in a plane crash on the return from Belfast. Three failed attempts to land with a diversion to Birmingham. Went to Portugal to work on my book. Procrastinated and redesigned this blog. <h3>December</h3> Together with <a href="">24 Ways</a>, launched The Annual – a limited edition, printed magazine - and raised over £10,000 for UNICEF. <p>Next year is looking great. I'm honoured to be speaking at <a href="">New Adventures</a>, <a href="">DrupalCon Chicago</a> and <a href="">An Event Apart</a> in Boston. I'm publishing my second book on <a href="">Designing Grid Systems</a>. We're working on some great projects at Mark Boulton Design for some wonderful clients. Five Simple Steps has a couple of big projects in the works next year. Once again, it's looking busy. And I wouldn't have it any other way.</p> <p>As always, I have a few personal goals for 2011:<br> Make yoga part of my day<br> Lose weight and get in shape<br> Delegate my work<br> Do more designing, less managing.<br> Do less designing, more living.<br> Support my family the best I can.</p> <p>I'd like to wish all of you a happy new year.</p> 24 Ways Annual: The Cover 2010-12-10T00:00:00+00:00 <p>Ever since <a href="">Migy</a> emailed me -- about 3 years ago now -- i've been looking for the right opportunity for us to work together. When we were hatching the plan to do a <a href="">24 Ways Annual</a>, in the back of my mind, I knew it would be great for Migy to do the cover. After a week or so of working on it, I'm delighted to show it off here. I'm sure you'll agree, it's <em>beautiful</em>.</p> <p><a href=""><img src="" alt="24 Ways Annual Cover" title="24 Ways Annual Cover"></a></p> <p>Migy will also be providing us with some illustration work for the rest of the Annual to make the author's pieces the best they can possibly look.</p> <p>We're trying to raise £10,000 for UNICEF. With the help of <a href="">VPS.NET</a> and <a href="">Remy Sharp</a> – who are kindly sponsoring the printing and other costs -- we've only £6000 more to go by the end of December. With your help, I'm sure we can do it. Go on, <a href="">treat yourself to a copy</a>.</p> Five Simple Workshops 2010-12-08T00:00:00+00:00 <p>A couple of weeks ago, the small indie publisher I'm a co-founder of announced <a href="">some workshops</a> we're running in January 2011. Three days of intensely practical learning in London.</p> <p><a href="" rel="attachment wp-att-1097"><img src="" alt="Five Simple Workshops" title="Five Simple Workshops"></a></p> <p>This is your chance to go beyond the books of <a href="">Donna Spencer</a>'s 'A Practical Guide to Information Architecture' with a full day workshop, or <a href="">Brian Suda</a>'s 'Designing with Data' for a half day of visualising data.</p> <p>Upcoming authors, <a href="">Leisa Reichelt</a> and <a href="">Relly Annett-Baker</a> will also be running half-day workshops on 'Strategic UX' and 'Words and pictures: Copy and the design process' respectively.</p> <p>Oh, and I'll be airing some of the material from my new upcoming book on Grid Systems in another half day workshop.</p> <p>If you fancy coming make sure you <a href="">book now</a> before the Early Bird tickets run out.</p> The 24 Ways 2010 Annual 2010-12-01T00:00:00+00:00 <p><a href="">24 Ways</a> (to impress your friends) is something us webby types look forward to every year. This web advent calendar, as they say in TV and Radio, is an 'appointment to view'. This year is no different, but, together with <a href="">Five Simple Steps</a>, <a href="">Drew</a> and <a href="">Brian</a> have been working on something that'll keep you entertained for just that little bit longer.</p> <p>At <a href="">dConstruct</a> in September this year, I sat down with Brian, Drew and <a href="">Rachel</a> and we hatched a little idea of doing something special this year for 24 ways. Making something permanent. An opportunity to make some money for charity too. Today sees the launch of <a href="">The 24 Ways Annual 2010</a>. A limited edition, beautiful printed annual with all proceeds of sales going to <a href="">UNICEF</a> *.</p> <p>What I love about this is that we have a genuine opportunity to do some good in the world. We're aiming to sell 5000 copies of this. If we do, and we manage to snag a sponsor who is willing to foot the bill for the print costs, that means we donate £37,500 to UNICEF (that's about $58,000). That's enough to do some serious good for children across the world who are a lot less fortunate than ours.</p> <p><strong>The Annual is only going to be on sale throughout December</strong>. We stop selling it on the last day of December. Then we print the copies we've sold. That's it. No more. It's strictly limited edition. So, what can you expect? Well...</p> <ul> <li>24 Superb articles, beautifully designed and typeset.</li> <li>Superb cover and supporting illustrations by <a href="">Migy.</a></li> <li>Bespoke packaging.</li> <li>About 80 pages printed full colour on uncoated recycled paper.</li> <li>A nice warm glow as you contribute to UNICEF.</li> <li>We begin shipping late January 2011</li> </ul> <p>We're so thrilled to be involved in this with the guys at 24 Ways. We thrilled to part of the 24 Ways annual rollercoaster and, for us, today is only the start. But, oh, we're looking forward to it.</p> <ul> <li>All the proceeds will go to UNICEF if we secure sponsorship for the print run and additional costs. If you're reading this and want to know more, then head over to <a href="">Five Simple Steps</a> and download the sponsorship pack.</li> </ul> New design 2010-11-29T00:00:00+00:00 <p>Last week, I spent a productive week near <a href=",+Portugal&sll=37.0625,-95.677068&sspn=34.534108,66.09375&ie=UTF8&hq=&hnear=Lagos,+Faro,+Portugal&z=10">Lagos, Portugal</a>, finishing my upcoming book. As part of this book, I've spent time working on a canon of page construction for websites –- a set of guidelines for aesthetically pleasing layouts -- and this blog design is built using those rules.</p> <h3>What's wrong with the previous design?</h3> Nothing. As a design exercise -- using just Georgia and emulating letterpress books –- it was a good one. The drop caps that I had commissioned where great (and not going to waste, incidently. I have other plans for those). But, the single page homepage view was restrictive. It was forcing me into writing articles rather than blog posts as every post had to be worthy of just one page. A multiple view of blog posts just didn't work with the design. All of this added up to a redesign. Plus, the opportunity to tie it into some of the thinking i've been doing with book was too much of an opportunity. <h3>A case for design exploration</h3> This blog is a place for me to experiment. For me to post things I like, or want to reference. To write about all manner of stuff that interests me. Over the past couple of years, my blog hasn't felt my own, to a degree. It's felt like I've been writing for an audience, posting stuff for others rather than myself. That's arse-backwards. A blog should be about personal expression. The moment you start thinking, and writing, to please others then it's a bind; it feels less like a personal exercise and more of a job. That's what happened, and actually, that leads me onto the next point... <h3>What no comments?</h3> Nope. No comments. I think, by and large, the time has past whereby comment threads provide useful discourse. Twitter's now the place where people directly talk to me. I may turn comments on for the odd post, but they'll mostly be off. <h3>Tumblr-esque</h3> I did toy with the idea of ditching Wordpress altogether and heading over to Tumblr as the software modelled pretty much exactly how I wanted to start blogging again. But after a period of trying to fathom out the best approach, I thought I'd stick with Wordpress and use <a href="">Feedwordpress</a> to pull in my <a href="">Delicious</a> bookmarks. This means, as I'm browsing, I can quickly fire off a link to Delicious, tag it, add a description and it'll appear here. <p>So, that's about it. Nothing spectacular. A touch of <a href="">responsive design</a> thrown in, the outstanding <a href="">HTML5 Boilerplate</a>, <a href="">Elliot's</a> <a href="">Starkers theme</a> and a wee bit of <a href="">Typekit</a>. It's probably bust in a few places, and it's just bare bones in others. But, it's start.</p> Write 2010-11-28T00:00:00+00:00 <p>On A List Apart Saving the Spark: Developing Creative Ideas For most of us, ideas have to be squeezed out of us every day. To stand up to this challenge, you need to arm yourself with some good tools. Whitespace Sometimes, as in web design, it’s difficult to add whitespace because of content requirements. Newspapers often deal with this by setting their body content in a light typeface with plenty of whitespace within and around the characters. On Vitamin Looking At Type Have you ever been somewhere where you couldn’t speak the local language? Surrounded by signage, newspapers, shop fronts – everywhere you look there are letters, but you don’t understand what they mean. It’s even worse if they’re not Roman characters.A couple of years ago, on my honeymoon in Thailand, I was astounded by the myriad of typographic design styles. Not only was it a language I didn’t understand, the letterforms, to my eye, were little more than squiggles. Yet somehow I was often able to understand the meaning of some signs. How? Good typography, that’s how.</p> Speak 2010-11-28T00:00:00+00:00 <p>I speak at conferences and events all over the place on topics that I write about. Here’s a list of what’s coming up, and also previous events with links to slides, photos and other relevant material. Upcoming Events @Media June 8th, 2010 London, UK Webdagene September 29th, 2010 Oslo, Norway Past events 2009 Build Designing for the Web Workshops: London Designing for the Web Workshops: Manchester Web Directions SouthSydney, Australia Accessibility 2.0London, UK Drupal­con, ParisParis, France @media 09, London, UK Future of Web Design 09, London, UK: MP3 recording, Video, Slides Bath University 09, Bath, UK Drupalcon DC 09, Washington DC, USA 2008 Iceweb 08, Reyjkavik, Iceland Bloc conference 08, Llandudno, Wales, UK Cardiff Web Scene 08, Cardiff, Wales, UK Drupalcon Szeged 08, Szeged, Hungary 2007 Web 2.0 Expo 07, Berlin, Germany @media 07, London, UK SXSW 07, Austin, TX, USA 2006 SXSW 06, Austin, TX, USA Port 80 06, Perth, Australia</p> About 2010-11-28T00:00:00+00:00 <p>Me, me, me. I’m a graphic designer living in South Wales, UK with my wife and daughter. I currently run a small design studio, Mark Boulton Design, where we work with clients such as ESPN, Warner Bros, BBC, British Energy and Drupal. In the past, I worked for the BBC and <a href=""></a> designing wonderful experiences for all manner of clients and people across the world. I also run a small publishing imprint, Five Simple Steps, where we publish practical design books for the web community. About this site I’ve used many, many free and open source, or low-priced content management systems and blog software over the years. This site–once upon a time–started out a custom PHP thing I’d cobbled together. It quickly changed to Movable Type before finally settling on Expression Engine in 2005. Now, four years later, I thought it was time to review what was out there that would best suit my needs. With my relationship with Drupal, that was always going to be a contender. Expression Engine was like some comfortable, old slippers. But, Wordpress was whispering sweet nothings in my ear all the while. You see, this site is now just a blog. before, I had…</p> Zeroing the desk 2010-10-03T00:00:00+00:00 <p>I've been meaning to redesign my blog for a little while. Not because I don't like the previous design (far from it, in fact), but because I need a place of design expression, not just a place of written expression. This blog is my place to do what I like just for the sake of it. Last week, Brendan Dawes inspired me to zero my desk - a term used to describe what a sound engineer does to the mixing desk at the end of the day. Everything goes to neutral. That's what I'm doing.</p> <p>Normal service will be resumed in the 'morning'.</p> On defining UX 2010-09-06T00:00:00+00:00 <p>Well, what a week that was. Off the back of a wonderful <a href="">dConstruct</a> came a timely discussion (either well-timed, or ill-timed depending on your point of view) between <a href="">Ryan Carson</a> and the UX community (rebuttals from <a href="">Andy Budd</a> and <a href="">Cennydd Bowles</a>).</p> <p>As usual, it's polarised opinion. But now - a few days later - more thoughtful discussion is beginning to take place.</p> <p>It all started with one tweet:</p> <blockquote><p>UX Professional' is a bullshit job title. It's just a way to over-charge naive clients. All web designers should be UX pros <br><cite><a href=""></a></cite></p></blockquote> <p>Admittedly, I think Ryan's timing was a little off given <a href="">Clearleft</a> had just advertised they were looking to <a href="">hire a Senior UX Designer</a>. That said, this discussion does continue to bubble up the surface every now and then. Last year, I tweeted:</p> <blockquote><p>Since when did good web design suddenly get called 'UX'? Everywhere I look now, good UI design is called 'UX', good type = 'UX', Colour? UX.<br><cite><a href=""></a></cite></p></blockquote> <p><a href="">Jeremy</a> followed it up stating why he doesn't care about UX:</p> <blockquote><p>If someone claims to be a web designer but isn’t considering the user experience, they are deluding themselves. UX, like accessibility, should be a given, not a differentiating factor. And that’s why I don’t care about UX. <br><cite><a href=""></a></cite></p></blockquote> <p>I think this is what Ryan was getting at. In fact, it was confirmed in an update to a post over at <a href="">Think Vitamin</a>:</p> <blockquote><p>I still strongly believe that if the lead web designer on a project needs someone who specializes in UX because they don’t have a good understanding of solid UX principles, then they shouldn’t call themselves a web designer. Web Design and UX are not two separate disciplines, and UX is not something you add to a project because you have a large budget.</p></blockquote> <p>I don't agree with the first bit. I fall in that category of designer; I work with UX professionals every day. Researchers, Information Architects, Interaction &amp; UX Designers. And I get UX. I work with other people to provide a better service to my clients. I'm not an information architect. And, if you've ever worked with a good one, on a project that <em>required</em> it, then you'd probably agree with me. <strong>Understanding the principles of something can in no way replace an experienced professional.</strong></p> <p>To me, this is a discussion of semantics. Let me explain my point of view.</p> <p>UX is a few things:</p> <ul class="bulletlist"> <li><em>It's an overarching principle and practice of web design.</em> ie. you should design for your user's experience and that should just be part of what you do. </li><li><em>It's a profession</em>. Information architects, interaction designers, researchers, academics. They are all UX professionals and not necessarily involved in the broad process, but are a cog in the machine. </li><li><em>A buzzword</em>. Like many things that started out new in this industry, the practitioners promote it, differentiate themselves, this gains traction with clients and then the term is popularised and diluted. As <a href="">Cennydd says</a>, this worries some people as it undermines their value and expertise. Incidently, as I recall, this happened to 'graphic design' in the 80's, 'web design' in the late 90's and now it's happening to UX. In <a href="">some industries</a>, it's why professional bodies are put in place. To ensure a level of professional association with a term given to both someone's job <em>and</em> an industry. </li></ul> <p>What we're seeing is a maturing of a term that represents different things. It represents something different for our clients, to the web industry as a whole and to the subset of professionals who have been practicing user experience design for the past 20 years.</p> <p>Just like the debate about <a href="">whether designers should be able to write HTML</a>, this discussion is just not as black and white as everyone is making out. There's a whole lot of grey in there.</p> Designing from one end to the other 2010-07-29T00:00:00+00:00 <p>A little over a year ago, we published <a href="">my first book</a> with <a href="">Five Simple Steps</a>. A small ripple in the publishing industry, but a large splash for us. From that single tentative toe in the water, we've gone and dipped our whole leg in with the production of six upcoming titles - ranging from Andy Clarke's <a href="">Hardboiled Web Design</a> to Brian Suda's <a href="">Designing with Data</a>.</p> <p>Today sees the shipping of <a href="">Donna Spencer's 'A Practical Guide to Information Architecture'</a>, and its prompted me write a little bit about how the work we did a year ago is now starting to pay off.</p> <p><a href="" rel="attachment wp-att-910"><img src="" alt="Donna Spencer's 'A Practical Guide to Information Architecture'" title="IA" width="545" height="400" class="aligncenter size-large wp-image-910"></a></p> <p class="caption">Donna Spencer's 'A Practical Guide to Information Architecture'</p> <h3>Designing from one end to the other</h3> <p>I've said before one of the reasons I wanted to publish my own books was because of wanting to control the process; from editing through to design and production. As time has gone on I've realised that the thing I get a kick out of is being able to control - well, actually, have an influence over - is the entire customer experience; from the moment they look at the website to buy the book, right through until they receive it in the mail. Being able to make that journey consistently is incredibly challenging as elements within the production chain are always trying to take control away from you. Let me give you an example; packaging and fulfilment.</p> <p>There are many packaging and fulfilment companies across the world. They exist to help large and small companies deal with shipping goods without the headache of having to store, process, package and mail out the stock. They do it all for you and you pay for the square footage of warehouse space you use, together with a per order fulfilled charge. All good. One thing is common amongst most large fulfilment companies, however. They generally like to use their own packaging. Using your own is more costly for them - so much so, some just won't entertain the thought.</p> <p>The Five Simple Steps books come in a bespoke box designed to withstand a fair bit of knocking about. You see, due to the slightly heavier paper stock, these books weigh in at 1kg each. That's a fair weight to be dropped onto its corner. The packaging also had to look attractive. We wanted to create some kind of unboxing experience - receiving and opening these books should be another step along that experience journey. It's not the end of the line. This got us thinking a lot more about the customer journey with us.</p> <p><a href="" rel="attachment wp-att-912"><img src="" alt="" title="two_fss_books" width="545" height="800" class="aligncenter size-large wp-image-912"></a></p> <p class="caption">Five Simple Steps packaging. At 1kg each, these books aren't light.</p> <p>This is roughly the journey customers take:</p> <h4>Initial contact</h4> <p>How did the customer come into contact with the book? Was it a referral or reference. Word of mouth? Google? Twitter? You need to understand where they came from and why? How can you make that first impression a memorable one, because those first impressions count.</p> <h4>Evaluation</h4> <p>Is this produce for me. Will this book make me a better designer/developer/IA/project manager? How does this book relate to me and my life?</p> <h4>Decision</h4> <p>How much does it cost? Is it worth it? </p> <h4>Form filling</h4> <p>Nobody, nobody, nobody likes filling in forms. They're always difficult and riddled with potential errors. How can you make it not just easy, but pleasurable? Well, sometimes just being easy is pleasurable enough.</p> <h4>Fulfilment</h4> <p>Now I've parted with my cash, what happens? Do I receive an email? When? Are my books being shipped? When? </p> <h4>The waiting</h4> <p>How do I know what is going on? Is my order just sitting on a shelf somewhere?</p> <h4>Receiving and Unboxing</h4> <p>Receiving packages is always exciting. It's not the hardest thing in the world to make pleasurable. But, with some careful attention paid to packaging, labelling, language and materials and you can make opening a box more delightful than using the thing inside. Just look at Apple.</p> <h4>The digestion</h4> <p>The story doesn't end with receiving the book. Does it deliver on what you promised? If not, how does the customer go about changing that? </p> <p>Of course, what I'm describing here is the process that's been around as long as mail order has. It's not rocket science, but it's so, so easy to get wrong. We've only just begun on this path and, to be frank, there hasn't been a week goes by that we haven't learnt something or screwed up in some way. But regardless of the pain and frustration a customer may experience, there are some things you can put in place to help them forget. Again, a sideways glance at Apple.</p> <h3>Spikes Of Joy</h3> <p>When I describe this to potential clients, I talk about 'Spikes of Joy' - those tiny moments that bring a smile to your face. If you're listening to music, it's the moments when you feel a wave of joy; when the right notes combine to create a physical reaction. The same approach can be applied to design of all sorts. It certainly applies to web design, but I'm not talking about web design here, but something more akin to <a href="">Service Design</a>. Throughout the Five Simple Steps customer journey, we want to create spikes of joy. Small moments of pleasure. Surprises. Care and attention. Love. And, you know what? It's really, really difficult.</p> <p>Making something with care and attention is easy. That will always shine through in a product. Authenticity, truth and love is always easy to spot too. If product designers and manufacturers care - every step of the journey - you, as a customer, will be very satisfied at the end of that journey. BUT, it does not mean there will be moments of pleasure along the way. Sure, it may go without a hitch, but you could experience it with a complete straight face. What's hard is connecting the mundane purchasing journey with moments of human pleasure. That's difficult to do. </p> <h3>Books and Joy</h3> <p>I've always deeply loved books. I trained to be a book designer. I love their form, their smell and the knowledge they hold. Making books joyful things isn't too hard. Making purchasing books is. How do you make that process more than enjoyable? How do you create spikes of joy?</p> <p>I'd love to know what ideas you may have.</p> Something's afoot 2010-07-01T00:00:00+00:00 <p>I've just updated to Wordpress 3.0 without a problem (which was nice, and actually made a nice change). Why? Well, things are a changing here. I've got itchy feet and all this talk of <a href="">responsive web design</a> has got me all excited about possibilities again.</p> <p>Stay tuned.</p> The book I wish I'd read ten years ago 2010-06-28T00:00:00+00:00 <p>A few weeks ago, <a href="">Five Simple Steps</a> - the small, indi publisher I'm a co-founder of - released our second title; <a href="">A Practical Guide to Information Architecture</a> by <a href="">Donna Spencer</a>. <a href="">Derek Featherstone</a>, who wrote a wonderful foreword for Donna, summarised his feelings in one closing sentence:</p> <blockquote><p>This is the book that I needed 10 years ago.</p></blockquote> <p>I completely agree with him. And here's why: this book makes you feel like an information architect. It makes you feel empowered with a sense of clarity and purpose that you can bring to your projects. No other IA book I've read made me feel like that.</p> <p>I think I first came across the term IA in about 1999. I'd just started working for <a href=""></a> in London and was partnered with a guy (sorry, I forget his name now), who 'used to be a designer', but was now an 'IA'. I really did learn a lot from him directly. I learnt that Information Architecture can be a slow, tedious practice. It's often about making hard decisions and arming yourself with the <em>facts</em> before you do. I learnt that it was vital in a project, but perhaps most importantly, I learnt that good IA is not a quest for perfection. It's about getting in there, making mistakes and then iterating.</p> <h3>Getting your hands dirty</h3> Every year in the UK, there is a horticultural show in Chelsea; the <a href="">RHS Chelsea Flower Show</a>. The BBC, as always, does a stirling job at <a href="">covering the event</a> over the course of about a week. As you'd expect, there are a bunch of well-known faces presenting the proceedings, my favourite being <a href="">Christine Walkden</a> - an energetic, passionate gardener with a wonderful turn of phrase. This year - whilst sitting on a park bench, discussing the difference between garden designers and gardeners with Alan Titchmarsh - she said something that will stick with me a long while: <blockquote><p>You have to spend some time with grit under your fingernails</p></blockquote> <p>This phrase really stuck with me. There really is no substitute for getting stuck in, making mistakes, learning from them and then trying it all again. To get stuck in, you need to have the confidence to do so. And that's what Donna's book will give you; the confidence to spend some time with grit under your fingernails.</p> <p><a href="">A Practical Guide to Information Architecture</a> is available to <a href="">buy now</a> as a downloadable PDF, ePub and preorder paperback from Five Simple Steps from as little as £12.</p> Back to reading feeds 2010-05-09T00:00:00+00:00 <p>A month ago, I travelled to Seattle for <a href="">An Event Apart</a> and got myself an iPad. A month in, and up until this morning, it hadn't really changed the way I interact with the web. This morning, I bought NetNewsWire for the iPad, and I think it's going to make me read blogs again.</p> <p>Like many people, over the past couple of years, i've relied on Twitter to provide me with links to blog posts from people I follow. It worked well for a while, but when you live on a diet of 100 characters or so, you get get thin, jittery and unhappy. For a long time, I've been unhappy with the way Twitter has altered my content consuming behaviour. I'm hoping that by having a device that won't multitask (for now, I think this is a feature, not a bug), and provide me with daily feeds in an almost newspaper-like format, will get me back to reading long-form again.</p> <p>Oh, and this was posted using the Wordpress app on said iPad. Maybe I'll start blogging more again. You never know, pigs might fly.</p> Timeboxing Triage 2010-04-28T00:00:00+00:00 <p>For quite a while now, I've been struggling with how to cope with everything on my plate at work. I run a <a href="">small business</a>, starting a <a href="">new publishing business</a>, I'm an art director, project manager, sales director. And so the list goes on. And I know I'm not alone, we're all busy, right? We're all pulled in every which way.</p> <p>Thing is, I have a couple of designers and developers here who <em>need</em> my help every day. They need to run things by me, get feedback on work, resolve issues. And so the list goes on. What I was struggling with was the interruption to my flow. It meant that, quite often, I'd end a day feeling I hadn't accomplished anything other than fight other people's fires. Of course this is the wrong way to think about things, and I was actually <em>doing my job</em> by doing all that. But I still needed to apply more structure to this activity, so that I could have available time to spend on designing and all the other stuff.</p> <p>So, a couple of weeks ago, Emma introduced the idea of a bi-daily 30 minute triage. This is time for everyone to have a bunch of things they want to go through with me. At 10am and 2pm everyday, I keep that time free and available for whoever needs me. And, so far, it's working a treat.</p> <p>There we have it: timeboxed triage. Give it a go.</p> Designing for the Web. On the Web. 2010-03-18T00:00:00+00:00 <p>Last week, after a lot of thought and a heap of work, we released my book, <a href="">Designing for the Web</a>, online. For free. It was only published a year ago, so why release it so soon? Well, I tried to answer it several times in 140 characters, but it's never enough is it?</p> <p>There seems to be a history - with a few notable exceptions - of publishing book content online only after it has lost its relevancy, recency, or often, both. As an author, this bothers me; particularly for a book about web design. However, as a small publisher I can of course understand why this is the case. When the book no longer pulls in large sale numbers, or more importantly, when it is deemed 'out of date', or 'no longer as relevant as it once was', then the motivation for publishing online, for free, is to get a firm grip of the <a href="">Long Tail</a> in search of new sales. Makes sense.</p> <p>But I want my book to be relevant. I wanted to increase the reach, and lower the barriers to one sector of the industry that is underserved by this business model: students.</p> <p>I get a lot of email from students asking for education discounts, advice, tips on how to get into the industry and a plethora of other subjects. But the largest complaint we've had on Designing for the Web is the cost for students. I remember being a student (and 15 years ago in the UK, students had it easier than they do now). I remember being handed a book list as long as my arm on my first week in University. My first thought: how the hell am I going to afford this? Then you're forced to prioritise on a list you know nothing about. Which books do you buy, when you could buy food? Or beer? It's a tough choice.</p> <p>We pride ourselves on creating a beautiful, substantial products for <a href="">Five Simple Steps</a>. It's why other authors have asked to write with us. We're not prepared to compromise on that quality to lower costs for a broader reach; there are plenty of other publishers who do that. We're focussed on creating a great physical product and a PDF version that is equally considered. When you're buying our books, you buy the whole experience, not just the words.</p> <p>Anyway, where was I? Oh yes, the <a href="">online version</a>. So, the idea was that we'd launch the book online to serve that audience who prefers to read their content online, or those who arguably were most in need of this book, but had hard decisions to make on how they spend their money. I wanted to retain the relevance and recency of the content. I just wanted to give a bit back. Maybe all this <a href="">working in Open Source</a> is getting to me.</p> <p>It's worth noting that we might not be doing this for every title, as it's very much an Author's decision. In that respect, this is a little unique as I'm both Publisher and Author. I'll be posting another post this week about the upcoming titles we have planned for the next 12 months. Some very exciting titles planned (including the rather late Grid Systems title of my own).</p> On Designers writing HTML 2010-01-17T00:00:00+00:00 <p>Every once in a while, this little debate bubbles up the surface, then dies back down again, only to surface again with more vigour. Today was one of those days, and the debate was:</p> <p><em>Should web designers be able to write HTML?</em></p> <p>I'm being very specific about that. I'm not saying, 'should designers be able to code' - that's a completely different thing. I'm also not saying, 'should good designers write their own code'. Subtle, but important, distinctions. Regardless, today was one of those days. In may well have been sparked by <a href="">Elliot's</a> inflammatory <a href="">tweet</a>. The discussions carried on for a little while, and the blog posts have <a href="">started arriving on the subject</a>, this one included.</p> <p>I dipped in and out of the discussions today. There's only so much you can say in 140 characters, and explaining the nuances of opinion is tricky to do on Twitter at the best of times, so I thought I'd pen my opinions here. You know, as it's my blog and everything.</p> <p>I think the answer is: It depends.</p> <h3>What is web design, anyway?</h3> <p>There are well-articulated arguments on both sides of this. From <a href="">Andy's</a> and Meagan's musings on <a href="">designing in the browser</a> , to <a href="">Mike's short, practical tips</a>. Given these points of view, it's very difficult to disagree.</p> <p>Of course, sometimes, it makes sense to design in the browser. You can't do that if you can't write HTML. Of course, it helps understand the very building blocks of the web (from a designer's perspective, anyway). It's saves you time and money. It can help you realise your designs the way you intended.</p> <p>But, and here's the thing, we're talking about a tiny aspect of web design here. We talking about implementation. Making something work in a browser is only part of what web design is.</p> <h3>Understanding the medium</h3> <p>I hear this a lot when people talk about HTML. 'You need to be able to code to understand the medium'. Sorry, but that's bullshit. HTML is not the medium. At all.</p> <p>Let's look, for a moment, at Television. TV is a mature broadcast medium. Good telly is not about pixels, or how the they get sent from one place to another. Good TV is about storytelling, engagement, audience, interaction and a whole lot more. The medium isn't defined by the practicalities of <em>production</em> - although of course, it is a part of it - it is defined by the people watching it. Why they need, what they look forward to, what they spend their valuable time engaging with.</p> <p>The same is for Radio. Good radio makes the technology disappear (note: so does TV, but you just watch 3D TV fall on its arse later this year - it'll be like betamax all over again). Great radio is a wonderful thing. But it's not about radio waves, it's about people. The medium of radio is defined by the all of the things that defines TV. The differences being the technology, the mode of engagement and the audience. Not a whole lot more.</p> <p>Perhaps it's because the web is a relatively new medium is why we're struggling with this as designers. The medium of the web, as far as I see it, is only partly defined by technology (HTML being a small part of that). It's defined by people, by stories, by products. There's just <em>so</em> much in there that by saying you have to be able write HTML to design for the medium is really undervaluing the other areas of the craft. A designer who is a fantastic writer, with a flair for typography - and an understanding of concepts such as semantics and document structure - is no less of a designer just because they can't write HTML.</p> <h3>Shades of grey</h3> <p>I guess the upshot to this is that I think that there are shades of grey. Modern web design covers so many areas of specialism - from HCI and IA through to Illustration and dabbling with Javascript. To deem it necessary to write HTML to be a good web designer is really quite disrespectful to experts in those subsets of web design who never go near any HTML, yet have equal value to bring to a design project.</p> <p>So, for me, it's not a case of 'yes' or 'no'. More like 'it depends'. It depends on the project, the team, the individual. This upsets me, because I'm kind of a black and white kind of bloke. Never been a fan of grey, but honestly, that's all I'm seeing here.</p> Announcing Project Verity 2010-01-08T00:00:00+00:00 <p>As you may know, <a href="">Leisa Reichelt</a> and I have been working for the past year or so with the Drupal community; first on the redesign of <a href=""></a>, then the <a href="">User Experience</a> project for Drupal 7. Since then, I've been using Drupal more and more. <a href="">My company</a> has hired two Drupal developers, we use Drupal 6 every day to build new sites and applications for ourselves and for our clients. Throughout all of this work, there is one thing lacking: Drupal does not do a great job at providing an admin for content creators.</p> <p>During the D7UX project, we defined two personas: <a href="">Verity and Jeremy</a>. Let's focus on Verity for a moment. Verity is a content creator. She's not a developer. She doesn't care how Drupal works, she doesn't need to know Drupal terminology. All she needs to do is manage her content. Then she leaves work and goes home to do other things. Verity needs the admin of Drupal to help her do her daily job. Currently, Drupal doesn't do a great job of that. That's where Project Verity comes in.</p> <p>Project Verity launched today. Leisa and the team at Mark Boulton Design are teaming up to design a paid/premium admin theme for Drupal 6 designed to make you look good and your clients feel great. From the <a href="">Project Verity</a> site:</p> <blockquote><p>The Verity Theme (a paid/premium admin theme for Drupal 6) will allow you to hand over a website backend that you can feel proud of, that has a great User Experience and that continues the great design experience you’ve created for the front end through to your clients experience of managing the website. You develop the site in whatever theme you like, then when you’re done developing, switch to the Verity theme to create a user experience specifically designed for content creators like Verity.</p></blockquote> <p>I'm very excited about this little project.</p> <p>We're designing in the open -- as we did with the two other previous Drupal related projects. We're doing this at the blog at <a href="">Project Verity</a>, and you can keep up to date by following the Twitter account: <a href=""></a></p> <p>For more information about Verity, read <a href="">today's announcement</a> and find out <a href="">if Project Verity is for you</a>.</p> New Drop Caps 2009-11-02T00:00:00+00:00 <p>When I redesigned this blog a little while ago, the drop caps I used were always going to be a placeholder. Following an evening with my Sister-in-law--who happens to be a textile designer/illustrator by training--I commissioned her to produce a complete uppercase alphabet based on Georgia. I'm thrilled that two months later, they're live on the site. (if you're reading this on RSS, then pop on to the web to see what you're missing).</p> <p>The brief was pretty simple. I wanted illustrative drop caps produced that were aligned to the inspiration for this design; namely Renaissance illustrations and carvings. They ended up being slightly broader in inspiration than that though. They're hand painted on thick, textured cartridge paper in black ink.</p> <p>I planned on interviewing Helen (and I still plan on doing that), but I just couldn't sit on my hands until then. Here's a few letters that are particular favourites of mine. Interview coming soon...</p> <img src="" alt="Drop cap G" title="Drop cap G" width="420" height="420" class="aligncenter size-full wp-image-874"> <img src="" alt="Drop cap S" title="Drop cap S" width="420" height="420" class="aligncenter size-full wp-image-873"> <img src="" alt="Drop cap h" title="Drop cap h" width="420" height="420" class="aligncenter size-full wp-image-872"> <img src="" alt="Drop cap o" title="Drop cap o" width="420" height="420" class="aligncenter size-full wp-image-871"> A Pumpkin Mask 2009-10-30T00:00:00+00:00 <p>For all those, like me, who lack some serious knife skills when it comes to creating a scary pumpkin face for the impending Halloween festivities tomorrow, <a href="">here's a simple mask you can download</a>, print out and stick on a pumpkin. It's an .eps file, so you should just be able to open it in any image viewer and scale it to the size of your pumpkin. I'm informed that one size does not fit all.</p> <img src="" alt="pumpkin_mask" title="pumpkin_mask" width="420" height="292" class="aligncenter size-full wp-image-835"> <p>Thanks must go to my brother's mate, Gaz Wrafter, who quickly got this together for us. Thanks Gaz!</p> <p>Oh, and watch your fingers!</p> Web Directions & Typographic Structure 2009-10-18T00:00:00+00:00 <p>Last week I presented at <a href="" alt="Web Directions South 2009">Web Directions South 09</a> here in Sydney, Australia on Font Embedding and Typography. It's a talk I gave at <a href="">@media 09</a> in London over the summer. I enjoyed giving the presentation - despite AV problems which resulted in a ten minute reduction in time allowed and having to give the presentation without notes. But the show went on.</p> <p>But despite that single hitch, Web Directions was quite possibly the best web conference I've been to. I was congratulating John and Maxine at a speakers BBQ on the Sunday following the conference, and it became evident it was down to their undying attention to <em>every, single little detail</em>, from the moment you register to the food you are served (which was excellent by the way). But the lasting memory for me was the buzz of the Australian web industry. It was very refreshing to visit a country not in recession and see an industry thriving on creativity rather than suffocating beneath a blanket of uncertainty.</p> <p>But anyway, before this turns into a rant about politics, back to the presentation...</p> <p>This was not a practical presentation full of hints and tips or a presentation about fonts. Or font embedding. Even though I touched on these two subjects briefly, this was a talk about <em>typographic design</em> and all of the aspects of the craft that I find important and how I relate to them in particular to this medium.</p> <p>A core part of the presentation describes my understanding of typographic design and why font choice is only one of nine aspects that need to be considered when designing with type on the web. This is the third model of typographic design I've been working through now, and not only is it sticking, but as I'm beginning to explain it to other people, I'm not having to change it too much. It has almost passed the mother-in-law test. For me, it's working as a way to explain what I do and I'd like to share it to get your thoughts.</p> <h3>Typographic Structure</h3> Typographic design, as I understand it, involves nine elements: <h4>Language</h4> Language is entwined with typography. Type can be defined as the display and arrangement of language. As designers, we should care about this. <h4>Typesetting</h4> Typesetting is the process of taking raw text and marking it up. Making headings, lists, emphasised text etc. <h4>Grid</h4> The typographic grid is a foundation upon which layouts can be built. <h4>Hierarchy</h4> Conceptually, content has levels of importance. Typographically, <em>Hierarchy</em> visualises this. <h4>Font</h4> The font used to display the content. <h4>Rhythm</h4> How the arrangement and layout of the type aids reading. <h4>Layout</h4> Combining type with other graphic elements such as photographs, illustrations, video or other UI elements. <h4>Colour</h4> Colour, when discussed in typographic terms, can mean two things: red, green, blue etc. or dark or light typographic colour. Dark typographic colour is dense type--tight leading or line height, tight whitespace. Light typographic colour is the opposite. <h4>Content</h4> One of the unfortunate things on the web is that, generally, we're designing not knowing what the content is. We have an idea of what the content might be, but when dealing with content management systems and the flow of data, it's very difficult to know. But content is an important part of typographic design and this connection is one of the casualties of the web standards mantra of separating content and presentation. When we do that, it's very difficult to tell stories with design. <p>Here's a diagram:</p> <img src="" alt="Typographic Structure" title="Typographic Structure" width="570" height="333" class="aligncenter size-full wp-image-823"> <p>As you can see, your choice of font only plays a small part in the overall typographic considerations. Of course, on the web, we've had our choices here limited to the point of almost removing the element of choice. And don't forget that a number of these elements are also completely in the hands of the user to change at their will.</p> <p>My point is this: <strong>font choice is only part of what makes good typographic design.</strong> The limitations that have been imposed on us--with only a hand full of fonts guaranteed on user's machines--have nurtured fairly good typographic craft on the web. Generally, we care about the content; we mark it up with the correct intended hierarchy; some us care about typesetting ampersands, or bulleted lists. I'm not sure that the same level of care and attention is employed by some of our print cousins (and I say this having spent quite a few years on that side of the fence). Why is this? Well, designers are like magpies; we get distracted by the shiny.</p> <p>When I was in university, I sent off for every type specimen sheet I could get my hands on. I pestered everyone from Monotype to Emigré. Receiving the canvas bags stuffed with font supplements from T26 was certainly a highlight of my first year. Why? Well, firstly, type supplements are normally <em>beautiful things</em>. They didn't necessarily make me look at type any differently, but they made me want to <em>collect</em> type. I'm sure that mindset isn't that rare in anyone who cares about type, but it's a mindset that leads to a shallow understanding of the broader craft. You get distracted by the next beautiful typeface. You're constantly on the search for the typeface that is <em>just right</em>.</p> <p>Font choice is not the most important decision you make when designing with type. On the web, currently, it is way down on the list because of the constraints of the medium. With commercial font embedding just around the corner, we stand on the edge of an incredibly exciting time for the typographic web. In eighteen months time, I think the web will be starting to look very different. And about time too, but let's not get distracted by the shiny.</p> A roundup of speaking 2009-10-04T00:00:00+00:00 <p>This year has been a pretty full-on year so far on the speaking front. What, with one thing another, I haven't been linking them up. My bad. So, if you'll indulge me, over the course of the next few days or so, I'll be writing about them, posting links to the presentations in Slideshare. At least from what I can remember.</p> <p>This post will act as a kind of index for the speaking i've done this year, but I'll also link things up on my brand new '<a href="">speaking</a>' page.</p> Articles 2009-08-31T00:00:00+00:00 <div class="post"> <h3>On <a href="">A List Apart</a></h3> <dl> <dt><a href="">Saving the Spark: Developing Creative Ideas</a></dt> <dd>For most of us, ideas have to be squeezed out of us every day. To stand up to this challenge, you need to arm yourself with some good tools.</dd> <dt><a href="">Whitespace</a></dt> <dd>Sometimes, as in web design, it’s difficult to add whitespace because of content requirements. Newspapers often deal with this by setting their body content in a light typeface with plenty of whitespace within and around the characters.</dd> </dl> </div> <div class="post"> <h3>On <a href="">Vitamin</a></h3> <dl> <dt><a href="">Looking At Type</a></dt> <dd>Have you ever been somewhere where you couldn’t speak the local language? Surrounded by signage, newspapers, shop fronts - everywhere you look there are letters, but you don’t understand what they mean. It’s even worse if they’re not Roman characters.A couple of years ago, on my honeymoon in Thailand, I was astounded by the myriad of typographic design styles. Not only was it a language I didn’t understand, the letterforms, to my eye, were little more than squiggles. Yet somehow I was often able to understand the meaning of some signs. How? Good typography, that’s how.</dd> <dt><a href=",%20Engage%20Your%20Brain%3C/a%3E%3C/dt%3E%3Cdd%3EMany%20designers%20don%E2%80%99t%20think%20about%20the%20code%20behind%20the%20sites%20they%20design.%20This%20is%20a%20huge%20problem%20because%20it%20slows%20web%20projects%20down,%20which%20costs%20money.%20The%20good%20news%20is%20designers%20don%E2%80%99t%20need%20to%20learn%20code;%20they%20just%20need%20to%20change%20the%20way%20they%20think.%3C/dd%3E%3C/dl%3E%3C/div%3E%3Cdiv%20class=" post"=""> <h3>On <a href="">Web 2.0 Journal</a></h3> <dl> <dt><a href="">Designing for Web 2.0: "It Will Be About People"</a></dt> </dl> </a></dt></dl></div> <div class="post"> <h3><a href="">Print media CSS: The Guardian example</a></h3> <p><img src="" title="{title}" alt="{title}" width="150" height="111" class="thumb">Print media stylesheets are rarely used by text-heavy websites to present their content in the best possible way for when users press the print button. </p> <p> This example of The Guardian uses a rebuilt web standards template to present the existing design for the screen. The print media stylesheet however presents the content more inline with the Guardian newspaper rather than the website. </p> <p> <a href="">View the example</a> or see the <a href="">related article </a>in the Journal. </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Print media CSS: The Guardian example" dc:identifier="" dc:subject="Examples" dc:description="&lt;img src="/images/uploads/finishedprintout_thumb2.jpg" title="{title}" alt="{title}" width="150" height="111" class="thumb" /&gt;Print media stylesheets are rarely used by text-heavy websites to present their content in the best possible way for when users press the print button. This example of The Guardian uses a rebuilt web standards template to present the existing design for the screen. The print media stylesheet however presents the content more inline with the Guardian newspaper rather than the website.…" dc:creator="Mark Boulton" dc:date="2006-04-01 02:05:01 PM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Five Simple Steps to designing grid systems</a></h3> <p>This series of articles covers grid system design from easy two column grids for print publications to complex, ratio based, adaptive grid systems for modern web browsers. </p> <ol> <li><a href="">Subdividing ratios</a></li> <li><a href="">Ratios and complex grid systems</a></li> <li><a href="">Grid systems for web design: Part 1</a></li> <li><a href="">Grid systems for web design: Part 2 Fixed</a></li> <li><a href="">Grid systems for web design: Part 3 Fluid</a></li> </ol> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Five Simple Steps to designing grid systems" dc:identifier="" dc:subject="Article" dc:description="This series of articles covers grid system design from easy two column grids for print publications to complex, ratio based, adaptive grid systems for modern web browsers. &lt;ol&gt; &lt;li&gt;&lt;a href=""&gt;Subdividing ratios&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Ratios and complex grid systems&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Grid…" dc:creator="Mark Boulton" dc:date="2006-03-31 05:41:02 PM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Five Simple Steps to better typography</a></h3> <p>The first ‘Simple Steps’ series covering five simple ways to improve your typography. </p> <ol><li><a href="" title="Measure the measure">Measure the measure</a></li> <li><a href="" title="Hanging punctuation">Hanging punctuation</a></li> <li><a href="" title="Hanging punctuation">Ligatures</a></li> <li><a href="" title="Hanging punctuation">Typographic Hierarchy - size</a></li> <li><a href="">Typographic Hierarchy - weight</a></li> </ol> <br /> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Five Simple Steps to better typography" dc:identifier="" dc:subject="Article" dc:description="The first 'Simple Steps' series covering five simple ways to improve your typography. &lt;ol&gt;&lt;li&gt;&lt;a href="" title="Measure the measure"&gt;Measure the measure&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title="Hanging punctuation"&gt;Hanging punctuation&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""…" dc:creator="Mark Boulton" dc:date="2006-03-31 05:40:00 PM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Feeling your way around grids</a></h3> <p>Making sense of the Golden Section when designing grid systems. Originally published in <a href="">Design in Flight (April 2005)</a> </p> <p> For centuries there has been a link between art and mathematics, but how can you quantify beauty? How can you create a formula for aesthetic appeal? Philosophers, mathematicians, architects and artists have tried to answer these questions for thousands of years. </p> <p> During art college I was subjected to a lecture on the Golden Section (who remembers that lecture, come on hands up?), that ambiguous set of rectangles that is requisite art school discussion. During this lecture I was shown slide after slide of seemingly tenuous links between paintings and sculptures, and this set of rectangles. My lecturer at the time seemed as equally uninterested, droning along in self-imposed boredom. What he failed to convey at the time, has taken me over 15 years to even begin to understand. So what is the importance of these boring rectangles and how do they relate to design? </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Feeling your way around grids" dc:identifier="" dc:subject="Article" dc:description="Making sense of the Golden Section when designing grid systems. Originally published in &lt;a href=""&gt;Design in Flight (April 2005)&lt;/a&gt; For centuries there has been a link between art and mathematics, but how can you quantify beauty? How can you create a formula for aesthetic appeal? Philosophers, mathematicians, architects and artists have tried to answer these questions for thousands of years. During art college I was subjected to a lecture on the Golden…" dc:creator="Mark Boulton" dc:date="2006-03-29 10:24:00 AM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Design and the Divine Proportion</a></h3> <p>Many designers, whether traditionally schooled or not, have trouble with composition. I’ve sat with plenty of designers who simply moves things around until they feel ‘right’. </p> <p> Design is, in essence, communication (I know, I know, I rant about this enough, but this isn’t one of them) but the vehicle for communication is the design. One of the key components in the vehicle of communication is composition, and in design schooling it is something that is taught as something you should <strong>feel</strong> rather than <strong>create logically.</strong> This has always bothered me. </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Design and the Divine Proportion" dc:identifier="" dc:subject="Article" dc:description="Many designers, whether traditionally schooled or not, have trouble with composition. I've sat with plenty of designers who simply moves things around until they feel 'right'. Design is, in essence, communication (I know, I know, I rant about this enough, but this isn't one of them) but the vehicle for communication is the design. One of the key components in the vehicle of communication is composition, and in design schooling it is something that is taught as something you should &lt;strong&gt;feel&lt;/strong&gt;…" dc:creator="Mark Boulton" dc:date="2005-01-13 04:31:59 AM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Card Sorting - Part 1</a></h3> <p>Card Sorting is a user testing method for organising data into structure. There’s a lot of information about on what they are, how to conduct them. Problem is, they’re all over the place and mostly they’re written by scientists so tend to be a little difficult to grasp and bogged down in analysis (which can take over your life if you let it!) I’ve decided to document my understanding of how to plan, conduct and analyse a card sort, from a practitioners point of view. </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Card Sorting - Part 1" dc:identifier="" dc:subject="Article" dc:description="Card Sorting is a user testing method for organising data into structure. There's a lot of information about on what they are, how to conduct them. Problem is, they're all over the place and mostly they're written by scientists so tend to be a little difficult to grasp and bogged down in analysis (which can take over your life if you let it!) I've decided to document my understanding of how to plan, conduct and analyse a card sort, from a practitioners point of view." dc:creator="Mark Boulton" dc:date="2004-12-20 04:12:00 PM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Card sorting. Part 2 - Facilitation</a></h3> <p>Following on from part 1, you should now have everything ready to conduct your card sorts - cards, users, observers and most importantly a clear objective of what you want to achieve. </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Card sorting. Part 2 - Facilitation" dc:identifier="" dc:subject="Article" dc:description="Following on from part 1, you should now have everything ready to conduct your card sorts - cards, users, observers and most importantly a clear objective of what you want to achieve." dc:creator="Mark Boulton" dc:date="2004-12-20 02:09:00 PM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Card sorting. Part 3 - Analysis and reporting</a></h3> <p>In the final part of the article I talk about perhaps the most important part of the procedure - Analysis. This is the part in which you can get the most bogged down. You must be thorough, ruthless and accurate. </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Card sorting. Part 3 - Analysis and reporting" dc:identifier="" dc:subject="Article" dc:description="In the final part of the article I talk about perhaps the most important part of the procedure - Analysis. This is the part in which you can get the most bogged down. You must be thorough, ruthless and accurate." dc:creator="Mark Boulton" dc:date="2004-12-20 02:01:00 PM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">Why use a grid?</a></h3> <p>Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform - web, print & real 3d environments. </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="Why use a grid?" dc:identifier="" dc:subject="Article" dc:description="Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform - web, print & real 3d environments." dc:creator="Mark Boulton" dc:date="2004-12-15 10:30:58 AM GMT" /> <p>--&gt;</p> <div class="post"> <h3><a href="">The One 2 One story</a></h3> <p>Originally in the archives of this site. This article represents a body of development for the redesign of One 2 One’s web presence in 2001. The redesign revolved around multiple access from multiple platforms as well as integration of new mobile services. </p> </div> <!-- <rdf:RDF xmlns:rdf="" xmlns:trackback="" xmlns:dc=""> <rdf :Description rdf:about="" trackback:ping="" dc:title="The One 2 One story" dc:identifier="" dc:subject="Article" dc:description="Originally in the archives of this site. This article represents a body of development for the redesign of One 2 One's web presence in 2001. The redesign revolved around multiple access from multiple platforms as well as integration of new mobile services." dc:creator="Mark Boulton" dc:date="2004-12-14 10:03:02 AM GMT" /> <p>--&gt;</p> <!-- END #c1 --> <hr class="hide"> <!-- BEGIN #c2 --> <div id="c2"> <h3>Interviews and What-not</h3> <ul> <li><a href="">Unmatched Style</a></li> <li><a href="">Expression Engine</a></li> <li><a href="">Design Interviews</a></li> <li><a href="">Rob Goodlatte</a></li> </ul> </div> Design in Open Source 2009-08-30T00:00:00+00:00 <p>Since August last year, together with <a href="">Leisa Reichelt</a>, I've been involved in working with the <a href="">Drupal </a>community. Firstly, on the redesign of <a href=""></a>, and more recently, overhauling the user experience of the software itself. All of which was done openly, and in close partnership with the Drupal community. Recently, the question of the practice of good design (and by design, I mean the kind of design I do, not software design) has once again arisen in the open source community. From <a href="">Linux</a> to <a href="">Mozilla</a>, <a href="">Drupal</a> to <a href="">Wordpress</a>, this is a question that keeps bubbling to the surface.</p> <p>I've only recently been involved in open source through the Drupal project although I've been a member of many communities online, going back to 1995 or so, but none so passionate as the Drupal community. Honestly, it astounds me--almost daily--of the dedication and commitment many of the members of this community show to their project. But that's the positive side. It's understandable, then, with so much passion flying around, that there are frequent heated debates. I've had my fair share of these over the past year. One debate, admittedly instigated by me, happened on Thursday and has, once again, created ripples in the Drupal pond.</p> <!--more--> <h3>The Spark</h3> <p>It all started last Thursday morning. At <a href="">Mark Boulton Design</a>, we're finally getting around to redesigning the studio site, and we're using Drupal to do it. The whole team is hard at work, but probably none more so than our developer, <a href="">Tim</a>. As you do, first thing in the morning I was checking out the work been done to date and, typically, I was viewing source. Having been an advocate for Web Standards for so long, the semantic structure of a document matters to me. I didn't like what I saw, and I knew the cause: the html generated out of the box by a module called 'Views'. And, as you do when you're frustrated, I vented. On Twitter.</p> <p>This was the code I was venting about:</p> <pre id="line275"><<span>div</span><span> class</span>=<span>"views-row views-row-2 views-row-even"</span>> <<span>span</span><span> class</span>=<span>"views-field-title"</span>> <<span>a</span><span> href</span>=<span>"#"</span>>This is the titlea> span></pre> <pre id="line286"><<span>div</span><span> class</span>=<span>"views-field-teaser"</span>> <<span>div</span><span> class</span>=<span>"field-content"</span>>Example teaser content in here...div> div> div></pre> <p>This is the code automatically generated by views and it apparently looks this way because it has to cope with many different uses. If you ignore the classes for one second, I would have obviously preferred the html to look a little something like this for a header and a teaser.</p> <pre id="line286"><<span>div</span><span> class</span>=<span>"views-row views-row-2 views-row-even"</span>> <h2><<span>a</span><span> href</span>=<span>"#" </span>>This is the titlea></h2> <p>Example teaser content in here...</p> div></pre> <p>I was a little too soon to vent about this in relation to Views. It seems this argument/discussion has been going on for a long time. Everybody is bored with it. There are reasons the markup looks this way. And, as with all of Drupal, if you have the chops, you can override it all anyway. Some people thought I was attacking <a href="">Earl Miles</a>, the creator of Views. I wasn't (and hopefully that is now cleared up). My initial venting added fuel to the fire of a long-running debate that is still going pretty strong today: a wider discussion of design, and particularly the existence, and participation of, designers in the Drupal community.</p> <h3>Designers vs Developers</h3> <p>For a long, long time now, there has been friction between designers and developers. Back in heady days of the dot com boom, when I was working in a company in London, that division was strong and apparent. Over the years though, as designers working in this industry have moved beyond trying to make the web look, and behave, like print, this division has become much more grey. I'd say, in the past three or four years, I've personally not felt any division at all. Not until I started work on <a href="">d7ux</a>.</p> <p>Drupal 7 is the fruit of developer labour. And lots of it. For a designer to even enter the fray requires trust on behalf of the developer community. And buckets of the stuff. As one developer put it:</p> <blockquote><p>You've come into our front room, and, while we were making a cup of tea, you moved all the furniture around. Not only that, but you redecorated, changed the carpet, and removed all of our belongings.</p></blockquote> <p>When you put it like this, it's no wonder Leisa and I have been subject to some hostility along the way.</p> <p>On the back of our little fracas last week, <a href="">Earl penned a considered response</a> as to why he thinks there is a division in the Drupal community between designers and developers. He starts off by stating this observation:</p> <blockquote><p>In software, the roles of the designer and the developer are tiered. The developer writes the code and ultimately gets a piece of functionality, whatever it is, to work. In fact, the services of a designer are never <strong>required</strong> to make this code work. The fact that the services of a designer is <strong>a really good idea</strong> doesn't really come into this.</p></blockquote> <p>He goes on:</p> <blockquote><p>The converse, however, is not true. If a designer desires a particular piece of functionality, the services of a developer are <strong>required</strong>.</p></blockquote> <p>In any open source community that exists to further the development of a <em>software </em>product, this is of course, true. So, with that in mind, and a proposed source of designer/developer friction. What can we do about it? Is it possible to overcome this less-than-symbiotic relationship? I'm not sure it is, to be honest.</p> <h3>Participating vs Contributing</h3> <p>There are a couple of propositions that are regularly thrown at me as a designer working on and d7ux. The first is: 'Ah, but that won't work with contributed modules'. I call this the contrib grenade. It's normally thrown in when someone doesn't agree with your design direction and they're using the power of 'contribution' - the very life blood of open source - as ammunition for their argument. The second is: 'It's a do-ocrasy. Either contribute, or get out of the way.' And, in there lies the problem. At least as far as I see it.</p> <p>Designers can currently participate, but not contribute, to the Drupal community.</p> <p>Drupal is a software project. Like many other open source software projects, in order to contribute you have to understand the following:</p> <ul> <li>Usually the software language the thing is written in. In Drupal's case, PHP.</li> <li>The other software associated with the project. Eg. CVS.</li> <li>The process of contribution. In Drupal's case, the Issue Queue.</li> </ul> <p>To contribute, developers scratch their own itch. For designers to contribute, we have to find the same itchy developer, that has the same itch. The chances of this happening is pretty slim. To participate is different. Currently, in addition to my contributory work (which, I might add, is because I'm in a unique position), I participate. I'm sometimes in IRC. I've attended two Drupal conferences and will be at my third, in Paris, next week. This is participation. It's discussion. But, not contribution. In this do-ocrasy, I'm not doing. Because I can't. Because I don't know PHP, I don't know how to use CVS, and I don't think the Issue Queue sits well with the design process.</p> <p>That's just my take. At the moment. But what about open source as a whole. What about other designers?</p> <p>Back in January of 2008, <a href="">Chris Messina</a> <a href="">wrote</a>:</p> <blockquote><p>... I’d go so far as to wager that “open source design” is an oxymoron. Design is far too personal, and too subjective, to be given over to the whims and outrageous fancies of anyone with eyeballs in their head.</p></blockquote> <p>He goes on to say:</p> <blockquote><p>... Call me elitist in this one aspect, but with all due respect to <em>code artistes</em>, it’s quite clear whether a function computes or not; the same quantifiable measures simply do not exist for design and that critical lack of objective review means that design is a form of Art, and its execution should be treated as such.</p></blockquote> <p>Not sure I agree on that last point. But the art vs design argument is one I don't want to get into here. But I do agree with the first statement. At least for any aspect of visual design.</p> <h3>Great design requires a singular vision.</h3> <p>Now, when I say design, I mean the kind of design I do. Graphic design, Interaction design - all under the banner of UX. Web design. I think design requires a singular vision that can only really exist in a closed system. A system of control. A system where decisions and solutions are protected from dilution. It's no coincidence that many design classics are the result of the single vision of one individual. Of course, I include teams in this. Teams of designers can produce stunning work, but usually only under the instruction and guidance of a senior figure, with a vision. An art director. A creative director. Commercially, we're the fall guys if the design goes bad.</p> <p>So, where does this leave us with open systems like open source?</p> <p>Well, it leaves us as it has for years. In a place where good design, and good designers, are craved by many in the open source community. It leaves designers wanting to be involved but lacking the skills to do so. It leaves designers who have dipped our toe in the water wanting more, but clashing with the community as we grow in numbers. In my opinion, it leaves open source software lacking design vision. But, most importantly to me, it leaves this particular designer feeling a little sad.</p> <p>Is there any way forward? I think so, yes.</p> <p>For Drupal at least, I think there should be a team responsible for safe-guarding the user experience. Currently, that is, in part, done by the Drupal Usability team. They do a grand job, but I feel are lacking in one or two crucial areas. For one, they are all 'insiders'. Drupal needs people from outside of the walled garden to provide perspective. Secondly, Drupal needs more visual designers. Not 'themers' (the Drupal word for front end developers), but designers who can know their way around UI conventions, but also know how to set Palatino.</p> <p>And with that, I'm going to stop writing. The next few years are an exciting time to be involved in this particular corner of the web.</p> New shoes 2009-08-20T00:00:00+00:00 <p>I last redesigned my blog in 2006. Three years ago! I've looked at redesigning it for about two years now, so what got in the way?</p> <p>Well, we've been buzzing around working on all sorts of other projects at <a title="Mark Boulton Design" href="">Mark Boulton Design</a>, and that's kept me busy. It's been quite a journey and, rather than just writing a plain 'ol blog post about this, I thought it would be fun if I shared it all with you in this interview with my friend <a title="Pixelingo" href="">Carolyn Wood</a>.</p> <p><strong>CW: </strong><em>Let's talk about the status of <a title="Five Simple Steps" href="">5 Simple Steps</a>. I had an early, advisory role in the birth of your book, before the writing really got going. The next thing I knew, you'd become a publishing house. Share the juicy details with us! It's all very easy, right? ;)</em></p> <p><strong>MB: </strong>Yes. Piece of cake. Actually, I remember from those very early conversations we had, you mentioned the difficulties I could face when writing the book. I think I went through each one of them in turn: blind panic, sleepless nights, writer's block, more panic, too much to do... the list goes on. It was back in 2006, and I really, really needed some help just getting off the ground with it. I had five popular blog posts but wanted to make them into something more substantial. I had left the BBC, started my own business, Emma and I had our daughter, and we were in the midst of having builders add an extension on our house.</p> <p>All of that conspired against me a little. The dream of writing a book became somewhat of a foggy, festering cloud in the back of my mind. That's exactly why I needed someone to help me take those first steps. It was like someone learning to ride a bike. They're never perfect at first. They fall over, graze their knees. Do it again. Before you know it, they're off leaving you standing and waving. But without those first encouraging words and helping hand from you, they'd still be walking about instead of riding. And that's just what happened.</p> <!--more--> <p><strong>CW:</strong> <em>So, I waved you on and you dug in and really started writing.</em></p> <p><strong>MB:</strong> Yes, suddenly the project had momentum. I was inspired to write, but I was increasingly interested in seeing if this one book could become more, and the Five Simple Steps imprint was born. We (Mark Boulton Design) hired a designer with a strong editorial and publishing background who spent three months designing, typesetting, and producing the final book. As I wrote, we also started to do pretty much everything else in-house from editing and proofreading to distribution (both electronic and traditional fulfilment). We were driven to get it done and out there.</p> <div>We have fairly big plans for Five Simple Steps. During production of <em>Designing for the Web</em> and talking with other publishers, we discovered not only a gap in the market for books that provide clear, practical design guidance, but also an opportunity to publish and market books differently. Book distribution in the UK is basically controlled by two huge distributors. To be on their catalogue, you must have multiple titles, operate a minimum stock level in their warehouses, accept that they won't pay you for 60 days, and so forth. This makes it quite impossible to be a small publisher and have your books sold in Borders or Waterstones in the UK. We learned that distributors only pay publishers about half the cover price of the book—sometimes less! That means margins—once you factor in production, shipping, and storage costs—are massively squeezed before you've even started. The industry's system is broken for the small, independent publisher. So, we took things into our own hands. <p>We're learning as we go. Publishing itself is a creative process for us, too. We're professional, but we're indie publishers, too. We plan to be very flexible, perhaps even having a 'crewing' model for each book, bringing in a little help from different people outside of the team for each book, depending on its subject. We'll see—we haven't planned it all out yet.</p> <p>We've primarily used Twitter to announce offers, launch dates, etc. This was so successful that on the first day of the PDF launch, we sold over 1000 in 48 hours—but the server crashed, causing PayPal problems that took days to sort out! The printed book is only available as a limited edition (for now). We won't print endless supplies of these, as we just can't justify sitting on large amounts of stock, especially if we add more titles. Print on demand might be an option at some point. The process is exciting, complicated, scary, and rewarding, all at the same time. I heartily recommend that if you have an idea for a book, and have the people around to help you realise it—as well as an eager audience—there is little reason to go to a 'normal' publisher.</p> <p><strong>CW: </strong><em>Our lives intersected again at the beginning of the open source/open design <a title="Drupal" href="">Drupal</a> project, when I worked on the style guides. I admit I felt fortunate to be off in the corner in a limited role. You've been in the thick of things. What is the status of that project? Tell us: Is designing in the open more or less painful than sticking a fork in your eye?</em></p> <p><strong>MB: </strong>Designing in the open is <strong>more</strong> painful than sticking a fork in your eye, but it's also more productive and rewarding!</p> <p>Mark Boulton Design, <a title="Disambiguity - Leisa Reichelt" href="">Leisa Reichelt</a>, and you were initially asked to work on aspects of the redesign of <a href=""></a>, and <a title=" Phase One prototypes" href="">Phase One of that project</a> was completed last December. August to December were probably the most challenging months of my career.</p> <p>After our usual period of discovery, we launched headlong into a twelve-week iterative schedule with prototype releases, user testing, and evaluation, and a new design released every week. It was a killer schedule, but with that pace came great engagement from the Drupal community. During Phase One we'd done broad brushstrokes in terms of design, information architecture, branding, etc.</p> <p><strong>CW: </strong><em>What happens in Phase Two? I wish you the best with that! </em></p> <p>There's still much to be done: the copywriting and also more UX work—specifically documentation and many social aspects of the site. We simply ran out of time on most of this. However, as with Phase One, the majority of the work will be completed by the community, in the community. The biggest challenge has been to become comfortable with the fact that what we produce will be scrutinised, deconstructed, modified, and remodelled, all for the greater good. I'm still getting used to it!</p> <p><strong>CW:</strong><em>What prompted the complete redesign of your blog and your decisions along the way? </em></p> <p><strong>MB:</strong> Three years is a bloody long time in web design and in the personal growth of a designer. While I wanted the blog to be a reflection of the current quality of my work, I was even happier to break free from what people usually expect of me and create something that more accurately represents who I am as a designer.</p></div><p></p> <div>The catalyst came from a 'company away day' in Fonmon Castle—just down the coast from our studio in South Wales—during a daylong workshop in the castle's library. Adorning the walls were rows and rows of musty, seventeenth-century books. I resisted temptation for an hour or two, but  finally caved and started snapping shots of the most wonderful, letterpress-printed books. After that day, the blog design quickly took shape. <p>I started the process with a simple but challenging constraint: What can I do with Georgia? Just Georgia.</p> <p>With all the talk of font-embedding, I could have used one of the middleware products cropping up, such as <a title="Fontdeck" href="">Fontdeck</a> or <a title="Typekit" href="">Typekit</a>, along with some great custom typefaces. But, I wanted to really get to know Georgia—as well as I know Helvetica. So far, Georgia hasn't disappointed. It's a wonderful typeface. Generalising here, serif typefaces have more character than sans serif typefaces. Yet, Georgia manages to mold itself really well to the content. <a title="Wordpress" href=""></a>, <a title="Guardian Newspaper" href=""></a>, this site all use Georgia, but appear very different due to the varying weights and styles. I also wanted a different grid, a greater focus on writing, and a simpler layout designed for reading.</p> <p>Perhaps the biggest change isn't the design but the move from <a title="Expression Engine" href="">ExpressionEngine</a> to WordPress. I've used EE since 2005, continue to use it almost weekly, and still recommend it to clients for certain projects. I'm an advocate for using the best tool for the job. Whilst EE is a very competent blogging engine, lately I've felt it (and <a href="">Drupal</a>, as well) much more suited to content-managed websites for clients. If you have a blog, <a title="Wordpress" href="">Wordpress</a> is pretty hard to beat; it was the best tool for this job. That said, the redevelopment of this site hasn't been without its difficulties.</p> <p>Having used EE for so many years, I was used to its template-based theming approach, designed to neatly fit with a standards-based designer's mental models. HTML templates can be simply slotted into place. PHP is extracted and replaced with a simple tagging language to hook in the site's dynamic data.  Wordpress and Drupal could do with having a look at the strength of this because, to be honest, I feel a lot of designers will take one glance at the PHP in their theming systems and run a mile. EE still has this in the bag, in my opinion.</p> <p><strong>CW: </strong><em> Please give us a peek at the next book and other MBD projects.</em></p> <p><strong>MB:</strong> It's a busy time for us; here's a taste:</p> <ul> <li>We're working with some exciting clients. We're designing an app based on Adobe Air for a leading film studio. I can't talk about some work, but we're heads-down on projects like arts council-funded web apps and a major redesign for an ethics organisation.</li> <li>The <a title="Drupal 7 User Experience Project" href="">Drupal 7 UX project</a> is drawing to a close, and it's been a fascinating seven months' work. Drupal has great potential and I'm excited to help shape its future from a UX perspective and dedicated to continuing my involvement with the community.</li> <li>We're publishing two more titles this year. <a title="Designing Grid Systems" href=""><em>Designing Grid Systems</em></a> will be available this autumn, and <a title="Designing for the Invisible" href=""><em>Designing the Invisible</em></a> later this year, possibly early next. I've wanted to write the first one since 2006. I have tons of material to challenge current thinking in the web design community about subjects like grid systems, their appropriate use, and the advisability of using 16-column grids for website layouts.</li> <li>We're ramping up to run probably three workshops in three cities in the UK in November and December. They'll be based on the book: practical design advice that people can immediately apply to their work.</li> <li>I'll be doing more speaking too, which I love. I'll speak at the wonderful <a title="Web Directions" href="">Web Directions South</a> in Sydney, Australia in October on font embedding and CSS. In November, I'm speaking in Belfast at the <a title="Build Conference" href="">Build Conference</a>.</li> </ul> <strong>CW: </strong><em>Your wife Emma is now part of MBD. Is it difficult to have a normal home life? When you both drag yourselves in the door, who makes dinner? </em> <p><strong>MB:</strong> That last question is probably the biggest issue of each day! Seriously though, Emma and I have received great advice on successfully working together. It's been such a pleasure—she's a smart cookie. She keeps my feet on the ground when I go off on one of my dreamy 'let's do this!' ideas. With seven years in a strategic role at the BBC, she has a real vision for where our studio should be heading. But, let's face it, Emma has always been part of the company; it's just that now she sits in the same room as me.</p></div><p></p> Designing for the Web workshops 2009-08-17T00:00:00+00:00 <p>Exciting day today. <a href="">We're</a> pleased to announce a series of <a href="">Designing for the Web workshops</a> in London, Manchester and Glasgow during November and December, 2009. And, they're a snip at £325.</p> <p>Spend a day with me, and nineteen like-minded individuals as we trawl the depths of practical, applicable design theory. We'll cover all manner of exciting things like ideas &amp; research, typography, colour theory, layout and compositional tools and techniques and rounding off with a site clinic and Q&amp;A.</p> <p>Oh, and they'll be tea and biscuits too.</p> Designing for the Web: Summer Sale! 2009-08-09T00:00:00+00:00 <p>Just a quick post to say that we're having a sale! <a href="">Designing for the Web</a> will be available for the rest of August for up to 50% off (whilst stocks last).</p> Speaking 2009-08-07T00:00:00+00:00 <p>I speak at conferences and events all over the place on topics that I write about. Here's a list of what's coming up, and also previous events with links to slides, photos and other relevant material.</p> <h3>Upcoming Events</h3> <ul class="events"> <li class="vevent"> <a class="url" href=""><strong class="summary">Drupalcon Munich</strong></a> <abbr class="dtstart" title="20120820">August 20th – 24rd</abbr>, 2012 <span class="location">Munich, Germany</span></li> <li class="vevent"> <a class="url" href=""><strong class="summary">Reasons to be creative</strong></a> <abbr class="dtstart" title="20120903">September 3rd – 5th</abbr>, 2012 <span class="location">Brighton, UK</span></li> <li class="vevent"> <a class="url" href=""><strong class="summary">Smashing Conference</strong></a> <abbr class="dtstart" title="20120917">September 17th – 19th</abbr>, 2012 <span class="location">Frieburg, Germany</span></li> <li class="vevent"> <a class="url" href=""><strong class="summary">Refresh LX</strong></a> <abbr class="dtstart" title="20120920">September 20th – 21st</abbr>, 2012 <span class="location">Lisbon, Portugal</span></li> <li class="vevent"> <a class="url" href=""><strong class="summary">Fronteers 2012</strong></a> <abbr class="dtstart" title="20121003">October 3rd</abbr>, 2012 <span class="location">Amsterdam, Netherlands</span></li> <li class="vevent"> <a class="url" href=""><strong class="summary">Web Directions South</strong></a> <abbr class="dtstart" title="20121016">October 16th – 19th</abbr>, 2012 <span class="location">Sydney, Australia</span></li> <li class="vevent"> <a class="url" href=""><strong class="summary">Beyond Tellerrand</strong></a> <abbr class="dtstart" title="20121119">November 19th – 21st</abbr>, 2012 <span class="location">Düsseldorf, Germany</span></li> </ul> <h3>Past events</h3> <h4>2012</h4> <ul class="events"> <li><a href="">IA Summit</a> March 21st – 25th, New Orleans, US.</li> <li><a href="">Visual Design UX Bootcamp</a> April 27th – 28th, London, UK.</li> <li><a href="">Future of Web Design</a> May 14th – 16th, London, UK.</li> <li><a class="url" href="">Reasons to be Appy</a> May 29th, London, UK.</li> </ul> <h4>2011</h4> <ul class="events"> <li><a href="">New Adventures in Web Design</a> January 20th 2011, Nottingham, UK. | <a href="">Video</a></li> <li><a href="">Five Simple Workshops</a> January 27th 2011, London, UK. | <a href="">Video</a></li> <li><a href="">An Event Apart</a> May 2nd – 4th 2011, Boston, USA.</li> <li><a href="">Ampersand</a> June 17th 2011, Brighton, UK. | <a href="">Audio</a></li> <li><a href="">CERN</a> September 1st 2011, Geneva, Switzerland. | <a href="">Video</a></li> <li><a href="">UX Bootcamp</a>September 23rd 2011, London, UK.</li> <li><a href="">UWIC</a> September 27th 2011, Cardiff, UK</li> </ul> <h4>2010</h4> <ul class="events"> <li><a href="">@Media 2010</a> June 8th - 11th, London, UK. | <a href="">Audio</a></li> <li><a href="">DrupalCon 2010</a> August 23th - 27th, Copenhagen, Denmark. | <a href="">Video</a></li> <li><a href="">dConstruct 2010: Design 1010 workshop</a> September 1st, Brighton, UK.</li> <li><a href="">Webdagene</a> September 29th - October 1st, Oslo, Norway. | <a href="">Video</a></li> <li><a href="">Web Developers Conference</a> October 27th, Bristol, UK.</li> </ul> <h4>2009</h4> <ul class="events"> <li><a href="">Build</a></li> <li><a href="">Designing for the Web Workshops: London</a></li> <li><a href="">Designing for the Web Workshops: Manchester</a></li> <li><a href="">Web Directions South</a>Sydney, Australia</li> <li><a href="">Accessibility 2.0</a>London, UK</li> <li><a href="">Drupal­con, Paris</a>Paris, France</li> <li><a title="@media 2009" href="" target="_self">@media 09</a>, London, UK</li> <li><a title="FOWD London" href="" target="_self">Future of Web Design 09</a>, London, UK: <a href="" target="_self">MP3 recording</a>, <a href="" target="_self">Video</a>, Slides</li> <li>Bath University 09, Bath, UK</li> <li><a href="" target="_self">Drupalcon DC</a> 09, Washington DC, USA</li> </ul> <h4>2008</h4> <ul class="events"> <li><a href="" target="_self">Iceweb 08</a>, Reyjkavik, Iceland</li> <li><a href="" target="_self">Bloc conference 08</a>, Llandudno, Wales, UK</li> <li><a href="" target="_self">Cardiff Web Scene 08</a>, Cardiff, Wales, UK</li> <li><a href="" target="_self">Drupalcon Szeged 08</a>, Szeged, Hungary</li> </ul> <h4>2007</h4> <ul class="events"> <li>Web 2.0 Expo 07, Berlin, Germany</li> <li><a href="" target="_self">@media 07</a>, London, UK</li> <li><a href="" target="_self">SXSW 07</a>, Austin, TX, USA</li> </ul> <h4>2006</h4> <ul class="events"> <li><a href="">SXSW 06</a>, Austin, TX, USA</li> <li>Port 80 06, Perth, Australia</li> </ul> Publications 2009-08-07T00:00:00+00:00 <p>I've had the pleasure of writing the odd thing here and there for a few different people and organisations:</p> <h3>Books</h3> <h4><a href="">Designing for the Web</a></h4> <p>A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design. Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one.</p> <h4><a href="">Web Standards Creativity</a></h4> <p>"Be inspired by 10 web design lessons from 10 of the worlds best web designers. Get creative with cutting-edge XHTML, CSS, and DOM scripting techniques. Learn breathtaking design skills while remaining standards-compliant."</p> <h4><a href="">Designing Grid Systems for the Web</a> from Five Simple Steps</h4> <p>Grid systems have been used in print design, architecture and interior design for generations. Now, with the advent of the World Wide Web, the same rules of grid system composition and usage no longer apply. Content is viewed in many ways; from RSS feeds, to email. Content is viewed on many devices; from mobile phones to laptops. Users can manipulate the browser, they can remove content, resize the canvas, resize the typefaces. A designer is no longer in control of this presentation. Designing Grid Systems for the Web is a practical guide to designing visual information structures for the web. <strong>Due out in October, 2009</strong></p> <h3>Magazines</h3> <h4><a href="">A List Apart</a></h4> <dl> <dt><a href="">Saving the Spark: Developing Creative Ideas</a></dt> <dd>For most of us, ideas have to be squeezed out of us every day. To stand up to this challenge, you need to arm yourself with some good tools.</dd> <dt><a href="">Whitespace</a></dt> <dd>Sometimes, as in web design, it’s difficult to add whitespace because of content requirements. Newspapers often deal with this by setting their body content in a light typeface with plenty of whitespace within and around the characters.</dd> </dl> <h4><a href="">Vitamin</a></h4> <dl> <dt><a href="">Looking at type</a></dt> <dd>Have you ever been somewhere where you couldn’t speak the local language? Surrounded by signage, newspapers, shop fronts - everywhere you look there are letters, but you don’t understand what they mean. It’s even worse if they’re not Roman characters.A couple of years ago, on my honeymoon in Thailand, I was astounded by the myriad of typographic design styles. Not only was it a language I didn’t understand, the letterforms, to my eye, were little more than squiggles. Yet somehow I was often able to understand the meaning of some signs. How? Good typography, that’s how.</dd> </dl> <h4><a href="">Web 2.0 Journal</a></h4> <dl> <dt><a href="">Designing for Web 2.0: "It Will Be About People"</a></dt> <dd></dd> </dl> <h3>Articles</h3> <h3>Interviews</h3> <ul> <li><a href="">Boagworld podcast</a></li> <li><a href="">Drupal Voices</a></li> <li><a href="">UMS Interviews: Mark Boulton</a></li> <li><a href="">Web Designer's Intervews</a></li> <li><a href="">Interview by Rob Goodlatte</a></li> <li><a href=""></a></li> <li><a href="">Sitepoint interview</a></li> <li><a href="">Design Workflows</a></li> </ul> Contact me 2009-08-05T00:00:00+00:00 <p>Like most people, I get a ton of email. I <em>really</em> do try to answer all of them, but, like most people, I'm generally terrible at it--despite best efforts. So, that's where this handy form comes in. All the email that's generated by this gets flagged and labelled with <em>READ THIS, MARK!</em> in bright, bold red.</p> <h3>Working with me</h3> If you're wanting to get in touch to discuss a web design project, please download the <a href="">Mark Boulton Design</a> project planner, fill it in--best you can--and get it back to me as per the instructions. <p>If you just want to say hello, then fill this form in...</p> <p>[contact-form-7 id=&quot;1713&quot; title=&quot;Contact form 1&quot;]</p> Designing for the Web: Paperback available 14th April 2009-04-14T00:00:00+00:00 <p>Just a quick note. The paperback of my book, <a href="">Designing for the Web</a>, is available on the 14th April at 12pm GMT. That’s tomorrow. I have 1500 copies all ready to go, and these will be available on a first come, first serve basis.</p> <p>If I sell out, I may just get another print run done. We’ll see.</p> The Personal Cost of Designing on Spec 2009-03-26T00:00:00+00:00 <p>Yesterday, a rather heated debate raged over on <a href="">Carsonified’s blog</a> regarding a design competition they’re running to design a slide for the upcoming <a href="">Future of Web Design</a> conference in London. The debate was an old one, resurrected every now and then and fiercely debated on both sides. The debate was regarding speculative work. It’s a subject I feel very passionate about as I’ve seen the damage it causes – both personal and professional. </p> <p> I’m a little tired of justifying my position and opinions on Twitter, so I thought I’d pen a few thoughts here and explain my personal viewpoint and hopefully spark some considered, intelligent debate (see my paragraph citing Matt Henderson for an example of this). </p> <!--more--> <h3>Defining Spec</h3><p> I’m not going to spend a huge amount of time defining this here. I think most people understand what spec work is and why it’s damaging. Speculative work (or spec), can be defined by the <a href="">AIGA</a> as: </p> <blockquote> <br> <p>‘work done without compensation, for the client’s speculation’</p> <br> </blockquote> <p> Spec work, in my view, leads to a number of things: </p> <ol> <li>Sub-standard work.</li> <li>It undermines and devalues design.</li> <li>It harms the design industry.</li> <li>Exploitation.</li> </ol> <p> </p><h3>Are Design Competitions Spec Work?</h3><p> If you’re in the UK, you probably know of <a href="">Blue Peter</a>. Blue Peter is a long-running childrens TV series that has been going for, oh I don’t know, maybe 500 years on the <a href="">BBC</a>. Up until recently, Blue Peter ran many, many design competitions for children across the UK to enter. Kids would send in drawings of their wild and wonderful designs for all many of things. Now, is this spec work? Is it unethical? No, I don’t think so. </p> <p> Children aren’t designers. It’s not their profession, and they’re not submitting professional work. </p> <p> There was a great comment on the thread yesterday regarding <a href="">Threadless</a>. People submit designs to threadless, get paid if their design is picked, and get the glory of seeing it printed on t-shirts. Is this spec work? Even though Threadless are making money from this? No, I don’t think it is. </p> <p> Designers and Illustrators want to be part of the Threadless brand. They have a lot of pull, so much so that professionals are willing to <em>contribute</em> to that brand. In the same way that if <a href="">Apple</a> were to do something similar, I’m sure many people (probably myself included) would contribute. Wanting to contribute to something you feel part of, or want to be part of, even if money is being made as a result is not spec work. It’s about wanting to belong. </p> <p> Personally, I see a competition that targets a profession and solicits entries for a prize as exploitative and professionally unethical. For some, it may just be a bit of fun, but for me, it’s pretty reprehensible. I feel rather strongly about it. </p> <p> </p><h3>The Personal Cost</h3><p> I’ve worked in two industries where spec work is the norm: advertising and print design, and I’ve a close relationship with another: architecture. </p> <p> I used to work for a reasonably sized design agency. We would spend maybe 30% of our time on unpaid, creative pitch work. We would also spend perhaps 10% of our time on design competitions, which I believe is spec work. That’s right, 40% of our time was spent working for the potential of winning one project that would pay for all of that speculative time. Now, if you’re starting out in business, or feeling the pinch as many companies are during these difficult times, your time, and the way you spend it, becomes critical. If 40% is spent doing stuff your not paid for that is potentially damaging. </p> <p> The practice of spec work is the industry norm in architecture. </p> <p> My father’s an architect. He runs a small practice and spends an extraordinary amount of time producing spec work. Unfortunately, the industry demands it. The spec work is conducted on the hope that one of the projects will be awarded to the practice and that will pay for the time lost on the other projects. Architecture is also an industry that is rife with design competitions. Some would argue that this is worse than spec work to a shortlisted field. Architects are invited to submit bids, proposals and designs for prestigious competitions. The winner gets the contract and the glory. The losers get nothing; the work is conducted speculatively. </p> <p> I believe the practice of spec work harms business. It can be crippling, for both suppliers <em>and</em> consumers. Businesses fold, and consumers get sub-standard work. </p> <p> </p><h3>A Free Market</h3><p> In amongst the usual trolling on <a href="">Ryan’s blog</a>, I had a very interesting discussion with <a href="">Matt Henderson</a> regarding spec work. Matt is a guy I admire tremendously. I’ve worked with him in the past out of his Marbella office on some fascinating projects and he’s a smart bloke. </p> <p> Matt’s take on spec work, if I understood this correctly, was that the market will dictate the practice. If both sides of the market – the supplier (the designers), and the consumer (the client) – find that speculative work is mutually beneficial, then the practice would become an industry norm. This view sidelines personal opinion, and presents spec work as a consequence of market conditions, which is fine, it is. But does that mean that the creative profession should shrug their shoulders and accept it as such despite ethical misgivings? </p> <p> </p><h3>For The Record</h3><p> For the record, Ryan is a good guy. My intention wasn’t to target Ryan personally, or to claim that Carsonified was unethical, they’re not. He doesn’t deserve the lambasting he receives on his blog for genuinely trying to do the right thing; for doing something he believes in. But all of those designers who commented on that growing thread were also doing that – commenting on an issue they believe in. The debate wasn’t personal, or unprofessional, it was a raw nerve. </p> <p> I’m hoping this post sheds some more light beyond 140 characters on my own personal relationship with spec work and how I’ve seen first hand the damage it causes. I for one welcome an industry that debates these issues. An industry where you’re free to make a mistake, to openly question motivations and to do something you believe in. As Matt said, ‘let the market run its course’, but if you don’t agree with where it’s headed, push back and fight for what you believe in. </p> Drupal7UX: we need you NOW! 2009-03-26T00:00:00+00:00 <p>We plan to make the Drupal 7 User Experience something very special. The <strong>biggest risk</strong> to this project is community rejection/involvement too late in the project.</p> <p>Please, <a href="">get involved</a> now.</p> <p><object width="325" height="344" data="" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><param name="src" value=""><param name="allowfullscreen" value="true"></object></p> <p>Get out of the issue queues, quit bitching about your other CMS tools.</p> <p>Please, get involved, so we can all succeed.</p> <p>Get over <a href="">here</a> and help us make something amazing.</p> <p>Thank you! (and even bigger thanks to those who are already involved)!</p> Audience Matrix: Our thoughts on the Drupal 7 audience 2009-03-24T00:00:00+00:00 <p><a href="">Leisa</a> and I have spent a good deal of time looking at how we can define the audience for Drupal 7. A couple of weeks ago, we spent a day trying to come up with an effective model to use throughout the design process. Not just a model that we could use, but one that could be available to the whole Drupal community as we embark on the challenging task of looking at the user experience for Drupal 7. </p> <!--more--> <p> </p><h3>The Flappy Paddle</h3><p> Before I start to talk about this tool, it’s probably better if you just watch this video Leisa and I recorded a week or so ago. </p> <p> <object width="480" height="295"><param name="movie" value=""><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></object> </p> <p> This is the tool we’re using, but at this stage, it was pretty rough around the edges. So, we’ve spent a little more time defining the various tasks and definitions for each different user type, site type, and number of users. Combining this detail, in various different combinations, gives us a list of requirements for that type of user, using a particular type of site, with a certain amount of users. </p> <h3>Sweating the details</h3><p> </p><p>Yesterday, we spent some time fleshing out the various tasks and definitions for each ‘paddle’.</p> <p></p> <p> <object width="480" height="295"><param name="movie" value=""><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></object> </p> <p> This is what we’ve come up with so far: </p> <h4>Roles</h4><p> <ul class="bulletlist"> <li><strong>Content Creator</strong>: a user who primarily creates, reviews, and edits content for a site. Key tasks: Add content, edit content, find existing content, view list of content creation/revision tasks.</li> <li><strong>Site Editor: a user who has authority to approve, edit or reject content and who may be able to manage some editorial workflow and user permissions. Key tasks</strong>: Add content, edit content, find existing content, view list of content creation/revision tasks, review content, reject/feedback on content to original author, schedule content</li> <li><strong>Site Admin</strong>: manage user permissions, manage site structure, adding new content types, create and review reports and manage some site settings (RSS Publishing, IP Address Blocking). Key tasks: Manage user permissions, Add / Edit / Delete Content Types, Manage Information Architecture (site sections, sub-sections, taxonomy (as in, vocabulary), Create a report, Review a report.</li> <li><strong>Site Builder</strong>: creates site from scratch by choosing, writing, customising modules and/or themes, manages setup and maintenance. Is a developer (for the purposes of audience definition, themers are considered developers). Key Tasks: Develop site functionality, implement site design.</li> </ul> </p><h4>Type of site</h4><p> <ul class="bulletlist"> <li><strong>Brochureware Site</strong>: hierarchical structure of relatively static content, often includes forms (eg. contact/feedback), may be multi-author</li> <li><strong>Blog</strong>: sequence of chronological posts that may be assigned to categories, may also include ‘fixed’ pages, often includes comments, trackbacks, RSS feed, most often single author</li> <li><strong>News</strong>: a categorical/hierarchical grouping of content usually ordered chronologically but often ‘curated’ by an editorial team, may also include comments, trackbacks, RSS feed, often multi-author, often requires multiple templates</li> <li><strong>Events</strong>: a combination of content supporting an event, including content about the event, a schedule/calendar of events, list of participants, online registration, may also require online submissions, social networking functionality, news, email update list</li> <li><strong>Social Site</strong>: comprises member profiles and communication between those member in the form of discussion forums, wikis, events, blogs, require member signup, subscription, RSS,</li> </ul> </p><h4>No. of users</h4><p> <ul class="bulletlist"> <li><strong>1</strong>: no permissions, no workflow, that user does everything (one stop shop) BUT most like to have simple requirements (how manage giving access to all functionality when the mostly won’t need it). Likely to generate small amounts of content.</li> <li><strong>2-5</strong> : multiple authors, may require permissions, may require workflow (simple approval process), may require separation between content management tasks and site management tasks but usually not overly complicated requirements.</li> <li><strong>6-15</strong>: multiple authors and editors, likely to require permissions, likely to require workflow, likely to require separation between content management tasks and site management tasks may have some complex requirements, will have significant amount of content generated.</li> <li><strong>15+</strong> : requires permission management (several permission profiles), probably requires workflow (content review/approval), likely to generate a lot of content to be managed and require content scheduling - it’s a complicated machine and it needs a whole section around managing the machine, let alone making the content to feed the machine. Involves a lot of content and likely complex taxonomy.</li> </ul> </p><p> And also, as you saw in the video, we’ve looked at using this tool now as we begin sketching out some ideas and concepts for how the admin may work. </p> <h3>An evolving concept</h3> <p> The Audience Matrix is work in progress and it’s going to be an instrumental tool for us in the coming months as we start fleshing out some of the design concepts. As Leisa says on her blog: </p> <blockquote><p>Over the coming weeks we’re going to be inviting you to submit your ideas for revisions to the Drupal7 Admin interface and overall user experience. It will be very helpful for us all to use this document to help make sure that we’re designing for the 80% and not necessarily just for ourselves! And it is also a really great way to expose missing elements and possible flaws in our concepts. Using the document to test the example we show in the video above helped us to realise that we needed things like a close button on the dashboard (I know, d’uh!), a place to hold the user generated content from things like comment as well as contact forms, and got us thinking about a whole host of thorny permissions and workflow issues.</p></blockquote> <p> We need your help. We’ve produced a <a href="">PDF for you to download</a> so you can use it in some of the upcoming crowdsourcing activities we have planned. (like the one’s we did for the redesign project). </p> <h3>There will be more from me</h3><p> It’s a fair cop. I’ve not been as active blogging about this stuff as I could have been. Both the redesign, and now the Drupal 7 UX work, are both breaking ground on a process thought to be difficult, if not impossible. So, as of today, I’m going to be talking about it all a hell of lot more because, well, what other projects can you talk about as you’re doing it? We’re in an incredibly fortunate position. </p> <p> </p> Drupal 7 Redesign 2009-02-04T00:00:00+00:00 <p><img src="" width="50" height="57" class="thumb" alt="Drupal">Last week, I flew to Boston, MA, to have a meeting with those fine folks at <a href="">Acquia</a> about a project they wanted my <a href="">small design studio</a> to look at. Today, <a href="">Dries Buytaert</a>, the founder of Drupal, <a href="">announced</a> that, together with <a href="">Leisa Reichelt</a>, we’re going to be working on improving the user experience of Drupal 7. Needless to say, we’re very, very excited to be part of this project. </p> <p> From what <a href="">we learned</a> on the <a href=""></a> project, both in terms of process, but also some of the stumbling blocks that Drupal has, we’re confident we can make some changes that will make it easier to use for people who are new to Drupal, but also experienced users. </p> <p> Leisa and I are going to be at <a href="">DrupalCon DC</a> in March. We’ll be kick-starting our research, presenting on the <a href="">redesign of</a>, and doing a lot of listening. if you’re going please tap me on the shoulder and say hi. </p> Designing for the Web: Available to buy and download now 2009-02-03T00:00:00+00:00 <p>In the hubbub of the launch this morning, I totally forgot to blog about the launch of <a href="">Designing for the Web</a>. So, there, I’ve said it. It’s available and ready to download now. I hope you like it. </p> <p> PS. If you signed up for a coupon, they’re trickling out over the course of today and tomorrow. We’ve had some mail server issues (typical!). </p> Managing expectations 2009-01-31T00:00:00+00:00 <p>Managing the expectation of the <a href="">new book</a> has been interesting. When I first announced it, I used to still blog quite a bit. People seemed excited – which was nice – so was I. Then, I stopped work on it for a while, all the expectation and buzz died down as the project did. Since we pinned a release date on the book, buzz has steadily increased once again, but with it the expectation. And I don’t mind telling you, that expectation is weighing a little heavy on my shoulders. </p> <!--more--> <p>You see, this book isn’t really like a lot of other graphic design books. Most of them are coffee table ‘inspirational’ books filled with other people’s work. But, it’s not a typical web development book either. They tend to be task, or ‘lesson’ focussed - walking the reader through a series of case studies and examples – half of which require a computer to be next to you as you work through the chapters. </p> <p> My book is a little of both, but purposefully unlike either. </p> <p> I wanted more of a conversation. More informal, more of me. The content is still practical, but it’s not a lesson plan. Weaving through the book is a strong sense of traditional graphic design and how I think it applies to the web today. There are tips and tools to support the theories, but it’s not a ‘for dummies’ book. I’d like to think it’s written in plain english, and not magic-designer-speak. It’s about the practicalities of designing for the web, but only represents some approaches that I feel work. </p> <p> So, it’s not meant to be a definitive guide to all that is ‘designing for the web’. As I say in the introduction to the book: </p> <blockquote><p>’s a little book about graphic design and how it applies to the modern web. It’s not a book about CSS or usability… it’s aimed at people who want to learn some basics of graphic design and apply them to their web designs - producing more effective, polished, detailed and professional sites.</p></blockquote> <p> There. Don’t say I didn’t warn you. </p> Dipping a toe in the book production process 2009-01-29T00:00:00+00:00 <p>The interesting thing about trying something completely new is that you learn almost all the time. True, you make plenty of mistakes along the way. That’s how it’s been writing this book. But, it’s not just the writing you see. Book publishing involves a whole team of people, from editors and proof-readers to project managers and designers. I’m lucky that I have a semi-experienced team at <a href="">Mark Boulton Design</a> to help me get the book finished and out of the door. </p> <p> Robert Mills is our Project Manager. He comes from a media research and journalism background, so is not scared of the written word. It was his job to really push the publication over the past four months or so. I asked him to pen a few words on our approach, and this is what he came up with… </p> <!--more--> <h3>Writing</h3><p> <a href="">A Practical Guide to Designing for the Web</a> started out as a few blog posts. Though it has evolved significantly since then, those blog posts provided a great stepping-stone for Mark to write the book, and proved early on that people were interested in this subject and Mark’s thoughts on it. </p> <p> The main thing was just to write, to get the majority of the copy down on the page. Until draft one is done there is nothing to edit, delete, proof read and add to. The key to writing is time and location, forming a timetable and isolating yourself may be useful, whatever works for you, but it takes dedication, sacrifice and many, many hours. </p> <p> </p><p>There were many hours spent researching and planning the book before pen could be put to paper or finger could be put to keyboard. Beyond the initial planning and discovery it was a case of writing, writing some more and then writing even more.</p> <p></p> <h3>Design</h3><p> Mark had written the chapters. Next we were to turn them from bland word documents to impressive, visually stunning pages in a design book. Nick, the designer at MBD with a fair amount of publishing experience, was tasked with typesetting the copy under Mark’s art direction. This immediately created an issue as Nick was working out of Manchester and we were working out of Cardiff. Skype proved to be an invaluable tool at this stage of the process, not only for keeping each other in the loop with the latest developments but in order to design via webcam! </p> <p> Some elements of the design were agreed early on before the process had even started (it was always going to be A5 and in full colour), but naturally it was a case of putting into practice the work method we adopt with clients – iteration and refinement. Some of the pages in the final copy are original versions, some have changed dramatically throughout the design process – it has been painstakingly tough at times as a book about design clearly had to be a visual feast. </p> <h3>Publicity</h3><p> Having an author who happens to be well known within his field, and a book that has been promised for the last two years, all helps build the publicity momentum. </p> <p> We created a <a href="">Flickr account</a>. Throughout the process we uploaded sneak peeks of the various pages to give people a taster of the finished book but also to document some of the initial sketches and behind the scenes process. </p> <p> A <a href="">Five Simple Steps Twitter account</a> was also set up. As I write this we have 874 followers! (Thanks to you if you are amongst that group) Again the purpose of tweeting was to publicise the book but also to connect to the potential readers. Our tweets ranged from quotes lifted straight from the pages of the book, links to the Flickr group, to more general news updates and countdowns to launch day. </p> <p> Blogging was also a fundamental part of the process simply because the book idea evolved from one of Mark’s blog posts about five simple steps to better typography so we took the book right back to where it originated from and Mark has blogged about why he chose to self publish, and about the technical requirements involved in writing and distributing your own book. </p> <h3>Logistics</h3><p> </p><p>Thankfully some elements were straightforward, all the information we needed on purchasing ISBN numbers was readily available online and it was nothing more than a simple application form outlining the content and specification of the book. Having to buy them in blocks of ten also ensured we have ISBN numbers for nine future publications (if we decide the publish more that is!).</p> <p></p> <p> <img src="" width="595" height="314" alt="getting to grips with the process, and our first ISBN number"></p><p class="caption">Getting to grids with the process, and our first of 10 allocated ISBN numbers together with the bar code</p> <p> Although not a necessity, there is the option of submitting a copy of the book to the British Library. For printed books this is a legal requirement, whilst they agree on the policy for electronic books, they recommend depositing the book in the interim. </p> <p> Many hours also went into researching print on demand offerings, Amazon fulfillment, and other printing and distribution methods. There are many options and it is a case of finding one that meets all your needs. For us it was self publishing (please see Mark’s other blog posts for more information on this). </p> <h3>Looking forward</h3><p> At the moment we don’t know if all the hard work, blood, sweat and tears has paid off. We hope so as we are immensely proud of the book but all we can do now is sit back and wait for the feedback and reviews to roll in. </p> Designing and building an eBook delivery system 2009-01-26T00:00:00+00:00 <p>When I first looked into writing <a href="">Five Simple Steps to Designing for the Web</a>, I looked at a bunch of options for delivering the PDF over email. I thought about building something myself or hosting it with various web applications used for delivering digital products. The first option just wasn’t an option at all in the end - I’m no programmer. The second option, although perfectly viable, saw the potential profit of the book undermined by a monthly, or per unit, charge. I made the decision, quite some time ago now, to commission the software to be built by the super-talented <a href="">Steven Teerlinck</a>, using the <a href="">Code Igniter PHP Framework</a>. </p> <!--more--> <p><img src="" width="595" height="314" alt="Five Simple Steps publishing back end"> </p> <p> This isn’t a particularly complex bit of software, but Steven’s done a fantastic job in simplifying it to a number of core user and system flows: </p> <h3>The Requirements</h3><p> So, I wanted to sell a PDF. Ideally, I wanted the following functionality: <br> <ul class="bulletlist"> <li>Have a discount coupon, so people could redeem them for, say, £3 off</li> <li>A discount period. For example, over the Christmas period.</li> <li>Multiple licenses. From single user, to ten.</li> <li>The delivery of the PDF itself.</li> </ul> </p><h3>The user flow</h3><p> The user flow through the system is this: <br> <ul class="bulletlist"> <li>User selects book, and fills in license details - they enter a code here if they have one.</li> <li>The user is directed to Paypal where they part with their hard-earned cash</li> <li>Upon a successful transaction, the user is redirected to a ‘thanks very much’ page.</li> <li>The user receives an email from Five Simple Steps whereby they can download their PDF for up to 72 hours.</li> </ul> </p><h3>The system flow</h3><p> The system does this: <br> <ul class="bulletlist"> <li>Upon receiving an ‘order’, the system checks to see if the Paypal purchase is valid.</li> <li>The system to generate a unique code for that sale</li> <li>This all sits in a queue that is set up on a CRON to send every 10 minutes</li> <li>The code is emailed, along with a handy link, so the user can download the book</li> <li>Upon clicking, the code is checked against the user, license, and to see if they sale is valid</li> <li>The code triggers a PDF stamper to dynamically stamp the PDF on every page</li> </ul> </p><p> A large majority of initial sales will come from the money-off coupon that has been running on the site for a while. The coupon system works thusly: </p> <p> <ul class="bulletlist"> <li>I can create one-off coupons, or bulk import from a comma separated file</li> <li>The coupons are queued up and processed every 10 minutes by a CRON job</li> <li>A user is sent an email with a unique coupon code.</li> <li>The user clicks a link which directs them to the purchase page and populates the coupon field.</li> </ul> </p><p> That’s probably about it. The system is small, trim and effective for my needs. As time goes on, I’m hoping to add further functionality to support shipping physical books in addition to (possibly) more titles. We’ll see. Being involved in building a bespoke bit of software for the delivery of the book has been very interesting over the past six months or so. Not only has it shown what a flexible framework Code Igniter is, but also how important it is, as a (soon-to-be) publisher, to be in-touch with your distribution software and process. </p> Why Self Publish? 2009-01-19T00:00:00+00:00 <p>Two weeks today, I’ll be releasing the long-delayed self published book of mine, <a href="">Five Simple Steps: Designing for the Web</a>. Since I originally thought of writing my own book, producing it, and distributing it, I’ve been asked several times, ‘why not go with a traditional publisher?’ </p> <!--more--> <p>I’ve had several offers for this title, from big tech-book publishers, design publishers, through to smaller outfits and literary agents. I’ve turned them all down. Why? Well a few important reasons: </p> <h3>My Voice</h3><p> Several of my good friends have written books, and I’ve design reviewed a couple, and written a a chapter in one. Not a massive amount of experience, granted, but enough to sour the taste of traditional publishing in my mouth. The biggest concern of mine was losing my ‘voice’. I want a book I’ve written to sound like me. Not some watered down, ‘internationally-toned’ amalgam of me, my editor, a proof-reader, and tech reviewers. I want it to sound like me, and I’m hoping, my readers do too. </p> <h3>The Process</h3><p> Writing this book has been really difficult. Luckily, I’ve got a good team around me - a designer, a project manager, a proof-reader, and an editor to shape the book (that was particularly helpful early on). But, there’s just no way I could’ve written a book in the last two years if it hadn’t had been on my terms alone. My wife and I had a daughter, we built an extension on our house, and I’ve been building a business in challenging times. To fit a book around this has been tricky, and I needed to have the flexibility imposed by my own schedule, not someone elses. </p> <h3>The Design</h3><p> Most web design books are terribly designed. I mean, really bad. If I was going to write a book, I was going to design it too. As it turned out, I’ve art directed the production of this book, rather than designed every single page and diagram. But, the point is, it will be a design I’m happy with. I know several designers who have written books who ended up doing the design for them for free! </p> <h3>Financially</h3><p> </p><p>Although not the motivation for the book, the financial potential of just one PDF book far outweighs the traditional process (if you have an audience that is). Most author royalties are miniscule compared to the profit the publisher makes. With a PDF distribution my only costs are the time taken to write the book, and the ongoing hosting and Paypal fees.</p> <p></p> <h3>A Printed Book</h3><p> Luckily we have the skills in-house at <a href="">Mark Boulton Design</a> to design, produce and distribute a hard copy book. Currently, we’re looking at producing a limited edition case bound (hard back), high-quality book. BUT, this will only be if the sales of the PDF can support the initial outlay in getting a print run done. </p> <p> Of course, there are advantages for a more traditional approach. As much as the process of writing and editing is painful, you can be assured of a good product at the end of it – even if it doesn’t sound like you. You don’t have to design it, typeset, proof (again, and again), artwork, production, delivery, customer service. There’s a lot that goes into publishing and I’m learning the hard way. But, it’s fun. The book is coming along nicely, and two weeks today, will finally be released. </p> <p> It may not be a work of beautifully crafted prose. But it will be me. Warts and all. </p> White Screen Of Death 2008-12-23T00:00:00+00:00 <p>I was on a business trip last week, and as always, rely heavily on my iPhone for not only calls, but email, navigation, and - courtesy of AirShare - a method of carrying files to and from meetings. Who needs USB sticks, right? </p> <p> I’ve used this 3G phone since August without too many problems. Well, that’s not strictly true, I’ve had the usual phantom restarts, blank screens, and general software lag. Just like everyone else. But, as I’m an Apple fanboy, I’ve put up with it, hopeful that with subsequent software releases, the platform would become more stable. The pitfalls of early adoption. </p> <p> That all came to a grinding, abrupt halt on Thursday when my phone croaked and then died.  </p> <!--more--> <p>Here’s what happened. </p> <p> I’d just finished a call. Then two minutes later, I tried to call someone else. The iPhone was just a white screen. Unresponsive. I turned it off, turned it back on. Same thing. This was a problem as, because of AirShare, I had some important documents I’d just picked up from a client (who needs USB sticks right?), that I needed to review on the journey back to Cardiff. Back to the white screen. This must be a known issue, so I started on the hunt to track down either some wifi, or at the very least, a book on the iphone, where it might just give me some indication of what to do. Even a hard restart. I could live with that. </p> <p> Sod’s Law dictates that ‘if something can go wrong, it will’. Following missed trains, cancelled trains, momentary panic when I thought I’d lost my wallet. All of this without being able to call anyone, email anyone, Google for help. In a crowded station, I felt completely alone and helpless. Then, I came to my senses. I wasn’t going to let blind panic ruin an otherwise good day. </p> <p> I couldn’t find a book, and the wifi was down. My last resort was to quickly hook into the wifi in the stations en-route to Cardiff. Reading, Didcot, Swindon, & Bristol all have wifi, so I was able to snatch moments to try to get to the bottom of the mysterious White Screen Of Death. </p> <h3>Common problem</h3><p> Turns out it happens a fair bit. Your iPhone will enter some kind of error loop. It will still be visible to iTunes. In fact, it will still be operable ‘behind’ the white screen - you just can’t see anything. It can usually be fixed by a hard restart of the device. Holding down home and sleep for 10 seconds should sort it out. Well, it didn’t. Failing that, I read, you might need to do a factory restore. Bugger. Not to worry, I have a backup, should be fine. Although, I didn’t backup AirShare before getting this important file. </p> <p> The restore didn’t work either. </p> <p> Apple were surprisingly helpful. ‘It’s defective’, I was told. Yes. It is. ‘Take it back to where you bought it, and they will replace it’. All good. </p> <p> O2 where actually quite helpful too. Although, it was all a bit of a headache. They couldn’t issue a replacement, as they had to send it off for repair. So, I had to buy a new handset, wait for the replacement to come through and then get a refund on that handset. A lot of messing around. Why can’t they just replace the handset? Why can’t O2 interface with Apple customer support (with reference numbers)? Why does the consumer have to jump through hoops to replace a defective handset? </p> <h3>Over-reliance</h3><p> This whole episode made me realise the over-reliance I have on this phone. The gravitation from simple phone, to mobile computer has made business possible on the move, but with that, it’s made business potentially impossible too. Previously, when travelling, I’d be incommunicado. Sure, I could answer the phone etc. but the enforced solitude from the daily grind had massive benefits. Not just the headspace it provides, but by not raising expectation of what I could and would do whilst sat there watching the world go by. </p> <p> I learnt some important lessons about data too. I lost that important file from a client. I lost the time to review it on the journey. The following day, I had to call to explain, the file was resent, reviewed etc. Luckily there was a copy. AirShare is a cool app, but I was using it in the wrong way. I won’t be doing it again.  </p>, Design Iterations, and Designing in the open 2008-11-09T00:00:00+00:00 <p>It’s been a good while since <a href="">I announced</a> we’re working on the redesign of <a href=""></a>. Two months, a couple of presentations, and seven iterations of <a href="">the prototype</a> later, a glimmer is at the end of the tunnel. </p> <p> On thing is for sure, in this instance, <a href="">Design by Community</a> works. </p> <!--more--> <p>I said, when we embarked on the process of designing this site, that <a href="">Design by Community</a> is the only way we could approach it. Since those initial thoughts, <a href="">Leisa</a> and I have continued to push a process that many thought would fall flat on its face. I’m not sure if this would be specific to the <a href="">Drupal community</a>, but they couldn’t have been more wrong. This process is working, and really well. </p> <h3>Keep Listening, and Keep Learning</h3><p> Asking how your users feel when using your website is important. We all know the value of usability testing; of involving the user right from the start, and as much as possible. What we didn’t know, with this project, was how to scale that out to a community of hundreds of thousands of people. </p> <p> ‘Traditional research’ tends to work like this: testing is usually done on a manageable sample of users indicative of the audience. The sample is generally carefully selected (by various means: interviews, phone interviews, questionnaires etc). This can take a while, and can cost a fair bit. It’s time and budget we just didn’t have for this project. So, how do we reach out to the audience? </p> <p> We used a bunch of channels for this: </p> <p> <ul class="bulletlist"> <li><a href="">Twitter</a>. We set up a <a href="">Twitter account</a> and searched Twitter <em>twice daily</em> for mentions of Drupal. Our aim was to catch people when they were <em>in the moment</em>. We’d ask them a few questions, and we’d follow them to see how they got on.</li> <li><a href="">Flickr</a>. We set up a Flickr group and used it as a place for the community to post their thoughts, wireframes, sketches and designs.</li> <li><a href="">Drupal Groups</a>. We posted regularly to the Drupal redesign group. This helped us gather the feedback of the existing community.</li> </ul> </p><p> The aim of the different channels is to keep them <em>open</em> and <em>approachable</em>. We want to listen. </p> <h3>Prototyping using Blueprint</h3><p> Early on, we decided the best approach for this project would be rapidly built prototypes: html wireframes. In order to spend less time worrying about CSS and validity of markup, we decided to use the CSS framework, <a href="">Blueprint</a>, to build the sites out quickly. Together with <a href="">Polypage</a>, a rather nifty script from those clever chaps at <a href="">New Bamboo</a>, we were able to very quickly knock up html wireframes with some limited functionality. This process proved invaluable for both community feedback - in that they could actually interact with some code in their browser - and also for one on one interviews and usability testing conducted by Leisa. </p> <p> Incidently, we’ve built a bunch of Blueprint plugins (kind of like the Yahoo! UI stencils) to support this process. We’re going to be building on those and releasing them shortly. We’re quite excited about it actually. They’ll be things like navigation, calendars, forms: all the little bits of standard UI gubbins all packaged up as simple CSS files. </p> <p> You see, we would have used something like Yahoo!’s design pattern stuff for this, but it’s just <em>too</em> designed. We needed this prototype to not looked visually designed in any way so people could focus on the UX. Anyway, that will be forthcoming. </p> <p> </p><h3>Weekly design and prototype iterations</h3><p> The pace of this project is such that we have a weekly prototype release every Thursday in readiness for community feedback (via the various channels) over the weekend. And, the theory still stands: we look for trends in the feedback. Interestingly, trends have been more difficult to spot the further we get down the road and the more ‘real’ the site becomes. </p> <p> <img src="" width="595" height="462" alt=" Iteration 7 homepage"></p><p class="caption"> prototype iteration 7 homepage. This version represents a big step forward visually, brand-wise, and revised Information Architecture.</p> <p> The latest iteration, <a href="">version 7</a>, is a bit of a departure from the <a href="">previous</a> ones. In <a href="">Leisa’s words</a>: </p> <blockquote><p>There were a couple of things that were really bugging us in the versions up to now.  In particular, the navigation in the header (there was so much of it and it looked kind of messy and confusing and in tests, we observed that people completely ignored it!). The Logged In version of the homepage was a good idea but the execution was coming up short as we learned that ‘hard core’ Drupallers thought it was a valuable addition to the site but just about everyone else wasn’t interested… </p></blockquote> <p> She goes on to say… </p> <blockquote><p>A behaviour which we have observed since the very early days on this project has the use of search - lots of people use search lots of the time, and a lot of the tasks that the site has to support are heavily search oriented (finding modules, finding help etc.). users have some of the most advanced Google skills I’ve ever observed! - and yet up until now, the redesign of the site didn’t really pay this much heed - it was still very much a hierarchical site made up of silos of content… forcing people to choose between this section or that to find the content they required.</p></blockquote> <p> This shift in direction has, so far, tested well and the overall comment we’re hearing is good. But, we there’s still a way to go. </p> <p> Please let me know your thoughts as you delve in and have a look around. </p> <h3>Onwards and upwards</h3><p> We’ve still got a month or so left on this first phase of the project and there’s a lot to do in a short space of time. One thing that is driving the clarity, in fact without, this project would be considerably more challenging, is the community feedback. Through the flaming, disagreements, and arguments are clear, actionable points, which we take forward to the next round. </p> <p> At first, I thought design by community would be as bad as design by committee. Lots of people, all wanted their say, mixing black with white and ending with grey. Not so. This project, and I believe it’s breaking new ground in this approach, is proving it’s working and that’s not down to the team at Mark Boulton Design, me, or Leisa. It’s down to the community. </p> Why have a chair when you could have a Sumo 2008-09-26T00:00:00+00:00 <p>Like Jeremy, I’m such a blogwhore. </p> <p> And, like Jeremy, I was contacted a while ago by the nice people at Sumo, asking if I wanted an Omni in exchange for a blog post. </p> <p> Yes, like I said, I’m a blogwhore too. </p> <!--more--> <p>When I was a kid, my brother and I had beanbags to sit on when we watched tv, or played with lego. We would use them as islands, ships, weapons, dens. Many hours went by trying to find the most comfortable, or damaging, beanbag configuration for the particular task at hand: </p> <h3>The Egg</h3><p> </p><p>There was the ‘egg’, as demonstrated by position five on the Omni page. This was great for general TV watching, providing good support. The downside is, it’s difficult to get up out of. As Emma said, ‘you don’t want to sit down on this when you’re pregnant’.</p> <p></p> <h3>The Pancake</h3><p> So called because it’s flat. This configuration provided perfect cushioning for many, many hours of lego assemblage. It also doubled up as a nice bed, or landing platform for the death-defying jump from the 5th step on the stairs. </p> <h3>The Ball</h3><p> Pick the beanbag up, let all the filling fall to the bottom, spin the bag until you have a nice handle with a tight, heavy ball at the bottom. The perfect clubbing weapon. </p> <p> There were probably more, but those three were the favourites. </p> <p> So, when the Omni arrived, all these memories quickly came flooding back. Sadly, it’s too big for the The Ball (and yes, I did try). </p> <p> I opted for a lime green bag (as you can see, I’m a sucker for lime green). The first thing that struck me was the scale of these things - they’re enormous. Alys quite likes it too, although is somewhat dwarfed. They’re made out of this tough-as-nails nylon (so would be perfect for The Ball if they weren’t so large). </p> <p> Emma and I decided in the end that it was just a little too large for our house. So, it’s now providing ample seating provision for the Mark Boulton Design library.  </p> Design By Community 2008-09-18T00:00:00+00:00 <p>One of the interesting challenges of the redesign process for <a href=""></a> is managing the expectations of a community of over 200,000 registered users. Not only that, but a community of largely <strong>open source</strong> developers. I mention that specifically because of the culture that surrounds open source development. <a href="">Leisa</a> and I have been trying something that is, frankly, terrifying. We’re designing in the open. </p> <!--more--> <p>When I graduated from university, I was asked to go before a panel of moderators and examiners three times to justify my work. For best part of an hour I argued, listened, seethed and nearly cried as my work was verbally torn apart by a committee of ‘learned’ professionals. On my way out of the room, utterly devastated by what just happened, my lecturer in typography took me to one side and said some words I’ll never forget: ‘Mark, a camel is a horse designed by committee.’ ‘Take what you can, and learn. But ultimately, stick to your guns and believe in yourself.’ </p> <p> He was of course implying that design by committee never works and nearly always results in a poor product. The egotistical designer in me agrees. However, the more pragmatic side of me disagrees. Maybe design by committee doesn’t work, but design by <strong>community</strong> could. </p> <h3>Asking the community for help</h3> <p> <a href="">Leisa</a> has been doing a fantastic job recently of opening up her process, thoughts and ideas with regards to the redesign. So far, we’ve had the following gems: </p> <p> <ul class="bulletlist"> <li><a href=""> - Help Overhaul the Information Architecture - participate in our online card sort!</a></li> <li><a href=""> - One site or many?</a></li> <li><a href=""> - come wireframe with me!</a></li> <li><a href="">Outsiders and Insiders - Understanding users</a></li> <li><a href="">DRAFT: Experience Strategy</a></li> <li><a href="">User research for redesign - what we’ve done, what we’re doing</a></li> </ul> </p><p> By and large the community has responded well, offering valuable insight into some thorny issues. I thought this was something I could do with some of the branding work we’ve been doing. </p> <p> <ul class="bulletlist"> <li><a href="">What’s in a Word(<b style="color:black;background-color:#99ff99">mark</b>)?</a></li> <li><a href="">Drupal’s core brand values</a></li> <li><a href="">Initial Wordmark <b style="color:black;background-color:#ffff66">design</b></a></li> </ul> </p><p> Now, it may be the subject matter, or my phrasing. Perhaps it was too early in a process. But as you can probably see by the comments, it didn’t go so well. Actually, saying that, I think it did go well up to the point where the comments took a personal turn for the worse. I was talking with Leisa this morning, and we both agreed that it would be interesting to analyse the differences, and the huge difference in the tone of the comments provided. </p> <h3>Brave, Stupid, or Inspired?</h3><p> This comes back to one of the initial points I made. Design by committee does not work. Why is that? Personally, I think it’s due to the relatively small size of a ‘committee’. Say you have a client, and there are 15 stakeholders. All of them have strong opinions, there are big egos flying around. In fact, I had a client like this a short while ago, and it was a prime example of how working in this environment does not work. </p> <p> Generally, in that group, there will be one or two loud voices. Maybe an <a href="">Alpha Male</a> or two. The important thing to note is that this is a small group. It will be difficult to reach common ground with a small amount of people. </p> <p> Designing by community I feel is different. There are a <strong>lot</strong> of people in the Drupal community. Many hundreds with a strong voice. Providing very early releases--in fact, opening up the process completely--draws reaction. Within that reaction, if there is enough of it, we can <strong>identify trends</strong>. And I think trends in feedback is the key to Designing By Community. </p> <h3>Where next?</h3><p> </p><p>Leisa and I will continue to work as openly as we feel appropriate for the project. If it falls flat on its arse in the near future, well it will make a bloody good case study.</p> <p></p> 2008-08-15T00:00:00+00:00 <p><img src="" width="50" height="57" class="thumb" alt="Drupal">A day or so ago, the small design studio I run, <a href="">Mark Boulton Design</a>, was <a href="">announced as the redesign partner</a> for the redesign of <a href=""></a>. Together with the outstandingly talented <a href="">Leisa Reichelt</a> and <a href="">Carolyn Wood</a>, the team at Mark Boulton Design are thrilled to part of this project. More details on <a href="">the studio site</a>. </p> <p> Leisa and I will be out in Szeged, Hungary, for the biannual <a href="">Drupalcon</a> during the week of the 25th August, where we will be giving a keynote presentation on Thursday 28th. If you’re there, tap me on the shoulder and say hi. </p> Don’t screw with conventions 2008-08-01T00:00:00+00:00 <p>I’ve got a confession to make: i’ve got a thing about signage design. On any given day trip, excursion, or holiday, and I can be seen ignoring the attraction and taking photographs, or even drawing little sketches, of the signage. I’m particularly interested in airport signage. </p> <p> A few days ago, I took a business trip to Brussels, via Amsterdam’s <a href="">Schiphol airport</a>. I’ve wanted to visit Schiphol ever since I attended a lecture in 2005 by the designer of the signage system, <a href="">Paul Mijksenaar</a>. As a designer, you know when you get those moments where something somebody says turns you’re entire understanding on its head? Seeing Paul talk, I probably had one of those moments every minute. </p> <!--more--> <h3>Schiphol vs Cardiff</h3><p> Cardiff International Airport has, without doubt, some of the worst signage I think I’ve seen. I’m not sure what constraints (or lack thereof) where placed on the designers in order to produce these. I mean, white Arial on blue lozenges? All the same, regardless of content. Honestly, it makes for a navigation nightmare. </p> <p> <img src="" width="600" height="194" alt="Cardiff International Airport signage compared to Amsterdam Schiphol airport"></p><p class="caption">Cardiff International Airport signage (left) compared to Amsterdam Schiphol airport (right). More photographs of these <a href="">are on Flickr.</a></p> <p> Thank goodness Cardiff is not often used for transferring flights, like some of the major hubs throughout the world. Case in point, on Tuesday, in Schiphol Airport, I had 25 minutes to: </p> <p> <ul class="bulletlist"> <li>Take a leak</li> <li>Change Terminals</li> <li>Xray my hand luggage again</li> <li>Find some water to buy</li> </ul> </p><p> I was running in-between each of these tasks to make sure I didn’<b style="color:black;background-color:#a0ffff">t</b> miss my flight to Brussels. Without clear signage, in the place I expected them, I would have missed my flight for sure, and may have wet myself along the way. </p> <p> Schiphol has some of the clearest signage I have seen in any airport (in fact, its signage system has been copied by several airports, London Heathrow included). It is designed around some extremely simple rules (Paul explained some of these in his talk a while ago), the three that stood out for me were: </p> <p> <ul class="bulletlist"> <li>Conspicuity</li> <li>Contrast</li> <li>Task</li> </ul> </p><p> Conspicuity is obvious. Make the signage stand out. They should compete with other things; architecture, or advertising. They should be high contrast. Most of all, they should help users complete their task. Paul mentioned three things that people want to do when they arrive at an airport (and this holds so true) </p> <p> <ul class="bulletlist"> <li>Go to the bathroom</li> <li>Find my gate</li> <li>Get out of the airport</li> </ul> </p><p> On arriving in Cardiff on Wednesday evening, it took me a good ten minutes to find the bathroom. Ten minutes! This was because the toilet signage was ingeniously attached to a wall facing away from the prevailing traffic through the baggage reclaim hall. A genius bit of wayfinding that is. </p> <h3>Parallels with web design</h3> <p> It’s not difficult to draw parallels with airport signage (in fact, most wayfinding systems) and website design. Good signage should enhance a user experience, it should help a user complete their task, and it should do it in a way that is unobtrusive. </p> <p> Over on <a href="">Paul’s website</a>, he has some fantastic gems of design advice. These are written in a context of designing wayfinding systems, but they could also be applied to a multitude of other media: </p> <blockquote><p> <dl><dt><strong>Colour Coding</strong></dt><dd>Should reinforce a category of information that is equally clear without colour coding.</dd> <br> </dl></p></blockquote> <p> A no brainer this one, but it’s amazing how often colour-coding is abused. </p> <blockquote><p> <dl><dt><strong>Jargon</strong></dt><dd>Assume that all visitors know nothing about the airport. Select terminology geared to users rather than concocting clever airport gibberish.</dd> <br> </dl></p></blockquote> <p> To be honest, I’ve not visited an airport where they’ve used their own jargon. Of course, there are cultural differences. For example, I’m sure I’ve seen a sign for ‘Bathroom’ in a US Airport. As a British bloke I’m sure this would make it difficult to find if I was in the muddled state of badly needing a pee. </p> <blockquote><p> <dl><dt><strong>Maps</strong></dt><dd>The number of passengers capable of reading (and correctly interpreting) a map is negligible. By and large, maps are display windows for the presentation of airport facilities and not substitutes for signposting.</dd> <br> </dl></p></blockquote> <p> I hate maps. Hate them. Why is it, in any attraction/shopping centre/airport, the designers of maps see it as a creative exercise? I’ve lost count of the amount beautiful isometric maps that are completely useless. </p> <blockquote><p> <dl><dt><strong>Fonts</strong></dt><dd>Only graphic designers show interest in fonts. Do not use more than one font and, unless you have plenty of time and money, stick to Frutiger, Clearview, Gill or Meta</dd> <br> </dl></p></blockquote> <p> This one made me chuckle, but he’s got a very good point. Take Cardiff for example. Arial? Why? Why not use Clearview, or Frutiger. Why use a font that is an inferior knock-off of Helvetica that is less legible as a signage typeface? Licensing? Probably. </p> <blockquote><p> <dl><dt><strong>Illuminated signs</strong></dt><dd>Don’t save money on lighting. All primary signs require built-in lighting. The sunnier the climate and the more daylight available, the bigger the need for illuminated signs.</dd> <br> </dl></p></blockquote> <p> I don’t think any of the signs in Cardiff airport where illuminated (although I may be wrong on that). </p> <blockquote><p> <dl><dt><strong>Pictograms</strong></dt><dd>Don’t expect too much of pictograms. Always add text to less generally known functions.</dd> <br> </dl></p></blockquote> <p> This is another little beauty and can be applied to web design with regards to icons. Don’t expect too much from them. </p> <blockquote><p> <dl><dt><strong>Put it to the test</strong></dt><dd>Test all ideas that deviate from the standard solution.</dd> <br> </dl></p></blockquote> <p> This must be the number one recommendation for signage, but note the closing words. But, that said, testing standard solutions can always solidify thinking and may throw up the odd surprise. </p> <p> Some wise little nuggets of design advice. </p> <p> There are more photographs of airport signage, good and bad, on the aptly named <a href="">Airport Signage</a>, <a href="">Airport Signs and Pictograms</a>, and <a href="">Signage Systems</a> Flickr groups. </p> Design isn’t about tools 2008-06-05T00:00:00+00:00 <p>The other day, <a href="">37Signals</a> wrote about <a href="">Why they skip Photoshop</a>. Fine. I think that suits them and their workflow, considering they don’t do client work and have an established UI style on which to draw. <a href="">Jeff</a> does a much better job of <a href="">summarising my thoughts</a> on the subject that I could. As does <a href="">Jon</a> </p> <p> So, yesterday, we see <a href="">this post</a> on <a href="">SVN</a>, presumably as a follow up. Is it an inflammatory post? Or, do they have a point? </p> <!--more--> <h3>Horses for courses</h3><p> As Jeff pointed out, and many of the commenters on the first post, choosing to use Photoshop is really a workflow thing. If you find it doesn’t suit your workflow, and you have an established UI then feel free to ditch it. When I worked at the BBC, I did that for a while as well. It works very well for a lot of the modular, micro-design tasks needed within a design that is already agreed. However, when a new design was required, I often needed Photoshop to give me the holistic design view. As Jon points out in his post, it’s much quicker to do that in an image editor, than using HTML/CSS. </p> <p> </p><p>Now matter how hard I tried, HTML and CSS could not give me that overview that Photoshop could. The subtle interplay of typography, colour, texture and whitespace is difficult to evaluate with HTML when you throw browser quirks in the mix.</p> <p></p> <h3>Do print designers need to know how to build a press?</h3><p> I think <a href="">David’s post</a> on SVN holds true to some degree. Yes, if you’re designing for the web you need to know the tools of your craft. But that’s the thing, Design is not about tools. Photoshop is a tool, as are HTML and CSS. Design is about solving problems, not about software. Some people choose to do that with Photoshop, and some with HTML and CSS. Neither route is the correct way of doing it and it’s a mistake to presume it is. </p> <p> You can also argue that knowing how to build things in HTML/CSS limits your creativity. You work within your own boundries. If you’ve always had a sticking point with flexible layouts, then chances are, if you have to build the thing, you’re preference would be to avoid them. This is one of the disadvantages of knowing your way around HTML/CSS as a designer - it’s hard to break free of those constraints. </p> <h3>Tools, tools, tools</h3><p> I’ve always liked to abstract my design process from the tools I use. Photoshop, Fireworks, HTML/CSS, Pen and paper, HTML Wireframes using Blueprint, Omnigraffle—It doesn’t really matter. You use what’s best for your workflow at the time. These are all <em>tools</em> in the same way that a pencil is a <em>tool</em>. </p> <p> They are implements to realise a solution to a problem. </p> <p> You say tomato and I say toe-may-toe. <br> </p> Where’s the D in D&AD? 2008-05-20T00:00:00+00:00 <p><img src="" width="100" height="101" alt="A D&AD Yellow Pencil" class="thumb">On the 15th May, the winners of this year’s <a href="">D&AD awards were announced</a>. This year, there were only <a href="">two nominations for graphic design</a>, neither of which won an award. There were <a href="">many more website nominations</a>, and <a href="">one was even awarded a yellow pencil</a>. Although, typically, it’s a flash-based, motion-based ‘microsite’ masquerading as a website. Now, that aside, why did the graphic design category not produce any winners this year? </p> <p> That very question has got me thinking about industry awards in general and why graphic design, and its application to websites, no longer has a place in the D&AD. </p> <!--more--> <p>When I was in university, the annual D&AD reference book was eagerly awaited by the entire year. True, it was more sought after by the students keen on Advertising and product design, but, for me, there was particular interest in the typographic and graphic design awards. The D&AD winners represented the pinnacle of our craft. If it was in The Annual, then, frankly, you’ve made it. </p> <p> Of course, this was in a time when there was no web to speak of. Design companies could not self-publish their works. No, they had to pay an entry fee to the D&AD for work they deemed ‘good enough’. The D&AD then published those works. Aside from having the yellow (or even the black) pencil award, your work was distributed and packaged as the very best in the craft. That alone was worth the application fee. But now, I think things are different. </p> <h3>Live and die by awards</h3><p> Awards are incredibly important for advertisers. They are the industry benchmark. Way back when, I was an intern at an ad agency. I was also an Art Director at a large web shop with a heavy advertising bias. Throughout my time there, it was obvious that many creatives saw winning an award (like the D&AD) was more important than solving the client’s problem. There was an unhealthy emphasis on industry navel-gazing. I’ve been in production meetings where the number one topic on the agenda was which awards was the agency chasing this year. </p> <h3>Just right</h3><p> Thankfully, that mentality has largely escaped our industry. Yes, there are awards such as <a href="">The Webbys</a>, <a href="">SXSW Web Awards</a>, to name a couple. But, they certainly don’t have the industry weight as the D&AD awards. </p> <p> I think it comes down to validation. Maybe, industry-wide, this year, graphic designers don’t feel the need to validate their work beyond it fulfilling the brief. Let’s not forget that design is a commercial practice. We do stuff, for clients, for money. And that’s where I think the web design industry has got it just right. Largely, we’re focussed on solving problems for our clients. Our business models are based on that, not on winning awards. And we certainly don’t need the D&AD, or anybody else, to tell us we’re doing a great job thank you very much. </p> Coolspotters. Where people and products meet 2008-05-07T00:00:00+00:00 <p><img src="" width="400" height="93" alt="Coolspotters: Where people and products meet">Last year, <a href="">Mike D</a> introduced me to a friend of his who had just started work on an exciting new project. <a href="">Coolspotters</a>, the first major project from <a href="">Fanzter</a> was built on the back of a simple concept: combine products and people and let the users create the connections. </p> <!--more--> <h3>Social Shopping</h3><p> Of course, the idea of social shopping isn’t a new one. Just look at Amazon for example. The majority of my purchasing decisions on Amazon are based upon the reviews and recommendations of those products. But, <a href="">Coolspotters</a> does something new. It places the products <em>in context</em> to their useage with celebrities. For many aspirational brands, it’s this that defines them. Not the product itself, but who it’s being bought by, and who’s using it. </p> <p> <img src="" width="615" height="561" alt="Coolspotters final UI"></p><p class="caption">The Coolspotters launch UI. The revision includes a lot of work subsequently done by Fanzter based on our initial design concepts.</p> <h3>More than just another social app</h3><p> The interesting potential for Coolspotters is that it becomes a repository for those transitory trends of fashion. So, in time, you could look back and see who were the early celebrity adopters of the iPhone, or which car was in vogue for last Autumn. All of this data could be mapped and charted to possibly show some interesting trends in how brands infiltrate and work through this highly-public, and influential, sector of society. That is something I’d love to see exploited. </p> <h3>My involvement</h3><p> The challenge given to <a href="">Mark Boulton Design</a> was to craft the user experience and concept (together with branding) which could then be honed further by the talented <a href="">Fanzter</a> development team. We’ll have more about this shortly in a short case study on the studio site. </p> <p> <a href="">Coolspotters</a> launches later today. You can read a little more about it on <a href="">Techcrunch</a>. </p> Alys Rose Boulton 2008-04-22T00:00:00+00:00 <p>Little Alys was born on 15th April 2008, weighing in at 7lb 8oz. Isn’t she a looker? There are <a href="">more photos up on Flickr</a>. </p> <p> <img src="" width="396" height="263" alt="Alys Rose Boulton"> </p> <p> A proud dad doesn’t even come close. :) </p> abcdefghijklmnopqrstuvwxyz 2008-03-06T00:00:00+00:00 <p>A few days ago, <a href="">Keeran</a> sent me a link to this video by Job & Roel Wouters. It’s such a beautifully simple piece. Watching Job draw the letterforms is mesmeric enough, but when his son (?) joins in, I found myself laughing as he tries to imitate his fathers work. This leads to some funny-looking characters (c and d are particular favourites of mine). </p> <p> I’m particularly jealous of the assured free-hand script of Job. It really is a joy to watch. </p> <!--more--> <h3>‘abcdefghijklmnopqrstuvwxyz’</h3> <p> <object width="425" height="355"><param name="movie" value=""><param name="wmo" value="transparent"><embed src="" type="application/x-shockwave-flash" wmo="transparent" width="425" height="355"></object> </p> <p> a video by Job & Roel Wouters <br> recorded in Amsterdam at studio Xelor early 2008 </p> <p> <strong>Hand 1</strong>: Gradus W. Wouters, Amsterdam, the Netherlands, 2003 <br> <strong>Hand 2</strong>: Job Wouters, Leiden, the Netherlands, 1980 </p> <p> <strong>Director</strong>: Roel Wouters </p> <p> <strong>Director of photography</strong>: Sal Kroonenberg <br> <strong>Music</strong>: Rik Elstgeest & Bo Koek <br> </p><p><strong>Production asst</strong>: Ton de Munck</p> <p></p> <p> notes from the director: <br> <blockquote><p>‘Job and Gradus are both ambitious concerning letters. Spontaneous jam sessions in our studio inspired us to make this film about the fun drawing letters’</p></blockquote> </p> From Poly to Pole 2008-02-29T00:00:00+00:00 <p><img src="" width="100" height="75" class="thumb">Every six months or so, my brother-in-law, Bruce Gordon, updates <a href="">his website</a> (which I designed a while ago) with his latest work. I’m generally not one to pimp sites, especially family, but Bruce’s work continues to amaze me. He’s a Head Sculptor for the film industry in the UK and his website is glimpse into the world we rarely see--set design and construction. </p> <!--more--> <h3>Fred Claus</h3><p> His latest project (other than Wolf Man that he’s currently working on), is <a href="">Fred Claus</a>. He was the HOD (Head of Design) Sculptor for the project, which I think means he ran the crew whose responsibility was realising the art department maquettes. Now that just blows me away. Scaling up a clay model, that may only be a few inches across, into a life-size construction. Of course, the art department is concerned with the vision of the production, not if the thing can <em>actually be built</em>. That’s up to Bruce and his team to figure out. </p> <p> <img src="" width="600" height="450" alt="Santa's house in Poly"> <br> <img src="" width="600" height="450" alt="Poly Building showing construction"> <br> <img src="" width="600" height="450" alt="The finished North Pole set"> </p> <p> These images from Fred Claus show the scale of construction and attention to detail. From intricate wood sculpting, to ensuring layered snow on roof tops looks like it actually might drop off any minute. All of this work, and it’s an incredible amount, can only be on-screen for a few minutes. I guess that’s the price for trying to accurately portray another reality. </p> <p> If you have a mo, browse around his site. There’s some stunning work on there from production such as <a href="">Charlie and Chocolate Factory</a>, <a href="">Batman Begins</a>, and <a href="">Harry Potter and the Philosopher’s Stone</a> </p> Ten Crimes Against Web Typography (and how to avoid them) 2008-02-26T00:00:00+00:00 <p>Cardiff is finally getting its act together. Tonight, I&#8217;ll be speaking at the second <a href="">Cardiff Geek Night</a>, along with <a href="">Dan Zambonini</a>. It&#8217;s a &#8216;microslot&#8217; that will last about 15 minutes, leaving plenty of time for questions. </p> <p> When I spoke in November last year at the Web 2.0 Expo in Berlin, the feedback I got from my Typography presentation was generally positive. It seemed that most of the people I spoke to preferred the last 10 minutes, on Micro-Typography, and all the quick tips that you could use every day. Tonight will be more of the same, with a slightly different slant. I&#8217;m going to highlighting my top ten crimes against web typography, and how you can put them right. Ten crimes (and subsequent tips on correcting them) in ten minutes. I&#8217;m told the talks will both be recorded, so I&#8217;ll post up a link to them (and slides), when they&#8217;re all done. </p> <p> If you&#8217;re at a loose end tonight, and fancy a pint, then feel free to come along. We&#8217;ll be at <a href="">Cafe Floyd from 7pm.</a> </p> Start Your Own Business 2008-02-20T00:00:00+00:00 <p>This article was published in <a href="">.Net magazine</a> before Christmas last year. I was asked to write a small article on making the leap to working for yourself (as it was still fresh in my mind). It&#8217;s by no means a definitive guide (for example, there is no mention of the legal aspects of setting up and running a company). It&#8217;s also aimed at a UK market, but a lot of this will work no-matter what country you&#8217;re in. Most of it is actually just common sense. </p> <p> It&#8217;s been eighteen months since I went freelance, and almost six months since starting my <a href="">small design studio</a>. I&#8217;m no expert. So, this article documents what I did, and when. It also features a little interview with our very own <a href="">Colly</a>. </p> <!--more--> <p><strong>[Article originally published in .Net magazine in November 2007]</strong> </p> <p> So you want to work for yourself? And why not. You can dictate your own hours, have the freedom to take time off when you want it without getting into trouble from the boss; you can do what you want to do, when you want to do it. At least, that&#8217;s what I thought when I started working for myself a year ago. I couldn&#8217;t have been more wrong. </p> <p> The freedom of being in control is terrifying. The pressure of knowing it really is down to you whether you succeed or fail can weight heavy. </p> <p> Where I live, in Wales, almost 400 people a week start their own business. Everybody is different and end up giving it a go for a variety of reasons. However, most of these people share common ground. Things that they need to think about when planning to go it alone. </p> <p> </p><p>As I said, I’ve only been my own boss for a year now, so I wouldn’t call myself an expert on this. I can however tell you my story, and the mistakes I made along the way.</p> <p></p> <p> </p><h3>Why do it in the first place?</h3><p> Starting a business is one of the most challenging, but rewarding, things you can do. The reason most people never end up doing it&#8212;although I&#8217;m sure many would love to&#8212;is because they think it takes luck, a clever idea or just knowing the right people. That&#8217;s not true. It&#8217;s about you. </p> <p> Maybe you have a great idea that you just can&#8217;t keep a secret anymore. Maybe a colleague has approached you to setup business with them on the back of a contract they&#8217;ve just secured. Maybe you just hate your job and wish you were your own boss. The catalyst is different for everyone. </p> <p> For many people, including myself, they&#8217;ve found their career take a certain path where self-employment is the next natural progression. I was working full-time at the BBC as a designer when my enquiries to do freelance work reached such a peak that I was doing two jobs. At that point, one of them had to go before my wife did! </p> <p> Whatever the reason to set up business, it&#8217;s a personal one that only you can make. </p> <p> </p><h3>Do you need a business plan?</h3><p> A Business Plan is just that; a plan about your business. It&#8217;s used to look ahead, allocate resources, focus on key points, and prepare for problems and opportunities. It doesn&#8217;t need to be a scary document that you take months to write. However, some banks, investors, or other funding bodies will insist on a well-written, concise Business Plan on which to base their decisions, so in that sense, it&#8217;s a very important document. </p> <p> A standard business plan will contain the following: </p> <ol> <li><strong>Executive Summary:</strong></li> Write this last. It&#8217;s the summary of the document. <li><strong>Company Description:</strong></li> This details how and when the company was formed. <li><strong>Product or Service:</strong></li> Describe what you&#8217;re selling. <li><strong>Market Analysis:</strong></li> You need to know your market. Establish the need for your product and why people need it. <li><strong>Strategy and Implementation:</strong></li> Be specific. Investors love this stuff. They need to know you have a clear plan of attack. <li><strong>Management Team:</strong></li> Include backgrounds of key members of the team. <li><strong>Financial Plan:</strong></li> Include a profit and loss account, cash flow breakdown and a balance sheet. </ol> <p> Make no mistake, writing a business plan can be a daunting prospect, but it doesn&#8217;t have to be great the first time around. A business plan should be revised throughout the business&#8217; lifetime - it&#8217;s not just for startup businesses. I&#8217;ve just gone through my third draft in my first year of business. </p> <p> As usual, the web has some great resources to offer. The BBC has a good overview of &#8216;How to Write a Business Plan&#8217; (<a href=""></a>). </p> <p> </p><h3>Get help</h3><p> This is perhaps the most important step in setting up your own business. You will realise you can&#8217;t do it on your own. You will need good advice from the following people: </p> <ol> <li><strong>An accountant:</strong></li> Preferably a small business specialist. <li><strong>A bank manager:</strong></li> All new businesses should be allocated a small business specialist from their chosen bank. <li><strong>A financial advisor:</strong></li> You will need the advice of somebody who can assist in the financial direction of the company. <li><strong>The Government:</strong></li> Yes, the government can help. </ol> <p> Out of all of these, I&#8217;d advise you spend the most time trying to find a really, really good accountant. Many businesses owners will tell you that a good one is worth their weight in gold. In addition to the usual accounts stuff they can give you invaluable advice. </p> <p> A great source of business advice for England and Wales is the Business Link website. (<a href=""></a>) Here, you can find information on starting up and funding options, to Health and Safety and employing people. </p> <p> </p><h3>The different kinds of &#8216;company&#8217;</h3><p> To register as self-employed in the UK, you have to register with the Inland Revenue as one of several company types: </p> <h4>Sole trader</h4><p> Being a sole trader is the easiest way to run a business, and does not involve paying any registration fees. The downsides are you are personally liable for any debts that your business incures and, if you do well, you could be paying high income tax. </p> <h4>A Partnership</h4><p> A partnership is like two or more Sole Traders working together. You share the profits, but also the debt. </p> <h4>A Limited liability partnership (LLP)</h4><p> </p><p>An LLP is similar to a Partnership. The only difference is the liability, or debt for example, is limited to investment in the company.</p> <p></p> <h4>A Limited liability companies</h4><p> Limited companies are separate legal entities. This means the company&#8217;s finances are separate from the personal finances of their owners. </p> <h4>Franchises</h4><p> A franchise is like a license to an existing successful business. </p> <h4>Social enterprises</h4><p> This one probably doesn&#8217;t apply to web development. According to Business Link, Social enterprises are &#8216;&#8230; businesses distinguished by their social aims. There are many different types of social enterprises, including community development trusts, housing associations, worker-owned co-operatives and leisure centres.&#8217; </p> <p> This is something you must do in order to pay your taxes. Speak to your accountant about which will suit your needs better. </p> <p> </p><h3>How to finance yourself</h3><p> Before I made the leap into full-time self-employment, I read a lot of articles which said I&#8217;d need six months salary in the bank before I went out on my own. Although that is good advice, depending on your salary, that is quite a hefty chunk of cash that will be hard to save. </p> <p> Like most people, I didn&#8217;t have that sort of money knocking about so I had to have a close look at cash flow over the first few months of business to ensure I could pay myself. This cash came from several sources. </p> <ol> <li><strong>Money in the bank.</strong></li> I did have some money in the bank. Not a huge amount, but I had some. <li><strong>Contracts.</strong></li> I had a number of contracts signed and ready to go when I went on my own. These proved invaluable in kick-starting my cash flow. <li><strong>Funding.</strong></li> There are many funding options available. Grants, loans and private investment. All of them except grants require you to pay them back though, and for that you need a good business plan and an idea of how you&#8217;re going to pay them back. Grants (and small business loans) are available from local government bodies for example. I&#8217;d advise making an appointment with your local Business Link to discuss your options. <li><strong>The Bank.</strong></li> Get an overdraft facility. Mostly, even for limited companies, these will have to be personally guaranteed - which means if you default on paying it back then you&#8217;re personally liable - but they can provide a vital buffer for cash flow in those early days. <li><strong>Charge up-front.</strong></li> When you get a contract in, especially if it&#8217;s for fixed cost, then charge a percentage up-front. This will help with the cash flow. If you can&#8217;t charge up-front, then make sure you charge monthly. Again, it will keep the cash flow nice and happy. </ol> <h3>Basic accounting</h3> <h4>What is Cash Flow?</h4><p> Cash Flow is the life blood of your new company. It&#8217;s the ebb and flow of cash coming in and going out. The aim is to have a positive cash flow, so there is more cash coming in than there is going out once you deduct all your overheads. </p> <p> You will also need to forecast your cash flow. This is still one of the most sobering things I have to do regularly because is clear shows the current state of your business. Every month I review my cash flow and I forecast for three months, and for six. I make a list of all the invoices which need to be sent in those two time periods and make sure I&#8217;m hitting my monthly and quarterly cash flow targets. Like I say, it can be scary at times. </p> <h4>Tax</h4><p> There are two types of tax: Income Tax and Corporation Tax. For Sole Traders, Partnerships and LLP&#8217;s, you will be charged income tax on your profits. That&#8217;s important, so I&#8217;ll say it again. You&#8217;ll only be taxed on your profits. Things like equipment costs, rent, phone and other office expenses are deducted from this. </p> <p> Limited companies are charged Corporation Tax on their profits. The employees of that company are charged income tax on their income. As with a Sole Trader etc. Limited companies are only taxed on their profits. </p> <h4>VAT</h4><p> If your business earns &#163;64,000 or over in a financial year, you have to register for VAT. If you think you might hit that target during the year, you can voluntarily register before hand. </p> <p> Being VAT registered means you have to charge your customers for VAT on top of your services. Currently in the UK, VAT is 17.5%. You&#8217;re in effect collecting taxes for your government. Nice aren&#8217;t you? One of the advantages of being VAT registered is that you can claim VAT back of purchases for your business. Say you bought a new computer, you could claim the VAT back from that purchase. </p> <p> All this VAT gets added up and you have to pay the government every quarter. </p> <p> For more information of your obligations as a business to pay your taxes, go to the Inland Revenue website. There are some great tools on here to help you - you can even file your taxe return online. </p> <p> </p><h3>Establishing a customer base</h3><p> Prior to starting my own business, I worked full time. As a designer, or developer, you will probably get enquiries to do freelance work in your spare time. This is the time to start building up your customer base whilst you still have the security of a full-time job. Sure, it means burning the candle at both ends, but it does ensure a smoother transition from employed to self-employed. </p> <h4>Schmoozing </h4><p> A good way to drum up business is to network. This can be done traditionally, such as Business Club lunches and events organised by your local authority. One of the most effective ways of getting your face known is by attending the many web conferences, workshops and meetups going on throughout the country. From <a href="">Pub Standards</a> and the <a href="">Oxford Geek Nights</a>to the larger conferences such as <a href="">@Media</a> and <a href="">dConstruct</a>. They all provide a great platform to meet people in the industry who may require your services. </p> <h4>Contribute and Interact with your market</h4><p> If you&#8217;re a design studio who designs websites but has a strong focus on User Experience design, then write a company blog about that subject. If you write interesting content, and give it away free, then traffic to the site will increase as will your page rank in Google. This means that if a potential client searches for User Experience, they will get your site in their search results and there is a clear path into your site from some quality content. </p> <p> Giving a little quality content away for nothing may make the difference in landing that big next project. </p> <p> </p><h3>Making the switch from being employed to self-employed</h3> <h4>The power of the Day Job</h4><p> If you&#8217;re employed, but planning to go freelance, then keep your day job for a while. Get work in to work in your spare time, but use the cash that generates as a buffer for when you do go it alone. Make sure the two worlds don&#8217;t collide though. Keep your boss happy in work, but now is the time to be a bit of a jobsworth. Get in on time, leave on time, take an hour for lunch - do everything you can to maximise the time you have available to work on the freelance projects. </p> <h4>A smooth transition</h4><p> Working two jobs is hard, and you won&#8217;t be able to keep it up for long. This stage in starting up your business is perhaps one of the most difficult. The aim is to ensure a smooth transition from being employed to self-employed. You will need some cash in the bank, a few contracts for your first couple of months of being on your own. The hard thing is keeping you current boss happy in the process. It&#8217;s not easy. </p> <p> There are a number of great job boards which advertise design and development projects regularly. The two I&#8217;ve used successfully in the past to drum up some business are the <a href="">37Signals Job Board</a>, and <a href="">Cameron Moll&#8217;s Authentic Jobs.</a> </p> <p> </p><h3>How to achieve long term success</h3> <h4>Keep one eye on the future</h4><p> Forcasting business can be quite difficult. How does cash flow look in three months time? Are you saving enough money for the end of year tax bill? To succeed in business I think you need one eye on the present and one eye fixed firmly in the future. The short-term future. Whilst it&#8217;s great to have dreams and aspirations for your new business, that shouldn&#8217;t be at the expense of ensuring you have enough work coming in over the next six months. </p> <h4>Customer service</h4><p> Remember if you&#8217;re a designer or developer, you&#8217;re providing a service. We&#8217;re in a service industry and with that comes Customer Service. I know it may sound a bit trite, but treat clients as you would like to be treated. Treat them with respect and never lose sight of that fact that they are paying the bills. </p> <p> </p><h3>Wrapping up</h3><p> </p><p>Making a leap of faith is the first step to starting a business. However, for your business to grow and flourish, you will need much more than faith. First off, you must have upmost confidence in your ability to make it work. You need to be aware of the risks, but not scared to death by them. You’ll need to have good organisational skills, flexibility and a high degree of commitment. Most of all, you need to have fun and love what you do.</p> <p></p> <h3>Interview: Simon Collison</h3> <p> <strong>[The following is an interview conducted in Nov 2007]</strong> </p> <h4>Q. Why did you end up working for yourself?</h4> <p> After four happy and successful years with another great agency, I did start to dream about being in control. I&#8217;d sometimes receive offers to work for other people, but nothing ever grabbed me. I&#8217;d get a few people emailing me every week with requests for websites, and I grew in confidence, realising that I could actually earn enough money to survive. Generally, I just wanted to nitpick clients and decide who to work with on projects. </p> <h4>Q. What do you love about working for yourself now?</h4> <p> The autonomy. I love making my own decisions and being in total control of the direction in which we are heading, the clients we choose to work with, and being able to handpick colleagues! </p> <h4>Q. What don&#8217;t you like about it?</h4> <p> Hmm, lots. The hours (I did over 100 hours last week). In general, it can take over your life if you want to produce quality work with no cutting of corners. Sacrifices are inevitable &#8211; everything from working the majority of evenings and weekends to missing your best friend&#8217;s birthday. If there is an immovable deadline and the work needs doing, the buck stops with you, and no excuses are good enough. </p> <p> Perhaps the biggest shock to the system is the unavoidable responsibility for ensuring that cash flow is steady and that we have enough money coming in to pay the wages, cover office rent and general overheads. </p> <h4>Q. If there where three key pieces of advice you could give to someone who was thinking of going into business for themselves, what would they be?</h4> <p> Just three? OK. One. Achieve a work/life balance and stick to it as best you can. Ultimately though, except for crisis stuff, you&#8217;ll end up putting work first, so be prepared for that. </p> <p> Two. Trust yourself. You will make mistakes, but generally the decision to work for yourself won&#8217;t be one of them. Have the courage of your own convictions and just go for it! You will know when you are ready and have enough work or contacts to ensure you break even and can pay yourself. </p> <p> Three. Realise that you are not an expert at everything, so get people to help you. Get business advice, get to know your bank manager, and use an accountant. When you are seriously busy, the last thing you&#8217;ll want to be doing is invoicing, or doing anything at all in Excel. </p> <h4>Q. What&#8217;s the biggest mistake you&#8217;ve made since you started up?</h4> <p> </p><p>Under-charging in the first few months. The temptation from day one is to bring the work in and build up a client list. This kind of thing will not wreck your business, as you’ll simply put the extra hours in, but it is seriously detrimental to your health and lifestyle, and even the quality of the work you produce.</p> <p></p> <h4>Q. Where do you see your business in two years time?</h4><p> Thriving &#8211; you gotta be confident, right? We&#8217;re lucky in that word of mouth and recommendations bring the work to us. We don&#8217;t take this for granted and never will, but the hard work in our first year is paying off, and we now have a solid foundation to build upon. </p> <p> I never dreamed there&#8217;d be five of us within a year, and we hope to grow to about ten soldiers in the next 24 months. When you work this hard, you have to remember to be proud and enjoy what you do. </p> <p> <strong>[Finally, rounding off with a couple of boxouts from the article]</strong> </p> <h3>TIMELINE: Six months to making the plunge</h3> <p> <strong>6 Months to go</strong>&#8212;Start building a customer base. Trawl the freelance websites (job boards - authentic jobs etc) and get yourself a few freelance gigs. Register your business with the Inland Revenue. (see section on deciding what business you should be). I&#8217;m afraid for the next six months, you&#8217;ll be working two jobs. If you can get funding for your venture, start researching what you can get and when. </p> <p> <strong>5 Months to go</strong>&#8212;Continue to get those freelance gigs in. Begin to research a good local accountant. Book an appointment with several banks - you&#8217;ll need to get a business bank account - but it&#8217;s worth shopping around. Have meetings to discuss funding opportunities. </p> <p> <strong>4 Months to go</strong>&#8212;Found a good accountant? Right, you need to have a meeting with him/her regarding your new venture. Finalise your bank account with your chosen bank. Continue to build up your customer base. Now is the time to speak with some local companies to see if they need freelance help. Are you going to be working from home? If not, you need to start looking for somewhere to work from. </p> <p> <strong>3 Months to go</strong>&#8212;You should be getting some money in from your freelance gigs by now. Save it&#8212;you might need it in a few months. </p> <p> <strong>2 Months to go</strong>&#8212;You should be working like a dog now and really looking forward to working for yourself. At this stage, everything should pretty much be in place for you to make that smooth transition from employed to self-employed. </p> <p> <strong>1 Month to go</strong>&#8212;Hand in your resignation. If possible, try and get some work booked in for the first three months of being on your own. Make sure you also get paid by these clients monthly so cashflow isn&#8217;t an issue. </p> <p> </p><h3>Ten things I wish I&#8217;d known</h3> <h4>10. Wearing many hats</h4><p> Before I set up business, I&#8217;d read a fair few &#8216;how to&#8217; books and a number of blogs that talked about the many roles you would have to adopt whilst running your new business. I still struggle with it. On a typical day I am a designer, a project manager, a salesman and a book-keeper. Each role requires a different mindset and it can be very difficult to switch between them. </p> <h4>9. Home is for home things</h4><p> Keep work and home separate. When you work at home, this can be difficult. When I had my workplace in my house, I made sure it was a completely different room which was furnished like an office&#8212;not just your spare room with a desk in it. One tip which worked for me: wear your shoes during the day, when you&#8217;re working, and at night, take them off. It&#8217;s a silly little thing, but you will soon associate shoes with work. So, when you take them off, that&#8217;s home time. </p> <h4>8. What goes around comes around</h4><p> </p><p>Be nice to people. Business doesn’t have to be unpleasant. Treat people how you expect to be treated. Be fair, professional and above all, polite.</p> <p></p> <h4>7. Don&#8217;t take on too much</h4><p> This one is a killer. I still do it and probably will for many years to come. When you don&#8217;t have any work booked in in three months time, the tendency is to get more work in now with the hope that, financial, you&#8217;ll be more stable in the months you don&#8217;t have work. It makes sense, but you end up working too hard. As a result, quality dips, customers get a bad service and, over time, your business will dry up. </p> <h4>6. Hire somebody before you need to</h4><p> I&#8217;ve recently had this problem. I&#8217;ve been so busy recently that I needed help. After hiring someone, I realised I&#8217;d been in this position for too long. I needed help about three months before I thought I did. </p> <h4>5. Don&#8217;t under-charge</h4><p> Work out your costs on an hourly, or daily, basis and then add 30%. It covers costs and, until you get the hang of it, you&#8217;re probably under-charging anyway. I was. </p> <h4>4. Confidence</h4><p> Remember, you&#8217;re the expert. You&#8217;re not doing this job because you&#8217;re average at it. If a customer wants to buy your product, or hire you, it&#8217;s because you&#8217;re good at what you do. </p> <h4>3. Customer Service</h4><p> </p><p>If you’re a web designer or developer, unless you’re producing and selling a product, you will be providing a service. With a service comes Customer Service and, yes, customers are always right.</p> <p></p> <h4>2. Accounting Software</h4><p> I was using a homemade system coupled with an Excel spreadsheet for my accounting needs. As the business grew, I needed something a little robust. I wish I&#8217;d learnt Sage or something sooner because now I don&#8217;t really have the time. </p> <h4>1. Plan for tomorrow</h4><p> I have three to-do lists. A Month list, a Three Month and a Six Month. Each list has a bunch of things I need to do for that time period. This allows me to have short, mid and long term goals. I class Six Month as long term here as, in this industry, I believe you need to be adaptable and can&#8217;t really plan for more than six months in advance. </p> <p> </p><h3>Just the way I like it <p></p> <p> As I said, this is just the way I set things up, and some of the many thoughts and conclusions that I came to over the past couple of years of running my own business. Hope it may help some of you thinking of taking the plunge. </p> </h3> Coolspotters and Garcia Media 2008-01-19T00:00:00+00:00 <p>It&#8217;s been a good while since I&#8217;ve talked about any work <a href="">Mark Boulton Design</a> has been up to. That&#8217;s mostly because the projects we&#8217;ve been working on have been under wraps. Until now that is. One project is now live, the other coming very, very soon. </p> <!--more--> <h3>Coolspotters: If it&#8217;s cool, they&#8217;ve seen it</h3> <p> <a href="">Fanzter, Inc</a> hired Mark Boulton Design last year to design their new web application, <a href="">Coolspotters</a>. Coolspotters is a consumer-focussed site that <q>offers an experience that could shift the way people discover great products</q>. </p> <p> <img src="" width="615" height="301" alt="Coolspotters Logo: Designed by Mark Boulton Design Ltd."> </p> <p> The design challenge was considerable&#8212;from the branding to designing the UX. We worked closely with Fanzter, drawing on our experience with working client-side, to hone the product over many iterations. I don&#8217;t mind saying, the result of this close collaboration is fantastic. But, you may have to wait a few weeks before getting to grips with the site as Fanzter are opening it up for <a href="">beta applications</a> now, before launching proper shortly. </p> <h3>Garcia Media</h3> <p> <a href="">Garcia Media</a> is one of the world&#8217;s leading news design studios. Designing publications such as The Wall Street Journal, The Miami Herald, Die Zeit and small community papers, they have unparalleled experience and an industry reputation to boot. </p> <p> <img src="" width="615" height="430" alt="Redesigned Garcia Media website"> </p> <p> I had the pleasure of working with <a href="">Dan</a> and <a href="">Alex Rubin</a> on the design, as well as the in-house team at Garcia Media. Mario Garcia, Jr. has <a href="">penned a blog post</a> on the site that explains the background, design and implementation much better than I ever could. </p> <h3>Coming up&#8230; </h3> <p> We&#8217;re thrilled to be working on some incredibly exciting projects at the moment&#8212;from FTSE 100 corporate redesigns and web applications for TV networks. Through to small, simple websites for companies with a great idea. In addition to the web work, there are a few exciting things happening behind the scenes at Mark Boulton Design that hopefully I&#8217;ll be able to talk about really soon. </p> <h3>Share and Share alike</h3> <p> So, I&#8217;ve talked about my work. How about you talk about yours? What have you been up to? I&#8217;d love to hear. Feel free to link it up (although not too many as EE will spit your comment back at you!) </p> <p> </p> Sir Edmund Hillary: 1919 - 2008 2008-01-11T00:00:00+00:00 <p><img src="" width="203" height="152" alt="Hillary and Tenzing following their successful attempt on Mount Everest" class="thumb">Sir Edmund Hillary, one of two men to first scale Mount Everest and live to tell the tale, has died age 88. Not only was he a mountaineer of legendary repute, but he was a tireless humanitarian devoting much of his time to setting up schools and hospitals in Nepalese Himalayan region. </p> <p> My initial interest in <em>armchair</em> mountaineering was awakened by watching a documentary of Hillary and Tenzing&#8217;s first ascent. Since then, I&#8217;ve consumed countless books and films on the subject&mdash;more recently, I&#8217;ve finally finished reading <em>The White Spider</em>, a book documenting the first ascent of the north face of the Eiger, by Heinrich Harrer. It&#8217;s probably an interest I&#8217;ll have for the rest of my life, and it&#8217;s down to that first documentary I saw of two guys, with primitive equipment, hauling themselves up the tallest mountain in the world. Inspirational stuff. </p> Twitter didn’t eat my blogging, 2007 did 2008-01-07T00:00:00+00:00 <p>Like a <a href="">few</a> <a href="">other</a> people, I&#8217;ve found myself into 2008 already and not posted my &#8216;end of year&#8217; post. I don&#8217;t <em>think</em> it&#8217;s laziness, although it could be. I&#8217;m pretty sure I&#8217;ve not run out of things to say. Is it a lack of time? Probably. I certainly don&#8217;t have as much time as I did twelve months ago. But, that&#8217;s like everyone right? Why has blogging slowed right down then? Sorry, let me rephrase that, why has <em>web design</em> blogging slowed right down? Specifically, why has mine slowed to a crawl? </p> <p> Molly thinks <a href="">Twitter did it</a>. Well, I&#8217;m the <em>only</em> person who doesn&#8217;t use Twitter. I used <a href="">Pownce</a> for a while, but then that bored me. I dip in and out of <a href="">Facebook</a>, but I&#8217;m tired of all the pokes, headbutts and slamdunks. So, who&#8217;s the culprit? </p> <!--more--> <h3>A full plate</h3> <p> Personally, I&#8217;ve got an increasing amount on my plate. The business is going extremely well. We&#8217;re expanding, new clients coming on board and as such, there&#8217;s a lot more to do - from admin and project management to actually get my teeth stuck into designing. </p> <p> Then there&#8217;s a big personal project Emma and I have been working on for the past few months. We&#8217;re building an extension on our house. Not personally you understand, we have a builder, but the time it takes to liase with our architect (which isn&#8217;t so bad as it happens to be my Dad) through to making sure the building is on track, is something I personally didn&#8217;t bargain for. We&#8217;ve got another 2.5 months to go on this project and it will extend out house by about 40% more living space, which will be great and it brings us onto our next project. </p> <p> </p><h3>Mini me</h3> <p> Emma and I are having a baby in April (which is why I won&#8217;t be attending SXSW this year). I&#8217;ve thought long and hard about whether I should write about it here - as you never know what could happen - but we&#8217;ve told our friends, colleagues and family a while ago, so I thought I&#8217;d mention it. Mother and bump are doing extremely well at the moment, and we&#8217;re both very excited about the next year. </p> <p> So, it really is like Grand Designs at the moment (a property development TV show in the UK where the partner always seems to be pregnant). We&#8217;ve got a deadline looming and a house to build. Which brings me onto the housebuilding process itself. </p> <p> </p><h3>Building a house is EXACTLY like building a website</h3> <p> I&#8217;ve found it fascinating. My Dad is an Architect, so I&#8217;ve grown up with a healthy interest in buildings, architecture and the like. My brother and I spent many a Saturday morning holding a three meter high ruler whilst my Dad took levels on a wreck of a building site. Therefore, the I don&#8217;t find the process particularly problematic. It does help having my Architect at the end of a phone though. </p> <p> What amazes me about the building process, particularly residential development, is the level of difference between what is on a plan compared to what the builder produces. Nowadays, plans are produced in CAD packages and plotted on high resolution plotters. They&#8217;re accurate, and to scale, to the nearest millimeter. Then the builder gets hold of it and it is somewhat <em>interpreted</em> rather than followed. I&#8217;m amazed at how much is just kind of worked out <em>as they go along</em>. Luckily, we have a great builder. He&#8217;s approachable and happy to talk over any small question or problem I have. We should count ourselves lucky. </p> <p> The parallels between building a house and building a website continue to make me smile. No-matter how much we like to plan, measure, specify, you will <em>always</em> end up with some degree of <strong>bodging</strong> on a project. I see this all the time on site at the house. But, as my Dad said, there&#8217;s <em>nothing wrong with bodging if it solves the problem</em>. No, it might not be as specified. It might not be the ideal way to do it. But, you know, sometimes you just need to get the job done and move on. </p> <p> </p><h3>Writing a book is bloody time-consuming</h3> <p> </p><p>I’ve been writing this book for over a year now. It’s over a year late and I’m not too happy about it. yes, I know I should try and finish it before the baby’s due, or the extension is finished, and I’m really, really trying. I have a fantastic editor, <a href="">Carolyn Wood</a>, but I do feel sorry for her. She doing a fantastic job of both editing my cobbled together thoughts and scribbles, and kicking me in the arse. We’re getting there with it, but it’s slow going and that’s entirely down to me.</p> <p></p> <p> There&#8217;s talk of the book being produced in print&mdash;initially a run of about a 1000. It will be full colour, hardback and distributed from the UK. As such, it won&#8217;t be cheap I&#8217;m afraid, but I&#8217;m hoping it will be worth the price. More details on that on the run up to the launch. </p> <p> I&#8217;ve been writing for a couple of other publications recently as well: <a href="">A List Apart</a>, <a href="">.net magazine</a> and <a href="">24ways</a>. I&#8217;m always thrilled to be asked, but it doesn&#8217;t half take a long time to come up with something that readers may find interesting. </p> <p> </p><h3>On to 2008</h3> <p> This has turned out to be a somewhat forward-looking post. 2008 has already got off to a brisk pace. <a href="">Mark Boulton Design</a> continues to pick up exciting contracts for varied clients. I still love every day and don&#8217;t regret the decision to go freelance over eighteen months ago. I did a bit of speaking last year, but as we&#8217;re due a new arrival in April, I won&#8217;t be doing any this year that require any amount of time away from home. It&#8217;s a shame, as I do enjoy it, but next year I&#8217;ll have plenty to talk about I&#8217;m sure. </p> <p> This year, I&#8217;m finishing the book. Oh yes I am. </p> <p> </p><p>I’m not going snowboarding, which is a killer.</p> <p></p> <p> I&#8217;m going to enroll in a boxing gym. Probably. </p> <p> That&#8217;s about it really. As you can see, Twitter didn&#8217;t eat my blogging last year, I did a pretty good job of that myself. Maybe this year I&#8217;ll sort that out. Or maybe I won&#8217;t. We&#8217;ll see. </p> BBC redesign tellys have rounded corners, right? 2007-12-14T00:00:00+00:00 <p>The BBC have <a href="">redesigned their homepage</a>. </p> <p> <img src="" width="218" height="66" alt="BBC Logo Beta thumbnail" class="thumb">I used to work for the <a href="">BBC</a>. So, I have a good understanding how difficult it is to work there and get anything complete and out of the door to a high, exacting design standard. So, today, when I was told the BBC has opened up the <a href="">new homepage beta</a> for feedback, and also prompted by <a href="">Jeremy’s post on the subject</a>, I wanted shove my oar in. </p> <!--more--> <h3>Web 2.0 design nonsense</h3><p> This is a shame. The BBC, in design terms, used to be a leader in the field. In one fell-swoop, they’ve turned follower. The trends, <em>from a few years ago</em>, are all over this thing. From the ‘Beta’ label and the rounded corners, to the gradients. Why? I honestly can’t think of a sensible response as to why they’ve gone down this route. <em>Hasn’t Facebook proved you don’t need to have reflections or curved corners to be ‘Web 2.0’?</em> </p> <p> Now, I’m well aware I’m judging this on face value. I’ve not been privy to any discussions that may or may not have taken place. </p> <p> However, Richard Titus—The acting head of User Experience at the BBC—has kindly <a href="">written a blog post</a> describing some of the specifications and requirements. </p> <p> High on this agenda was ‘widgetization’ (oh, I <em>hate</em> that word) of the content. Dynamically generated and syndicated content has been high on the content priorities for the BBC for many years. What puzzles me is why jump on a visualisation bandwagon? Recent newspaper designs, such as <a href="">The Times</a>, or <a href="">The Guardian</a>, deal with top-level content in a similar way. To all intents and purposes, the modules on their homepages are ‘widgets’. Perhaps it is that word that makes designers want to recreate <a href="http://www.netvibes/">netvibes</a>. </p> <h3>Innovation over information?</h3><p> I’m sure there are plenty of clever things going on under the hood on this homepage. From Ajax, and a <a href="">move towards PHP</a>, through to localised content and user customisation. My gut feeling on this, and this is a personal view of course, is that all this visual guff gets in the way of the information. The design aesthetic is <strong>not</strong> ‘simple, and beautiful’. It’s obtrusive and dated. </p> <p> My lecturer in university instilled a mantra into me: ‘don’t let the type get in the way of the words’. It can be applied to any design. Don’t let the design get in the way of the information, or the problem you are trying to solve. Sure, enrich the user experience by delivering the information in a fulfilling environment, but make the clever stuff invisible. </p> <p> An example of this is when you click on the four coloured tabs running underneath the main promo. Now, how does that make you feel? Confused? Surprised? Sick? </p> <p> <img src="" width="615" height="442" alt="New colourways on click. Pointless. They also gave me quite a shock."> </p> <p> Why did they do this? Really, what is the value here? To showcase the power of CSS? I’m totally baffled. </p> <p> </p><h3>The last of the weather icons</h3><p> The weather icons also breath their last with this redesign. I’m sad about that. Not because they look worse, but they are an inferior solution. </p> <p> <img src="" width="615" height="315" alt="New and old weather icons"> </p> <p> On TV, the richer weather graphics are far more useful in actually illustrating weather forecasts, but on the web, when there is no animation, we’re left with icons that mean nothing without the words to describe them. Of course there is an accessibility reason for having the text. However, the text shouldn’t be there to prop up bad icons. I mean, is that one in the middle cloud, or fog? </p> <h3>Anything good to say?</h3><p> There are some nice things about it though. The buttons work well. I think the on/off state is very tactile. And, like <a href="">Jeremy</a>, I love the analogue clock in the top right. </p> <h3>Dinosaurs designing websites</h3><p> </p><p>What strikes me most plainly about this design is how the effect of a big, lumbering organisation can impact on a redesign. A good few months ago, or maybe years, when this proposal was first taking shape, it was probably the time when curved gradients, reflections and like were at the forefront of the ‘web 2.0 aesthetic’. Thing is, it takes any large organisation <em>ages</em> to get their shit together. Which is why designing to visual trends such as this is so risky. If your organisation can’t react quickly enough to keep up, then go the classic design route every time. If you don’t, your design will look dated within months. Or, in this case, even before it’s launched.</p> <p></p> <p> I’m led to believe this project took three months to complete. And I go back to my initial comment, it’s a huge result that the team responsible for this managed to get this project to this state in that time. In fact, it’s pretty miraculous. We’ll see how things pan out over the next few months. But, like some <a href="">other</a> <a href="">websites</a> that the BBC produces, they seem hell-bent on trying to make the web like telly. </p> <p> But tellys have rounded corners, right? </p> Typesetting Tables at 24ways 2007-12-07T00:00:00+00:00 <p>I was thrilled to be asked by <a href="">Drew</a> a few weeks ago to <a href="">pen something</a> for this years <a href="">24ways</a>. I’ve mentioned <a href="">typesetting tables</a> in a couple of presentations recently, notably, @media and the <a href="">Web 2.0 Expo in Berlin</a>. However, due to time constraints and the breadth of material I intended to cover, it hasn’t been possible to cover typesetting tables in the depth I wanted to. Until now. </p> <p> As I say in the article, typesetting tables is often overlooked for a number of reasons, although it’s mostly because it can be tedious, time-consuming and, therefore, dull. But the devil really is in the details, especially for information and data in tables. Tables are not read like sentences. They’re scanned horizontally and vertically and have to be designed to help the reader do this. It’s not a time for eye candy. I tried to explain some simple rules that I apply when designing tables. I’m not saying this is the only way to do it, it’s just my way. </p> <p> Anyway, hope you enjoy the article. </p> Two iPhones How do you tell the difference between them? 2007-11-09T00:00:00+00:00 <p><img src="" width="80" height="62" alt="Goldfish don't bounce. Apparently" class="thumb">Here’s the thing. The Wife and I are getting an iPhone each. Apart from turning them on and seeing which background image is on there, how can you instantly tell them apart. I thought that engraving might be the best way to go for this. So, I’m planning on getting mine engraved with an odd saying or something (rather than my name or something like that). I recently heard an interesting statement: Goldfish don’t bounce. That’s the best I can come up with. </p> <p> Any other amusing ideas? </p> <p> <strong>UPDATE: It seems Apple don’t offer engraving options for the iPhone. At least not at the moment in the UK.</strong> </p> Type in Berlin 2007-11-07T00:00:00+00:00 <p>Since Sunday evening, I’ve been in Berlin attending—and speaking at—the <a href="">Web 2.0 Expo</a>. I presented earlier today on the very ‘un-web 2.0’ topic of Typography. I think it may have surprised a few people as to how relevant typography is to designing UI—even to applications. As usual, I talked about type as being more than just choosing typefaces, which is where most designers, unfortunately, see typography begin and end. </p> <p> On closing, I gave a URL which would link to a section of this site with the slides, notes etc. <a href="">You can download the slides here.</a> </p> <p> Apologies for the delay, but the up-speed of the conference wifi was incredibly poor, so I’ve only just got around to doing it. </p> <p> I’ve also decided to embed the slides here from Slideshare. I don’t normally do this, so apologies if Slideshare clogs things up, but I thought it might be nice to have the slides here whilst I break-down the topics I presented. </p> <!--more--> <h3>The slides</h3> <p> <div style="width:425px;text-align:left" id="__ss_158392"><object style="margin:0px" width="425" height="355"><param name="movie" value=""><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></object><div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;"><a href=""><img src="" style="border:0px none;margin-bottom:-5px" alt="SlideShare"></a> | <a href="" title="View 'Better Typography' on SlideShare">View</a> | <a href="">Upload your own</a></div></div> </p> <h3>What was said</h3><p> I’ll give you a quick run-down of some of the main points of the talk. </p> <p> I started off with a quick introduction of placing typography within Web 2.0. Where does typographic design as a practice fit with designing applications and platforms for the ‘web of data’. The rest of the talk was then split into four main section: Structure, Process, Macro typography and Micro typography. </p> <p> I presented the following points: </p> <h4>Structure</h4> <p> <ul class="bulletlist"> <li>Typography is presenting information.</li> <li>Information is language and language has structure.</li> <li>Documents have a conceptual model and these need to be matched to the reader’s conceptual model of the content.</li> <li>It’s the designer’s job to bridge this gap and present the content which fits both models. Incidentally, I feel this is one of the problems facing designers who want to art direct on the web.</li> <li>Content <em>and</em> presentation.</li> </ul> </p><h4>Process</h4> <p> <ul class="bulletlist"> <li>Jesse James Garrett’s ‘Elements of User Experience’.</li> <li>Wrongly interpreted as a linear process.</li> <li>A process like this relegates design, and specifically typography, to the surface plane.</li> <li>Greybox Wireframes.</li> <li>Involving typographic design much earlier in the process.</li> </ul> </p><h4>Macro typography</h4> <p> <ul class="bulletlist"> <li>The Big Stuff.</li> <li>Creating spacial relationships.</li> <li>The Golden Section.</li> <li>The Golden Section as applied to the web.</li> <li>The Rule of Thirds.</li> <li>Grids and consistency of design across page types.</li> </ul> </p><h4>Micro typography</h4> <p> <ul class="bulletlist"> <li>Hyphens are not dashes.</li> <li>Letterspacing: negatively and positively.</li> <li>Italic ampersands in headings.</li> <li>Framing navigation items and lists.</li> <li>Framing tables rows and columns</li> </ul> </p><p> </p><p>Those were the main points. It seemed to go down well, although, I still had the feeling the presentation stuck out like a sore thumb in a conference discussing some of the loftier aspects of designing for the web.</p> <p></p> <p> The rest of the time was spent in the pleasant company of friends old and new. <a href="">Jeremy</a> and <a href="">Jessica</a>, <a href="">Simon</a> and <a href="">Nat</a> were wonderful in arranging a variety of evening Berlin eating establishments. In truth, I met them in the lobby and we wandered around until we found a restaurant that could accommodate 13 people. </p> <p> </p><p>I ate some strange German food, and drunk some even stranger red beer. I said strange, not bad. I enjoyed sitting next to <a href="">Jesse</a> for two meals and discussing everything from washing machines and remote controls, to the waiter with the incredible memory (yes, he took a <em>complete</em> order—starters and main courses— without writing a single thing down! Impressive or what? I need to write a list if I need more than two things at the supermarket).</p> <p></p> <p> So, all in all, it’s been fun. But, it’s been tough trying to manage a conference, preparing a talk <em>and</em> running a small business that is ticking over at home. That has been challenging. I missed The Wife and am dying to see progress on my <a href="">house extension</a>. </p> <p> I will say this for Berlin though, it’s a great place to come as a designer. I even found a design manual in a bookshop today on how to design forms, timetables and transportation tickets. <em>How cool is that?</em> </p> Content AND Presentation 2007-10-26T00:00:00+00:00 <p>In a couple of weeks, I’ll be heading off to the <a href="">Web 2.0 Expo</a> 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. </p> <p> This is a brave new world and surely it’s no place for a stuffy old practice such as typography.  </p> <!--more--> <h3>Not just fonts</h3><p> Most people, not just designers, think of the practice of typographic design as choosing and manipulating typefaces. For sure, that is <em>part</em> of typography, but it doesn’t begin and end there. Ellen Lupton says in her book ’<a href="">Thinking with Type</a>‘, ‘Typography is how language looks’. </p> <p> </p><h3>Where does typography fit in</h3><p> </p><p><a href="">Rich Rutter</a> and I gave a <a href="">presentation on typography at SXSW</a> 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.</p> <p></p> <p> In <a href="">Jesse James Garrett’s</a> great book ’<a href="">Elements of User Experience</a>‘, 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. </p> <p> 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. </p> <p> </p><h3>Typography is the look and shape of language</h3><p> 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. </p> <p> 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 <em>visual practice</em>. It’s not, completely. Typographic design is information design. As Emil Ruder once said: </p> <blockquote><p>Typography has one plain duty before it and that is to convey information in writing. </p></blockquote> <p> 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. </p> <p> </p><h3>Art Direction doesn’t happen on the web</h3><p> <a href="">Jeffrey Zeldman</a> and <a href="">Khoi Vinh</a> are amongst a group of designers who have bemoaned the absence of art direction on the web. Khoi sums up my feelings exactly: </p> <blockquote><p>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.</p></blockquote> <p> 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? </p> <p> </p><h3>Dogma</h3><p> 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. </p> <p> 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. </p> CSS Eleven 2007-10-08T00:00:00+00:00 <p><a href=""><img src="" width="397" height="274" alt="CSS Eleven"></a> <br> Last week, <a href="">Andy Clarke announced</a> a new CSS group I’m thrilled to be part of: <a href="">CSS Eleven</a>. </p> <p> </p><p>I’m going to leave the detailed explanation to Andy, but in a nutshell, the group is going to help the ‘W3C’s CSS Working Group to better deliver the tools needed for tomorrow’s web’. I’m particularly interested in having the opportunity to be involved in the several layout modules which have thus far been proposed.</p> <p></p> <p> Andy’s rounded up a fantastic bunch of designers and developers here. Hopefully we’ll have the collective clout to influence things in a positive way in the months to come. </p> Stephen Fry on Fame 2007-10-02T00:00:00+00:00 <p><a href="">Stephen Fry</a> has a <a href="">new blog</a>. To date, there has been two posts: one about <a href="">Device and Desires</a>, and the latest about <a href="">fame</a>. To call them blog posts is an understatement really, they’re essays, or <em>blessays</em> as he calls them. It’s an absolute pleasure to read a blog post by someone who can write this well. It’s so inspirational and entertaining, I just had to mention it. </p> <p> The latest post includes a wonderful paragraph I’m calling <em>‘what’s it like?’</em> </p> <blockquote><p> Is it fun? [re. being famous] Or, as student journalists always ask, <em>what’s it like?</em> ‘What’s it like working with Natalie Portman, what’s it like doing QI, what’s it like being famous?’ I don’t know what it is <em>like</em>. What is being English <em>like</em>? What is wearing a hat like? What’s eating Thai red curry <em>like</em>? I don’t believe that I can answer any question formulated that way. So, student journalists, tyro profilers and rooky reporters out there, seriously, quite seriously never ask a ‘what’s it like’ question, it instantly reveals your crapness. I used to try getting surreal when asked the question and say things like ‘being famous is like wearing blue pyjamas at the opera. It’s like kissing Neil Young, but only on Wednesdays. It’s like a silver disc gummed to the ear of a wolverine. It’s like licking crumbs from the belly of a waitress called Eileen. It’s like lemon polenta cake but slightly wider. It’s like moonrise on the planet Posker.’ I mean honestly. <em>What’s it like??</em> Stop it at once. <br> </p></blockquote> <p> See? Genius. </p> Pink is the new black 2007-10-01T00:00:00+00:00 <p>Once again, I’ve gone all <a ref="">Pink for October</a> support of National Breast Cancer Awareness month. Okay, it’s national in the <em>US</em>, but in this global world we live in, I thought I’d once again support the campaign.  </p> <!--more--> <p>Like most people, I’ve been directly effected by cancer. Firstly, I lost my grandmother to breast cancer when I was about ten years old—at the time, I didn’t really understand what it was, or why she was so sick—but it still left a lasting impression. Secondly, I’ve had friends—young and old—diagnosed with some form of cancer. Some got better. </p> <p> It’s only in later life I’ve understood how neglect of a condition or problem can have terminal consequences. Yet, it still amazes and bothers me that people ignore such blatant symptoms by burying their head in the sand. Cancer awareness is getting much better, no doubt about it, but still some people think it’s a problem that will go away if ignored. </p> <p> I try and do my bit. Donating will help of course, but money can only go so far. Awareness of yourself, possible symptoms and, most importantly, when to go to a doctor, can make a real impact <em>today</em>. </p> Be A Beautiful Designer 2007-09-05T00:00:00+00:00 <p><a href="">Michael Bierut</a> has written perhaps one of the most insightful pieces I’ve read all year over at <a href="">Design Observer</a>. He manages to encapsulate all of my insecurities as a designer, points a finger at designer industry at large and provides us with a big, fat ‘Get Out Of Jail Free’ card, all in one concise post.  </p> <!--more--> <h3>What got you started?</h3><p> If you’re a designer, what got you started on this path? I’ll wager, for most of you, it wasn’t anything to do with business, academia, or writing. For most of you it will be because you wanted to <em>create beautiful things</em> for a living. I did. I started out wanting to be an artist, then an illustrator and then found myself interested in type, before working on the web. As time has passed, I’ve been doing less of the very thing I wanted to do. The important thing to consider here though - <em>this has been a choice</em>. </p> <h3>Take Me Seriously</h3><p> So what has been taking up my time if I’ve not been busy creating stuff? Well, the list is endless from trying to run a startup design studio through to writing specifications etc. All of that stuff is, at the moment, necessary for me to do my job. But, I’d rather just be creating something beautiful you know? Design, especially on the web, is so wrapped up in process (and most of the time, rightfully so) that the very thing we love doing, gets left to the end and is only a minority part of the process. The craft of designing something beautiful. </p> <p> Personally, the bit of the job that I get a kick out of gets left to the end. I like solving problems, I like producing a solid, well-crafted solution to a client. But the bit I really get a kick out of is when I’m ‘in the zone’ creating something beautiful. <em>That</em> is why I’m a designer. </p> <p> But that’s not good enough. As designers we’re supposed to be problem solvers - not artists, right? This horrible duality fuels insecurities and Michael has summed this up way better than I ever could: </p> <blockquote><p> No, what designers wanted then and want now, more than anything else, is respect. Respect from clients. Respect from the general public. Respect from — let’s go right to the cliché — our moms. We want to be seen as more than mere stylists, we want to set the agenda, to be involved earlier in the strategic process, to be granted a place at the table. In short, just like the Chaste Clarissa, we want to be taken seriously. <br> </p></blockquote> <p> </p><p>Does that ring a bell? It did for me.</p> <p></p> <h3>Problem Definition Escalation</h3><p> This is just brilliant. Michael explains the term thusly: </p> <blockquote><p> The client asks you to design a business card. You respond that the problem is really the client’s logo. The client asks you to design a logo. You say the problem is the entire identity system. The client asks you to design the identity. You say that the problem is the client’s business plan. And so forth. <br> </p></blockquote> <p> As you can see, design is not just about making things pretty, it’s about business plans. Right? </p> <p> </p><p>This really made me chuckle. I’m sure a lot of designers have been guilty of this - I know I have. The funny thing is, as Michael points out, it’s a direct result of our insecurities as designers. We want people to think we’re clever problem solvers who can help in every step of their business. Really? I don’t know about you, but I got into design to <em>make beautiful things</em> and I intend to stay that way.</p> <p></p> <p> I’ll leave you with a closing quote from Mr. Bierut: </p> <blockquote><p> Designers, you don’t have to be dumb. Just don’t be so afraid of being beautiful. <br> </p></blockquote> <p> ‘Nuff said. </p> The Death of Print. Again? 2007-09-04T00:00:00+00:00 <p>Yesterday saw the launch of <a href="">Khoi’s</a> and <a href="">Liz’s</a> fantastic joint venture in providing a platform for short, concise design writing: <a href="">A Brief Message</a>. </p> <p> The opening piece is by none other than <a href="">Stevan Heller</a>. It’s a thought-provoking piece, concisely written in under 200 words, and asks the question ‘Is print dying’? Again. It’s a question that has been asked many, many more times than ‘Which is best—fixed or fluid?’ </p> <!--more--> <p>As <a href="">Greg points out on his blog</a>, this statement of impending doom has been around for ages now. Whilst we are seeing a shifting in <em>consumption</em> of certain media, such as news, away from the printed version and onto our screens, I think it’s a stretch to proclaim that print is breathing a dying breath. Take magazines in the UK for example. In some sectors of the industry, there has been a massive increase in production to fuel things like the blossoming celebrity culture. </p> <h3>Fit For Purpose</h3><p> Okay, so maybe you prefer to read your news online. That’s fine and Steven’s point is a valid one. The consumption of news is changing and this presents a challenge to the industry as there is a shift from the delivery of that news from one medium to another. However, not all print is news. Personally, I love to sit down with a good book or to read through some quality articles in a magazine. I just don’t do that on the web—the method of engagement is completely different. </p> <p> Print isn’t dying anytime soon. It will change, and our consumption of certain media will change as a result, but I seriously can’t see a whole lot changing in the next twenty years or so. We’ll see. </p> <p> </p><h3>An Approachable Platform for Debate</h3><p> </p><p>I love the idea of <a href="">A Brief Message</a>. Love it. As <a href="">Khoi writes on his blog</a>, there’s a place for in-depth design writing—such as <a href="">Design Observer</a> and <a href="">AIGA</a>—but quite often, the longer and more in-depth these pieces get, the more academic and less approachable they become. It’s about time there was a platform for short, approachable design commentary. Hats off guys, you’ve done a great job.</p> <p></p> Think Do Think 2007-08-25T00:00:00+00:00 <p>When I worked at the BBC, I participated in a workshop where the entire department went through a <a href="">Myers-Briggs</a> Personality questionnaire. I think the aim of the workshop was for all of us to understand, to some degree, the personality traits of our colleagues.</p> <p>The Myers-Briggs test was originally devised in the Second World War by Katharine Cook Briggs and her daughter, Isabel Briggs Myers. The form of the test I participated in was a very long questionnaire which, when analysed, highlighted your personal <em>preferences</em>. That’s a very important aspect of the results—they describe what you <em>prefer</em> to do, not what you do all the time.</p> <p>I was sceptical at first, but after completing the test, and the following workshops, i’ve had some fantastic insights into my own preferences—particularly when carrying out my job day to day.</p> <h3>I, N, T, P</h3> The four pairs of preferences or dichotomies in the Myers-Briggs test: <ul> <li>Introversion - Extraversion</li> <li> Sensing - iNtuition</li> <li>Thinking - Feeling</li> <li>Judging - Perceiving</li> </ul> Combinations of these preferences build to give you a set of traits, eg. ISTJ: Introverted, Sensing, Thinking, Judging or ENFP: Extraverted, iNtuition, Feeling, Perceiving. <p>I turned out to be <a href="">INTP</a>. Introverted, iNtuition, Thinking, Perceiving. But what does that mean? Well, there’s a whole load of information which breaks this type down. A good source is <a href="">Type Logic</a>.</p> <p>At this stage of the workshop, in all honestly, I felt I was having my palm read—I really didn’t buy it. It was only discussing it in detail with the Wife (who has a degree in Psychology), that I began to understand my new pigeon-hole.</p> <h3>Think Do Think</h3> Some of the biggest conflicts, especially in the workplace, are when two opposing personalities (whose <em>preferences</em> are opposites) fail to understand the way the other prefers to work. This, for me, was the value of doing this test openly in the workplace. I knew what my preferences to working were, but I wasn’t aware of other peoples and therefore couldn’t put myself in their shoes. <p>It turns out, I prefer to work in a Think Do Think way. For example, I get a brief and I go away and <em>Think</em> about it. I’ll then <em>Do</em> something on it, then go away and <em>Think</em> some more. My preference is to think about it first. Other people have an opposing preference though—Do Think Do. These are the people who I find it very difficult to work with, simply because they work in a completely opposite way to me. You know the type (maybe you’re one). You solve problems as you talk about them. You Brain-Dump. You thrive on brainstorming. You instantly get a plan together and know where you’re going. You then validate that direction by thinking about it for a while. And so it goes on.</p> <h3>Get the brief in early</h3> At <a href="">Mark Boulton Design</a>, as I have done throughout my career, I’ve made a point of trying to get the brief in early. As soon as possible actually. Quite often the client will want me to act upon that brief right away. I prefer not to. I’ll sit on it and think about it for a while. <p>When it comes to actually doing the work—from brainstorming or discovery, to designing the UI or layout—I’m already in a more informed position. I will have questions, and answers. I will, hopefully, have a good grasp of the problem. Quite often though, this has all happened on a subconscious level. I will have been stewing it over during those quiet moments in the day.</p> <p>This working practice works very well for me. However, quite often, it goes against working practice of clients and colleagues who want results right away.</p> <h3>Try it for yourself</h3> TypeLogic have a few links off to <a href="">online tests</a>. If you’re currently having conflict with some colleagues, or a particularly difficult client, then have a go at this test. It may not tell you about them, but it may well give you enough insight into your own preferences which could help the situation. <p>If you do, or have done the test before, I’d be interested in knowing what you thought of it.</p> Links That Deserve More Than The Sidebar 2007-08-22T00:00:00+00:00 <p>Over the past couple of weeks there have been a few things going around that deserve more of a mention than my lowly ‘Of Interest’ sidebar. So, here they are: </p> <!--more--> <h3>Mobile Web Design</h3><p> First off, <a href="">Cameron</a> has beaten me to it and has announced the release of his book, <a href="">Mobile Web Design</a>, which is due for release on August 28. </p> <h3>This Way to the Web!</h3><p> As usual, <a href="">Khoi</a> has been churning out the great posts. <a href="">This Way to the Web, Print Designers!</a> is a post on a topic dear to my heart. As an aside, this post is a <em>perfect</em> example of how a conversation in the comments can enrich the original post. Here, none other than <a href="">Jonathan Hoefler</a> made some excellent remarks about the perceived generalisation of print designers. </p> <h3>The Rise of the Graphic Designer</h3><p> I was pointed to <a href="">this post about Interaction Design</a> by <a href="">Greg</a>. It made me cross. The post by Chris highlights some of the differences between <em>visual</em> design (whatever that is!), and <em>interaction</em> design. To be honest, I’m really getting pissed off with the notion of a ‘Visual’ designer being any different to an ‘Interaction’ designer, being any different to a ‘User Experience’ designer. A splintering of an industry into specialisms is fine (see Jonathan’s comments on Khoi’s previously mentioned post), but what’s wrong with being called a ‘Graphic’ designer? </p> <p> I think it was <a href="">Chris</a> and I discussed this at SXSW this year. Why is ‘Graphic Designer’ such a dirty job title? And ‘Art Director’ is pretty much missing from the web industry—okay, correction, Art Direction is pretty much missing. It bothers me, it really does. When somebody asks me what I do for a living, I’m proud to say I’m a Graphic Designer. To me, Graphic Designer encompasses all aspects of the process of design in a 2d environment. Simple as that. From the planning and mechanics of production, to the art direction, visuals and copywriting. </p> <p> </p><p>As far as I can see, one of the only differences is that of the designer’s mindset; on the web, you lose the control you have in other media. Incidently, Khoi has a <a href="">panel proposal in for SXSW</a> this year for that very topic. Which neatly brings me on to the next bit of news.</p> <p></p> <h3>Pick a Panel</h3><p> <a href="">SXSW</a> is already picking up pace and it’s months away. The <a href="">Panel Picker</a> launched this week. I’m down for speaking twice. If picked. <a href="">Rich</a> and I might be doing a follow up to last years <a href="">Web Typography Sucks</a> called <a href="">Web Typography Still Sucks</a> (you see what we did there?). I also might be presenting with the super-talented <a href="">Veerle</a> (she who needs no surname) on the terribly tricky, subjective topic of Colour, called <a href="">Using Color: From Black to White and Everything in Between</a>. </p> <p> I do hope the panel selection process was better than last year. There are six-hundred-and-eighty-three proposals this year, and once again, they’re being picked by the masses. According to Hugh Forrest, who <a href="">posted on Airbag</a>, the organisers will be more heavily involved in vetting this years entries. Glad to hear it. </p> <h3>Web Trend Map</h3><p> I received my Web Trend Map in the post yesterday from those talented chaps at <a href="">iA</a>. If you look close, I’m in the bottom left corner. Which is nice. </p> <h3>Got myself an Employee</h3><p> I’ve finally gone and hired someone to work alongside me at the <a href="">Studio</a> which is well overdue. Benn starts at the end of September and I can’t wait! </p> <p> </p> Blueprint. A CSS Framework. 2007-08-08T00:00:00+00:00 <p>Over the past year or so, the industry has been making some great inroads into streamlining some of our processes. We have <a href="">Microformats</a> for standardizing how we mark up certain data. <a href="">John Allsopp’s</a> <a href="">Web Patterns</a> is gathering pace and recently <a href="">Tantek</a> 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, <a href="">Social Networking Portability</a>. 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. </p> <p> That was until a Norwegian chap called <a href="">Olav Frihagen Bjørkøy</a> released a CSS framework called <a href="">Blueprint</a> last Friday. The key difference between this and other frameworks is Blueprint has been created from a typographic design basis. </p> <!--more--> <p>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: </p> <p> <ul class="bulletlist"> <li>An easily customizable grid</li> <li>Some default typography</li> <li>A typographic baseline</li> <li>CSS reset for default browser styles</li> <li>A stylesheet for printing</li> <li>No bloat of any kind</li> </ul> </p><p> </p><p>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. <a href="">Eric Meyer’s</a> reset code is in there, <a href="">Richard Rutter’s</a> <a href="">Vertical Rhythm theory</a>, <a href="">Jeff Croft’s</a> <a href="">ideas on managing a CSS framework</a>.</p> <p></p> <p> </p><p>Going back to the grid—and this is what really interests me—Olav has used <a href="">Khoi Vinh’s</a> <a href="">theories and practice on grid design</a> to great, practical use. What is so important about this CSS framework to me is that it has been designed to solve <em>a design problem</em>, 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.</p> <p></p> <h3>Download it and Use it</h3><p> What are you waiting for? <a href="">Download it now</a>! For more on the insights into this exciting new CSS framework, Khoi has a <a href="">great interview</a> with Olav. Olav also <a href="">writes a blog</a>. </p> <p> </p> Strategising about how to create more Spare Time 2007-07-28T00:00:00+00:00 <p>We’re all busy. I know that. Just indulge me, okay? </p> <p> 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. </p> <p> 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—<a href="">The Power of Full Engagement</a>—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. </p> <!--more--> <h3>Managing Energy</h3><p> 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. </p> <h3>Shoes on. Shoes off.</h3><p> 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. </p> <p> 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. </p> <h3>Where’s the Time</h3><p> 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. </p> <h3>Mid-Summer Resolutions</h3><p> 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. </p> <p> 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… </p> Mark Boulton Design are hiring! 2007-07-28T00:00:00+00:00 <p>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. </p> <p> 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. </p> <p> If you <a href="">fit the bill</a>, 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. </p> Mark Boulton Design launches 2007-07-04T00:00:00+00:00 <p>If anyone has done any work for themselves—painted a painting; made a model; built a shed— you will know how difficult it is to finally stop. It’s about the love you see. The craft. Anything done for yourself has to be <em>just right</em>. </p> <p> In April of this year, I became the Director of my new design consultancy, <a href="">Mark Boulton Design Ltd.</a> Since then, I’ve been beavering away to get a website up to let the world know what it is we do and who we’ve done it for (so far). Today <a href="">Mark Boulton Design</a> launches. </p> <!--more--> <h3>It started with a story</h3><p> The Mark Boulton Design website had to tell the right story. What are we? What do we do? For who? This is all pretty basic marketing and, as designers, we go through these sorts of questions regularly. From those answers, we have to derive a brand. That was a very difficult nut to crack for this website. </p> <p> If you’re aware of my work—both my writing and my design work—then you’ll know I’m all about the simple things. Simple really doesn’t come easy though; like good tea, it has to be stewed for a while. The design for this site was stewing away for about six months. Most of that was getting the brand right—the tone of voice, the typography, the colour. All of it took bloody ages. </p> <h3>Not just a website</h3><p> </p><p>The branding for this project has been applied to a number of things. First off, there is the site. Secondly, there’s the One Page Brochure (available on all pages in the four column footer); a one-page printable PDF document to leave on peoples desks. Then, there’s the RFP project sheet. On top of all of that, I’ve designed new business stationery (and had a ball looking at literally hundreds of paper samples). Quite a lot really.</p> <p></p> <h3>It’s never finished</h3><p> When I was in secondary school (about 14 years old), my art teacher would always tell me that I still had work to do on a drawing or painting. It drove me nuts. Every time I thought I’d finish, he’d tell me to go away and work on it for another week. Designing for the web is no different. In fact, this is one of the great things that differenciates the web from other media such as TV or print; it’s a canvas to be worked on again and again. </p> <p> There’s a load of work still to do on the typography. I want to get the vertical rhythm nailed. I want to get some print style sheets done. I decided today that all of that will have to wait. </p> <p> Anyway. It’s done. Although my art teacher would probably have asked me to keep going. (note. this is my little ‘it’s not finished <em>quite</em> yet’ disclaimer) </p> Incremental leading 2007-06-15T00:00:00+00:00 <p>There has been a lot said recently about Vertical Rhythm. Richard Rutter began the work on 24ways last year with the piece <a href="">‘Compose to a Vertical Rhythm’</a>. This was built upon by Wilson Minor on <a href="">A List Apart</a> recently with his <a href="">article on Baseline Grids</a>. All sound typographic advice. If you haven’t read both of them, I’d urge you to do so now otherwise you know what I’m on about it in this post. </p> <p> </p><p>At <a href="">@media</a> this year, I presented <a href="">‘Five Simple Steps to Better Typography’</a>. Step two in my presentation was was Vertical Rhythm where I reiterated some of the excellent points Richard made in his article and also the <a href="">presentation we both gave</a> in at <a href="">SXSW</a> in March. I also added something of my own: Incremental leading, or Incremental line-height.</p> <p></p> <!--more--> <h3>Too much leading in the sidenote</h3><p> Working through both Richard’s and Wilson’s articles, they both treat the sidenote in the same way. They align it directly to the vertical rhythm unit. This is correct of course. But, to my eye, the line-height in those sidenotes, as it’s a smaller type-size, is too large. 10px on 18px leading is stretching it. So, how do we reduce that line-height whilst still adhering to the vertical rhythm we’ve established. Once again, we look to print design for that answer. </p> <p> In editorial design, there is a technique used for sidenotes and boxouts that aligns to the baseline grid, or vertical rhythm. It’s called incremental leading. </p> <h3>Incremental leading</h3><p> Here we have a simple page of text based upon Richard’s example. There is an H1, some text, a sidenote and a footer. They all align to an 18px vertical rhythm shown in red. </p> <p> <img src="" width="615" height="471" alt="A simple document set to an 18px vertical rhythm"> <br> </p><p class="caption">A simple document set to an 18px vertical rhythm</p> <p> </p><p>To my eyes, there is too much line-height to the sidenote. So, how can we reduce this line-height, but adhere to the 18px rhythm?</p> <p></p> <p> Instead of aligning every line in the sidenote with the vertical rhythm, when you use incremental leading, you align, say, one in every four or one in every five. </p> <p> Here’s an example with incremental leading set to align every fifth line of the sidenote to every fourth line in the main content. </p> <p> <img src="" width="615" height="471" alt="Sidenote set to vertical rhythm using an incremental ratio of 5:4"> <br> </p><p class="caption">Sidenote set to vertical rhythm using an incremental ratio of 5:4</p> <p> Adding in the vertical rhythm grid once more we can see the line alignment. </p> <p> <img src="" width="615" height="471" alt="Here you can see the ratio of 5:4 incremental leading"> <br> </p><p class="caption">Here you can see the ratio of 5:4 incremental leading</p> <h3>But how do I do this in CSS?</h3><p> Firsty, make sure you read <a href="">Richard’s article</a> and apply the rules to body of text. Once you’ve got the 18px rhythm set up and everything’s aligning as it should, then you can look at the sidenote. </p> <p> As we’ve decided we want to align 4 rows of the main content to 5 rows of the sidenote, we begin by finding the value, in pixels, of 4 rows combined. </p> <p> Four lines of the main content. <br> <code>18px x 4 = 72px </code> </p><p> Then we find the value for 5 lines of the sidenote. <br> <code>72px ÷ 5 = 14.4px </code> </p><p> </p><p>To calculate what 14.4px is in ems (in relation to the body, and the type size for the sidenote)<br> <br><br> <code>14.4px ÷ 10px = 1.44em</code></p> <p> We then add the values to the CSS for the sidenote. <br> <code>.sidenote { <br> text-indent:-0.7em; <br> width:12em; <br> <p>margin-right:0;<br> <br><br> margin-top: 0.28em;<br> <br><br> font-size:0.8333em;<br> <br><br> line-height:1.44em;<br> <br><br> position:absolute;<br> <br><br> top:0;</p> <br> left:42.6em; <br> }</code> </p><p> You can see this working <a href="">in this example.</a> </p> <p> However, note the top margin. I really had to fiddle around with this manually to make sure the alignment was correct. I did try and work out the maths for it, but it proved to be very difficult as really I needed to find the cap-height value of the typeface in order to provide a margin. </p> <p> Martyn, a bloke I now share an office with (who is also a Mathematics graduate), provided me with this diagram to illustrate my problems. </p> <p> <img src="" width="615" height="300" alt="Diagram showing relationship between baselines, vertical rhythm and how line-height is applied in CSS"> <br> </p><p class="caption">Diagram showing relationship between baselines, vertical rhythm and how line-height is applied in CSS</p> <p> As you can see, the problem is I needed to find the value of ‘x’. In order to do that, I’d need to know the value of ‘b’. The difficulty arises from trying to align the baselines and the only way of doing it was aligning it by eye. But, if you can fathom it out, then I’d be grateful. </p> <p> Now, all I need to do is find the time to apply to this site and the new business site.  </p> My little secret 2007-06-12T00:00:00+00:00 <p>For those who saw <a href="">my talk</a> at <a href="">@media</a> will know that I have a dark secret. It’s something I’ve never talked about on this blog and I’m not sure why. It’s a secret that I learnt not to talk much about as it could get you in trouble. So here it is: </p> <p> I have a twenty year interest in martial arts. I’ve also trained in many, many styles and achieved a black belt in one. I was an instructor, competed at national level and I’ve got a pretty good right hook. </p> <p> There. </p> <p> Why am I telling you this? You may well ask. </p> <!--more--> <h3>Out of the closet</h3><p> When I arrived to the hotel in London on Wednesday evening, <a href="">Jason</a> and I popped out for a beer (mostly so I could introduce him to the delights of Bitter). Following a swift half, we met up with <a hef="">Jon</a>, <a href="">Drew</a> and <a href="">Colly</a> where we were collectively discussed our presentations. It was then I revealed my dirty little secret and I would be talking about it tomorrow in reference to Typography. Of course I was met with quizzical looks. So, here’s the full confession… </p> <h3>Mugging</h3><p> When I fourteen, I was mugged. I wasn’t beaten up or anything, but my ego was badly bruised. Back then, I was a slight little chap and I’m sure I had the word ‘victim’ plastered across my forehead. Anyway, the next day, I enrolled on a karate course. It was a traditional Shukokai karate class which was fortunate as that particular style of karate focusses on being loose, accurate and above all, fast. Suited a little runt like me. Right from the start, It was something I felt very comfortable with. I attained a purple belt before the teacher moved on and joined the police leaving us all in the lurch. It was another five years before I put on a belt. </p> <h3>Freestyle karate</h3><p> In 1995, I was nearing the end of my graphic design course in Salford university and a good friend of mine at the time said he planned on going to a local karate school and asked if I fancied it. Too be honest, it was ages since I’d attempted to get my leg up that high and I didn’t know if I had it in me. Throwing caution to the wind however, I signed up. It turned out the instructor was an old student of the class I attended five years previously. I managed to coax my best mate Phil along with me and soon it was pretty much all we did. Work and train. </p> <p> </p><p>We progressed very quickly that summer. By the end of it we’d graded up to Blue and Green belt and it was a lot of fun. I then went off to university, leaving my training partner and martial arts behind for a further two years.</p> <p></p> <h3>The university years</h3><p> Like most students in Fresher’s week, I enrolled in some sports clubs. Most of them were martial arts. I tried Judo, Ju Jitsu, Shotokan Karate, Kick-boxing, Kung Fu, Tai Chi and Shootfighting. They all had interesting aspects but more typical student pursuits took hold (drinking and chasing girls) and martial arts in my life once again hit a dry spell. </p> <h3>Getting serious</h3><p> On completing university and returning home it was back to the karate club I’d left. The style being taught had changed from a loose traditional Shukokai base to a freestyle mix between Sport Karate and Kickboxing. It was this style I eventually gained my black belt in after ten years of sporadic training. Then things started getting serious. </p> <p> A black belt is a big aim in training for karate. I had worked damn hard for many years to get mine. Then things start to get a bit more internally focussed. You train for you, not the next belt. After ten years of belt chasing, this was a bit of a change in mind set and, in truth, I never adapted. </p> <p> </p><p>I then took the natural step to being an instructor. I’d like to think I was a good one. At its peak I ran a successful night class with over twenty regular students ranging from six years old to fifty six. I had fun but, after a year or so, I started to get bored.</p> <p></p> <p> Phil (my training partner and best mate of over seventeen years) and I both started to look to external martial arts sources for our inspiration. Phil looked to MMA (mixed martial arts) and continues to run a <a href="">successful gym</a> in his spare time. I dabbled in Capoeira for a while before meeting the girl of my dreams (who I’m now married to) and setting off to see a bit of the world with her. It was once again a good few years since I put a belt on. </p> <h3>Beating up your boss</h3><p> Ever wanted to hit your boss? Well, when I worked in London, I did (all in good sportmanship you understand). During my stint with <a href=""></a> I taught kickboxing to the staff of the London office for two years. I had a ball. That was the last time I wore my belt and the last time I trained. It was over six years ago. </p> <h3>Why stop?</h3><p> That’s a tricky question. There are a few things though. First of all there are no clubs near where I live which teach what I want to learn (although that could change with a boxing gym due to open just around the corner). Secondly, I want a life. </p> <p> Training in any martial art takes dedication. To be really good at it takes a little more; it takes obsession. In truth, I would never want to train as much as I once did. It consumed my every thought. Ironic really when you consider most martial arts are about balance and harmony at their core. </p> <p> I’m still deeply interested in martial arts and I hope I’ll train again one day, but until that day comes I’ll continue to watch the boxing and borrowing UFC dvds from Phil at every opportunity I can. </p> <p> So, there you have it. </p> Atmedia 2007: Third time’s a charm 2007-06-11T00:00:00+00:00 <p><img src="" width="121" height="46" alt="atmedia 2007 in London" class="thumb">That’s <a href="">@media</a> done for another year. <a href="">Patrick</a> put on a great event. Again. Seriously, year on year the bar is raised and he delivers. The speakers were great, the venue, the food, but most of all the location; Islington is such a great place for an event like this. </p> <p> I feel like I’ve lived with @media 07 for a while. I produced the conference printed matter for San Fransisco and London, so for the best part of a month I’ve felt the looming pressure of speaking. I was very nervous about it, but I think it went ok. </p> <!--more--> <p>There were so many highlights of the two days. Firstly, it was so great to meet up with friends from home and oversees. This year saw, amongst others, <a href="">Jason</a>, <a href="">Dan</a> and <a href="">Molly</a> take the trip across the pond, along with <a href="">Joe Clark</a> (whom I finally met for the first time). </p> <p> Secondly, it was equally great to see friends in the UK who I talk with all the time but very rarely get to share a beer with. Those jet-setting men of mystery from <a href="">Clearleft</a> were there in force (I have to thank Hannah for that term—personally I think it’s going to stick). <a href="">Jeremy</a> was, as usual, on fine form. Of course the <a href="">Britpack</a> were propping up the bar at any given opportunity. It goes without saying it was nice to see <a href="">Colly</a> out of his cave along with his other <a href="">Erskine Design</a> cave-dwelling work-o-holic <a href="">Jamie</a> (those chaps seriously work too hard). Great to see <a href="">Steve</a> again and to meet the inspirational Hannah Donovan from <a href=""></a> (who gave a stonking half hour talk along with <a href="">Simon Willison</a>). </p> <p> The presentations were superb. Typically, I attended most of the design-focused talks and occasionally dipped into the tech-focused. Highlights for me were Simon and <a href="">Drew</a>, Joe, Hannah and Jason. <a href="">Andy</a> delivered an entertaining look at internationalisation which was also a cracker. </p> <p> On Thursday, I presented ‘Five Simple Steps to Better Typography’ in the 3pm slot. <a href="">The slides are here</a> (along with a few resource links) It was my first solo presentation of that length and to an audience similar in size to the presentation Rich and I gave at <a href="">SXSW</a> in March. It went without a hitch and, on reflection, really wasn’t worth the nervousness before-hand. For those who didn’t catch it, I’m sure the podcast will be released shortly and I think <a href="">Joe</a> was live-blogging in the front row. </p> <p> I talked about, you guessed it, Typography and how by applying some simple guidelines, you can create much better typography for your website. There was a twist though. </p> <p> When I prepared the presentation a while ago, there was no story. Sure, the facts were there but on presenting them a couple of times, and various run-throughs, I felt there was no cohesive thread to tie it all together. Enter my dirty little secret: martial arts (which I’ll talk about shortly in another post). You see, Typographic design and martial arts have an awful lot in common. The presentation saw me compare Boxing to Vertical Rhythm and Ninjas to Hyphens. </p> <p> That’s it for a while then. No <a href="">d.Construct</a> for me again this year as I’m away on holiday. Bit gutted about that as it looks like such a great event. I guess I’ll have to wait until March to get my next web conference fix. </p> New digs 2007-06-05T00:00:00+00:00 <p>Since I started <a href="">Mark Boulton Design</a> last August, I’ve been working at home. It’s been mostly fun, but the words of <a href="">Andy</a> kept ringing in my ears loudly as time went on. </p> <p> “Get out of the house as soon as you can afford it” would rattle around my head like some crazy mantra. Andy’s point was, sooner or later the two environments would merge; home and work. You’d end up doing the laundry whilst at work, and designing when you’re supposed to be enjoying a nice evening with your wife. He wasn’t wrong. </p> <!--more--> <p>As of last week, <a href="">Mark Boulton Design Ltd.</a> has a new home. </p> <p> </p><p>I’m sharing offices with a web development company I know well; <a href="">Beanlogic</a>. We’ve been developing <a href="">Flow</a> together for ages now (yes, yes, it’s coming) so we all get along well.</p> <p></p> <p> <img src="" width="615" height="300" alt="The new desk and Beanlogic: Keeran, Kate and Martyn Elwyn is missing from this shot, but he sits to my right."> </p> <p class="caption">The new desk and Beanlogic: Keeran, Kate and Martyn (Elwyn is missing from this shot, but he sits to my right).</p> <p> </p><p>The new office occupies two rooms on the top floor of an old dock offices building in Sunny Cardiff Bay. For those of you who have watched the apalling <a href="">Torchwood</a>, the office is just around the corner from the secret exit/entry point near the funny fountain, mirrored sculpture thingy. For those who are familiar with Cardiff, I’m just around the corner from the <a href="">Oval Basin</a>, the <a href="">Millennium Centre</a> and the new <a href="">Senedd</a> (the Welsh Assembly Government building). It’s a nice place to be, especially in summer.</p> <p></p> <p> Back to the half-hour commute and having to make sandwiches (when I remember). I’m actually really enjoying it at the moment. The commute gives me a degree of separation which wasn’t there before and there’s a level of office banter which was all but absent when I worked at home (I don’t really count the Postman as a colleague). </p> <p> To go with the new digs is a new business website (which has been on the go since <a href="">SXSW</a> in March) and I’m so looking forward to designing the letterhead and new biz cards. Print is really a treat sometimes. Like cooking, print design is nice to do occasionally, but if I had to do it for a living, it’d do my head in. </p> <p> I said when I first started this ‘working for my self’ thing, I’d try and document every step. Well, as predicted, I haven’t. But this is a pretty big landmark for me and the business and I just wanted to put it down for the record so I can look back in a few years time. </p> A small dig at web process and smelling paper 2007-05-16T00:00:00+00:00 <p><img src="" width="62" height="86" class="thumb">For the past week, I’ve been designing the printed material for a <a href="">certain conference</a>. I often forget the mixed emotions that come with switching medium and designing for print again. On one hand, it’s great not to have to think about IA, usability and CSS bugs and to focus on just <em>creating something nice</em> and smelling paper (we’ll get on to that). On the other hand though, especially when designing to a specific deadline which can’t shift, the feeling of finality that comes with print still scares the shit out of me. If it’s wrong, that’s it. </p> <!--more--> <h3>A small dig at web process</h3><p> Maybe it’s me, but when I’m designing for print—especially when I’m preparing artwork—I take immense care to not screw things up. Because once it’s at the printers, then there’s no going back. With the web, the act of finalising work before completion is actually only imposed by process and not by the physical act of uploading something. If you upload something and it’s not right, you redo it and upload again. Can’t do that with a 20k run of annual reports. </p> <p> This bothers me. </p> <p> So, note to self, get in the same mental space for the final production work for web design as you do for print. Probably easier said than done. </p> <h3>Feeling and smelling paper</h3><p> I like this bit of print design. My wife still laughs at me whenever we’re out and I go fondling and smelling paper stock in Waterstones. This week, I’ve had a great time speaking with my printer and sourcing a really great stock for the conference material. This involves looking, feeling and smelling. Choosing the right stock is such a sensual experience (note. I’m using that word in its correct context there. Choosing paper is definitely not <em>sexual</em>. Well, for me anyway.) Also, having just gone into business myself, I don’t have the stash of paper samples I’ve had access to in the past when I worked in agencies. So, I’ve been on a dreadful looking site <a href=""></a>, who have an incredibly useful list of <a href="">mills</a>, <a href="">brands</a> and <a href="">products</a>. I began the task of compiling my own paper collection. </p> <p> I was amazed at how varied the industries websites were. What was surprising was that all of them, except one, made ordering swatches and samples incredibly frustrating. After about an hour, I gave up on most and picked the phone up. I don’t get it, how is this difficult? Like I said, there was one site that really stood out as a visual, interesting way of ordering samples. That was <a href="">Zanders Samples</a>. </p> <h3>Zanders, a joy to order</h3><p> First off, before I go on about how great this was, ignore the fact the code is shonky. Okay? Good. </p> <p> Most of the online sample ordering services I came across were simple shopping cart type functionality. For the most part, they worked well, but considering the breadth of most product ranges (in terms of size, colour, weight etc.), and the choices I had to make before ordering, the simple shopping cart soon became a monstrous list of links. Then I stumbled across the <a href="">Zanders UK samples site</a>. </p> <p> </p><p><img src="" width="615" height="402"></p><p class="caption">Very simple, task driven presentation. Do you want samples? Or other stuff?</p><p></p> <p> The homepage is so simple; do you want samples (tailored to order of course), or generic product swatches and promotional material. </p> <p> On clicking samples, you are treated to some wonderfully simple illustrations to guide you through the process. </p> <p> <img src="" width="615" height="402"></p><p class="caption">1. Choose what type of sample you want. 2. Pick a product. 3. Pick a product type and 4. Here’s what you ordered.</p> <p> A really fresh take on a labourious process. </p> <h3>Know where I can get more swatches?</h3><p> Years ago, when I was a full-time print designer, swatches and paper samples seemed to be easier to come by. Bigger mills, such as Modo, where pretty much throwing bulky swatches at any newly graduated designer. Oh how times of change. I really couldn’t believe how difficult it was to track these down this week. Anyway, I’m getting there, slowly. On that note, does anyone know of any good mills or distributors who’d be happy to send me a decent range of paper swatches? </p> To Coda 2007-04-23T00:00:00+00:00 <p><img src="" title="{title}" alt="{title}" width="75" height="74" class="thumb">A while ago, <a href="">Mr Hicks</a> pointed me in the direction of a beta test for a new application by Shockingly Good Mac Software company, <a href="">Panic</a>. So, for the past couple of weeks I’ve been using <a href="">Coda</a> and, truth be told, being a terrible beta tester. Although, you could put this down to Panic producing lovely, bug-free software. </p> <!--more--> <p><img src="" title="{title}" alt="{title}" width="615" height="300"></p><p class="caption">Coda’s interface showing the range of features available: CSS editor, FTP upload, Terminal. Oh, and books too!</p> <h3>Timing is everything</h3><p> Coda came at just the right time for me. I’d used <a href="">skEdit</a> for a while and more recently started using <a href="">TextMate</a>. The former is just how I like my text apps; small, lightweight and lean on functionality. The latter has fantastic subversion integration in addition to a load of other stuff I’d just never ever need. Then along comes Coda, just as I’m floundering about as to which application to use and blows them both out of the water. Panic have focussed heavily on one aspect of simple html/css development: workflow. </p> <h3>Edit, Save, Upload, Test and Repeat</h3><p> How often do you get into that pattern of tasks? I do, all the time. Coda deals with this in a simple elegant way. You can set up sites by importing your Transmit favourites, or by creating new ones. Sites not only have the FTP details, but local folders too. The neat thing in Coda is, you publish files by simply right clicking on them (or selecting a few). Edited files are indicated by a small circle (until you save them) and can also be uploaded. Coda’s slick integration makes the workflow of publishing to the web a painless joy. </p> <h3>Not just a text editor</h3><p> Coda ships with a CSS editor as well. Something with the power of CSSEdit combined with Transmit and then the ease of a text editor like skEdit bolted on. Have a look at the <a href="">features</a>. Once you’ve decided you want to buy it (because why would you <em>not</em> want this software), it’s available for a limited time for only $69 (if you own Transmit - if not it’ll cost you $79). </p> Confessions of a slack blogger 2007-04-12T00:00:00+00:00 <p>Yep, that’s right. I’ve been neglecting my blogging duties for ages now. Not for a lack of things to talk about; there’s plenty, but it all seems to be going into the <a href="">book</a> at the moment. There is one thing that has been a blocking force though: running my own business. </p> <!--more--> <h3>From Sole Trader to Ltd.</h3><p> </p><p>At the start of this month, Mark Boulton Design Ltd. started trading. This switch from Sole Trader (then LLP, then back again) to Ltd. is for a number of reasons:</p> <p></p> <ol> <li>We’re set to grow. Currently Mark Boulton Design employs a bunch of freelancers on a project by project basis. The difficulty with this is, I need someone to manage that workflow whilst I Art Direct the output from the team. This is going to be much more straight-forward as a Ltd company.</li> <li>Tax. There are tax reasons for going Limited. As a Sole Trader, any income over £33,000 is taxed at 40%. As a corporation, you pay 19% (or it might be 20 with the new budget) on your profits (if your turnover is up to £300,000). As a director of a company, I’m also taxed on the salary I draw from the business. It is common-place for directors to take a small salary (which is taxed at normal rate), and then top it up with Dividends (which are taxed at 10% or 32.5%), therefore making some savings there.</li> </ol> <h3>Getting out of the house</h3><p> That right. Hopefully—all being well— - Mark Boulton Design Ltd. will be relocating to the hussle and bussle of media central in Cardiff: Cardiff Bay. (you know, where <a href="">Torchwood</a> is filmed). I’m not going to talk too much about it in case I jinx the whole deal but it could be very, very cool. </p> <p> Why move? Working at home isn’t easy. In fact, it’s really tough. I remember talking with <a href="">Andy Budd</a> about this during @media last year. The distractions aren’t really the problem. The feeling you’re not escaping the same four walls is. Also, if we’re going to grow, there’s no room and I’m going to find it difficult to recruit full-time staff if I’m not located in the capital. </p> <h3>Five Simple Steps</h3><p> </p><p>I know that book is late. I’ve not been neglecting it however, I was just very naive to think that it could be completed in a month or two. In fact, It has worked out rather well for one simple reason. The book will now be released under Mark Boulton Design Ltd. instead of me personally. I know that doesn’t make much difference to anyone who buys it, but it will mean that for every copy sold, the tax man will take £2 instead of £4.</p> <p></p> <p> Release date? Well, I’m not going to give a date. I have a date in my head though but I’ve learnt the lesson from last time. As I’ve told a few people now, it will be ready when it’s finished and not a moment later. </p> <h3>Not being slack anymore</h3><p> A couple of things to talk about tomorrow. There will be an update from <a href="">Flow</a> (with screenshots) and an article on Masthead design here at I’ve been thinking a lot about Mastheads recently for one reason and another, and I thought it would be prudent to document my thoughts on how masthead design fits in with grids, ratios and whitespace. <br> </p> Annual Jaunt Across the Pond 2007-03-16T00:00:00+00:00 <p><img src="" alt="SXSW 07 logo" width="178" height="35" class="thumb">Well, it’s all over for another year. This was my third year at SxSW and despite being ridiculously sick during the first couple of days, it was probably the most interesting. I’m choosing my words carefully there. </p> <p> There is little doubt that SxSW is growing at an alarming rate. I heard some people say there were close to five thousand attendees to the Interactive Festival alone this year. That’s an awful lot of people. In fact, for the first time, I wasn’t allowed into some of the panels due to lack of space. That hasn’t happened to me before and this year it happened three times. Too many people or just small rooms? </p> <!--more--> <h3>Too much Navel-Gazing?</h3><p> I don’t mean to gripe, really. Maybe it’s the jet-lag, but I have come away from this years SxSW feeling a little odd. On one hand, it’s nice to see more panels being devoted to graphic design, user experience and content. As <a href="">Zeldman</a> pointed out yesterday, I too felt a little out of place last year having not recently launched, been bought out, or selling my latest, greatest web-app. This year, there was more talk of the craft of web design and I think that is great. </p> <p> The other side of me is a little disappointed though. Not with the quality of the conference but with a general feeling of navel-gazing with the attending crowds and panelists. More so than previous years, I felt a lot of the panels I attended were preaching to the converted, or worse still, to your mates. Maybe I was guilty of that too? And what is the point of that? </p> <p> All grumpyness aside, I really enjoyed catching up with old friends and meeting new ones. This is really the highlight of SxSW for me. Even though I didn’t make it out to many of the parties whilst I was still nursing my sick throat, I did manage to make it to the <a href="">bowling</a> (where a few of us manage to surprise ourselves and make it through to the second round), the <a href="">EllisLab</a> party and of course the <a href="">Great British Booze Up</a>. </p> <h3>Grids and Typography</h3><p> The presentations I had to give went well. First off, <a href="">Grids Are Good</a>, went down a storm on Saturday. I just wish we had more time. All credit really must go to <a href="">Khoi</a> on this for the amazing amount of preparation he put in. Like I said, I was still nursing a raging headache, a fever and a sore throat and it really was touch and go in the Green Room. Never-the-less, it went well. </p> <p> <a href="">Web Typography Sucks</a>, presented with <a href="">Rich</a>, went very well on Tuesday. I was feeling much better, relaxed and confident and the time flew by. I was pleased we’d left plenty of time at the end for questions—there really didn’t seem to be enough of that this year. <a href="">The slides are up online</a> and the podcast will follow no doubt. </p> <h3>Next year?</h3><p> I’m looking forward to next year. I’m hoping for a few things: <br> <ul class="bulletlist"> <li>The continuing rise of the graphic design based panels and presentations from designers who know their shit on this medium. One on Art Direction would be great next year.</li> <li>More practical presentations. We don’t all know everything ok? Personally, I like going to panels and presentations where practical things can be learnt. We all don’t have oodles of time to sit and read books and blogs all day. Sometimes, bullet-points are good.</li> <li>No illness. It’d be nice to be well next year and I’ll be able to enjoy some of the parties. Who knows, maybe Mrs B. will be in tow too. </li> </ul> </p><p> So, if I didn’t meet you this year, then I hope to next year. If I did, nice to see you again. Just a shame we have to wait a whole year. </p> SXSW: Third time’s a charm 2007-03-06T00:00:00+00:00 <p><a href="">Mark Boulton Design</a> shuts up shop for a week next week as I’ll be taking my third trip over to Austin to enjoy <a href="">South by Southwest Interactive</a>. </p> <p> Like <a href="">Jeremy</a>, it will be my third time at the conference and if the last two were anything to go by, this will be bigger and better. Talking of Jeremy, he’s put together his <a href="">superb little guide</a> to all the parties. If you’re going, that is well worth looking at. </p> <p> So, what’s on the cards this year? </p> <!--more--> <p>The first time I went to SXSW, in 2004, I didn’t know a soul (apart from <a href="">Andrew</a> of course; my colleague from the BBC). Then, last year, I met an incredible amount of great folk whom I really looking forward to seeing again. </p> <p> Talking of parties, I have to plug the <a href="">The Great British Booze-up</a>. Organised by those nice chaps at <a href="">Clearleft</a>, <a href="">@media America</a> and <a href="">Boagworld</a>. It’ll be well worth coming along. </p> <p> The <a href="">bowling</a> is happening again. Last year I was on a team, but haven’t put my name down this year. What’s the point? Did you see the Pixelworthy, now <a href="">Happy Cog</a>, team? What chance does a Brit, no, a Northern Brit, have against that? Now, if Rugby Union or Crown Green Bowls was your game, then I’d be all up for it. </p> <p> I’ll be giving two presentations this year. One, on typography, with <a href="">Rich</a>, and the other one with <a href="">Khoi</a> on Grids. I’m pretty nervous about both of them, which is kind of normal I guess, but still, if you see me looking slightly ill, or wandering around a glazed expression, it’s not the local beverage. </p> <p> Of course, as on the last two occasions, I will be making a visit to the local Apple Store. The strength of the pound is just too tempting to resist. As my iPod is knocking on three years old know and the battery has pretty much has it, I think I may be shelling out on an upgrade. Might just get a red Nano for the missus too. </p> One Principle to Design By 2007-03-06T00:00:00+00:00 <p>I’ve just been pointed to a post by <a href="">Andy</a> , called <a href="">Five Principles to Design By</a> by Joshua Porter. It’s a very good post, but point 2 has set some alarm bells off in my head once again. </p> <p> Design is not art. That old chestnut. </p> <p> This keeps coming up recently. Why? I’ve no idea but it’s beginning to bug me. Here’s my take on it all. </p> <!--more--> <p>Design is not art. </p> <p> That is, design is not art if you define the simple motivations. An artist is self-motivated, a designer is motivated by a client. True, artists could be commissioned etc, but I don’t want to quibble about semantics here. You get my drift. </p> <p> </p><p>How do I define design? Design solves a problem.</p> <p></p> <p> Now, that problem could be communicating a message, telling a brand story or inventing a new type of dishwasher; it doesn’t matter. So, that is my One Principle to Design By. <strong>Solve the problem</strong> </p> <p> Ah, but. </p> <p> That’s not the whole story. </p> <p> The grey area of Art and Design is the practice of the <em>craft</em> of design. It’s the difference between a design being usable and a design being usable and special. </p> <p> Take the Dyson vacuum for example. This vacuum works slightly differently than the others. It still does the same job, but has been designed to differenciate itself from its competitors. The designers solved the same problem in a different way. Ok, all good. Now we get down to how the thing looks. There is <em>love</em> in this product. There is <em>craft</em> in this product. </p> <p> Of course, no discussion on this would be complete without mentioning Apple. Apple make beautiful products. But they didn’t always do that, and they nearly went bust because of it. For a long time, Apple made pretty good computers. In 1998, they made the first iMac. The distinguishing features of this new machine were <em>crafted</em> and mostly aesthetic. They are examples of beautiful product design. As a result, they sold a bomb and the rest is history. </p> <p> Those are product design, but the same applies to graphic design. I’d argue that a well crafted, beautiful piece of design <em>that solves the problem</em>, will always do it better than one that just solves the problem. There is an important place within design for beauty and craft and it bothers me that experienced designers* in this medium don’t recognise this and are blindly advocating successful design as a practice without craft. It’s not the case. </p> <p> Ok. Rant over. </p> <p> * I’m not having a dig at Joshua here, or anybody in particular, it’s just a vibe I’ve been getting for the past year.  </p> What is up with Flow? 2007-02-19T00:00:00+00:00 <p>I’ve had a few people over the past months contact me and ask what has been happening with <a href="">Flow</a> Well, we’re still working on it, but as one of the developers, <a href="">Keeran</a>, <a href="">states on his blog</a>: </p> <blockquote><p>While it is achievable to ship new products in a short amount of time, as we have seen with companies like 37Signals and Carson Systems, there are always going to be times, certainly in the early stages, where Real Paid Work must take priority.</p></blockquote> <p> Damn right, especially for a business which is only six months old. </p> <p> Since returning from snowboarding a month ago, I’ve been consumed with Real Work and everything else, including the book, has been put to one side. Such is life and, as I’m learning, business. </p> <p> That said, Flow is coming along and as I’m writing this, I’m working on the templates whilst a couple of guys at <a href="">Beanlogic</a> are working on the backend. It’s coming along. Slowly but surely. </p> And the winner is… 2007-02-15T00:00:00+00:00 <p>Me. As I registered the name ‘Mark Boulton Design’ over six months ago, technically, I am the winner. Hurray! </p> <p> However, to show I’m not a tight Northern bugger, I’ve decided to award the prize to the runner up (he says, stuffing his face with humble-pie) </p> <p> Congratulations <strong>Chris Gibbons</strong>, whose suggestion—point12—was top of the list for most of the week. There’s one iPod shuffle in the colour of your choosing on its way to you. </p> <p> Once again, thanks for all the suggestions. If anything, it made me realise my original choice wasn’t so bad after all. </p> A naming competition 2007-02-09T00:00:00+00:00 <p>Anyone who has ever been in a band will know how difficult naming the band can be. It is no different for a new business. </p> <p> I find naming incredibly difficult. It really isn’t one of my strong points. </p> <p> Unfortunately though, next Thursday, I have to register myself as a new company name and I’m completely devoid of inspiration. So, I thought I’d hold a competition to find me a good name. Lazy? yes, I suppose. Thing is, I’m totally stacked with finishing off the book and a mountain of client work. Sitting here with a blank piece of paper (after thinking of names) for about an hour now has not been a productive use of my time. </p> <!--more--> <p>For the past six months, I’ve been trading as Mark Boulton Design. Well, soon, there are going to be more of us and I’m a little nervous about my name being so associated with the business name. It could be a good thing, but it could also be a very bad thing. </p> <h3>What’s in it for us Mark?</h3><p> An iPod Shuffle for the winner. Can’t say fairer than that. </p> <h3>Some boring rules and criteria</h3> <p> I’m a graphic designer and run a UI and graphic design business. If you’ve been reading my blog, you will know what kind of designer I am and what I’m all about. So, a name like ‘Purple Dog’ may not be appropriate. I’m after something simple and memorable that might, or might not, be related to the service I offer. </p> <ul> <li>Sensible names only please.</li> <li>A url. or .com would be good.</li> <li>Not an existing company</li> </ul> <h3>Pop the names in the comments</h3><p> Post your suggestions here (along with url suggestions if you fancy). </p> <p> The competition will close on the 15th February (9am UK time) and a winner will be announced shortly after that. </p> <p> </p><p>In the meantime, I’ll be going back to my blank sheet of paper</p> <p></p> A couple of books 2007-01-28T00:00:00+00:00 <p>A couple of books coming up which may be of interest. Firstly, <a href="">Web Standards Creativity</a> is up on <a href="">Amazon</a> for pre-order. It’s a sumptuous full-colour paperback covering topics like Typography, PNG transparency techniques and Grid Design from the likes of Ethan Marcotte, Simon Collison, Cameron Adams, Aaron Gustafson, Jeff Croft, Derek Featherstone, Dan Rubin, Andy Budd, Ian Lloyd, Rob Weychert, Andy Clarke, and me.</p> <p>Secondly, <a href="">Five Simple Steps: Designing for the Web</a> is nearing completion. It’s not quite finished yet, and yes I’m going to miss the January deadline, but it will be worth the wait. To keep you going until then, here’s a few tasters…</p> <img title="{title}" src="" alt="{title}" width="612" height="291"> <p class="caption">Above. Example spreads from Chapter Two: Typography.</p> <img title="{title}" src="" alt="{title}" width="612" height="291"> <p class="caption">Above. Example spreads from Chapter Two and Three: Typography and Colour.</p> <p>Self-publishing your own book is tough. I was naive to think I would get this finished by Christmas and ambitious to think it would be finished this month. These things take time, especially if you consider I’m writing, art-directing and designing and publishing this book. That said, it’s only a little overdue and I’m sure it’ll be worth it.</p> <p>Thanks to everyone who has already <a href="">signed up for the launch discount</a>. There will also be a bulk licence available for £25 for five copies for you and your collegues. There is still time to sign up for the discount too if you haven’t done already.</p> <p>Right, that’s enough talk, I’ve got a book to finish.</p> Whymper’s Mountain 2007-01-19T00:00:00+00:00 <p>Mrs B and I are on our annual jaunt to the Alps for a spot of snowboarding. This year we’re staying in the, rather large, Swiss town of <a href="">Zermatt</a> which is nestled in a valley underneath the beautiful <a href="">Matterhorn</a>. The snow is not great at the moment. And it’s raining here in the village which is making everywhere covered in a thin, almost invisible, coating of ice. Putting the snowboarding aside for a moment, this place is rather special for one reason: The Matterhorn. </p> <!--more--> <p>The other day, when Mrs B was off on her birthday treat (a massage at the rather grand Zermatterhof hotel), I had an hour to kill so went with my dad and brother to the Matterhorn museum to soak up the mountaineering atmosphere. It didn’t disappoint. I’ve been an armchair mountaineering enthusiast for a good few years now, so coming to the home of the Matterhorn and surrounding peaks (there are six of the <a href="">top ten highest mountains in Europe</a> in plain view from here) was something I was really looking forward to. </p> <p> <img src="" title="{title}" alt="{title}" width="615" height="300"></p><p class="caption">The Matterhorn. The view from our chalet on the outskirts of Zermatt in Winkelmatten</p> <p> The Matterhorn is a stunning peak. It was considered unclimbable until, after 13 (or was it 12) failed attempts, Englishman <a href="">Edward Whymper</a> summitted the peak in July of 1865. Four of the party of seven climbers were killed on the descent when they fell and the rope which held them all together snapped. Since then, the Matterhorn has been summitted countless times and a relatively experienced climber can be guided to the top. </p> <p> I’d love to be able to do it. However, I’m scared to death of heights. Sometimes, I think I’m ok, like the other day when me, my wife and brother took the cable car up to <a href="">Klein Matterhorn</a> and climbed up to the exposed viewing platform at nearly 4000 metres. Stunning views, and I’m sure I would have really enjoyed them if not for the fact of the abyssal cliff faces on three sides of the platform. I wanted to jump off. That is what vertigo feels like. I was light-headed, and was not happy about going near the edge. It is because of this, that I couldn’t possibly be a mountaineer. </p> <p> The snowboarding has been pretty good this year. We both have new, more advanced boards which are holding up well in the conditions. Zermatt itself is ok, but I think it’s more skier friendly and there is certainly a feeling of skier/snowboarder rivalry. After the impressive ski in/ski out facilities of Les Arc last year—and the incredible snow—it’s frustrating having to walk for twenty minutes with all your gear and then have to catch three lifts to get up the top. Typical bloody Northerner; always moaning. </p> <p> So, only one more day left and it looks like the weather may clear a little and we’ll have a day on the glacier before we leave on Sunday. Then it’s back to work. Great. <br> </p> Off the Grid 2007-01-03T00:00:00+00:00 <p>Well, after only a month or so on being on <a href="">Media Temple’s</a> new <a href="">Grid server</a>, I’m off. Why? Well, in addition to continuing connectivity issues MT are charging for GPU overage. Since they can’t give me more details as to why I’m going over to the tune of about £30 every month (so I can attempt to reduce it right?), then I’ve got myself one of their nice new <a href="">DV dedicated machines</a> (with a little help and guidance from <a href="">Andy</a> and <a href="">Steve</a>). </p> <p> As a result, this site (and the fivesimplesteps site) and my email will be going through the usual DNS pain over the next couple of days. Fingers crossed it all sorts itself out. See you on the other side. </p> Five Simple Steps to designing with colour part 3: Colour combinations 2007-01-03T00:00:00+00:00 <p>Colours chosen from different spokes on the Colour Wheel will provide a variety of colour combinations. Deciding upon and selecting a colour combination that works for you will very much depend upon the job at hand.</p> <p>Will it communicate what you want it to? Or are you just choosing them because you, or the client, like them? These are very difficult questions to answer because any designer or client will let their personal style and preference interfere with their decision-making. Colour combinations tend to evoke certain reactions either by cultural, or personal experience. Understanding these experiences will help you create colour combinations that tell a story. That is what good colour theory can give you; designs that tell a story.</p> <p>I’m going to go over a few combinations here to demonstrate my thinking. But before I get onto that, it’s worth noting how palettes can be presented to potential clients or in design documentation.</p> <p>I’ve always presented palettes in two different ways depending on the amount of colours. In a broad palette, with many colours, I display these left to right with dominance and usage being denoted by the size of the square, or block, of colour. For smaller palettes and combinations, I use the rectangle containing a line and a square. I was taught this simple device in university but it is similar to many other examples I’ve seen. You can use circles, blobs, lines, squares. It’s up to you. The important thing is to indicate the relative weight of colour.</p> <img title="{title}" src="" alt="{title}" width="615" height="235"> <p class="caption">Colour palette showing range of colours and relative weight.</p> <p>The colours within this combination (I was tempted there to call this a Triad. However, if you think back to the Colour Wheel, this is not the case. Just because there are three colours does not make this a Triad combination) are given the following names:</p> <ol> <li> <p>Subordinate, or Base colour. This is a visually weak, or subordinate, colour. It should contrast or compliment the dominant colour.</p> </li> <li> <p>Dominant. The main colour. It is this colour which defines the communicative values of the combination.</p> </li> <li> <p>Accent, or Highlight colour. The Accent colour can be two things: either sympathetic to the Subordinate or Dominant colour, or it can be visually strong and striking, therefore appear to be competing with the dominant colour. This can provide tension within a combination</p> </li> </ol> <img title="{title}" src="" alt="{title}" width="615" height="235"> <p class="caption">Colour combination showing Subordinate, Dominant and Accent colours</p> <h3>Examples of colour combinations</h3> <h4>Active / Vibrant</h4> <img class="thumb" title="{title}" src="" alt="{title}" width="450" height="150"> <p>Active combinations are intense. They feature bright, often complimentary, colours on the colour wheel and are combinations of primary, secondary and tertiary colours. To many people, colour combinations such as this evoke feelings of noise, flamboyance and energy. It’s a young combination, although there will be cultural differences, aimed at young adults. Many of the hues are not really ‘natural’ colours, but they are more intense tones of the same colours, therefore they could be used for ‘natural’ applications such as the travel industry.</p> <h4>Muted / Calm</h4> <img class="thumb" title="{title}" src="" alt="{title}" width="450" height="150"> <p>Muted palettes have a lot of white in the hues. This example uses blues and introduces lavender as the dominant colour. The resultant colourway is balanced and calming. Hues in the blue, green and violet areas of the Colour Wheel convey a visual quietness. The Accent is almost always used as sympathetic to the Dominant. Often used in the cosmetics industry, the visual softness of the colours often portrays a feminine quality.</p> <h4>Pastel</h4> <img class="thumb" title="{title}" src="" alt="{title}" width="450" height="150"> <p>A pastel combination is similar to the Muted combination in that is often based on colours containing a lot of white (or lack of white depending on your colour model right?). Where they differ is that Pastel combinations combine warm and cool tones readily. This combination can portray youth and innocence (babies!) and has a warmth that the Muted combination fails to deliver.</p> <h4>Natural</h4> <img class="thumb" title="{title}" src="" alt="{title}" width="450" height="150"> <p>Natural combinations are those colour which are borrowed from the great outdoors. Rusty reds, browns, sky blues and warm pinks are the order of the day. I find the easiest way to create these combinations is to go outside, take a photograph and then choose some colours from that, you really can create some stunning combinations. When you need to communicate rustic charm or the feeling of walking through autumn leaves, then this is the type of combination you’re after.</p> <h4>Rich</h4> <img class="thumb" title="{title}" src="" alt="{title}" width="450" height="150"> <p>This is a good one. Hues of royalty, tradition, often religious and above all; wealth. Rich colour combinations are perhaps the combinations which are so engrained in culture. True, the actual colours used may differ, but the overall effect is seen throughout the world. Maroon is often mixed with gold and full shades of green. They can be combined with Natural combinations for a fuller palette.</p> <h3>Part of the design solution</h3> I hope I’ve indicated how important colour is in communicating part of the design solution. By selecting the best combination of colours you can go a long way to ensuring the success of your design. We’ve looked at some colour combinations here but what about the individual colours? They also have meanings and go a long way on their own to set the mood and tone of a given design. Next, I’ll move onto discussing colour and mood. What do different colours mean? <h3>Five Simple Steps: Designing for the Web</h3> This article is an extract from the upcoming book; <a href="">Five Simple Steps: Designing for the Web</a>. Available later this month. All is good on the DV 2007-01-03T00:00:00+00:00 <p>This post is more for me than you. If I’m seeing it, then your seeing it and that means the move to the new server and DNS pain was, hopefully rather painless. I’ll delete this post once all the dns stuff has resolved it self. </p> Yes, we know the web is not print 2007-01-02T00:00:00+00:00 <p>I’ve just been directed to a article on <a href=""></a> stating that <a href="">Web Design is not Print Design</a>. Just to forewarn you, this may turn into a little rant, but I’m hoping there will be some interesting points raised. </p> <!--more--> <p>The article starts off well with the standfirst; ‘Learn to relax your design requirements’. One of the hardest things for designers who straddle the two media to do is to relinquish control. This should not be misunderstood or scoffed at (as it so often is by web designers). Print designers are taught to solve visual problems based on a wealth of history of the practice. A lot of that problem solving is accomplished in a media where there are established conventions and parameters; from the methods of production to delivery of the content. </p> <p> It’s a top-down process. The designer designs for the audience and has control over their solution. This is the way they are trained and it is a tough job to relinquish it. </p> <p> Some of us have made the transition but are still very much learning. Others (and I’m talking about high profile designers here) have simply given up on the web until it has ‘grown up’. It’s a damn shame, but when the division between the two facets continues to grow, articles like this only serve as rubbing salt in the wound. </p> <p> So, what, on New Years Day, got me so wound up? </p> <p> There are a few things all wrapped up in this statement: </p> <blockquote><p>As you’re a designer, you’ll need to work with customers. You will be doing them and yourself a disservice if you don’t explain the difference between print and the Web. Especially if you bring your portfolio as print outs. This is a common problem, where the customer expects the printout to represent exactly what the page will look like… but remember that the Web is not print, and bringing a print out is not a strong representation of your Web site design skills.</p></blockquote> <p> I think this is just plain rubbish. If a client thinks the website will be exactly as the printouts, then that is <em>your failing</em> as a designer by not conducting the presentation correctly. This is often the result of misunderstanding, not the result of paper. I find presenting on paper, especially early on in the process, as a very conducive method for client engagement. They can engage with paper, scribble all over or tear up and throw in the bin. You cannot do that with a screen. Paper is more immediate and less precious. </p> <p> So, I guess there are a couple of things which are happening within graphic design. Web design has been for a long time now separating itself from its print based brother. Now I know there are fundamental differences in the medium of delivery and, in many cases, the nature of the design. However, I believe this is a bad thing. If you have a background in print design, don’t forget it. If you don’t, I think you should do some reading. </p> <p> You could totally disagree of course, or you may be bored to tears with the whole thing, but the old ‘print verses web design’ argument never fails to spark an interesting discussion. </p> PDFs: A quick poll 2007-01-02T00:00:00+00:00 <p>I need your advice. As you may know, I’m writing and <a href="">self-publishing a little book on designing for the web</a>. It will be published in two ways: initially, a pdf for download and shortly after, a printed version which you can buy from <a href="">Lulu</a>. These two media require different design considerations. </p> <p> Firstly, pdfs are read on screen and can be printed out <em>on individual</em> sheets of paper and probably on a black and white printer. Secondly, the printed book (from Lulu) is bound and needs the margins adjusted accordingly. So, my question is this. Do you think it’s necessary for me to typeset two versions? One, a pdf with minimal flat colour (so as to not waste toner) and even margins. And two, a version which has facing pages etc for the printed book? </p> That was 2006 2006-12-30T00:00:00+00:00 <p>As I did last year, I thought it was about time I attempted to summarise my 2006 before embracing 2007 in a couple of days time. I find it slightly cathartic, sometimes embarrassing, but mostly fun to ponder on the past year. Where have I been, what did I do and who did I do it with? This was confirmed just now when reviewing this <a href="">same post from last year.</a> </p> <p> So without futher ado, I’ll get on with it. </p> <!--more--> <h3>2006: Early on</h3><p> </p><p>The year started on a bit of a downer really. I’d <a href="">bust my wrist</a> and was in the middle of another flare from the damn Colitis. But, a few weeks later and a vastly improved wrist, it was possibly the highlight of mine and Emma’s year; the week in the Alps snowboarding. This year it was Les Arcs in France and over three feet in powder. Heavenly.</p> <p></p> <p> Freelance work was once again picking up and the balance between that and the <a href="">day job</a> were beginning to get difficult. During this time I also <a href="">left</a> <a href="">9rules</a>. </p> <p> The highlight of the early part of the year was without doubt <a href="">SXSW</a>. I enjoyed the <a href="">panel I sat on</a> with <a href="">Jason</a>, <a href="">Khoi</a>, <a href="">Toni</a> and <a href="">Liz</a>. It was great to finally meet so many people who I’d only ever read blog posts from. I promise this coming year, I won’t be quite so jet-lagged. </p> <h3>2006: The Middle Bit</h3><p> The middle bit got off to an exciting start in April. Emma and I travelled to Australia again for a friends wedding in Perth. Whilst there, I gave a talk to those fine folks at <a href="">Port 80</a> along with <a href="">John Allsopp</a>. From Perth, Emma and I spent time in Cairns (in a <a href="">Hurricane</a> no less) for a week before heading to Sydney to visit old friends a spend a little time in Manly (where we lived for six months). </p> <p> May brought a <a href="">redesign</a> (or should it be realign?) of It’s interesting to go back through the comments six months later actually and revisit some of the issues. I may actually do a slight update to address some of issues after living with the design for six months. </p> <p> It was during this time, I was involved in being a design reviewer for Andy Clarke’s new book; <a href="">Transcending CSS</a>. It is a credit to <a href="">Andy</a>, <a href="">Molly</a> and <a href="">Peachpit</a> that they decided to expand the remit of a technical reviewer to include a design reviewer as well (given the nature of Andy’s new book). It goes without saying it is an outstanding piece of work. Don’t take my word for it though. <a href="">Buy it</a>. </p> <p> June was of course time for a bigger and better @media. Once again, meeting up with friends was the order of the day (and the excellent presentations of course). The football was also, er, satisfactory. I think I’ll carry the look on <a href="">Colly’s</a> face with me to the grave. </p> <p> The tail end of The Middle Bit brought the big news; my resignation from the BBC. It was not an easy decision. Given an illness which will be with me for the rest of my life, an uncertain local industry in Wales and several other personal issues, it took about six months of thinking to come around to the idea. But, in July, I handed my resignation in and I would leave a month later for a holiday in Portugal before beginning trading as Mark Boulton Design. Was I scared? Yep. Petrified. </p> <p> That brings me on to the last few months. </p> <h3>2006: The last few months</h3><p> </p><p>Following our return from Portugal, things thankfully got off to a busy start. I began work for <a href="">my previous employer</a> on a <a href="">health portal</a> for BBC Wales’ autumn health season.</p> <p></p> <p> In the middle of all the work was my first Britpack Geekend to the birthplace of the Industrial revolution; Ironbridge. It was refreshing to chat to that circle of friends outside of a conference context. There was good food, fireworks, some great letterpress printing and a strange game called Werewolf. </p> <p> Then it was onto a redesign of a News and Entertainments website; <a href="">Monsters and Critics</a>. From there, things pretty much snowballed. Mark Boulton Design is currently involved in some exciting projects for some great clients. I’m doing some work for a <a href="">software company in Bristol</a>, an <a href="">airline</a>, a <a href="">prestigious publisher</a> and a <a href="">UI consultancy</a> in Spain on an exciting Drupal project. And then, there’s the <a href="">new book…</a> </p> <p> </p><h3>Next year?</h3><p> Well, selfishly, hopefully I’ll continue to remain pretty healthy. I’ve got a couple of <a href="">speaking</a> <a href="">engagements</a> lined up. But first, I’ve got to get <a href="">this book</a> released. </p> <p> Thanks for reading and your continued support through the past, rather hectic, year. Here’s to 2007… </p> SXSW panels: Take two 2006-12-01T00:00:00+00:00 <p>In March I’ll be heading over to Austin for the third time for the <a href="">SXSW Interactive conference</a>. This time I’ll be on one panel: <strong>‘Web Typography Sucks’</strong> with the guy behind <a href="">The Elements of Typographic Style Applied to the Web</a> and fellow Britpacker, <a href="">Richard Rutter</a> of <a href="">Clearleft</a>. The second panel isn’t really a panel at all, but a ‘’Power Session’: <strong>“Grids Are Good, and How to Design with Them’</strong> with my good friend, <a href="">Khoi Vinh</a>. </p> <!--more--> <h3>Got my work cut out</h3><p> So, things are pretty busy at the moment; book to finish, new work piling up for the business (which is great—musn’t knock it), a couple of articles to write and now two panels at SXSW. I’m not going to give too much away with regards to the panels just yet, but I’m hoping they will be light and fairly entertaining yet informative. I’m pretty sure both will be practical and, if you attend (which I hope you will), you’ll come away having learnt something that you can apply day-to-day. Not sure what time we’ll be on, but hopefully it’ll be soon on in the conference so I can kick back and get over the jetlag slowly. </p> <p> Oh, and if you’re coming I’ll reiterate what a lot of people are saying at the moment: <em>book your hotel now!</em>. Seriously, if you haven’t, you’ll be staying out near the airport. It’s getting pretty full already. </p> Getting the basics right 2006-11-22T00:00:00+00:00 <p><strong>Warning. This is a grumpy old man post.</strong> Why oh why can’t places like airports, in fact most places, get the basics right. Let me explain. </p> <p> I’m sat in Bristol departure lounge heading off to Spain for a client meeting and as it’s 5.31am, I need a good tea to kick start the day and get my brain working. I also need good wifi to check my email and things. Those two simple things are crap here. Crap tea. Crap, expensive wifi. It’s really not that difficult is it? </p> <p> That is all. </p> Small is beautiful 2006-11-21T00:00:00+00:00 <p><img src="" title="{title}" alt="{title}" width="100" height="100" class="thumb">When I left the <a href="">BBC</a> a few months ago, they were kind enough to give me an Amazon voucher with which I bought a new <a href="">Apple iPod Shuffle</a>. </p> <p> Well, Amazon took two months to actually get the stock in from Apple (don’t know whose fault that was, but the delivery date kept on going back and back with no word from either party.) But all that aside, I received it yesterday and it’s a little thing of beauty. </p> <!--more--> <h3>The Unpackaging Experience</h3><p> I’m sure Apple have dedicated a lot of time, energy and money into this aspect of buying an Apple product. It’s a really important one. I was talking to the Wife about it ages ago and she was saying it’s similar to buying really nicely packaged clothes or cosmetics. I guess what I’m saying is, the retail experience doesn’t stop when you leave the store. </p> <p> </p><p>I decided to document my unpackaging experience (the limited photos are <a href="">over on Flickr</a>). It was good but there was one slight glitch. It took me longer than I thought to work out how to open the plastic container. I then noticed <a href="">this little sticky out sticker bit</a>. All was good. I could get at my Shuffle.</p> <p></p> <h3>Partial to green</h3><p> Now, you know I like green. The previous Shuffle used a lime green in the branding and on the product. This has been carried through again to the packaging, branding and product of the new Shuffle. It’s all black, white and green (except for the silver of the Shuffle itself). </p> <h3>The proof is in the pudding</h3><p> The new Shuffle itself is great. Really tiny and sits well in its little dock. The new earphones are great with much better sound and comfort than the previous models. So, all in all, as you’d expect from Apple. However, I’ve got one gripe. The controls are 90 degrees the wrong way. </p> <p> If you clip the Shuffle to your trousers, all the controls are facing the wrong way. Also, the interface assumes you are going to clip it to your body on your right hand side (on the edge of a jacket or pocket for example), so all the controls are the right way up and you can get at the on/off switch etc. But doesn’t this mean you’d use your left hand to clip pit there? The natural place for my iPod is in the inside left pocket of my coat. Maybe I’m being a touch picky. </p> <p> Well, tomorrow will be the proof. I’m heading off to Spain for the day for a client meeting and I’m just going to take the Shuffle for company. We’ll see after two flights and two bus journeys if the Shuffle still holds up. </p> Muse: Ridiculously good 2006-11-14T00:00:00+00:00 <p>On Sunday night, Emma and I braved the cold South Wales weather to venture into Cardiff to see probably our favourite rock band at the moment, <a href="">Muse</a>. </p> <p> They were good. Ridiculously good actually. </p> <!--more--> <p><a href="" title="Photo Sharing"><img src="" width="240" height="180" alt="Weird balloon things" class="thumb"></a>(I didn’t take that many shots - the problem with being vertically challenged in a nation of increasingly taller people) </p> <p> I’ve seen a fair few rock bands over the years (sounding like a right old timer now), from large Arena tours to tiny pub bands. Muse however, needed to be in a large venue with a big crowd. In fact, I thought Cardiff CIA wasn’t a great venue for their music. Muse need somewhere special for their venues; maybe some tumbled down warehouse or ruined turn-of-the-century mill.  I’m not going to harp on about the crap venue, the smell of burnt cheese form the sandwich vendor, the girl who was clapping and dancing out of time or the shockingly bad support act. </p> <p> I was totally blown away by the musical ability of the band. Matthew Bellamy, the band’s guitarist, pianist and lead vocalist, is such a talented bugger. I play a bit of guitar myself (having done so for about fifteen years) and was blown away with some of the technical difficulty of what he was playing whilst singing. Like I say, ridiculous. </p> <p> My ears have just about recovered which leaves plenty of time until the next rock band I’m ticking of the list in February: Nine Inch Nails. </p> Moving over to a new Grid Server 2006-11-06T00:00:00+00:00 <p>Well, it had to happen sooner or later. In the past two years, I’ve been reasonable happy with <a href="">Dreamhost</a>, but now, as a business, I need a hosting package which is a little more robust and scalable. I also want good support. This is where Dreamhost is, to be honest, totally crap for a UK business. Therefore, yesterday, I opted to move all my domains over to the new <a href="">Grid Server</a> package at <a href="">Media Temple</a>. </p> <!--more--> <h3>Why do that?</h3><p> Well, like I said, the support at Dreamhost is pretty sub-standard for business hosting in the UK. If there’s a big problem, I’d like to pick up the phone and speak to someone about it. Also, scalability. After being <a href="">Dugg</a> a couple of times this past few months, I’ve really noticed a few problems with speed at DH (not to mention two days of down time as a result of my domain having too much throttling). </p> <h3>Things may be a little screwy for a while</h3><p> I’m now undertaking the grim task of moving everything: email, databases, files etc. etc. before I change the DNS. I’m doing it one domain at a time, but will be the first. So, things may be a little weird for a while until I get things up and running, but there again, they might be just fine if all goes to plan. </p> Back to Green (for now) 2006-11-01T00:00:00+00:00 <p>Following my month of supporting breast cancer, this site is now green again. If you’re reading this in an RSS reader, then you probably don’t give two hoots. However, if you’re reading this in a browser, then kindly dump your cache and refresh otherwise things may look a little odd. </p> <p> It’s been nice being pink for the month I must admit. So much so that I’m considering a slight colour change more often. I may even put you, my readers, in charge via a little stylesheet switcher (user preferences? heaven forbid). Although I’ll probably end up tossing this thought on my steaming pile of unfinished, festering ‘things to do’. Like I haven’t got enough to do with a new business, a book to finish, a web-app to finish… </p> Five Simple Steps to designing with colour part 2: A few basics 2006-10-30T00:00:00+00:00 <p><img src="" alt="The Colour Wheel" width="100" height="96" class="thumb">In the <a href="">last part</a> of this Simple Steps series I talked about designing without colour. But before applying colour, it’s always a good idea to have a basic understanding of colour theory. There is a great deal of complex terminology surrounding colour theory, so in this part I’m going to outline some of the basics. </p> <!--more--> <p>In any book on colour I’ve read, this chapter was without doubt always the most complicated: Colour Theory. At its heart, colour theory is concerned with the creation of colour combinations via relationships. The relationships are created by the position of the colours on the colour wheel. The complexity of colour theory really kicks in when you start taking into account different hues, shades and tones. It can all get a bit too much. So here, I’m keeping things very simple and I’m starting at the beginning with primary colours. </p> <h3>Primary colours</h3> <p> <img src="" alt="Primary colours" width="615" height="235"> <br> </p><p class="caption">Primary colours</p> <p> Primary colours can be divided into two different types: Additive and Subtractive. The additive primaries are those which are obtained by light; red, green and blue. They combine to form white and form the basis of colours on screen (your TV works in RGB, as does your computer screen). Subtractive primaries are those obtained by the subtraction of light: cyan, majenta and yellow. They form the basis for four colour printing and combine to form black, the K in CMYK. </p> <p> <img src="" alt="Primary colours overlays" width="615" height="235"> <br> </p><p class="caption">Primary colours overlays</p> <p> The additive primaries combine (as shown in the diagram below) and where they overlap, the secondary colours, these are the subtractive primaries. The same happens when the subtractive primaries overlap. </p> <p> </p><h3>The Colour Wheel</h3> <p> Now this little chestnut has been part of my life for about, ooo, twenty years. I remember painting my first colour wheel in secondary school. I had absolutely no idea why I was painting one (other than being told to) and how it would help me in my work. Even today, the practical use of colour wheels in every day design situations is questionable. However, the familiarity of a colour wheel will certainly help you understand where colour palettes come from. </p> <p> <img src="" alt="The colour wheel" width="615" height="235"> <br> </p><p class="caption">The colour wheel</p> <p> The colour wheel not only helps understand the relationship of different colours but also the classification of colours. It also, as I said, provides a quick reference to the primary, secondary and tertiary hues. </p> <p> </p><h3>Primary, Secondary and Tertiary colours</h3> <p> The primary, secondary and tertiary hues are shown in the diagram below. As you can see, it’s pretty straight-forward to see how each is produced; Primarys combined create Secondary colours. Tertiary colours are created by combining a Primary and a Secondary. Things start to get interesting when you isolate different combinations of colours and this is when we get into the realms of colour wheel selections. </p> <p> <img src="" alt="Primary, Secondary and Tertiary colours" width="615" height="235"> <br> </p><p class="caption">Primary, Secondary and Tertiary colours</p> <h3>Colour Wheel Selections</h3> <p> Colours, when selected from from the colourwheel in certain combinations, interact together. This is the basis of colour palettes; <strong>the interaction of colours</strong>. Knowing the basis of these colour combination types is essential in creating palettes. True, you can rely on gut instinct (as many designers do), but more often than not these decisions are based on experience of seeing these colour combinations everywhere in everyday life. Really, once you start to notice these different combinations, it will drive you bonkers. </p> <h4>Monochrome</h4> <p> Monochrome selections are simply one colour from the colour wheel. </p> <p> <img src="" alt="Monochrome colours" width="615" height="235"> <br> </p><p class="caption">Monochrome colours</p> <h4>Complementary</h4> <p> Complementary colours are contrasting colours. Sometimes they look horrible, they can really not work. However, sometimes, they are just the ticket. I generally use them if I want a vibrancy in a palette or if I need to draw the readers eye to something. Hues of these colours work great as a highlight colour. They are defined by the colours opposing each other on the colour wheel. </p> <p> <img src="" alt="Complementary colours" width="615" height="235"> <br> </p><p class="caption">Complementary colours are opposing colours on the colour wheel</p> <h4>Triads</h4> <p> Triads are really interesting. They provide a real tension in a colourway as their strength is pretty much equal. Using triads in differing hues is where they come into their own though. Triad colours are any three colours which are equidistant on the colour wheel. As all three colours contrast with one another they can clash and this is where the tension is created. </p> <p> <img src="" alt="Triads" width="615" height="235"> <br> </p><p class="caption">Triad colour combinations provide tension in a design</p> <h4>Other colour wheel selections</h4> <p> There are other selections which can be used to form palettes: Analogous, Mutual compliments, near complements and double complements. However, practically, I rarely use these conciously. Analogous colours for example are colours which sit either side of a selected colour on the colour wheel. Choosing these colours for example, is a fairly unconcious decision for any designer as they appear around us naturally so often (think similar tones in nature for example). </p> <h3>Coming up</h3> <p> </p><p>So, now we have <a href="">designing without colour</a> and training your eye to see just tone, and we have the basic terminology of colour theory. Next up, we’re going to apply them to creating colour combinations; the basics of palette creation.</p> <p></p> Announcing: Five Simple Steps the Book 2006-10-27T00:00:00+00:00 <p><img src="" alt="Five Simple Steps: Designing for the Web" width="155" height="202" class="thumb">This is a project of mine that has been kicking around for well over a year now, so I thought I’d stick my neck out and just go with it. I’m going to be releasing <a href="">Five Simple Steps: Designing for the Web</a> as a PDF download book in a couple of months time (around Christmas). It will cost $19. It will be stacked full of useful, practical information for applying graphic design principles to designing on the web. </p> <!--more--> <h3>How much will it cost?</h3><p> It will be <a href="">priced at $19</a>, but you can get $5 off by signing up to <a href="">the mailing list.</a> </p> <h3>What’s it about?</h3><p> Like my Five Simple Steps articles, the book will be based on five steps you can work on to improve your design. These vary from very short and simple things like how to set a list correctly, to how to design a complex, modular grid system. They’re not meant to be a complete design lesson in the varying fields. More like a refresher for those pople who have design schooling and a brief, practical lesson for those who don’t. </p> <h3>What’s in it?</h3><p> There will be five chapters; <strong>Ideas and Research</strong>, <strong>Typography</strong>, <strong>Grid Systems</strong>, <strong>Colour</strong>, <strong>Layout and Form.</strong> </p> <p> In each of the five chapters, there will be five steps. Simple really. </p> <h3>Aren’t they the same as your articles which are free on this site?</h3><p> No. The new book will have rewritten articles following the same basic subjects. Not only that, but there’s two whole new chapters in there: <strong>Ideas and Research</strong> and <strong>Layout and Form</strong> (which won’t be available free. Yet.) The chapters will be rehashed, reordered and rewritten. I’ve risen the bar in terms of quality and the illustrations produced. I’m pretty chuffed with the results and I hope you will be too. </p> <h3>Is there a printed version?</h3><p> Not yet. I’ve thought about Lulu and other self-publishing printers, but at this stage I’m focussing on the core product and initial delivery as a PDF from this site. If there’s demand for a printed version, then I’ll certainly consider it. </p> <h3>Why not just get it published?</h3><p> There’s a few reasons and I’ve thought long and very hard about the whole self-publishing thing. The first is market value. This book, as it’s very niche, has limited market value (in the grand scheme of things). This would make the returns for any publisher lower than, say, a CSS book with a slant to simple steps. You see, CSS sells books. Fair enough. But being a bit of a control freak, this project is my baby and I wanted it produced and released on my terms. </p> <h3>Give me your email address</h3><p> </p><p>And I’ll give you $5 off when the books available. How’s that for a bargain?</p> <p></p> <h3>When is it out?</h3><p> Christmas 2006 (ish). </p> <p> So, there you have it. <a href="">Pop over to the site and sign up now for the discount</a>. Keep tuned for the next installment of the latest Five Simple Steps article (colour), which is due to be posted some time over the weekend. </p> Five Simple Steps to designing with colour 2006-10-19T00:00:00+00:00 <p><img src="" title="{title}" alt="{title}" width="100" height="100" class="thumb">It’s been ages since I’ve had a stab at a Simple Steps series. So far we’ve had <a href="">Better Typography</a>, <a href="">Designing Grid Systems</a> and <a href="">Typesetting</a>. This one has been kicking around for a while so I thought I’d just publish the first couple and see where we go from there (of course there will be five, I just haven’t written the last couple yet). </p> <p> Designing with colour is perhaps the element of graphic design which is the most difficult to get right. Why? Well, because it is the most subjective. For some, a palette of dark grey with splashes of bright pink will be just great; to others it would just be all wrong. Too many designers, whether schooled in colour-theory or not, end up making subjective decisions about colour and then when it comes to explaining those decisions to a client, things begin to unravel. </p> <p> This first post in the series will be dealing with looking at tone and the value of limiting your palette. </p> <!--more--> <h3>Lowering the tone</h3><p> Years ago now (ooo, about fifteen or so), I was in my first year on a Foundation Art and Design course here in Stockport in the UK. I wanted to be a painter (well, an illustrator to be precise). In the first week of this course we were all told to get rid of our nice new paint-brushes we’d bought for the course. We were told to leave all our new kit at home and to go outside and find some nice twigs and get some black ink from somewhere. I was not chuffed. How was an artist meant to create with these primitive tools? </p> <p> The lecturers had us painting with twigs, our feet, blindfolded; the works. At the time I hated it; couldn’t see the point. Now, I look back and really see the value of this horrific couple of weeks. They were teaching us how to look and produce marks which weren’t dictated to by our tools. In other words, because we had colourful paints and lovely sable brushes, the temptation is to use them. Without the brushes, and the colourful paint, we were forced into trying to communicate colour with <em>tone</em> alone. </p> <p> This is what I’d like to focus on to begin with. </p> <h3>Removing colour</h3><p> One of the things I like about editorial design, specifically typographic design, is how there is an emphasis on black and white. True, colour is a very important part of any typographic exercise, but primarily I begin by looking at tone and form. I think there’s a lot of value in removing colour from the equation entirely and focusing on the tonal aspects of a design before applying the colour. </p> <p> There are a few notable examples of how designing with just black make for a unique and attractive design: </p> <p> Of course, no discussion about designing with black and white on the web would be complete without mentioning Khoi Vinh’s site, <a href=""></a>. Khoi works with black and orange to harmonise with the Swiss undertones of the design. </p> <p> <img src="" title="{title}" alt="Khoi Vinh's" width="615" height="300"></p><p class="caption">Khoi Vinh’s </p><p> <a href="">Form</a>, a German design magazine, uses black and white typography (and a strong grid), to convey it’s brand to the users of the site. The effect of having a site like this in black and white, is the work that is showcased here, being in full colour, really stands out against the black and white framework. </p> <p> <img src="" title="{title}" alt="German design magazine, Form" width="615" height="300"></p><p class="caption">German design magazine, Form </p><h3>Begin with Grey</h3><p> Next time you start a design, try this. As simple as the heading says, start your design in grey and tones thereof. Don’t introduce any colour until the design is working in black and white. Chances are, your decisions on palette and colour will be made a lot easier because the design, or elements of the design, aren’t relying on colour for their function. This of course is very useful for designing with accessibility in mind. I’m not addressing any accessibility issues within these articles, as I’d like to focus on the graphic design, but it’s an important consideration that shouldn’t be overlooked. Designing with black and white first will ensure that the solution doesn’t <em>rely</em> on colour to work. </p> <p> I often use colour to highlight specific elements of the design, but generally those elements have a function within the design solution, such as the horizontal lines on this site. Another example might be highlighting a search button, or elements of a navigation bar. Using colour to pick out key functional elements in the interface. </p> <p> <img src="" title="Solving tonal problems before applying any colour" alt="{title}" width="615" height="235"></p><p class="caption">Solving tonal problems before applying any colour</p> <p> The benefit of working this way, like other tools at the disposal of designers such as grid systems, is that it solves a certain amount of problems for the designer. I find it focuses my attention to tone and composition without worrying if this colour matches that. Focus on the composition tone, once that’s sorted, move on to the colour. </p> <h3>Moving onto mono and duo tonal palettes </h3><p> In the next post, I’m going to focus on taking the grey a step further. </p> <p> You know, us web designers have it quite lucky. We can use any colour we like (within reason). Print designers have had to deal with colour limitations since the press was built. This has made print designers very sensitive to designing with colour. There’s nothing quite like designing a one or two colour job, but over a wide range of material, to really get you thinking about how colour is used. I’d like to bring some of that kind of thinking (and restraint) to the next post. </p> Pink for October 2006-10-08T00:00:00+00:00 <p>I’m a little late for this one, but I’ve now managed to go <a href="">Pink for October</a> in support of <a href="">National Breast Cancer Awareness month</a>. At the moment, NBCM is a US based thing, although a pink month was done by <a href="">Cancer Research UK</a> a while ago. Anyway, the point is, breast cancer awareness shouldn’t be limited by country. </p> <p> If you don’t know much about breast cancer, please take this opportunity to go and <a href="">read a little about it</a>, and consider a <a href="">small donation</a>. </p> <p> The normal green service will be resumed in November. Although, I am quite liking the pink. Maybe a touch of brown as well… </p> Professional body for the web design industry? 2006-09-25T00:00:00+00:00 <p>I was listening to the <a href="">@media ‘Hot Topics’ podcast</a> the other day, which unfortunately I had to miss. The section of it which I found really interesting was the discussion on a professional body (which is about two thirds of the way through). Although the panel agreed that a professional body for our industry is overall a bad idea, I actually think they were talking about several different things. </p> <!--more--> <h3>Accreditation and Certification</h3><p> If you listen to the podcast there are some points in there about Accreditation and Certification for web design. The general consensus from the panelists was it is a bad idea for several reasons. </p> <h4>Outdated teaching and therefore outdated qualifications</h4><p> <a href="">Eric Meyer</a> pointed out that web design courses are teaching applications and methodologies that are simply out of date. If that’s the case, which I’m sure it is, then the graduates are going into industry with the wrong tools. So, why is this happening? This brings me onto the next point the panel raised: </p> <h4>Industry moving too fast</h4><p> It’s all going to fast for education or accreditation to keep up. Agreed. I know quite a few people who work in the education sector and the hoops they would have to go through to just teach this stuff is mind-blowing. Generally It’s not the lecturers fault here, let me make that absolutely clear. It’s the system. If a teacher wants to teach web standards, they have to do it within an agreed framework. This framework has to be agreed and signed off by their superiors and if it requires new software, this also has to be agreed, sign-off, bought, installed etc. That can all take a year of more. Seriously. By the time it’s all been considered, because of the speed of our industry, the focus might be on something else right? It’s an unworkable situation. </p> <h4>Technical certification</h4><p> This works where th