www.paulhagan.co.uk
Beautiful websites & melodies from Liverpool

menu ▼

Web design

I've worked on the web since 2005, primarily as a front-end designer & developer, recently moving sideways into interface design for native mobile and web apps - but I've also done stints as as a copywriter, content strategist, CMS technical support guy, and the old favourite… "bloke who sits in the corner and looks after the website".

My employers range from large organisations (local government & HE), through charities and not-for-profit’s, right down to small independent companies, so I've seen the web evolve from a whole bunch of different viewpoints.

At present my job title is the rather high falutin’ "User Interface and Mobile Development Team Leader", which means I have my fingers in most stages of the app design and development life-cycle. Everything from scoping out projects and writing requirements, working with our UI and UX designers to generate prototypes, mood boards and style guides, then annoying the devs with silly questions while they beaver away doing the hard bit.

And all the time trying to keep the customer happy!

Mad skills

Forget all the rock-star/ninja/Jedi/super-fire-pony stuff - you just gotta get on at getting good at what you do. So if someone put a gun to my head, here are the areas where I’d claim to be able to hold my own:

  • HTML5 (and boring old HTML 4/XHTML - not just the trendy new stuff)
  • CSS3 (and boring old CSS 2.1 - see above...)
  • Web typography
  • Web standards
  • Semantic markup
  • Prototyping and wire-framing
  • Page design and layout
  • Usability
  • Information architecture
  • Interface design

My reading list

Although I studied IT at university, only a small part of my course was specifically web-focussed, so I’ve done a lot of self-learning to fill in the gaps. Much of this has come from books by leaders in the field, so here’s a list o’ books that I always like to have to hand:

  • Designing with Web Standards, by Jeffrey Zeldman
  • Don't Make Me Think, by Steve Krug
  • Handcrafted CSS, by Dan Cederholm
  • Hardboiled Web Design, by Andy Clarke
  • The Elements of Typographic Style, by Robert Brinkhurst
  • The Elements of Usability, by Jessie James Garrett
  • Eric Meyer on CSS by, Eric Meyer
  • Grid Systems in Graphic Design, by Josef Muller Brockman
  • The Icon Handbook, by Jon Hicks
  • Graphic Design: The new basics, by Ellen Lupton
  • Learning JQuery, by Karl Swedberg

I also subscribe to .net magazine, and regularly read the following RSS feeds to help keep me on top of the latest news and opinion:

Toolbox

Every web designer has their preferred set of tools, and although I'm not really a believer that there's one 'right' way of doing things, for what its worth here are the tools I use on a daily basis while working on the web...

Design tools

Pencil and paper are the first port of call for layout and wireframes, which I usually convert into interactive prototypes using the amazing POP app.

For graphical elements I used Fireworks for the longest time - although I'm beginning to warm more to Illustrator of late for some reason. I know a lot of people prefer Photoshop over Fireworks, which is cool, but like the Mac/PC thing, I've just always found Fireworks easier to use and more fun to play with. Simple as.

Markup

I've never worked anywhere that doesn't use Dreamweaver, so default to using it for 99% of my code, although the lack of proper support for SASS is really starting to grind me down, and am thinking more and more about jumping ship over to Code Kit.

For version control it's all about Tower and Beanstalk, which I used to interface with Git, and take care of all my deploys. I really should learn to use the command line one day - but there's always something more important to do first. Like learning to swim, for example. Really must get round to that one...

Browsers and testing

I've always been a standards-based coder, and lean toward webkit as my benchmark for testing layout, so I write my code for Safari/Chrome first, then tweak it for other browsers. When it comes to testing the FireFox developer toolbar is indispensable, as well as FireBug, and YSlow.

I'm lucky to have access to a whole bunch of mobile devices in the office, so when it comes to mobile sites we test in iOS 8+, Android 4.4+, and Windows Phone on "real" handsets, and use the ever-reliable Browserstack for everything else.

The W3 validators and the Wave Accessibility tester are also really useful tools, although no substitute for a real person testing your site.

Portfolio

You can see my most up to date portfolio pieces on the Behance website, including work-in-progress projects, and some ace non-web stuff like the guitar I've recently built.