My Process

posted on November 29th, 2007 by Anthony

About a week ago Matthew Pennell posted about his process and approach to his web projects.

He made the point that even though we web peeps all (essentially) do the same job, and have the same goals, we all have our own approaches, tools and processes to actually get there.

A food processor… geddit?

It’s an interesting topic, so here’s my tuppence worth (which as usual has ballooned to more like 50p).

Inspiration and Design

When approaching a project I like to have an idea of what a client wants to achieve. I like to get an idea of the sites they already like, or ones they think their site should look like. It can be a dangerous tactic at times, but overall it gives a good indication as to what they are actually expecting from you.

Obviously the client has their logos and brand guide which they will (hopefully) provide readily. This will obviously form the basis of most designs, but I also try and get hold of as much as much supporting material as possible – like photographs, brochures, leaflets etc.

With that sort of material I can start to get a picture in my head of the way things need to go.

Brain Dumping

A crappy photo of a page from my sketch book - this one was for this design where I came about the Jukebox style last.fm list

Sometimes I sit down with a pencil and sketch a few ideas out into my squared paper pad. It helps with some projects just to get stuff out of your imagination and into something more tangible.

To be honest my drawing skills are a bit hit and miss. I can get some decent results, but I generally have to work really hard at it. Undo makes that sort of thing really easy, so most of the time I find it easier to just dive straight into Fireworks.

Mocking Up

Fireworks is, by far and away, my most used application. The way it treats raster bitmaps and vectors as individual, interchangeable, groupable objects is perfect. I know a lot of people prefer PhotoShop for their mock ups, but I find it’s vector handling clumsy and counter-intuitive.

Before I discovered Fireworks – in the dark ages of tables and font tags – I used to dive straight into code and try and build up my ideas in that bleak environment from scratch. It was a massive revelation when I moved to creating graphical mockups before going anywhere near and angle bracket.

Visual Cues

As I’ve mentioned in my recent Brewing Process posts, when I’m creating Fireworks mockups I find it useful to dump a lot of the inspirational graphics in a space underneath where I’m laying out my design. If nothing else this helps with selecting colours for the scheme, as you can use the eye dropper tool to pick colours directly. It’s also easy to keep referring to, and you can quickly grab assets and drop them in place.

Illustrating

I also use Fireworks for most of my general graphical production. Everything in this design here was put together in Fireworks. I think a lot of people overlook it’s deceptively powerful functions. I’m not saying that it’s the best choice for everything, but I find that it’s more than up to the job for most tasks.

I have to point out that I’m also pretty handy with a copy of PhotoShop. I just feel that it’s called PHOTOshop for a reason.

Back to the Pencil

Fireworks isn’t perfect though, and sometimes I can find that being exclusively in that environment can work against creativity. In fact I often find that this is when the pencil and paper approach becomes very beneficial again.

A number of times, including with this design, a lot of the best ideas have come from doodles on paper. They might not look much, but sometimes getting ideas out fast is all that matters. Then it’s back in to Fireworks to bring them to reality.

Coding and Developing

Obviously once I’m happy with the graphics side of things it’s time to move on to code.

At the start of the year I finally moved into the wonderful world of Mac with a rather shiny and lovely MacBook Pro. I now use it for 95% of all the work I do. In fact at work my PC has sat unplugged an unused for about 6 months! Previous to that I had been using Windows based machines for, well, forever really!

Text Editors

This has kind of left me in a bit of limbo as far as favourite apps go. On Windows I was a big fan of Notepad++ for the main bulk of coding. That was backed up nicely with TopStyle (get the free Light version) for the CSS side of things. I also used Dreamweaver quite a lot too – don’t scoff – it actually works very nicely as a text editor, and some of the pseudo-CMS and template capabilities are a God send for static HTML sites.

Since moving to OS X I haven’t actually settled on the optimum combination yet. I’ve tried Textmate and Coda, and liked them both, but I haven’t felt compelled to buy either. I have sporadically used Aptana, but I’ve always found it a bit slow a cludgy. Though, apparently, the latest 1.0 release is a huge improvement. I also use the OS X version of Dreamweaver… and I’m sure there are a few others I’ve used too because I’ve tried loads.

I still haven’t found the perfect environment to work in under, what I decide upon seems to depend what I have open, or what mood I’m in really! To be honest if I can type and save plain text to it I’m fairly happy!

Browsers

The browser is obviously a hugely important part of the process, and for that I’m a totally committed Firefox user.

I don’t like Safari. It’s odd for a company like Apple that can get the basic user experience so basically wrong with their web browser. The Webkit rendering engine is fantastic, but as an everyday browser I just think it stinks.

There are other Webkit based browsers, obviously, but none of them come close to matching the flexibility of Firefox.

It’s the extensions you see.

Browser Extensions

Here’s a lit of my currently installed Firefox Extensions:

It is these tools that make Firefox my only real choice.

Add to that the fact that Firefox is generally just a great browser with a decent rendering engine and it’s a real no-brainer. Yeah it can be a bit of a memory hog, and it’s more than a little flaky under OS X, but overall there is very little competition.

I’ve had some quick dabblings with the 3.0 beta and, going by that, things are set to get even better (epspecially with the OS X native skin, which includes the nice borderless window of Safari). I had to uninstall it due to not being able to live without the extensions…

Local Servings

When developing things in WordPress in the PHP and MySQL I use MAMP to provide a very easy environment to get a solid dynamic test bed. This follows on from using the similarly fantastic XAMPP under Windows.

When things are ready to be pumped up to the server I’ve settled on CyberDuck on OS X. The lovely FileZilla does the job even better under Windows.

Parallels

The main reason I’ve been able to let my PC gather dust is the wonderful world of virtualisation.

My current setup in work is my MacBook Pro linked to my trusty, massive, 19″ Iiyama Vision Master Pro 454. Most of the time the big CRT is used to run an install of XP Pro via Parallels. This mainly allows me to access the internal servers and email system, but also let’s me test designs under IE6, IE7 etc.

It’s a great boost for productivity. The extra screen (which is handled beautifully by OS X) also helps with providing acres of real estate to move things about.

Other Bits and Bobs

I think that pretty much sums up most of the process. I don’t have to worry about billing and things because of the nature of our set up. I don’t do much in the way of freelance stuff, and when I do it’s generally just been for a set fee for friends etc.

There are other apps and tools that both help/hinder productivity.

Music

I’ve always found I work better with music playing, so I like to have iTunes on most of the time. It doesn’t matter what’s actually on, old or new, so long as it’s quality stuff. The only way it would distract me was if it offended my ear buds.

This is always partnered by the Last.FM app. I love Last.FM it’s a brilliant concept. Even just for my own amusement of tracking exactly what I’ve been listening too, I find that fascinating.

By rights it should be the place for bands to peddle their wares. I don’t quite understand why it hasn’t been used/exploited more by the record industry.

Feeds

Then there are my RSS feeds. I use, and love, NetNewsWire for the handling of my (eek!) 238 current feeds. I don’t know how I coped before they came about… but some days it’s a lot easier I don’t make that icon bounce.

Email

Up until very recently I used Gmail to handle email. I still do, but now I channel it via Mail and the new IMAP system Google rolled out a few weeks ago. I like it, but I sort of miss having the Gmail site open. I’m not sure why.

So it’s not a final move just yet.

Fin

That’s about it overall. Hopefully it will give you an idea of my process. It’s an interesting topic, and it’s good to know how other people attack their work, so why not let us know about your approach to things.