Essential Design Skills All Web Designers Should Acquire

Last Updated on September 30, 2022 by 24 Comments

Essential Design Skills All Web Designers Should Acquire
Blog / Tips & Tricks / 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:

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

sketching 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:

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

mobile 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:

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

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:

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

people talking

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

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Updated on March 10, 2023 in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post
How to Use Font Awesome On Your WordPress Website

How to Use Font Awesome On Your WordPress Website

Updated on September 16, 2022 in Tips & Tricks

When given the choice between using a vector icon or a static image, it’s a good idea to go with the vector. They’re small and fast to load, and they can scale to any size without a loss of resolution. Font Awesome is a superb library of vector icons that you can use on your websites,...

View Full Post

24 Comments

  1. wow great post. really i was looking for it.

  2. Great post Ginger. Well appreciated

  3. THanks for the article, some things like PHP, ASP.NET and SQL are missing.

  4. Project Management is an important skill, which includes time management. If you plan on working with other professionals, you need to know how to plan and execute a project professionally, on time and under budget. (Estimating is another skill that’s going to be needed).

  5. Elevator pitch and print design….yep. Great list, definitely a reality check for me. Thanks!

  6. How much does a novice designer earn?
    How much does an average designer earn?
    How much does a top designer earns?
    There is not much motivation to learn these skills, given the time to acquire them if it is not rewarding enough.
    I have been doing niche marketing and I have had to learn WordPress, html, copywriting. I have an interest to learn Java though.
    I would like to become a web designer but i want to know if is worth the time.

  7. I agree with Jenny Lens.

    By the way I’m a Copywriter who built all my websites myself. From the Chameleon, Vertex, Glider themes to Divi without knowing code. When I needed help the support of the Elegant Themes developers were always there.

    To burst your bubble, Copywriting is not simple. Pretty icon pictures. An old fashioned typewriter, a cup of coffee, scrunched up paper and cigarette butts… this is not what my desk looks like.

    None of these systems are simple. People who like technology learn systems because they want to.

    Sketch is for Macintosh = “designers” elite world. SaaS, CMS, UX, UI is technology impasse and increasingly expensive.

    WordPress Developers say “poetry is code.” It is. If you know code you will create a masterpiece. That’s what the Divi Theme, and other Elegant Themes are. They created the Masterpiece so you can design the site the way you want to.

    Let’s see the Developer, the Designer and the Copywriter come together as a team of people and create a masterpiece for the client, as the client wants it.

  8. Great Post!, congratulations !!!

  9. This is a complete list sum of skills for web developer, thanks for the time to make it easy so start with for a beginner.

  10. Great stuff! I totally agree with this skill set for anyone in the freelance and or web development space. Also, I didn’t realize that Javascript had become as strong or prevalent as it is so thanks for the heads up.

  11. Great read for everyone web designer out there.

    My 2 cents, especially for freelancers would be:

    Familiarize yourself with basic hosting related tasks. i.e. Editing DNS records, backup/migration of sites from one server to another, it’s easy for HTML sites, but for WordPress you might wanna look up some articles and try it out yourself. Also, if you haven’t already it’s good a time to explore CDN services like Cloudflare. Cheers!

  12. Stop thinking in terms of device, and think screen agnostic. Every designer should be familiar what their designs will look like on a multitude of screens. TV, small, super small, etc. and make sure you are creating the right assets.

    – Spec guides

    – Style guides

    – Being able to create and give presentations

    – Use Vector and SVG instead of using Photoshop at all

    – Work hand-in-hand with a UX designer so you know WHOM you are designing for to begin with. If you don’t understand who the audience is, you can make it as pretty as you want and it may not work for the actual user.

  13. thnX for that very inspiring and useful post
    and the highly interesting links all written
    to enjoy reading with fun

    the only things missing might be more about
    project and workflow management
    & the of course more unpopular
    knowledge about money
    tax issues & pricing

  14. Thanks for the headsup on Javascript and the shortlist of basic skills. I always enjoy the blog articles on this site!

  15. Wonderful article!

  16. Back in 1999, I was building database applications for stand-alone computers and office LANS, but it was evident even then the Internet was the wave of the future.

    I determined way back then that one needed only 5 “language” fluencies to be able to do anything on the internet I could do in my professional applications: HTML, CSS, javascript, PHP, and MySQL.

    You hit the first three in this article, and WordPress uses all five – and nothing more (if you don’t count outgrowths of the base languages, such as JQuery and CSS3).

    It’s now 17 years later, and I haven’t found reason to change my mind. With those five fluencies, you can do pretty much ANYTHING on the internet. Of course, excellent tools and platforms like WordPress and some frameworks and IDEs make it much easier today than it was then.

    Today, you can build a website using WordPress and not be required to know any of those five languages. But as you say, it sure does help.

  17. 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):

    Color.
    Typography.
    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 …

    • Can’t disagree – Lightroom is amazing!

    • Dear Jenny,
      I graduated from a college program for design/development of websites. It has been non-stop learning ever since. You get up to speed on this language here’s another hot today language. People who have been designing for a period of time have their methods and procedures. Telling them they need to do something a certain way is like telling a Rembrandt, you know you should use this brush, and use that color and stroke it differently, imagine what Rembrandt is going to think of you.

      There are many, many great and wonderful websites out there some made by individuals and some made by teams of people who singularly don’t know the nuts and bolts and could not put a website together on their own to save their life. Example you say use a framework, learn to use it, why can’t I just continue to use a grid, at the pixel level on my graphics program, must I absolutely learn to use a framework, if I can produce the same result?

      I do not disagree with your suggestion but it is like your saying if you don’t know these things take down your title. I’ll admit I don’t have all those devises to know how to use them, but does that mean I can’t develop an effective site that has the user using a tablet or mobile device?

      It really is easy to say people should do this and that and you yourself don’t have to have to do that. You failed to mention databases, if you design for CMS sites you have to know how to work with whatever database is there. You see, we web designers are like lawyers and doctors who sometimes run into a problem they’ve never experienced before. We have to burn the midnight oil and learn what it is and how to use it effectively in the project. That is what we do. To know fully every single thing that’s required would take decades to learn and to that extent, that is why big corps put teams together, because no matter how much they search for the mythical unicorn, that guy/gal who knows everything about everything, already has a job and they’re happy and they aren’t leaving their positions.

      What this means is you take a person and you tell them what you need, what you want, and they will tell you if they can do that. You as the requester should not be concerned how it gets done or how complex the methods used are, your concern is the final product. It has to answer the question does the website communicate the message I am sending? That is the primary objective.

      You are well-meaning of course, but do not be surprised when you meet opposition, when you start telling the gifted what they should know or do.

  18. Great Post!

    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.

  19. 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.

  20. Excellent Ginger. Thank you. I love the “broad scope” this article embraces – especially the Print, Copywriting and Gift of Gab sections

  21. 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.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Get Started With Divi