From print to web – a newbie’s guide

Evolving to digital. Five steps to moving from graphic design to web design.

After ten years in graphic design, making the transition into the secretive world of the code ninjas was tricky, frustrating, tiring, and totally worthwhile. The entire process was a challenge; the first code I had to crack was how to start learning this stuff. And crack that code I did. Everything got easier once I figured out these five tips.

Be Organised!

Kinda an obvious one, but you are going to be given a ton of stuff to learn and even Steven Hawking would struggle to remember everything that’s gonna be thrown at you, and he is half cyborg.  Get a big notepad, section it up and make concise but legible notes.

Be Annoying!

For me the biggest shock was moving out of my comfort zones, I realised that I had become so comfortable with the current day to day of standard design and passing work off to web developers I kind of forgot about the whole other side of the role.

  • Find someone who knows what they are doing and ask a gazillion questions!
  • Don’t be afraid to make mistakes, someone who is a master in their field is someone who has made every mistake possible.

Be Observant!

As always, design should be fun! Find sites you love design wise and note what works and what doesn’t. Keen observation and creativity are essential skills to have. I have always maintained good designers always have a great sense of play.

Whooe Now!

Learn the restraints of web design. This is 2013, not the Matrix.

  • Remember how everything has to be sliced up. Ensure that nothing overlaps.
  • Remember text areas need to expand so don’t put image areas that are cut up near them.

Don’t Forget Your Roots!

With all the new things swirling around in your noggin, don’t forget the things that have kept you in work all these years – Keep to the grid.  It still applies.

  • Good typography is still good
  • Keep to the brief
  • Remember client and the target audience

And that’s about it for now, expect to do some long evenings but I am sure that you will find the process rewarding, worthwhile and you will be up to speed in no time.

In Retrospect – Great things I found along the way

These resources helped me then. I hope they help you now.

  •  – Known in the office as the Bible, this is your one stop shop for all things CSS.  Use this extensively and create an effigy of Chris Coyler to keep near your Mac.  Feed it cookies and milk to appease the gods of the intarwebs.
  • and both are site that demand money, both are excellent – everything you will ever need to know is on one of these sites, apart from how to love, you cold-hearted manbeast, you.
  • – Great articles released every few days, keep updated and get many internet bonus points.  (Internet bonus points have no monetary value, but will make you interested in Star Wars.)
  • – All the icons, ever.  Bask in the icon-y glory.
  • – look at the pretty things and get insanely jealous of people half your age being far more creative than you, question your career choice, then grab inspiration (copy) from this site.
  • – I totally disagree with their business model, seriously, you wouldn’t ask 300 carpenters to build you a set of drawers and then choose the one you liked and not pay the rest.  However, it is a great resource to help the creative ju-ju flow when it comes to logos.
  • – Are you too lazy to make your own colour schemes?  Colour blind? Creatively blocked?  Let kuler do the work for you!
  • – a simple easy to use gradient maker in css that makes hard to understand css.  Luckily all you have to do is copy and paste the css into your wanton stylesheet, the hussy.  You know she wants it.
  • and look at what is considered the shiniest on the interweb today and awe in your mediocrity.