I was recently asked by those charming chaps over at .net magazine to have some of my work and a short interview featured in one of their profile sections, I was of course only too glad to oblige. The article came out a few issues ago now (issue 237) so I thought it would be nice to republish it here on my blog for those who didn’t get a chance to buy a copy.

Q. You used to be a hairdresser. How did you get started in web design?

I quit hairdressing in 2006 due to a combination of illness and the fact that I started to hate the job anyway. I bummed around for a while, DJ-ing around london and selling my old records online to pay the rent, but not really going anywhere. Then a close friend of mine passed away in 2007 and although it was very tragic it made me realise that life is short and that I needed to find some direction in my life. I’d been playing around designing flyers for the club nights I was doing and a friend had taken some basic web design courses at the Open University and had found a job afterwards straight away so I thought I’d give it a go.

Q. So you’re self-taught?

I am mostly self taught, the OU courses I took gave me a very basic understanding of HTML and CSS. As soon as I’d finished those courses I did two different internships with startups in London to learn the ropes a bit more, which taught me what NOT to do as much as anything. I think I learnt a great deal more from just throwing myself head first into work and picking up things as I went. One thing that struck me immediately was how willing the web design/dev community is to share knowledge, tips and code — which is great for any beginners.

Q. Are there similarities between hairdressing and web design?

Yes, which surprised me as much as anyone. I think having already had a relatively successful career in a different creative industry was really good preparation for becoming a web designer. Hairdressing (at it’s highest level, not the high street blow dry and highlight brigade) is all about an appreciation of form, function, shape, texture, colour and balance. A good hairdresser understands the need to balance aesthetics with functionality and how good technique can make a haircut keep it’s shape longer. This is no different to how a good web designer understands how form must follow function and that clean, well written code will make a website more robust in the future. It also gave me great people skills as I used to deal with 8 or more different clients a day, so I really learnt the value of consultation, if you consult properly before you start a haircut or website then you’ll eliminate a lot of the potential small problems that can appear later on.

Q. You work mainly for yourself. Are you ever tempted by the bustle of a big agency?

Yeah I work mostly by myself, though on some projects I’ll be part of a team, though I always work from home. I don’t think a big agency is right for me just now, I have been asked plenty of times by agencies if I want to join them but I always politely decline. I guess I like the freedom I have being my own boss, I don’t have to conform to any time schedule, I don’t have the ‘hovering art director’ problem to deal with and it’s just a really nice stress-free way to live. I’ve come to realise that my quality of life is more important than my job, working for myself allows me to have the life I want.

Q. What’s your take on prototyping in the browser?

To me, it just feels better to work in-browser. Photoshop feels out of context, especially now with websites being responsive or adaptive.

But I don’t think there’s necessarily a right or wrong way to do anything, it’s all about what suits you as a designer and also the nature of the project you’re working on. Some people find it better to comp websites up in Photoshop or illustrator, others like myself prefer to do most of it in the browser, as long as you get there in the end then it doesn’t really matter. I actually learnt how to write HTML and CSS before I learnt how to use Photoshop, so I guess that could be contributing factor.

Q. What about responsive design? Is it as significant as it’s made out to be?

There are those who mistakenly describe RWD as a fad or trend, and yes our industry is overloaded with annoying buzzwords that people latch on to but, NO, it’s not a fad, it’s just our industry evolving to ever changing circumstances.

I think that as more designers take mobile into consideration then we’ll see fewer gimmicks which I think will be a good thing in the long run. A lot of clients mistakenly think that “gimmicks” will make their websites more interesting, I think it has the opposite effect, to me it says “our products aren’t that interesting so here’s a bunch of stuff moving about to distract you from that” It’s up to us as designers to educate potential clients into having more confidence in the product or content their website is promoting.

Q. So should designers think more about simplicity? Should they train themselves to cut back at the end of a project, like writers?

That’s a very good analogy, comparing designers to writers, I’ve come to realise that my job is more about what I don’t add or what I take away rather than what I do. Because of the limited space available at smaller screen sizes, RWD makes you focus more intently on the site’s content and how easy it is for the user to access it.

Though simplicity itself is not an aesthetic, you can still have a visual pleasing or illustrative design as long as there is no superfluous design noise that gets in the way of the sites function.

Q. How do think this today’s responsive sites will be remembered? Are we in the golden age of web design or the Jurassic era?

I think we’ve been in a golden age of web design for a couple of years now, regardless of responsive design, especially when you compare today’s sites to the bloated, Flash-based, torn-paper-grunge rubbish that was around a few years ago!

How responsive sites will stand the test of time remains to be seen, but I imagine it’s like any other form of design or art, that which is well done and timeless will age well and that which merely confirms to the fads and trends of the day will quickly date.

In the future the amount of people who consume our work on mobiles or tablets will only increase so it’s up to us to make out sites as device independent as possible so. The best design is the one you don’t notice, no matter how you view the work.

Q. At what point in a project should a designer be brought on board?

Right at the beginning. A lot of clients make the mistake of thinking of designers as merely decorators that can just “pretty up” your site once it’s all been wireframed and prototyped. This trivialises the designers role to the merely cosmetic which is wrong, a designers knowledge, insight, instinct and experience can be invaluable in shaping practical considerations like navigation, content hierarchy and IA.

Q. As well as your design work, you run Free Faces an online repository of free fonts. Who are your influences in the world of typography?

That’s a really hard one to answer because the world of typography is divided into those who design typefaces and then those who experiment with them online.

I really like the work Tyler Finck, Gerren Lamson and the Colophon Foundry are doing right now, and also the experimental web font stuff of Trent Walton. Elliot Jay Stocks did a really interesting set of blog posts entitled “Tomorrows web type today” earlier in the year that focused on some future facing opentype features in web typography which I really enjoyed.

Q. You’ve blogged about other designers ripping off your work. How do you deal with the problem?

It happens so often now that I don’t even worry about it any longer, it is annoying but I can’t spend all day emailing the felons and then naming and shaming on twitter as I’d never get any work done. Having said that I did recently find one culprit who had hotlinked to my site’s stylesheet, so I made a few changes so that her site was covered in pictures of cats and text was set in baby pink Comic Sans! It’s important to have a sense of humour in this job and not take yourself too seriously. Though it does amaze me the nerve of some people, one guy asked if I could make some recommendations to improve his site after he had ripped off the design and code entirely from me!

Q. You’ve also blogged about parrots living wild in London parks. Is it true? And is Jimi Hendrix really to blame?

Yep there are hundreds of bright green parrots living wild in London. A few months back I was walking through the park opposite my flat, I looked up into the tree above me and saw about a hundred parrots staring straight down at me against the swirling grey early evening sky, I felt like I was in a Hammer Horror movie! I have this rose-tinged romantic image in my head of Jimi Hendrix letting loose a giant flock of parrots into the parks of London in a acid-fuelled animal love-in, but sadly that’s not the case. The truth is far more mundane, they probably escaped, and were released, from aviaries, pet shops and private homes.

What he said.

Everything Was Moving: Photography from the 60s and 70s brings together over 400 works, some rarely seen, others recently discovered and many shown in the UK for the first time. It features 12 key figures including Bruce Davidson, William Eggleston, David Goldblatt, Graciela Iturbide, Boris Mikhailov, Sigmar Polke, Malick Sidibé, Shomei Tomatsu, and Li Zhensheng as well as important innovators whose lives were cut tragically short such as Ernest Cole, Raghubir Singh and Larry Burrows.

The entire exhibition is superb but the work of Boris Mikhilailov really stood out, so much so that I bought his book Yesterday’s Sandwich.

Boris Mikhilailov lived and worked in Kharkov at the height of the Soviet domination of the Ukraine. Photography was heavily policed by the regime. It was forbidden for photographers to make nudes (this only changed in 1986), and Mikhilailov lost his job as a mechanical engineer after the KGB found pictures of his naked wife. Mikhilailov was to develop a unique artistic approach with which to evade the censors and to satirise Soviet occupation, as well as the tenets of it’s artistic doctrine, socialist realism.

