As a front-end designer and developer, I am constantly scrutinising and refining my working process. I want to share with you my personal toolkit, which has been collated over a number of years and influenced by my experiences, background, my heritage and those around me.

I am a firm believer in knowing my tools inside and out, I use the same pencils, books and pens, I do not use frameworks and where possible I will avoid Plugins, so that I can have absolute control of the work I am producing. Of course, there is no need to re-invent the wheel, but the ability to know something inside and out hugely reduces the possible risk of something huge unexpectedly going wrong, along with significantly speeding up your working process.

In this section, I am going to share with you my toolkit and process for initial designs through to the deliverable mock-up.

Pencil

I love using pencil. This may stem from my background as an art student, when I would regularly carry a full 10H – 10B range of pencils with me at all times, but for me a Pencil literally starts the creative process. The ability to use a very hard pencil to lightly map out before using a softer pencil or fluid pen to highlight the intended lines is highly valued. It is far too easy to neglect the early stages of design and jump straight into photoshop or working high fidelity. From personal experience, I relish the opportunity to get away from the screen and use pencil to sketch out my ideas.

Paper

I have became quite picky about the paper I use over time too. As with pencils, I have neglected the huge variety of paper types I once used to experiment with. Instead I have reduced it down to 4 formats: Large notebook (ruled), Large notebook (blank), Small notebook (blank), Gridded Paper.

While its not a surprise, I particularly love using Moleskine Notebooks. This is ultimately an extension of my love of using pencil, as it involves getting away from the screen. While I must admit to having an awful memory, I find great value in writing everything down, setting out in front of me everything I need, the requirements of the task and all things in between.

I keep a small, blank Moleskin in my coat pocket at all times, as you never know when that killer idea will hit you, or even just that important, passing thought. My notes are often cathartic, with very little structure or process to them, but it allows me to get these notes down, to be written up later.

For more structured documentation, I will write notes up in my A5 ruled Moleskine, while low fidelity, cathartic wireframes,  sketches and ideas will go in the blank Moleskine.

Finally, I use Behance Dot Grid Books for higher fidelity, more structured wireframes and idea mapping. This is where the real creative development really occurs. While I like to try and keep work within here a little neater, fresh ideas may still arise, so i’ve learnt to not fear scribble further rough ideas. In here I will use a combination of marker pen, a fine pen and pencil. Often using pencil for lighter markings before going back over the intended lines in pen.

Wireframes

This is perhaps the area where some may disagree with my process, but I love wireframing and see it as one of, if not the most important process in the conception of a website design.

I know that some designer friends do not wireframe or see the benefit in it. As with everything in this post, there are hundreds of approaches and I am in no position to call anyone up on their process, its about what works for you. However from experience, I have seen that time invested in a well structured, well conceived wireframe, which are signed off by the client, significantly increases the speed of the design process.

This is because you do not have to become bogged down with layout once you’re in Photoshop (or whatever you use to create your high fidelity mock ups). Your layout has already been decided by that stage in the wireframe, allowing you to concentrate purely on aesthetic once you are in Photoshop.

Similarly, you are able to create wireframes and see the natural layout, structure and visual hierarchy, unaffected by design.

It is easy to create visual hierarchy and focus by using a heavier font weight/size, a change of colour or texture; but to use the layout alone is a much more natural, almost subliminal, way of creating hierarchy. Its like going straight to ID’s and !important when, if a class was used all along, it is then much easier to structure dominance above that.

Photoshop

Im not going to go into too much depth here. I think its safe to say pretty much all of use use some form of the Adobe Creative Suite.

Personally I will use Photoshop with the GuideGuide plugin for grids when working on websites, while turning to Illustrator for more vector/graphic based work. I have friends who use Fireworks and it works well for them.

I don’t stress too much about creative software, because it is just a tool at the end of the day, anybody can learn to use software and there are endless tutorials on how to get that amazing effect you think will complete your design.

Whats more important to me is the creation of ideas, designs and intent before turning to your software of choice.

The final thing i’ve learnt to do is to not worry too much about your design being pixel perfect. Photoshop does not behave like your browser, or any of the range of browsers for that matter. Until real, dynamic content is used, you cannot truly imagine how your design will react, and when we start working on responsive sites, working to a static design is miss-leading.

Another way of looking at it is that you set yourself up for a fall by setting your clients expectations so high too. Your website is not a flattened image, the difference between using ‘sharp’ or ‘smooth’ for the font rendering in Photoshop can truly result in a look that is completely unachievable in the browser, but will result in you having to explain this to your client.

Misc

I have dabbled with other tools for idea generation. Balsamiq is nice for creating a low-mid fidelity wireframe that is neater than working by hand but still has that cathartic feel to it, it also allows for quick development of wireframes. I personally much prefer to wireframe by hand.

Read!

The only other thing I can really recommend is to read, look around and find inspiration anywhere. Collect things that you find interesting and be open to new things. As the web develops, so too must our processes.

Round Up

As I have already stated, I do not intend to imply that my way of working is best.

Instead I hope that by sharing my process, I may encourage some of you to try out something you may have never previously considered. Similarly, if you think that something I have mentioned could be improved upon, I would value the feedback, theres a possibility I may too further develop my process.

If you like this post, please let me know as I intend to extend this post by writing about my development process, how I code the sites I work on, the tools, code, frameworks etc that I use.

Finally I have to make acknowledgments. As I have said all along, my own process has been inspired and refined as time has gone by. As a result I must recognise those that have heavily influenced me. Elliot Jay Stocks and Kier Whitaker of Viewport Industries ran a workshop called Pragmatic Web Design (http://viewportindustries.com/blog/pragmatic-web-design-our-new-one-day-workshop/), which discussed their own toolkit, their development process was a huge influence. At New Adventures 2012 Ben Bodien gave a workshop called Front-end Craftmanship (http://2012.newadventuresconf.com/workshops/), here he shared with us his front-end development processes. Finally my biggest influence have been my Front-end Lead Kyle Shrives (https://twitter.com/KyleShrives) and the rest of the team at JH (www.wearejh.com) where I work.

Thanks for reading, heres a gif of a goat doing a backflip off another goat.