I have been ignoring this website for a while because I've been busy with client work, personal work and catching up on my book blog- I read books, then review them. Badly.

I had planned to move the Book blog from Posterous to this website over Christmas, but I never got round to it. I have since accumulated a backlog of book reviews to catch up on. The purpose of the book blog is so I can keep track of what I've read, more for my own purposes than anything else. Posterous is a decent service, but it is more suited for people sending stuff via email, to be posted automatically- I just log in and update via the web. I still hope to add a review section to this site, then I'll have the fun of transporting 30+ book reviews over, but at least it'll be a lot less work to post reviews to it.

One of the more recent books that I have read was From Russia with Love- so I thought it was the perfect opportunity to post an image of the front cover from the 2007 re-issues. I just love the art, it's perfect for the the books. I have the first three books (Casino Royale, Live and Let Die and Moonraker) in hardback from the re-issues, I never got around to buying the rest of the set when it was available in hardback. I may scour eBay at some point in the future.

The art is created by Michael Gillette, his website is here and his blog is here- worth subscribing to.

I like reading about other people’s web design processes, so I thought I’d detail my own process, from paper to pixels.

At the moment there is a lot of different processes being used for web design- some people like to create the design in Photoshop first, then chop it up and code it. Others work purely in HTML and CSS, to develop and refine their layouts.

My process encompasses four unique steps (that is, done separately to each other) and it may seem long winded, but it’s deliberately so. Between each refining step, I enjoy the breathing space to step back from a design or layout and consider additional improvements for the design.

I should mention that I usually show the client my ‘colour wireframes’ from Step 2, before proceeding. There’s usually enough detail at this stage to get approval on a design and layout. If the colour wireframe is not able to convey a certain design element (such as a textured pattern or a slideshow) I usually include links to similar elements on other websites.

Step 1: Paper and Pencil (or pen, or marker or burnt stick)

I find that paper sketches are the fastest way to quickly assemble and organise the different elements of a design. The freedom allows you to plan without technical constraints. I find that it’s also easier to make notes on paper sketches than a digital version. My sketches go from really basic to really detailed.

At this point, I must shamelessly plug my own sketch books, that I make and sell, called Copybooks. I made them as I wanted a small, economical sketch book, but I didn’t want them to be pocket-sized. I wanted a larger size sheet, for many smaller sketches and more detailed larger sketches. I have been using them for months and I find them just right for me and hopefully for others too. I go through many different layouts and ideas on quite a regular basis. As they're not pocket-books, they stay in relatively good condition and I shelve them once they're full. I can then work back through them if I want to revisit my notes, or take a photo of them for a blog post...

Step 2: Colour Wireframes

Once I have an idea of my design layout down on paper, I move into Adobe Illustrator. Some may say this is overkill or misuse of Illustrator, but I use Illustrator because I’m familiar with it and I actually like using it. If you use a similar application, that’s cool too.

I find that it is quite easy to assemble a layout using boxes for different elements. At this stage I mostly work on proportions and colours, sticking to pixel dimensions and RGB colours. I use real logos and example photos- I can easily crop a photo to required size using clipping masks.

At this stage in a project, I usually view the design at 100% and screenshot the design. I then make a simple HTML file with the cropped layout design (as a JPG or PNG) centred on the page. It may be a static image but it really helps the client see how it will look when it’s in HTML and CSS. I usually get the nod to continue working on the design at this point (or go back and work on changes to the layout), which is when I move on to the next step.

As I was just about to publish this, Smashing Magazine posted a new article about using Illustrator for Productive Web Design. It's a great article and I picked up a few tips myself, check it out if you'd like to use Illustrator in your web design process.

Step 3: HTML/CSS

Having the layout approved means that I don’t have to be too worried about the time it takes to produce the HTML and CSS. It will take as long as it takes. I prefer to set up a good foundation of code for a design than rush through it, which usually happens when you have that fear that it’ll be immediately rejected or some fundamental change will have to be made. Those changes always suck.

At this stage I use XScope a lot (check it out, a must for any web designer). It allows me to quickly find element dimensions and swatch colours from my colour wireframes from Step 2 (because I used proper pixel dimensions and RGB colours, of course). I actually prefer to swatch colours using XScope’s magnifying glass, as it gives me the values for the colour I see onscreen. As strange and paranoid as this sounds, I’ve used the RGB values from Illustrator’s colour palette and the colours produced in the web browser were not what I saw in my Illustrator designs, but I digress.

Once I have HTML and CSS, I can either show the client a simple HTML file or I can incorporate the design into the CMS that is being used and show them a ‘development’ site usually on a locked subdomain. It’s a lot more convenient to make small refinements at this stage.