One day he inadvertently superimposed two slide transparencies and was fascinated by the resulting image. He realised that ‘Encryption was the only way to explore forbidden subjects like politics, religion and nudity.’ These radical montages, full of coded messages and an extraordinary joie de vivre, were assembled for temporary projection in artist-friends’ apartments and were only printed after the collapse of the Soviet Union

I just watched a wonderful documentary film The Eye Has to Travel about the life and work of former Harper’s Bazaar fashion editor and Vogue editor-in-chief Diana Vreeland, an essential piece of viewing for anyone even remotely creative.

During Diana Vreeland’s fifty year reign as the “Empress of Fashion,” she launched Twiggy, advised Jackie Onassis, and established countless trends that have withstood the test of time. She was the fashion editor of Harper’s Bazaar where she worked for twenty-five years before becoming editor-in-chief of Vogue, followed by a remarkable stint at the Metropolitan Museum of Art’s Costume Institute, where she helped popularize its historical collections. DIANA VREELAND: THE EYE HAS TO TRAVEL is an intimate portrait and a vibrant celebration of one of the most influential women of the twentieth century, an enduring icon who has had a strong influence on the course of fashion, beauty, publishing and culture.

The name of my talk was “The Responsive Designer” and it focused on how my own experiences with working responsively and how the lessons I’ve learnt and the conclusions I’ve made have made me a better designer. One major conclusion (if you can call it that) that I’ve had is that if we as designers are making our sites so that they respond or adapt to whatever device or screen size is thrown at them, then shouldn’t we as designers also be as adaptive or responsive when working on our projects?

So with that brief intro over, you can see the main points of the talk below, along with the corresponding slides.

Addendum

I should point out that whilst I do work responsively a lot, it isn’t always the best option, every project is different and there are no set rules in designing for the web and mobile, this talk/article is all about using your judgement, which may lead you to decide that a responsive site isn’t the best solution. Earlier this year I found myself talking one of my clients into not making their site responsive but instead making a mobile app at a later date, because it just made more sense that way. But if you are making responsive sites then this article may be of interest. Cheers.

The first thing I asked myself when I made my first responsive/adaptive site was “why” and although there are several reasons the most obvious and important (to me at least) is making your content readable. Or in other words — make the text big enough to read on a device without squinting or holding it right up to your face.

My early attempts made me realise that it wasn’t about “shoehorning” a desktop layout into a smaller one but thinking about the various layouts and viewports simultaneously. I then went on to show several examples of my work in such a way as to show the progress I’ve made with each new project, though I won’t bore you with them all here.

I’ve always been a fan of designing in the browser, working responsively has only increased this, I think because the sites I make now are so fluid that Photoshop comps just don’t make any sense to me any more and feel out of context.

One thing I like about RWD is that it encourages simplicity, but I’ve learnt that simplicity isn’t an aesthetic, simplicity is something that’s core to your website, it’s in the ease of navigation, in how quickly your users can understand your message and achieve whatever it is they want to achieve whilst being on your website.

The notion of trends or fads in design is a real bugbear of mine, so I was quite keen to point out that I think it’s wrong to think of RWD as a trend, it’s just web design evolving and adapting to the ever changing number of devices and methods that are being used to view our websites.

One thing I’ve been trying to educate my clients on is to not view the ipad/iphone viewports as a separate version, but to view all viewports as one. I think a big mistake a lot of startups in particular make is to get a designer onboard after a lot of the planning has already been done, I think this is a bad thing especially now when working on a responsive site as a designers insight can prove invaluable at the early stages of a project.

Also I think that RWD discourages gimmicks in our designs, which are really not needed in the first place. A good example of this is the recent influx of parallax scrolling sites, when done well and in moderation it can be beautiful but more often than not I find it really annoying, but my point is that often these sites have the parallax part “turned off” at smaller device screen sizes, WHY? Is it too distracting? Too complicated? Too greedy with your bandwidth? Well if it’s a yes then why isn’t it all these things on the desktop also? Or on a tablet? I think it is in many cases, why is OK for desktop users to have more distractions and a less content focused experience? I don’t think it is. This also goes back to my previous point of RWD encouraging simplicity.

In a perfect world everyone on the planet would have a MBP or ipad or iphone with the latest IOS/OS version and our jobs would be really easy, but that simply isn’t the case.

Our work is consumed on every type of device and screen size conceivable which means it isn’t enough any more to just have the usual “Apple breakpoints”. Our designs need to be as fluid and device independent as possible and our designs/layouts need to break when the content needs to.

Responsive sites at smaller device sizes can end up being quite text heavy but with the huge improvements in web typography in recent years and the emergence of Typekit, Fontdeck, Moveable type and Fontsquirrel etc this needn’t make your sites any less beautiful. In fact I find it a joy to read well set text on small screens in a well designed typeface.

Working responsively adds some restrictions when at smaller sizes, but restrictions always make you get more creative and more focused. I’ve really started to focus on the message and content of the sites I work on now (not that I didn’t before, just more so now). Content hierarchy is now one of my primary focuses, and because of that I’ve started to question some common practices. For instance it’s common to cut some content out from a website at mobile viewports, but why? There’s a misconception that users only use their phones to browse the internet when they are in a hurry and only want basic info such as contact numbers or an address. This simply isn’t the case and if certain content is deemed superflous to a site on a mobile, then why isn’t that content superfluos on a desktop? Why is the time of a desktop user less valuable than a mobile user? This is where good content strategy and hierarchy come into play.

One issue that I’ve been wrestling with lately is the idea of the right reading measure. The perceived wisdom is that an ideal reading length is between 45–75 characters per line of text, with 66 being the optimum length. There’s a really useful plugin from Josh Brewer for this. The thing is though that on smaller mobile devices (vertical iphone and smaller) at 66 characters per line the text is too small to read comfortably. I think around 30–35 gives a text size that is far more easy to read. I’ve seen a lot of responsive sites recently that have what would normally be a perfect measure but are just not easy to read and I end up using the reader function on Safari on my iPhone. Now I really love the reader button, I use it all the time but isn’t it a bit of a shame we even need it in the first place? Wouldn’t it be great if all sites were that easy to read without that button? Especially responsive sites that are meant to take care of all that for us.

There are loads of pre-determined responsive grid frameworks out there and whilst I think that some of them are really useful (if you haven’t already, check out the brilliant work of Joni Korpi) I don’t think it’s good practice to start choosing grid frameworks or systems before you fully know your content. It feels a little like shoehorning again and also reminds a bit of the template culture from a few years back that happily we’ve (mostly) moved away from.

Take it apart, steal the parts that you like, and adapt them to your own way of working. — Joni Korpi

I’d like to think that one of the reason clients come to me to design their websites is that they expect a bespoke service, something individual, something that not only meets the needs of whatever service or product they have, but is also innovative and unique, relying exclusively on pre-written grids doesn’t encourage that (well not in my opinion anyway).

I’ve been thinking that if the websites we are all building now respond/adapt to their surroundings and whatever device or screen size is thrown at them, then shouldn’t we as designers be more like this also? Shouldn’t we be more comfortable in adapting to every new project or challenge that comes at us?

So how do we do that?

Web design has its roots in graphic/print design where the designer was used to a certain amount of control over how things looked, but now we need to stop being such control freaks and “let go” have the confidence in our own ability to use our experience and talent to solve problems on the fly in an ever changing environment, as every project has different requirements, content, expectations etc. So what worked on your last project might not be the right solution for your next one, so we need to respond/adapt to our surroundings.

Anticipate change and expect the unexpected. Things will change, the techniques we use will change, the devices our sites are consumed on will also change, progress is an inherent part of our industry. But because RWD is in it’s infancy as such, we all have a chance to add to the collective knowledge bank on the subject, every time we make a new responsive site we learn new stuff which we can share with everyone else.

We all have an opportunity to shape how responsive sites are made as there are no experts on the subject yet, only those who know a little bit more than everyone else.

I stole this line from Dave Rupert’s recent article on A List Apart (with his permission of course). The article was about responsive images but applies to RWD in general I think. Use your best judgement, use your brain, respond and adapt to the challenges each new project brings and above all enjoy yourself.

