Ali Jafarian
Ali Jafarian

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!

Code Academy

Treehouse

The New Boston

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.


Did you find value here?

If so, jump on my email list to be notified of new posts.

Subscribe

Discussion

1 thought on “Beginning Web Designer Checklist”
  1. 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.

Leave a Comment

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


Latest Articles
Truly Seeing Our Children

How often do we truly see our children? Let me be clear – most of us see our children every day, especially if they’re still living in our homes. We…

View Post
A BraveSoul Experience

I had the recent privilege to experience the BraveSoul 2022 retreat in Ireland. This event was both world class and transformational. It’s the type of retreat you need to experience…

View Post
The Cost of Attachment

What’s the cost of attachment? This is a question came into direct focus for me with the recent passing of my dog, Raja. The experience of Raja passing was quite…

View Post