Essential Design Skills All Web Designers Should Acquire

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:

• 10 Great Websites to Help You Learn Web Development Online
• W3Schools.com HTML5 Tutorial
• W3Schools.com CSS Tutorial
• Codecademy HTML & CSS Course
• CSS-Tricks

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:

• Eloquent JavaScript
• Codecademy JavaScript Course

Sketch a Design by Hand

Image by Macrovector / shutterstock.com

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:

• I Want to Draw: Simple Exercises for Complete Beginners
• Draw 101: The Basics
• Sketching: How a Simple Pen and Paper Can Transform Your Web Designs

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

Image by Jovanovic Dejan / shutterstock.com

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.

The bare minimum of print design elements you should learn include:

• CMYK
• Print resolutions
• Bleeds

Getting a handle on the different types of paper and printed media is a good idea, too. Check out The Art of Choosing the Right Paper for details.

Basic Photo Editing

If you’re a designer, it’s likely you know how to edit photos already but if it’s not your forte, now is the time to brush up. First of all, it limits the work you need to outsource. And second, it gives you more flexibility in what you can accomplish with your designs. Basically, you won’t find yourself avoiding certain things because you lack the photo editing skills to make them happen.

So, open up Photoshop, Pixelmator, GIMP, or whatever software you use and get comfortable with resizing, cropping, color correcting, and applying filters at the very least.

Basic Copywriting

Image by theromb / shutterstock.com

You don’t need to be a verbal whiz but knowing how to string coherent sentences together can help you to intuitively understand the shape your design will need to take. It’s so common for content to come last in web design, which I really don’t understand because the design often needs to accommodate the content, at least to some degree.

So, if you have an understanding of what content looks like, and how it’s structured, you can better shape your designs to fit. This is especially important when it comes to headlines. Understanding approximately how long headlines are and what structure they take can give you a total design advantage.

Spend some time getting familiar with how copywriting works and what goes into it and you’ll become a better designer. No doubt about it. Here are a few resources to check out. You don’t need to master every principle outlined here but a cursory knowledge will be helpful:

• Copywriting 101
• The Definitive Guide to Copywriting

Basic Social Media Marketing

As a designer, your job takes place online so it’s a good idea to get familiar with and engage on social media regularly. If you’re lost beyond sending a standard tweet, however, you should spend some time learning the ins and outs of social media marketing.

Contrary to popular belief, you don’t need to be active on every social network (though you should claim a profile under your name and/or brand name on each). Pick 2-3 and commit to your presence there. Which ones you pick will depend on your audience, of course. Most designers fare best with Facebook, Twitter, and LinkedIn.

A Desire to Learn

Web design is not a static profession. To stay ahead, relevant, and to continue to pick up clients, you have to keep abreast of the latest trends. You have to read articles, subscribe to magazines, and read books about design. You should take a class, follow tutorials, and learn new skills. Always. No exceptions.

A desire to learn is an intrinsic quality in some of the most successful designers out there. If it doesn’t come naturally to you, it’s possible to acquire slowly. Try signing up for a simple online class. When you do well, face new challenges, and overcome them, you’ll soon find the desire to learn more is catching. Stick with it. You’ll be glad you did.

The Gift of Gab

Image by Mangsaab / shutterstock.com

The last thing I’ll discuss here today is a skill that can apply to just about any profession: the gift of gab. If you can talk well, you can get really far in business. I realize this isn’t a skill that comes naturally to a lot of people. It has to be honed and developed over time. But if you invest the time and energy here, it will pay dividends, I promise.

You see, if you go to conventions or seminars about design, you’ll likely network. That means you’ll need to talk to fellow designers and other business owners face-to-face. So, practicing what you will say in any given situation can give you a serious leg up on the competition. General conversational skills and public speaking skills are excellent tools to have in your toolbox. However, if you want to get specific, I’d suggest having two specific types of conversations ready to go:

• The Elevator Pitch. This is basically a 30 second speech you give to anyone interested in your services. Narrow down specifically what you can offer a client into as few words as possible. This is where you differentiate yourself from the competition. And by having a rehearsed speech all set to go when the need arises, you instill confidence in your prospects. Here’s a great rundown of how to develop an elevator pitch: Master Your Elevator Pitch and Win More Design Clients.
• The Design Talk. You should also have a brief talk memorized about web design. What is it? How does it work? What makes for the best kinds of designs? Thanks to the “Desire to Learn” skill above, you’ll also know all about the latest design trends. You should know all the buzzwords and terminology that apply to web design right now (and what’s projected for the future). That way, if anyone asks about one of these elements, you can fire off an explanation at light speed. Your breadth and depth of knowledge will make you look like a true professional.

Build Your Essential Design Skills

It might sound like I’m advocating for web designers to become masters of all trades. “Master” might be pushing it but “Familiar with” is definitely apropos. Web designers, especially those who work freelance, often have to be their own print, marketing, and copywriting departments. They have to be in charge of human resources and IT. If they don’t do it, it doesn’t get done. So taking a little time here and there to expand your skill set can go a long way toward improving your business as a whole.

What skills do you think are essential for web designers to possess? Has one of the skills on this list helped your business? Did I miss something? Please share your ideas in the comments.

Article thumbnail image by Laralova / shutterstock.com