That’s it, thanks for reading, hope it kinda made some sense.

Colophon

The typeface used for the slides is Relative Bold. Many of the pictogram style icons were purchased from the wonderful Noun Project and the illustrations were sourced from clipart.com.

Going Back to Analogue

I haven’t used iTunes in ages, absolutely ages, I don’t have spotify or Rdio (even though I know how good they are) I have thousands of mp3s on my computer but to be honest I never listen to them. I used to listen to music on my laptop all the time but now it just doesn’t work for me. I’ve been steadily re-building up my 7″ single collection over the last year or two and it’s become the only way I can listen to music now. There’s something that’s just more “real” about it, being able to feel, touch and see something as well as hear it makes it more of an experience, something to be savoured, something with more longevity I guess. Maybe it’s just a metaphor for how instant everything is now, how easy it is to find and download anything, whether it’s music, images, books, whatever, that joy of searching, rooting out what’s good, sorting the wheat from the chaff, finding the unexpected doesn’t happen on the web (well not in the same way at least).

Having said that I am wary of turning into one of those old codgers who can’t stop saying “of course it was all different in my day” no-one like that guy, so I embrace the modern, but try to balance it up to maintain some perspective.

I watched Get Carter (the original, not the shitty Sly Stallone remake) the other night for about the 8th time and though I’ve always enjoyed it, it wasn’t until now that I truly noticed all the subtle nuances that are scattered throughout the film. Strange that. Even though Michael Caine is famous for only ever using his own accent in every film he’s ever done (just like Sean Connery) in this movie he is truly exceptional in his latent, menacing malevolence.

This film also contains a scene that contains something that always fascinates me. In many films from the 60’s and early 70’s (Performance, Blow Up, Point Blank, Valley of the Dolls) there appears a scene where the main protagonist (usually a well dressed and groomed tough guy/criminal) ends up in some acid-fuelled, psychedelic, love-in style nightclub and although he has absolutely no place there he seems to fit in perfectly. Maybe it’s the fact that he, just like the people in the club, live somewhat outside of regular society and although their worlds are miles apart they have a certain “counter-culture” that unites them?

This Shouldn’t Work

Speaking off opposites coming together, that reminds me of Human Highway, Neil Young making a film with Devo, shouldn’t work (well not in 1982) which is exactly why it does.

I Love Autumn

Summer’s great and all but I’ve always loved Autumn much more, it’s still warmish, but cold enough that you can wear a suit or a nice jacket and not sweat to death. It also strangely enough feels more like a renewal or rebirth than Spring does (well to me anyway). Maybe it reminds me of being back at art school when September/October meant being able to get back into your work and expand upon all the ideas you’d had over the summer, I don’t know.

The Joy of Reinvention

Talking of rebirth makes me think of how refreshing it is when you get the chance to reinvent yourself, whether it’s starting a new school or college, starting a new job, moving country or starting a new career. I’ve done it several times, that is to say I’ve always stayed true to who I am (well hope so anyway) but you can leave all the crap things about you behind and make more of yourself, shed baggage. I’ve felt this since becoming a designer, I still keep hold of all the good things in my past, all the things I’ve learnt over the years and knowledge gained from mistakes made, but having that clean slate is really liberating.

That’s it for now, can’t think of anything else to say. Bye.

So with that in mind let me introduce 2 new guest playlists on the site. Firstly super-talented designer Michela Chiucini designed a mix of obscure, mostly Italian (I think) indie pop tracks called simply “Indie, Rock & Pop”.

Secondly I invited an old friend of mine, record collector, DJ and promoter Jean-Paul Séculaire of Right On! to select a playlist that I would then design into a page. Jean-Paul is a bit of a Jamaican and Trinidadian music nut and what with Jamaica’s and Trinidad’s 50th anniversary of independence being this month we came up with Half Ton. It also tied in nicely for me as most of my extended family are of Jamaican decent.

So anyway have a look (and a listen) hopefully I’ll have some more guests round soon, as they say, mi casa es su casa.

I got the idea while on holiday in Sweden recently (biblioteket is Swedish for “library” just in case you were wondering) as I was looking through my friends bookshelves. I’ve chosen book covers that have an emphasis on simplicity, typography and illustration, there are a few that designery types will already be aware of but there are also quite a lot of book covers there that have probably (well hopefully) not been archived before.

Anyway have a look around, I hope you enjoy the site.

Diptic

This diptic app for iPhone is quite fun used with Instagram, I was at the Barbican Center yesterday taking some pics and made the image above with some of the shots. The main image above and the one below are from the same set of pics using Instagram on it’s own.

InstaCRT

I really like the idea of this app, basically you take a photo, upload it to the app, then your photo gets re-photographed with a DSLR using a real world filter and then sent back to you. Aesthetically the result really reminds me of the kind of early 90’s imagery that got me into photography in the first place.

You can then if you fancy export the image to Instagram to play around with it even more (see below).

The video below explains how it works in more detail.

Normally the production of reggae by white folks (or non Caribbean folks) should never be encouraged as it leads to embarrassing incidents like this or this. However there have been occasional exceptions to this rule and I have featured a few of my favourites in the playlist.

I went a bit photo crazy while I was there and so decided to do something fun with all the pics I took, you can see the page here. Hope you enjoy it.

The first thing we do, let’s kill all the lawyers. — Henry VI, Part 4, 2 .59

The covers were done by Milton Glaser in 1967 and reflect the psychedelic feel of the time. I really love how the quite formal typography works with the simple, half-finished yet colorful illustrations.

There shall be in England seven halfpenny loaves sold for a penny; the three-hooped pot shall have ten hoops; and I will make it felony to drink small beer. — Henry VI, Part 2, 4. 2

Please feel free to help yourself.

I’ve no excuse either as I live opposite a really nice park and have a fancy racing bike that I’ve spent loads of money building from scratch.

So I’ve made a mid-years resolution that I’m gonna do at least one lap of the park each day (unless it’s raining really bad) to improve my fitness and in writing this post I’m hoping that it’ll give me the push I need to get off my arse.

The park in question is Gladstone Park in Willesden Green London, which is steeped in history (Mark Twain once visited, don’t you know) and is quite picturesque this time of year (if you ignore the occasional chav speeding through it on a stolen moped being chased by the Old Bill)

Bonus Fact

Gladstone Park is home to several hundred bright green (and very noisy) parrots. Yes wild parrots living in London, crazy right? but after some digging around I found that there are approximately 40,000 wild parakeets living in London and they have been seen as far north as Glasgow.

There are two myths that are popular regarding their origin, firstly (and my favourite) that they were released by Jimi Hendrix in the 60’s and secondly that they escaped from Shepperton film studios during the filming of The African Queen in 1950.

The colonies of wild parrots widespread today in London and south-east England are descended from birds which Jimi Hendrix released in the 1960s to add some psyche­delic colour to the city.

The truth of their origin however, is less exciting.

Print is dead — an outstanding collection of book covers, many of them design related.

Weyland Industries — promotional website for the upcoming Prometheus movie (the Alien prequel), I don’t normally go in for this kind of thing as I find most contemporary sci-fi graphics hideous, but this is really well done, fantastic attention to detail.

Just My Type — a collection of nice font stacks from typekit.

Retina.js — no-one’s found the holy grail for responsive/retina images yet, but this handy plugin has helped me out on a couple of occasions.

Spelltower — a beautifully designed site for an ios app word game. Parallax scrolling effects have been done to death of late, some do it well (with restraint and common sense) some don’t, this site does it well.

Stamen maps — I really like these alternatives to google maps, available in toner, watercolor and terrain styles.

Swissted Shop — punk rock meets Swiss modernism, and why not?

Swissted is an ongoing project by graphic designer Mike Joyce, owner of Stereotype Design in New York City. Drawing from his love of punk rock and Swiss Modernism, two movements that have (almost) nothing to do with one another, Mike has redesigned vintage punk, hardcore, and indie rock show flyers into International Typographic Style posters.

The story of send — Take a journey through Google’s data centers by following an email along its path.

