Solution

My way out? A collection of all my ideas, thoughts, likes, inspiration. All in the one place. The tool? Little snapper. The hard part? Well, its not just downloading and installing the thing. No its a little bit harder than that. What you need to do Is to change the way you view things. Every time you see something you like, snap it. It could be anything, anything that sparks of that little spot in your brain. You see, these little sparks motivate you to create bigger and better. So next time your in a rut, what better than all these sparks collected up into a little bottle of inspiration. I look forward to my next creative wet patch.

• Paravel - view site
• Creative Capital New York - view site
• Serial Cut - view site
• Hickman and Rose - view site
• Nosotro - view site

Paravel

My favorite combination, Illustration and web design. Paravel have really nailed it. I love how they have illustrations for every case study. It gives the work character. - Paravel

Creative Capital New York

This is just awesome. Really, really bold. I love this type of design. Trying something different and pulling it off. The combination of the minimal grid, photography and vibrant colors are perfect. - Creative Capital New York

Serial Cut

You should be ashamed of yourself If you haven't seen this by now. Makes a Jquery fanboy knee's quiver. The inspiration for supponor. - Serial Cut

Hickman and Rose

Had to mix it up with a corporate site. This is just lovely graphic design. So simple and perfect. Makes Solicitors slightly more likable. - Hickman and Rose

Nosotro

I think I have about 5 different mini-snapshots of this site. Such a pleasure to browse. Each page feels so loved. Another great example of effective Illustration. - Nosotro

“The concept is to use png transparency to mask layers. With the aid of scrolling and Jquery movement you can create some really interesting effects.”

Achieving the effect

After you have viewed the live examples of the above (vital) you should have an idea of how it works. I've knocked up three examples below to demonstrate.

Example A

View Demo - Download files

Example B

View Demo - Download files

Download the examples here.

Know any other websites that use similar effects to these? Let me know in the comments.

PNG Masks

I wanted each page to be different. To aid that I've used a clever technique that let's the logo color change. I've used transparent PNG's to create a mask that lets the layers underneath peer through. I'll be writing another blog post about this effect soon. As you can see below The combination of the section strip and the background image create a different tint, texture for each page.

Grid Indicator

Another nice little feature is the little location dot in the bottom right of the screen. Using Jquery again to swap the images it adds the overall effect. You could do some pretty nifty stuff with the combination of the Jquery slide and the indicator. i will be using them in other projects in the future.

More reading

Visit the Supponor web site.

View the Flame Digital press release

View the How-do article

New branding

Yes, another bird. I racked my brain to come up with some sort of icon, emblem etc. In the end I thought what the hell and kept a/the bird. I've spent quite a long time doing the illustration. Its a hummingbird by the way. I'm looking forward to creating business cards, that's next on my list of things to do.

New work added

I've added some new projects with some more to come in the next few weeks. Firstly we have At Bristol science museum and some illustrations for Royal forrestry society.

Catch-up

My stint in London is over. I'm back working at Flame Digital filling in as head of design. I realised how good Manchester is. You don't really realise until you leave. I'm looking for some interesting side projects to work on so get in touch if you need a freelancer.

Factory Records - The complete graphic album

From Manchester itself. The record label that embraced graphic design to its most. I wonder how far internationally Factory Records reached in terms of inspiring people.This book is the whole factory records visual backlog. - Online link

101 things I learned in Architecture school

Its quite simple, 101 quick and easy tips based around the discipline of architecture design. I've always been fascinated with perspective. I had my eye on going the whole hog, a career. Web design was definitely the shorter route, career wise. I'd still be in the educational phase if I made that choice. - Online link

Dear Diary by Lesley Arfin

A bit of smut, don't judge me. I fancied something gritty. Hardly a graphic design book. Its published by the extremely trendy Vice (well, they try extremely hard to be). It's basically a women's diary from a girl to crackhead. I did say it was gritty. It should set a more interesting ride on the number 68 into work that's for sure. - Online link

Moodboard

Thanks to Moodboard for the lovely gift

download it here - zshare (55.36MB)