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.
- 1 HTML & CSS
- 3 Sketch a Design by Hand
- 4 Get Familiar with Interface Design
- 5 Learn and Use a Framework
- 6 Understand How to Use a Multitude of Devices
- 7 Print Design Fundamentals
- 8 Basic Photo Editing
- 9 Basic Copywriting
- 10 Basic Social Media Marketing
- 11 A Desire to Learn
- 12 The Gift of Gab
- 13 Build Your Essential Design Skills
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
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:
- 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
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:
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.
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:
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
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
Wow! Perfect timing, I was looking for a article like this and here it is, Thank you !!! BTW I think it would be better if we learn PHP and MySQL a bit.
Excellent Ginger. Thank you. I love the “broad scope” this article embraces – especially the Print, Copywriting and Gift of Gab sections
I would like to know how to convene to my web designer on how to put comments on my website, Do you have any training on this subject.
Though it’s kind of a testament to one aggravating thing about being a designer…having to fill multiple roles.
I mean, I don’t think filling multiple roles is a bad thing, just that a lot of companies (and you can read plenty of craigslist posts that emphasize this) expect designers to be multi-disciplined in a wide array of things.
Instead of Photoshop, use Lightroom!!! It has all the tools you need and much easier and faster to use than Pshop. You can select several images at once, resize, watermark, rename, etc in one batch or export. You can retouch the photo and change exposure, colors, and so much more! LR has radically changed my photography. Amazing stuff!
Next, three MAJOR issues I see with 99% of all web designers. I mention it and I’ve gotten blocked by MAJOR ppl on the Divi FB group. That’s how much ppl DO NOT want to read this. Yet still the number one issues (visually. Other he issues of content and organizing into categories, esp in menus, are still horrendously overlooked):
User Experience/User Interface.
Take some REAL classes. Or better yet, work with a SKILLED knowledgable designer who isn’t a programmer but a wiz at color, type, and UI/UX.
And don’t block ppl who actually taught all that in colleges, exhibited internationally as well as published internationally for decades, and earned many college degrees in these subjects, with high grades. I know something about art and design.
But thanks to programmers who feel THEY know it all, I no longer contribute any tips. I just mention that closing one’s mind to input from REAL artists and designers would help most sites.
Just saying …