Brackets — An open source code editor for HTML, CSS and JavaScript that’s built in HTML, CSS and JavaScript. Still in it’s infancy and not ready for general use yet, but looks quite interesting.

Leap Motion — If it works like it does in the promo video we’re in for some fun (and maybe sore arms)

Leap represents an entirely new way to interact with your computers. It’s more accurate than a mouse, as reliable as a keyboard and more sensitive than a touchscreen. For the first time, you can control a computer in three dimensions with your natural hand and finger movements.

Bariol free typeface — a new rounded sans-serif, that comes in 4 weights, regular is free, thin, light and bold are pay-what-you-want.

FF Chartwell — ever wanted to make simple charts using a font? well now you can, amazingly.

Designed by Travis Kochel, FF Chartwell is a fantastic typeface for creating simple graphs. Driven by the frustration of creating graphs within design applications and inspired by typefaces such as FF Beowolf and ­­FF PicLig, Travis saw an opportunity to take advantage of OpenType technology to simplify the process.

The Forty Story — The story of a boy born on the day Pentagram opened and how his life has been tracked (and kerned) by forty years of Pentagram design.

Figure for iPhone — I’ve had a lot of fun playing with this music app on my iphone, but not only is it fun to play with, it’s a refreshing alternative (in purely aesthetic terms) to all the gradiented, brushed metal, drop shadowed, wood background, shiny logo, faux leather style apps out there.

One big difference that I’m most excited about (and have just finished integrating) is the ability to have art-directed posts (like this one) on my blog if I feel like it. I’ve been meaning to do this for ages, but since my PHP skills are, shall we say “limited” I’ve been lazy and put it off, but I’ve pulled my finger out and made the effort.

So anyway, thanks for reading, have a look around, I hope you enjoy your stay.

So I’m casually flicking through Lufthansa + Graphic Design which arrived from amazon a few days ago and to my astonishment it seems as though I’ve copied the design of Lufthansa’s 1974 business class menu cards (see pic above) for a site I recently designed for Monty Films!

OK so I haven’t actually copied them as I only just got the book 2 days ago and have never seen those menu cards before but the similarity did shock me (see screengrabs of the Monty Films site below)

I suppose I’d better go back through all of my work to see if I’ve unwittingly ripped off any more vintage airline design!

Just thought I’d Share a few publications that I’ve been flicking through lately.

Lufthansa + Graphic Design

Deutsche Lufthansa is one of the most important airlines in the world, with a long and diverse history that goes back to 1926. The visual identity of Lufthansa is just as long and diverse. The beginning of the 1960s saw one of the most important steps in the development of corporate communication. The company employed the designer Otl Aicher and his Gruppe E5 student group at the Hochschule für Gestaltung Ulm to develop a visual identity for Lufthansa. It was substantially realized in 1963 and up until the present day counts as one of the most groundbreaking corporate design solutions of the 20th century

The Manual

Three beautiful, illustrated hardbound books a year, each holding six articles and six personal lessons that use the maturing of the discipline of web design as a starting point for deeper explorations of our work and who we are as designers.

Thinking With Type

Thinking with Type is the definitive guide to using typography in visual communication, from the printed page to the computer screen. This revised edition includes forty-eight pages of new content, including the latest information on style sheets for print and the web, the use of ornaments and captions, lining and non-lining numerals, the use of small caps and enlarged capitals, as well as information on captions, font licensing, mixing typefaces, and hand lettering.

The Print Handbook

The Print Handbook is your guide when you’re not quite sure what something will look like when printed. Full of examples, it makes the mistakes so you don’t have to.

Sparkle And Spin

A book about words by Ann & Paul Rand. A beautifully illustrated children’s book originally published in 1957 and recently re-issued.

Alighiero Boetti — Game Plan

Alighiero Boetti (1940–1994) was one of the most innovative artists of the twentieth century. Originally associated with the Arte Povera group in Turin, in the 1960s he made works using materials sourced in hardware stores, shifting by 1970 to create art using drawing, Biro pens, newspaper images and artist’s books. Based in Rome, he travelled constantly to distant destinations including Guatemala, Ethiopia, Japan, and, most frequently, Kabul, in Afghanistan. It was in Kabul that he set up a hotel and commissioned artisans to create embroideries, most famously his ‘mappe’, intricate maps of the world coloured according to political affiliation. Boetti’s work is always poetic and playful, and he enjoyed creating different kinds of games involving time patterns and numeric sequences. At the same time he remained in touch with and inspired by the world around him, responsive to the complex political shifts that took place during the 1970s and ‘80s. Published on the occasion of a major touring exhibition, this comprehensive, lavishly illustrated overview brings together leading international critics and curators, each examining a different aspect of Boetti’s achievements, together helping to explain why he remains both influential and inspiring nearly two decades after his death.

Henri’s Walk To Paris

Henri’s Walk to Paris is the story of a young boy who lives in Reboul, France, who dreams of going to Paris. One day, after reading a book about Paris, he decides to pack a lunch and head for the city. Along the way, Henri gets tired and falls asleep under a tree. And this is when the story gets really charming. What Henri sees, we see, in a flowing panorama of pictures conceived by the eminent graphic designer Saul Bass.

I’ve just started reading Design as Art by Bruno Munari and after only a few pages in I’m already wondering how it took me this long to get round to reading this book. Just thought I’d share a quick passage from the first chapter.

Anyone working in the field of design has a hard task ahead of him: to clear his neighbour’s mind of all preconceived notion of art and artists, notions picked up at schools where they condition you to think one way for the whole of your life, without stopping to think that life changes — and today more rapidly than ever. It is therefore up to us designers to make known our working methods in clear and simple terms, the methods we think are the truest, the most up-to-date, the most likely to resolve our common aesthetic problems. Anyone who uses a properly designed object feels the presence of an artist who has worked for him, bettering his living conditions and encouraging him to develop his taste and sense of beauty.

Today is a sad day as one of my all-time heroes and a true innovator — Vidal Sassoon has passed away at the age of 84. Sassoon was responsible for single handedly revolutionising the world of hairdressing in the early 60’s and his book Vidal Sassoon and the Bauhaus (see image above) was my bible whilst learning my trade (I used to be a hairdresser) at Harganget in Stockholm from 1999–2003 (Harganget at the time was probably the most forward thinking and vibrant salon outside of London).

Sassoon revolutionised hairdressing by doing away with all the old-fashioned, time consuming and unmanageable styles of the time and enforcing the doctrine “form follows function”. This approach immediately made haircuts more accessible and maintainable by the client (ring any bells). Instead of styles that took an hour to blow dry, women (and to a lesser, though not any less significant extent) men could have stylish, functional, yet beautifully designed haircuts that didn’t require half your morning to style. He did this by putting the emphasis on the process and technique of cutting hair, clean sectioning, precise geometric shapes, fastidious attention to detail and an awareness of shape, texture, tone and form that was unheard of before then.

The Swallow Tail — 1975

This also came at the time of the “sexual revolution” of the mid 60’s when women started to aspire to something more that cooking and cleaning, they wanted the same freedoms that men had enjoyed, careers, independence and their own lives, laborious and bloated hairstyles had no room here.

The Asymmetrical Isadora — 1969

When embarking on my career in design some 4 years ago I was pleasantly surprised at how much of the knowledge and skills I had acquired whilst working as a hair stylist where transferable over to the web design world. The notion of making websites accessible, usable, simple yet aesthetically pleasing, commercial yet still individual, replicable yet still bespoke and modern yet timeless is exactly the same way I used to approach cutting hair and I have Sassoon to thank for that. Rest in peace good sir, you will be missed.

I’m in the middle of some much needed Spring cleaning and need to clear some space in my office, so I’m giving away all my old copies of Web Designer Magazine and Computer Arts Magazine from 2009–2011. If you’re interested hit me up on twitter, or click on contact above, first come first served. You’ll need to come pick them up from my place in London as I’m not posting them or doing anything that requires any effort. Would be good for any web/graphic design students or beginners.

Addendum

If no one gets in touch by Saturday 12th May I’m taking them down to the local charity shop. I’m also throwing in a USB keyboard that I don’t need.