Step 4: Details, details

Once I have a working development site, I usually refine the design a lot, taking either final content or dummy content into consideration. Styling text and spacing is easier with content.

At this stage I also like to add subtle elements to the design- a texture or a shadow to an element. I find it really adds depth to the design with a few textures. I have a collection of repeating textures that I have bought from istockphotos.com or more recently from SeamlessTextures.net. I also make my own textures (Seamless Textures also have a great tutorial for this here).

I find it easier to assign textures via CSS than at an earlier stage in the process- Once the texture or shadow or similar is in place, at least I can made edits and changes in Photoshop and simply refresh the HTML to see the changes in 'real life'.

With the advent of CSS3 features like box-shadows and RGBA hijinks, my time in Photoshop will be reduced, but it will always be necessary for textures.

Et tu?

Granted, I sometimes deviate from this process, but most of the time this is my modus operandi. I am a great believer in using the right tool for the right job, unfortunately I have to use 3 different digital applications, instead of the, much talked about, one.

As I said before, I’m always interested in other people’s processes, so if you have any cool additional steps in your process or if you have any queries about my process, let me know.

As much as I'd like to be able to write something fitting for Christmas, I'll leave it to my sister to recount the dedicated years my parents spent making Christmas something special for our family, not that they have stopped, even now with a family of adults.

I recommend, from the Gingerbread Lady, What was your best present ever?

It would be remiss of me not to mention the next wave of my family, so I would also definitely recommend Advent, day 24: This Sacred Eve over on The Next Blog

Have a Merry Christmas and keep warm!

As the year draws to a close, it has to be said that 2010 was a better year than 2009. Last year, the Irish economy completely collapsed on itself. The writing was on the wall, but no one wanted to read it- everyone preferred the surprise.

I went from being a poor student to briefly having a rather good income, back to being a poor freelancer- all in the final years of the boom. I think I’m lucky not to have experienced the huge disposable income that was associated with the economy boom, the so-called ‘Celtic Tiger’, you can’t miss what you never had.

There have been significant changes in every aspect of Irish society- I really notice the changes amongst the men of my generation- a huge number left school to work in the construction industry. I was a college student while my construction industry counterparts were earning an unprecedented income.

Now, post-boom, it’s a common sight to see men in their twenties and early thirties wandering around town during the day with no apparent purpose- aside from regular visits to the pubs and bookies.

The slightly older members of this group can be seen in the supermarkets following ‘the missus’ around, pushing the shopping basket, two paces behind the working partner. I guess they’ll eventually learn how to cook and shop themselves, and won’t look like such useless tools.

During the good old times, the growls of some ridiculously pimped out, low riding, unmuffled Honda Civics rattled every house that they passed. I don’t know where they went, but running them on a regular basis must have proved expensive for the unemployed. I see a few more bicycles around town than before.

When the warmer weather comes around, the ‘boys’ will be out in their t-shirts and vests, showing off their extravagant tattoos. Unlike Miami Ink though, there’s no meaningful story behind the tattoos, they’re just testaments to the excess time and money that they had on their hands.

I feel that we, as a population, were given an opportunity to strengthen the basic structure of the country, prepare ourselves for a time when money isn’t as available as it was in more bountiful times. Instead, huge wages were wasted on superficial symbols of wealth and invested in negative equity.

It was a test of maturity which we failed miserably. We should have been improving the infrastructure of the entire country, not just the capital. Sustainable industry and small businesses should have been encouraged and supported, to keep people employed even in poor economic times.

At this point though, we have to look forward and learn from our mistakes. I’m not hoping for another boom- I’d like to see the economy improve at a level that is realistic and not dependant on a single area, like the construction industry.

Perhaps the next time our fortunes improve we will know how to deal with it and hopefully we won’t fuck it up. Again. 

I wrote an article for Smashing Magazine and it has just been published. Allow me to present; Preparing Artwork for Screen Printing in Adobe Illustrator.

I had fun writing the article and coming up with a fictional company graphic. I created a quick rocket vector and some text to better illustrate the points of the tutorial. It's a tricky business prepping artwork for screen printing, I've made enough mistakes in the past to have come to some fairly robust techniques.

I've compiled the 18 graphics I created for the article into one large image above. I was pleased with how the whole article came together. It's the kind of tutorial that I like to read. Hopefully people will enjoy reading it and get some use out of it.

I'll try answer any queries over on the comments on Smashing Magazine, but if you like, you can also contact me and I'll try reply (if it's short!)