Kyle Cooper Website Design and Development

Become a Website Designer; where to start

by kylecooper

How to become a Website Designer

So you want to become a Website Designer, huh? It probably won’t shock you to learn that there isn’t a fast track route to becoming a website design prodigy, and that it will require a lot of hard work and dedication from you to become proficient at creating functional, accessible and interactive websites. I have been in the website design field for a little over 12 months now, and I have lavished hundreds of hours of my time sat infront of the computer working through textbooks and online tutorials. This post isn’t meant to serve as another of these tutorials, but more a collection of steps that I undertook in my first few months, in order, with links, in the hope that it can help give you some guidance in those explorative first steps into this exciting field. The well known rhetoric goes, “we all have to start somewhere”, and this is basically my personal list of where and how I started, so without further ado;

Step 1; HTML and CSS | First and foremost…

I can’t stress this first step enough, it is entirely and utterly essential if you really want to make a career for yourself in website design. You need to have a solid understand of HTML and CSS – not a precursory knowledge such as the ability to change the font of a paragraph via CSS – you need to know it like the back of your hand (or perhaps, to be more relevant, like the front of your monitor). Avoid WYSIWYG (What You See Is What You Get) editors when starting out. It can be very tempting to just acquire a copy of Dreamweaver and jump straight in, but in the long run you are far better off using a copy of Notepad and a web browser. Why? You will learn how to code a website at the fundamental level, which will lead to cleaner and leaner code, and you will become far more attractive to prospective employers further down the line. Now, the good news is HTML and CSS are, with a bit of perseverance, fundamentally fairly simple coding languages to learn.

How I went about it…

I picked up a copy of “Head First: HTML with CSS & XHTML” and worked through tutorials on HTMLdog (http://htmldog.com/guides/htmlbeginner/). I used these 2 sources to compliment my learning, and spent a few weeks with my hands glued to the keyboard and my eyes glued both to the book and the screen (disclaimer: not recommended in its literal sense). It does require some perseverance on your part, as you will not be cranking out your dream websites within 2 weeks. Trust me, however… if you knuckle down you will make some pretty fast progress; I had created my first – albeit simple – website by the end of my first week.

Step 2; .PSD to HTML and CSS | Now it gets fun…

It might initially seem to make more sense to put step 3 here (Design your own mockups) as step 2, but I feel that it is important to understand how a website design is turned into HTML and CSS, before you jump into designing your own websites; it will help ground your ideas more firmly in the real world of website accessibility; as unfortunate as it may sound, some designs just do not work as a website; period. In essence, the .PSD to HTML process involves taking a static website designed in Photoshop, and turning it into a fully functional website, that looks as close to the original design as possible. I would like to add here that you are not limited to use only Photoshop, and there are alternatives, such as Fireworks (also by Adobe) and GIMP (a free alternative), amongst others, that will serve you perfectly well.

How I went about it…

I found sheer repetition to be my friend whilst studying this process. Work through as many tutorials as you feel necessary until you feel comfortable with the process. Luckily, there are a plethora of .PSD to HTML/CSS tutorials out there so you can pretty much take your pick; just google it! However, here are some links to the ones I completed;

http://net.tutsplus.com/tutorials/site-builds/build-a-sleek-portfolio-site-from-scratch/

http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

Step 3; Design your own Mockups | 3′s the creative charm…

This was the stage, for me, where everything started to fall into place. Up until now, although I understood to a reasonable level the basics of HTML and CSS, and how to turn a .PSD file into a HTML and CSS valid website, the actual art of creating my own website still eluded me. My problem was I had little to no experience of how to use a decent piece of design software, such as Photoshop.

How I went about it…

I didn’t feel that working through written, static books or tutorials was a very organic way of studying how to learn a piece of software such as this, and I was recommended by a friend to check out www.lynda.com, which specialise in providing online study video tutorials. They do charge a monthly fee, but if you google for a no-strings attached free trial, they are out there. I completed a series of Photoshop tutorials called “Photoshop One on One” by Deke Mclelland, a rather well known Photoshop guru. There are 4 of these tutorials, each about 6 hours long, and each are staggered in difficulty, from “beginner” to “advanced”. I spent a week plouging through these tutorials, pausing the video to try the prescribed techniques myself, and I can honestly say I don’t think any other method would have gotten me as proficient with Photoshop as quickly as this one.

Essential tools | Some things I simply cannot do without…

‘ Notepad++ – An excellent code editor.

‘ Firefox – My web browser of choice.

‘ Firebug – A firefox extension, and absolutely indispensable when figuring out HTML/CSS errors on a page.

‘ W3C Validator – Excellent to troubleshoot errors and validate your code.

‘ Photoshop – Great for website mockups, photo manipulation and pretty much anything else I need to do on a typical website design day.

2 Responses to "Become a Website Designer; where to start"

  1. Hey, thanks a lot for the tips. I’m just starting out and this will be really useful!

  2. You went down a similar route as me… though I’ll have to check out lynda.com. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

*