Honoured to say that I’ve been nominated for a Ubelly Critter award in the category “Next Big Thing” you can see the full list of nominations here. Woohoo.

I’ve been a bit slack of late keeping my various side projects up to date (as a result of being super-busy, though I’m not complaining). So I decided to devote the weekend to adding some long overdue fresh content to Center of Attention, Decorated Playlists and Free Faces.

Firstly I added a new decorated playlist — L’anatomie de la Musique Francaise (see pic above). It’s basically a tribute to all the wonderful music that came out of France in the mid-60’s to early 70’s (with a very tongue-in-cheek illustration)

Secondly I added a bunch of new fonts to Free Faces which is a site I put together showcasing free fonts that I like.

And last but by no means least, I added a load of new labels to Center of Attention, a site dedicated to record center art that I curate.

If you follow me on twitter you may have seen that a lot of my web design work has been getting ripped off lately. Through the wonders of my Gauge statistics I’m able to see when someone has stolen my code and used it in their website. So far this year it has happened about 10 times, from the completely blatant rip off to the more subtle steal where the design has been changed a bit but the Gauge tracking code left in (and most of the class names and title attributes left the same).

I’m not going to go through all of them as I’ve already named and shamed all guilty parties on twitter and sent emails etc, but I will show a few that are pretty blatant just for the fun of it.

Kotedia.com

Kotedia.com — done by me.

www.barbarasi.it — not done by me but by those upstanding fellows at ideestorte.com, notice any similarities?

In Motion

In Motion — done by me.

Vision Call Services — not done by me (though please notice the “improvements” to the iconography* and logo)

Bones Brigade DJs

Bones Brigade DJs — done by me.

Sunday Best — not done by me but copied wholesale by Andrew Dermont

So how do I feel about all this?

Well as you might imagine I am a little peeved at it, on the one hand it is flattering in a way to have people copy your work, but on the other hand it is theft and it is quite sad that others in my profession have so little regard for their own craft and for another designers work. It’s hardly the end of the world I know especially when you compare to some of the things that are going on around the world right now but it is something I’d like to stop, mostly because it’s just lazy and I work hard at my job and don’t really want other people to take any credit for work I’ve done myself.

So anyway I’ll leave you draw your own conclusions, but if you feel like giving any of the guilty parties a hard time on twitter, please be my guest.

*Some of the navigation icons for the In Motion site were taken from the fabulous noun project, the social icons are part of the social media icon set by Gedy Rivera.

Just finished a redesign of Take My Texture, the site is now fully responsive (thanks in part to fittext.js again) now all I need to do is add some new textures (which will be soon).

A note on the typography — I used the wonderful Funktion by Kyle Steed for the main body text and FF Prater Block Web via typekit for the main heading.

So just thought I’d give a nod in the direction of a couple of new side-project/personal bits I’ve put up over the last few days. Firstly I’ve had a bit of a rethink over my DJ retirement situation and have decided to start playing out again (alongside my DJ partner Francois). It will only be very occasionally (once every 4–5 weeks or so) and I’ll be playing some classic soul, ska, reggae, psych, boogaloo, latin & freakbeat from my 7″ collection. So with this in mind I redesigned the Bones Brigade DJs site (screenshot above). I haven’t decided on the first date yet, but it will be sometime early Spring (once it warms up a bit).

I had some fun with this responsive one-page site, and finally got a chance to use the Fittext JS plugin from Paravel to make the headings responsive. I also got the chance to use Guilder really big, which I’d been looking for an excuse to do for a while.

New Decorated Playlist — Shapes

Secondly I’ve added a new playlist to Decorated Playlists called Shapes, which is unsurprisingly made up of songs to do with shapes.

I highly recommend Own Label — Sainsbury’s Design Studio 1962–1977 to any fans of vintage or timeless typography, design and packaging. This book covers in detail the creative output of the Sainsbury’s design studio from the early 1960’s to late 1970’s and is a treasure trove of wonderfully bold and modern design. The book is published by Fuel and the following extracts are taken from their website.

In 1962, when Peter Dixon joined the Sainsbury’s Design Studio, a remarkable revolution in packaging design began. The supermarket was developing its distinctive range of Own Label products, and Dixon’s designs for the line were revolutionary: simple, stripped down, creative, and completely different from what had gone before. Their striking modernity pushed the boundaries, reflecting a period full of optimism. They also helped build Sainsbury’s into a brand giant, the first real ‘super’ market of the time. This book examines and celebrates this paradigm shift that redefined packaging design, and led to the creation of some of the most original packaging ever seen.

Produced in collaboration with the Sainsbury family and The Sainsbury Archive, the book reveals an astonishing and exhaustive body of work. A unique insight into what and how we ate, the packaging is presented using both scanned original flat packets and photographic records made at the time. With an essay by Emily King featuring interviews with Peter Dixon and Lord Sainsbury of Preston Candover.

Just come across this amazing video on youtube that made me smile. House Of The Rising Sun is an all-time favourite song of mine and this version made with old-skool computers really does it justice. It also kind of reminded me of this scene from the marvelous Zatoichi starring Kateshi Kitano (see below). Both have a really hypnotic yet subtle underlying percussion that I love.

I was going to attempt to write down something describing this video, but I’ll let the images do the talking, incredible.

Just a quick nudge in the direction of a new playlist I just added to Decorated Playlists. Kill Your Television is a bit of a jaunt down memory lane to the late 80’s when I was about 13 and first got into buying records. I would save my school lunch money during the week and on a saturday I’d get the bus into Southend and raid the indie sections at HMV and Our Price.

I also got a chance to muck about with Brandon Grotesque via Typekit which I’ve been wanting to use for a while. I also had a bit of fun using –webkit-background-clip and –webkit-text-fill-color to add a textured background to the main text.

Oh yeah and it needs to be viewed in Safari or Chrome for the full effect, Check it out.

I love this short animation by Faith Hubley from 1981 and I’m sure I was shown this at school some time in the mid 80’s.

The story starts at the formation of the solar system, showing how Earth was the only planet placed just right in distance from the sun. It continues showing how amino acid chains formed proteins, proteins to cells, cells to asexual reproduction, and asexual reproduction to sexual reproduction.

Video made responsive using the wonderful fitvids.js from Paravel.

If you’ve been to this site before you may have noticed that things have changed a little, you may have been expecting to see this version of the site. Well things have changed around here, the last version of this site lasted for over a year which is a pretty long time for me, which probably means I did something right with it. The time came though for a new direction and a more focused approach, let me explain.

I decided that I wanted the content (my work and blog articles) to be the main focus of the site, not the actual site itself. I also wanted it to be more portable, even though the previous version was responsive and worked well on ipad/iphone etc it never really felt quite right to me, probably because I made it for desktop only at first then adapted it to be responsive at a later date. This time there was no real hierarchy or priority in terms of which viewpoint was most important, I tried to think completely fluidly about the site and designed it 100% in-browser, frequently moving between browser widths to make sure I was happy with it in all viewpoints.

The result is something that I’m really happy with (although no doubt I’ll be tweaking things for a while as normal). I think the site is timeless and anti-trend enough to last for for some time. With the content being the main focus, as long as I produce good work then this website will also look good (well that’s the plan hopefully). I have found this kind of responsive/adaptive/fluid (or whatever you wanna call it) way of thinking towards web design a breath of fresh air, and has really helped me to focus on what’s really important in a website — the content and function of the site (whatever that may be).

So anyway I’ve prattled on long enough, welcome to my new home, have a look around (resize your browser a bit if you like) enjoy your stay and thanks for reading.

Check out my new mix on designers.mx, it’s a celebration of music from my motherland, Essex — England.

Even though I haven’t lived there for about 15 years, I do feel a little embarrassed by how it’s rep has sunk so low in recent times. This hasn’t been helped by all the cheesy nightclubs, fake tans, whitened teeth, pink polo-shirts and naff reality TV shows. It wasn’t always this way however, once upon a time there was actually loads of good music coming out of the county and I’ve included my favourites in this mix.

Incidentally, I went to the same art college as Depeche Mode (albeit a few years later), The Prodigy used to live round the corner from my Dad and DR Feelgood used to play down the road from my house when I lived on Canvey Island as a baby. Happy Days.

