Becoming a web designer today is a very popular (and lucrative) career. Many graphic designers choose to take the web path for a multitude of reasons – more money, more opportunities, more project variety, etc. But making the transition, or starting from scratch, is not always an easy process. This checklist covers a few of the “must have” skills and tools to get you started.
First, you’ll need to turn your ideas into designs by using graphic design software. Adobe has always produced the cream of the crop and the top 3 used for web design today are Photoshop, Illustrator, and Fireworks. All have their pros and cons, but if you had to choose one to start with [for web design] I would recommend Photoshop.
You should at least be comfortable with creating/manipulating layers, text and shape modification, the good ole’ crop tool, and applying basic layer styles. In other words, if you can’t make something look pretty and then slice ‘n’ dice it, you will have a hard time finding/keeping a good job as a web designer. And if you’re completely new to Photoshop, or want some tips, just Google whatever it is you’re trying to accomplish – ex: “web banner photoshop tutorial.”
Web designers used to get by with just their ability to design. Not anymore. If you’re not familiar with HTML/CSS you will get left in the dust, and most solid web designers today are even comfortable with HTML5/CSS3. At the end of the day, being able to code your designs goes a long way and makes you more valuable to whatever team you join. Additionally, more and more designers in our industry are inheriting front-end coding responsibilities that used to be handled by back-end developers.
The best way to get started is to just start coding. Fire up your code editor of choice (I prefer Coda), and hammer away at those divs and styles. Practice makes perfect, especially in web design. As you write more and more HMTL/CSS you’ll find what works and what doesn’t. You’ll also become faster and more comfortable turning static design comps into live web pages.
If you’re new to HTML/CSS I’ve listed a few tutorial sites below that will help you pick up the basics. The rest is up to you!
– Net Tuts
*Note: these sites offer tutorials for other programming languages as well, which you may find interest in after dabbling into HTML/CSS.
Learning jQuery from scratch can be tough, especially if you’re more of a designer than a coder. But fortunately for us, there are a ton of jQuery tutorials out there that make learning it a breeze. The best place to start is www.api.jquery.com. If offers the latest info on jQuery and plenty of examples/resources to help you use the library. Again, let Google be your guide if you get stuck or are curious on how to do something using jQuery.
Once you start using Firebug you’ll wonder how you ever got by without it. Chrome has a similar dev toolbar that can be enabled by right-clicking and “Inspecting Element” as well. Even IE offers a developer toolbar for debugging, although I’m not a fan, and I rarely talk about IE in general ;)
To keep up with industry trends you’ve gotta read! Books, articles, tutorials – they’re all good education to keep you sharp and competitive. I personally recommend A List Apart. They write excellent books that are great for all skill levels.
This list could go on and on, and I’m sure there’s plenty of room for debate on what to learn and what to use. This basic list has provided a lot of value in my career, and I definitely wish I would have known about them sooner than later. Furthermore, once you start playing with different tools you’ll find what you like, what makes you more efficient, and what saves you time. That’s what matters, and that’s what will help you become a better web designer.