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.
1) Photoshop
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.”
2) HTML/CSS
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
– Lynda
*Note: these sites offer tutorials for other programming languages as well, which you may find interest in after dabbling into HTML/CSS.
3) jQuery
jQuery is hands down the most popular JavaScript library out there today, and for good reason. It allows designers to code JavaScript easier and faster. Pseudo JavaScript can be hard to pick up for a beginner designer and jQuery does a good job of providing built in methods for streamlined animations and JavaScript functionality. It’s also A LOT of fun once you start understanding it and using it on a frequent basis. Not to mention designers with jQuery experience make significantly more money than those without it =)
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.
4) Firebug
Firebug is a helpful little tool provided by the awesome folks over at Mozilla. It allows you to troubleshoot (or debug) HTML, CSS, and JavaScript issues in real-time, instead of constantly pushing new code and refreshing your web pages. For example, if your web page’s header looks like it’s too far down on the page you could right-click the area and “Inspect Element” to dig into the issue. Firebug will give a you variety of information including the pixel dimensions, computed CSS styles, and more. It also allows you to modify those values on the spot so you can test different things before changing your web page.
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 😉
5) Books
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.
Conclusion:
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.
Ali Jafarian
Ali is a father, husband and serial entrepreneur with a deep drive to create. He writes, records, codes and builds things to inspire the artist in all of us.
I love your article! very interesting! I just started in the web design field and is amazing! I want to learn how to make live pages. There is tons to learn out there.