Just thought I’d put together a quick post with a few design related bits that have come across my radar recently and are worth sharing. There’s some websites that have stuck in my head over the last few months and a few peeps on Dribbble who’s work I think is worth checking out.

The Great Discontent

The Great Discontent is a journal focusing on creativity, risk, and what connects us as artists.

Designed and curated by Ryan & Tina Essmaker of Designing Monsters this site is one of the best examples of responsive design I’ve seen, and is truly a joy to browse.

Deep Time

The Earth is old, very very old. It is difficult for us humans to fully comprehend just how old our planet actually is. This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

A fascinating and educational infographic site that utilizes a vast array of mind-boggling (well at least to me) HTML5 & CSS3 goodness. Not one for any creationists out there.

The Mavenist

Two people, preferably friends, collaborate on a blog post by being available to one another. One begins by sharing something interesting, then commenting on it. This begins a dialogue. The second person then reciprocates with something they like which follows the thought-path of the previous item. The two go back-and-forth ten times and see where the flow of the conversation takes them.

A really interesting back-and-forth blog set up by Frank Chimero that encourages open and spontaneous discussion on design. I really like the loose flow of the discussions and how it goes off on tangents.

Computer Graphics Design

This site, designed by Sumit Paul has really stuck in my head. I think it’s a great example of a site that is not only aesthetically beautiful but also really simple to use and navigate.

Hanging Up The Moon

Hanging Up The Moon is a ‘self titled’ 11 track album comprising of a series of home recordings.

Typemedia 2011

A beautifully designed type-centric site showcasing Typemedia’s class of 2011.

Newswordy

Buzzwords are frequently used in news media. These are words that do not typically occur in everyday speech, but are common among newscasters, talking heads, and pundits on cable news. These ‘news words’ are accepted by audiences for their implied meaning. But often loaded words are misused or used out of context. The actual definitions can be different than what is implied. Newswordy is a growing collection of these words, updated every weekday. Along with each word is a definition, a quote with its use (or misuse) in the media, and a news and Twitter feed on the subject.

Gidsy — Making The Perfect Listing

A fantastically well designed and imaginative page that basically shows you how to make a listing on Gidsy.

Dribbble Props

Some designers who’s work on Dribbble has been really inspiring to me lately.

Andre Mecca

Dan Matutina

Kelli Anderson

Andrew Lyons

Andrew Knapp

It is my great honour and pleasure to announce that I have been nominated in the ‘brilliant newcomer’ category in the .Net Magazine Awards for 2011. This is of course a fantastic accolade that I am very humbled to have been nominated for. If you feel like voting for me please go to the nominations page and give me your vote. The competition is very strong and I suspect I’ll need every vote possible to make it as one of the last three finalists.

Just thought I’d post up some of my Instagram pics that have some interesting typography, design, pattern & architectural details.

I get quite a lot of emails from design students asking my advise on how they can improve their design skills and also what resources I recommend they check out. So I thought I’d put together a post that can be used as a quick reference for designers of all levels. This is basically a list of useful resources, tools, tutorials, blogs etc that have really helped me in my day-to-day web designing.

I will be adding to this list as and when I come across new interesting stuff.

Typography / Fonts

Fontsquirrel
The League of Moveable Type
Lost Type Co-op
Dafont.com
Typekit
Baconipsum
Free Faces
Haäfe & Haph Ampersands
What The Font
Hoefler & Frere-Jones
8 Faces
Ten By Twenty
Fonts In Use
Weird and Wonderful Typefaces
Google Web Fonts
OSP Foundry
Mid-Century Modern Typefaces
Wood Type Revival
Basics Of Typography
Typonine
Typedia
P.S.type

Patterns / Textures / Icons

Subtle Patterns
Take My Texture
The Noun Project
Naomi Atkinson Products
Social Media Icons
Function Subtle Grunge Brushes
Premium Pixels

HTML / CSS / Code

Less Framework
Copy Paste Character
CSS3.info
CSS Tricks
HTML5 Reset
HTML5 Doctor
Don’t Fear The Internet
1140 CSS Grid
Golden Grid System

Javascript / jQuery Plug-ins

Lettering.js
FitText
BigText
jQuery Backstretch
Isotope
jQuery Masonry
Fout B Gone
Modernizr
Countdown
MediaElement.js
Portamento
Spin.js
Chosen
Fitvids JS
Flexslider

Design Inspiration

Grainedit
Project Thity Three
Center Of Attention
False Arms
Grain & Gram
Fffound
Designspiration
Vintage Audio Cassettes
Things Magazine
Exhibit Poster
Eight:48
Design Swap
Cargo Collective
The Inspiration Grid
Test Pressing

Design Blogs

Design Heroes
Method & Craft
Smashing Magazine
24 Ways
X Height
DesignLi.st
The Design Cubicle
Cognition
A List Apart
Think Vitamin
Unmatched Style
Design Informer
Web Is Love

Galleries

Make Better Websites
Siteinspire
Awwwards
Webcreme
Siiimple
Designshack
The Best Designs
CSS DSGN
One Page Love
Mediaqueri.es
Styleboost
Style Inspiration

Miscellaneous

Make Photoshop Faster
960 Grid System
A Book Apart
Color Lovers
Loads In
Starkers WordPress Theme
Weenudge
Inker Linker
Converticon
Ifttt

Introducing Decorated Playlists, a website I have put together, dedicated to the close relationship between music & design. I have always enjoyed sharing my knowledge of music, but now that I no longer DJ I need a new outlet for this.

I have previously dabbled with the combination of design and mixtapes/playlists on the Bones Brigade Dj’s site and also in a tribute I made to Serge Gainsbourg, but I wanted to take it a step further. The final piece of the jigsaw came to me after I contributed a mix to the fabulous designers.mx project. You can think of each playlist as an art-directed blog post, but with music instead of words.

I will be adding new lists as and when the mood takes me, each one will have it’s own unique feel and I intend to do a lot of experimenting with CSS and HTML5, hurrah.

This post basically follows on from a previous recommended reading post and includes some publications I have since discovered or forgot to include last time.

Eight:48

Eight:48 is a realy well put together magazine focusing on graphic design. I’ve just bought issue no.5 which basically features 79 pages of fantastic book covers, which for me is heaven.

8 Faces

I’m sure most already know about 8 Faces, but in case you’ve been living in a cave for the last year here’s a brief description taken from the website.

Printed on heavy stock, with a foil-blocked cover, and pressed at just 2500 limited editions, each issue is a true collector’s item. 8 Faces will be more at home on your bookshelf than in your magazine rack. Who said print is dead? The magazine has one core question at its heart — if you could only use eight typefaces for the rest of your life, which would you choose? — and poses this (and many others) to eight leading designers from the fields of web design, print design, illustration, and of course type design itself.

Piccadilly Notes

This is quite an obscure publication and may only be of use to those living in London, but I thought I’d include it anyway. Piccadilly Notes is one of several catalogue style magazines put out by Henry Sotheran Limited of Piccadilly, who are the longest established antiquarian booksellers in the world.

For someone like myself who loves book covers and typography this publication is really inspiring, being full of classic & vintage book covers and limited edition prints.

So if you find yourself in the Piccadilly area and have a few minutes to spare I recommend popping in to the shop, you won’t be dissapointed. Just don’t tell them you’re only interested in the cover art like I did, which is heracy in the book world.

Information is Beautiful

Information is Beautiful by David McCandless is:

A visual guide to the way the world really works Every day, every hour, every minute we are bombarded by information — from television, from newspapers, from the internet, we’re steeped in it, maybe even lost in it. We need a new way to relate to it, to discover the beauty and the fun of information for information’s sake. No dry facts, theories or statistics. Instead, Information is Beautiful contains visually stunning displays of information that blend the facts with their connections, their context and their relationships — making information meaningful, entertaining and beautiful. This is information like you have never seen it before — keeping text to a minimum and using unique visuals that offer a blueprint of modern life — a map of beautiful colour illustrations that are tactile to hold and easy to flick through but intriguing and engaging enough to study for hours.

