It Web Designer

Thinking about becoming a web designer, eh? Or maybe you’re one already. No matter. What does is how you approach the task. Will you shuffle about, learning as you go? Or will you take a more calculated approach?

I think a combination is best. After all, some things you can only learn by doing. And others you need to have a solid foundation of knowledge before you even begin.

What follows is a mishmash of what skills web designers should have; what tools they need in their toolboxes before they can be truly successful. Note: you can probably get by without some of these but the more skills you have in your repertoire, the better.

HTML & CSS

A no-brainer, right? You need to know HTML to be a good web designer. You can install a WordPress theme without this skill, to be sure. But if you want to make any substantial edits to fit a client’s specific needs, you’ll need to know how to close a tag, at the very least.

And with HTML comes CSS. You need to have a handle on CSS to make sure your sites look how you want them to look. This is about so much more than window dressing. CSS plays a major role in your site’s user experience and UX can determine how functional a site is for the end-user. Getting up to speed here ensures you know how to change colors and fonts site-wide at the minimum.

Many of the best web designers out there are self-taught. Goodness knows there are plenty of free resources available. Here are a few of my favorites:

JavaScript

If you paid attention to the last State of the Word, WordPress co-founder Matt Mullenweg told all devs to “learn JavaScript, deeply.” If the head honcho says you need to know JavaScript, I think it’s time to get on it, don’t you? Because that means the CMS will very likely be adopting Javascript into its main functions, which means you need to know how to use it if you want to keep up.

Here’s a few resources that’ll prepare you for what’s to come:

Sketch a Design by Hand

While it’s true you are a web designer, having solid skills on a regular ol’ pen and paper can come in super handy. Let’s say you’re trying to describe what a site can do for your client, only you’re at a face-to-face meeting. Sketching out a wireframe design is a lot easier (and a lot faster) than creating a full mockup on the computer. You don’t have to be a fantastic artist to acquire this skill but you should have some basic competence with the sketchpad.

Once you can draw some basic designs, you can easily incorporate them into your websites. This goes beyond drawing a wireframe. Many websites now use hand drawn elements in slider images, banners, and navigation, so honing this skill can help to set your sites apart.

There are so, so many resources for learning to draw, but these are particularly helpful for those looking to create web design mockups:

Get Familiar with Interface Design

Pen and paper is really helpful but you should know how to mockup a site on your computer, too. You can do this in just about any graphic design program but there are a few that are particularly up for the task of tackling interface design, Sketch being a good example. The soon-to-be-released Project Comet is another. But you can use Illustrator, too. Truly, any vector-based program will suffice.

Learn and Use a Framework

If you’re hanging around these parts, it’s safe to assume you use WordPress. Which means you’ve pretty much already got this skill covered. Still, it’s important to note just how helpful it can be to use a framework. It means every site you work on never starts at square one. You’ll enter into the project with a baseline structure, which is a major time saver.

This note can easily be extended beyond just core WordPress, too. There are many theme frameworks out there you can use to make site development faster (Bootstrap comes to mind) so it might be advantageous to familiarize yourself with these as well.

Understand How to Use a Multitude of Devices

When putting together a site, it’s important to test it on multiple devices. This helps to ensure everything looks as you intended and gives you the opportunity to tweak the design a bit before launch. This means you need to have a familiarity with (as well as access to) many different types of devices.

I’m talking PC and Mac, iPhone, iPad, Android, as well as Chrome, Firefox, Safari, and the many other browsers out there. You should test on old browsers, too. Getting familiar with many devices, however, ensures that you won’t stumble around when you try to pull up a site on a potential client’s phone. Project an appearance of competence across all platforms can go a long way toward building others’ confidence in your abilities.

Print Design Fundamentals

No, you didn’t misread that subheading. I said “print” design. I fully recognize that you are a web designer but hear me out: elements of print design can come in extremely handy for web designers. The latest web design trends are using more and more print elements in them from serif fonts to handwriting to illustrations. These elements aren’t restricted to print designers and familiarizing yourself with them can be useful as these trends continue to emerge and take shape.

You also can’t forget that much of the time elements of your web design will then go on to be printed. For instance, a site logo and/or header could easily become a stationary header or business card. Understanding how to design in print (and how to translate web designs into print) can be incredibly useful and you stand to pick up some extra work while you’re at it.