Simon Foster

Yeah I got itchy fingers once again and redid my website, I'm happier though now than I have been for a long time so it should hopefully stay this way for a while :) Probably needs tweaking a bit still, but I'm gonna take a break from it and get back on with some real work.

Full screenshot of the desktop view attached. All the illustrations are sourced from http://clipart.com (I can't draw to save my life :)

Different categories have different colors, very basic.

Blog design for an art blogger/writer, nearing completion, full screengrab attached.

http://www.bonesbrigadedjs.com/ on the iphone.

New version of bonesbrigadedjs.com is up. (probably gonna change it up each time we do a night, if I have time)

Some more portfolio tweaks. Full screengrab attached.

Making a few portfolio tweaks.

The music page for a site recently done for TV & film score composer Samuel Sim

Monty Films lives :)

New playlist up on Decorated Playlists - L'anatomie de la Musique Française

Some more new fonts up on Free Faces

Finally getting round to adding some new fonts to Free Faces

An example of one of the inner pages, they all have different background colors.

Making some tweaks to the home page not sure if Monty is too big?

Made more of a contrast in size between "monty" and "contacts" not sure if Monty is too big?

Contact page

New client project, going live prob next week.

Better in red? I think so...

Working on a quick illo for a blog post about design theft.

Had a redesign of Take My Texture now with added adsponsive fluidity :)

Redoing my textures site, making it responsivicized n shit. Still a WIP.

Had "In The Ghetto" in my head all day. Just a bit o fun :)

Soon come

It occurred to me that I've never really used Helvetica for anything so I'm having a quick play around with it.

Some more detail from the redesign of the redesign...

http://simonfosterdesign.com/

I decided I wasn't quite happy with the recent redesign of my site so I made some pretty big tweaks, there wasn't enough love before.

http://simonfosterdesign.com

Working on a new playlist. The circles are all done with some clever pseudo element CSS jiggery-pokery.

Just done some tweaking on Center Of Attention, added an archives page and got rid of the covers section as I was never gonna update it.

New playlist up on Decorated Playlists - Kill Your Television

So my website redesign is up and running http://simonfosterdesign.com/
I deliberately went for something more simple and minimal, I want the work (the actual content) to be the focus rather than the website itself (taking some of my own advice). and I wanted the blog to be as readable as possible, with no decorative distractions.

Let me know if you see any bugs or anything that looks weird, I dare say I'll be tweeking things for a while :)

The About / Info page for my new site design. Responsive of course ;) Portrait by Daniel Vane

Starting to come together a bit.

Working on some navigational illo's for the new version of my site, still a WIP.

New site just launched In Motion

Just launched new site for illustrator pal of mine Daniel Vane. The site is a responsivised and fluid portfolio grid.

Needless to say the snake wasn't drawn by me :)

Redesigned my sister's portfolio site http://fosterprops.com/
Had some fun too using fitvids.js and flexslider

Bit more

Contacts page WIP

Working on a responsive/fluid portfolio grid.

Better?

Working on a new designers.mx playlist. Still need to sort out the kerning.

Bit more detail

Recently On My Radar

Some more from same project.

Using some icons from the fabulous Noun Project in a new client project.

Quick spontaneous playlist just put up in time before my laptop completely dies :( Over The Rainbow

Count To Ten, new playlist up on Decorated Playlists.

Using the wonderful Pompadour with Ronnia and Adelle via Typekit

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.

Above quote taken from 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.

Discarded design? What’s that all about? I have long been fascinated with the things people throw away and I have also always been a keen charity shop, jumble sale, car boot scavenger (especially in my record collecting days). So with this in mind I have decided to do a series of posts on pieces of design that have been discarded and then found by me.

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