Just wanted to point you in the direction of a site I’ve just set up called Free Faces. This site was originally going to be a blog post to share links to free fonts that I like, but I soon realised that it would probably be of more use as a resource if it had its own site.

So basically the idea behind it is very simple. I’m showcasing/featuring a variety of free fonts that I think are worth checking out. As a person who has worked successfully in other industries before coming to the world of design, I’m always amazed how the design community is willing to share information/tips/tutorials etc with no thought of personal reward. Trust me this doesn’t happen in a lot of other industries and I always try and give back when I can. So I’m hoping that this site can be a useful resource for designers and hope it gives something back to a community that I love being a part of.

But it’s not entirely selfless, the site does give me an excuse to play around with typography and colors, which is when I’m at my most happy. Below (and above) are some examples of fonts featured on Free Faces

Just found this wonderful video on youtube, it features improvised dialogue from Dizzy Gillespie and George Mathews.

The Hole is a 1962 short animation by John Hubley and Faith Hubley that won an Academy Award for Short Subjects (Cartoons) in 1962.
The film uses improvised dialogue from Dizzy Gillespie and George Mathews as two construction workers at work in the bottom of a hole on a construction site discussing the possibility of an accidental nuclear weapons attack — wikipedia.

Sorry about the title, I couldn’t resist.

Just a quick nudge in the direction of a project on kickstarter that I think is well worth backing. Basically Matt Braun & Matt Griffin are trying to raise enough cash to revive 10 rare wood letterpresses and turn them into modern digital fonts. The beta version of their first font Fat Boy Husky is available as a free download (used in the image above).

We two hearty designers are letterpress printers, yes – but also men of computers and the Internets! We wish to scour the globe for 10 of the most prized fonts of wood type we can acquire. And then we will print these faces on our trusty Vandercook proof press, and carry them over into the world of vectors and Opentype font-ery.

Go back them here

Calling all London Dribbblers!

I’m not sure how, but I’ve ended up organising the first ever London Dribbble Meetup. It’s scheduled for Thursday 19th May, 6PM at Zigfrid, 11 Hoxton Square, N1 6NU. Zigfrid is a warm and friendly venue with loads of big comfy seats, good wifi, huge heated outside smoking area and tasty, affordable food. I’ve reserved some space so there should be enough room as it’s a pretty large place.

Everyone is welcome, the more the merrier, so please don’t be shy. I’m looking forward to putting some names to faces and making new friends.

Please join the group on meetup.com here, to leave messages, make suggestions and invite others to come along. I look forward to meeting you, whoever you are.

Addendum

Check out a fun web poster I made to promote the night here

Just thought I’d put together a quick post to recommend a variety of publications that have been really inspiring and useful to me of late.

A Book Apart

The “brief books for people who make websites” series by A Book Apart (above) not only look great but are an essential reference for me in my everyday web builds. The HTML5 For Web Designers by Jeremy Keith is especially useful and is always open on my desk as I work.

Grafik Magazine

Grafik Magazine is one of my favourite mags and I’m really pleased it’s back after a small hiatus. I never fail to get inspired by their illustrations, layouts and content.

Factory Records — The Complete Graphic Album

This book brilliantly documents Factory Records entire visual legacy from 1978 to 1992. The musical output of Factory provided a big chunk to the soundtrack of my youth in the late 80’s & early 90’s and I absolutely love this book.

Jan Tschichold — Master Typographer

I spend hours looking enviously looking through this book.

Seven Hundred Penguins

Penguin book covers are my absolutely favourite thing in the world ever and this book has 700 of them.

24 Ways Annual 2010

This book puts together all 24 articles from the 24 Ways website from December 2010. There are loads of great tips from many of today’s top designers and developers. I think it may be sold out now but if you can find a copy I advise you to buy it.

Reasons To Be Cheerful — The Life And Work Of Barney Bubbles

This book celebrates the graphic design genius of Barney Bubbles who created memorable record covers for many artists including Elvis Costello, Billy Bragg, Nick Lowe, The Damned and Ian Dury.

Van Doesburg & The New International Avante Garde — Constructing A New World

This book examines Dutch artist van Doesburg’s pivotal role in the development of modernism, Dadaism, constructivism and DE Stijl and his influence upon the many artists who followed.

All pictures were taken on my iphone using the instagram app

So I found this London Transport fold-out map from 1953 that my Mum was about to throw away. The map was given away free on June 2 1953 to the crowd watching the Queen’s coronation.

I really like the typography, colors and subtle design details scattered about.

So back in December I published this post declaring that my resolution for 2011 was to excercise more.

I am happy to say that I am winning, for the last 6 weeks or so I’ve been going to my local gym (it’s opposite my flat) at least twice a week. I love my local gym, it is very small and independent and run by a really cool guy called Wayne. It kinda reminds me of “Average Joe’s” gym from the movie Dodgeball, everyone knows each other there, it’s really laid back, the equipment doesn’t always work, & it needs a lick of paint, but that’s why I love it.

Hurrah for geting fit.

I’ve really been enjoying the designers.mx project by Blake Allen and Josh Sullivan (two designers who’s work I really admire). So I was delighted to be asked to contribute a mix.

Some of my favourite tracks are sung in languages that I don’t understand making them completely incomprehensible (Mumbo Jumbo) to me, but I kinda like that and don’t think I want to know what they mean, I think that would take away some of the “mystery”.

You can check out my mix “Mumbo Jumbo” here. The tracks are a mixture of French, Spanish, Portuguese, Japanese and Arabic.

I recently had great fun using @font-face, lettering.js and some dingbat fonts to make this utterly silly and ridiculous page. It is a love story told in dingbats and called Where do I begin? (which is the opening line of the theme tune to Love Story — for those who haven’t seen it).

I would however like to stress that dingbat fonts should never really be used as web fonts in the “real world” due to their lack of semantics, usability and accessibility. But they are OK to use for self-indulgent whimsical nonsense if the mood takes you.

Also, the page has inconsistent cross-platform browser support for reasons I haven’t managed to work out yet. As far as I can tell it works fine in non-webkit browsers on windows and fine in webkit browsers on OS.

So part 3 in my discarded design series is here finally, hurrah. I found this book today in a charity shop and was more than happy to pay £1.40 to purchase it. I love the colors, typography and pleasantly surprising unusual layout.

It also had this cool advertisement inside (see below).

Just a quick prod in the direction of a new site I’ve put together, centerofattention.me, which is an idea I’ve been wanting to realise for a while but haven’t had the time. The site focuses on the artwork, graphics and typography of record center labels, which I’ve always thought were a little overlooked from a design point of view.

It’s still early days so I’ve only got a few examples up from my own collection so far, but feel free to have a look around and check out some cool old school record labels.

I’m really enjoying the To Resolve Project from Chris Streger, so I thought I’d have a go myself (see above). The idea is to make an Iphone wallpaper with a new years resolution theme and there are already some really impressive interpretations.

I’m thinking of doing a series of these if I have some time.

Some other new years resolutions I have are:
Eat less.
Take breaks when I’m working.
Be more sociable.
Don’t take on too much at once.
Learn.
Have a holiday this year .

Happy new year everyone.

Inspired by one of my favourite record covers and this CSS3 experiment by Trent Walton I thought I’d play around with some CSS3 text-shadow, –webkit-background-clip and –webkit-text-fill-color.

Of course this page is completely unsuitable for wider use and is a ridiculous jaunt into the world of silly, but I don’t care. Sometimes it’s just nice to do something for the sake of it regardless of how pointless it is.

Check out the page here, the page only works in the latest webkit browsers (Safari & Chrome) and will probably be a bit slow and/or melt your computer (only joking, but it will be slow).

You can see the CSS here

I’m over the moon to say that .net magazine have seen fit to award my site For The Record CSS site of the month for November.

My thanks also go to CSS expert Inyaili De león for choosing the site for the award. This is a great honour for me and I am of course very pleased and humbled to be given such an accolade.

I should point out that I am aware that For The Record has no semantic value. I created this page purely for the fun of it, as an outlet for some creativity and it should be taken in that spirit.

Download the above shot here.

Just thought I’d make a couple of my more popular dribbble / sketchbook shots available as desktop wallpapers. You can resize as you see fit.

Download the above shot here.

Hello all and welcome to my first ever tutorial. As you’ve probably noticed I use a lot of textures, especially in my personal work. Some of my textured shots on dribbble.com have received a suprisingly large amount of attention, which has led to several dribbble team players asking for a tutorial, I am of course only too happy to oblige.

Resources

You can download all the files used in a zip file here. Inside are the two texture jpegs used and the final psd file (cs4) for reference.

Step 1

I started off with a light green background with a simple illustration in a layer above it.

Step 2

I firstly copied and pasted texture_1.jpg on a layer above the illustration and set blend mode to vivid light and opacity to 54%. I then duplicated this layer, then made the duplicate black and white (image > adjustments > black & white), then set blend mode to overlay and opacity to 43%.

Step 3

Lastly I copied and pasted texture_2.jpg over the top of the last two and set blend mode to overlay and opacity to 70%. And that’s it!

Summary

I hope you’ve found this quick tutorial useful, as you can see it’s super easy to apply textures. I think the trick is applying them to the right subject and firstly picking the right texture to use and then not over-doing it (which I found out the hard way). There’s no right or wrong way to use them it’s just a matter of trial and error and experimentation.

If you want some more textures to play with you can head on over to my free texture site takemytexture.com where I make available all the texture pics that I take myself.

Thanks for reading.

There’s not long now until the World Cup starts and I’m already filled with the usual mixture of hope, expectation and pessimism.

I’m looking forward to us (England that is) strolling through the group stage and then going out with a whimper in the quarter-finals again. I will then no doubt do my usual thing of declaring that I will never watch England again (until the next time).

Anyway, football aside, I was flicking through the latest edition of Computer Arts magazine and they had a great article on World Cup posters. I kinda forgot how cool those World Cup posters of the 50’s, 60’s and 70’s were (some examples below), so I had a go at doing one myself (see above). You can see it as a full web page in my sketchbook here.

I wanted to see if I could re-create (to a fashion) the fabulous Solarbeat project created by Whitevinyl, but using CSS3 rather than Flash.

I really love everything about this project and could quite easily spend hours just listening to the hypnotic Spacemen 3-esque sounds. So I thought I’d see if I could do something similiar just using CSS3 techniques (plus a couple of images) and here is the result. Needless to say it only works fully in Safari and Chrome.

Apologies once more for some utterly shameless self promotion. I decided to redesign my site about a month or so ago as I got a bit bored with the last version. I also felt that it wasn’t really representative of the kind of design aesthetic that I am inspired by.

Since the redesign I have been overwhelmed by the number of design galleries that have featured my site. Although I am not solely motivated by the praise & appreciation recieved it does have a possibly unhealthy narcotic effect. It may be time to turn FeedDemon off and get back to work.

Seriously though, thanks to the following sites for featuring my work.

thecssawards.com (site of the day 28th May 2010)
designshack.co.uk
makebetterwebsites.com
cssmania.com
cssbased.com
css-website.com
designfridge.co.uk
welovewp.com
smashingshare.com
screenfluent.com
colorgize.com
css-design-yorkshire.com
cssmad.com
cssfaves.com
cssimply.com
csssmoothoperator.com
graphicdesignjunction.com
blogdesignheroes.com
coolhomepages.com
wparena.com
wpcollections.com
wpgalleries.com
cssmayo.com

Check out this cool page I made to illustrate this post in my sketchbook here.

Check out this cool page I made to illustrate my five favourite quotes of all time. There’s plenty of css3 goodness here so I wouldn’t worry about using IE.

I should also give a big shout out to The League of Moveable Type. I used the fonts League Gothic (which I’ve used loads on this site already), Raleway, Chunk and Sorts Mill Goudy from their superb selection of open source fonts. This was the first time I’ve used @font-face (I usually use Cufon) for text-replacement and it won’t be the last.

So we now have a hung parliament? or is it a coalition? Anyway no matter what you might think of David Cameron he has been very astute in giving Nick Clegg a nothing job where he can keep his eye on him. I mean, can you name the last 5 Deputy Prime Ministers? What exactly does a Deputy prime Minister do? Apart from waiting around in case the real PM pops his clogs.

This inspired me to make this page in my sketchbook. As they say “keep your friends close, but keep your enemies closer”.

I have recently been really inspired by the experimental CSS3 work of both David Desandro and Trent Walton, so I decided to have a go myself. What I like about both these guys work is that their work feels like looking at a poster, not a web page, and it’s all done with clever CSS.

So using a combination of the :nth-of-type, –webkit-animation, –webkit-transform and opacity CSS3 rules I was able to create this. feel free to check out the CSS here.

This page will only work fully in Safari or Chrome.

The last few weeks has seen the whole web design world up in arms in debate about some of the key issues facing designers/developers right now. Some of the biggest guns in the industry have been shedding light on the various hot topics that we grapple with every day. Whether it be web designers who can’t code, designing in browser, or the eternal thorn in the side that is IE6.

Whilst I don’t for a second put myself in the same company as the likes of Elliot Jay Stocks, Trent Walton or Meagan Fisher, I do however think that a humble beginner such as I could contribute in some small way to the heated debate.

From what I have gleaned from my short time in the industry it seems that there are no set rules for a good or successful future in web design. Some designers code, some don’t. Some people still worry about IE6, some don’t. Some designers do everything in photoshop and then try to mimic that in the browser, some do it all in the browser. I guess my point is that you have to tailor the way you work to suit you because, after all first and foremost you need to enjoy your job.

For what it’s worth I personally do most of my designing in the browser. I start of with a rough mock-up in photoshop then do the lions share of the design in notepad++ and firefox. I guess this is why I enjoy the coding side of web design as much as the actual design part because for me they are intrinsically linked. I am also a great believer in degrading gracefully, if people make the effort to have modern browsers like firefox, chrome or safari then they will benefit by seeing designs in all their glory. I don’t believe in hindering progress by pandering to IE.

Even though I am no fan of internet explorer in any of its incarnations I believe that most people don’t use it because they prefer it, they use it because they don’t know that there are better alternatives. So it’s up to us as an industry to educate non-savvy web users and channel our frustration and anger into ridding the world of IE6.

So after all that the real point of this post was to highlight some recent articles/sites that for me have really “hit the nail on the head”. Firstly Trent Walton’s blog post entitled “Position absolute” really summed everything up far more eloquently than I am able. Secondly the site dowebsitesneedtolookexactlythesameineverybrowser.com wrapped it up in a nutshell for me. And lastly, this article by David DeSandro showed a lateral way of approaching the IE6 dilema that I enjoyed.

The second of my discarded design posts. I found this box of chalks in a charity shop the other day and love the simplicity, I guess sometimes less is definitely more. Anyone know what font it is?

My apologies for the shameless self promotion, but this site has been featured on a few css galleries, most notably cssmania.com

Also featured on:

vandelaydesign.com
cssloggia.com
art-spire.com
mostinspired.com
hotcssdesign.com
foliofocus.com
designbombs.com
freszki.pl
cssvote.com
d-lists.co.uk
blog.templatemonster.com
cssimply.com

Another of my sites bonesbrigadedjs.com has also been featured on cssmania.com and hotcssdesign.com.

Take my Texture is a side project of mine. It is inspired by my obsession for photographing texture and my desire to give something back (however small) to the design world. I will be adding new textures all the time and I hope it will become a useful resource for designers.

See it here.

I must confess this is not a totally new concept and is partly inspired by my dj friend Todd Hart who runs the brilliant Dalston Oxfam Shop blog, his blog focuses on old cassette tapes that he finds in the Dalston Oxfam charity shop, so to avoid stealing his thunder I wont be writing about music in any way.

I recently found this set of German photographic manuals which range from 1977–89 in a local charity shop. I love the simplicity of the design, the richness of the photography and the typography.

Finessen im fotolabor 1989

Architekturaufnahmen 1977

Wir reproduzieren 1987

Dunkelkammerpraxis 1985