While university degrees help out with getting web designers into the job market, one needs to learn as much as possible before even getting into a web design program at any higher learning institution.
A big reason for this is that every design program at every institution varies greatly on how they teach and/or train their students.
At one large university, your studies might revolve more around design schools of thought, or developing an aesthetic taste of your own, with little hands-on technical training.
At another institution, you might be drilled on the nuts and bolts of everything from cutting matte board correctly for presentations to intricate tricks in Adobe Illustrator and Photoshop, but not as much about design theory and history.
When in doubt of what future schooling has in store for you, it never hurts to learn as much as you can beforehand.
Thankfully, there are a number or official and unofficial training courses online that can help you on your way.
Some are more beneficial to complete beginners, while others are invaluable to students on their way to becoming a professional, so there’s something for everyone.
Some cost money, others are free, but all have incredible value.
Udemy Courses
1. Web Design for Beginners: Real World Coding in HTML & CSS
This is a very basic class going over the basic structure and layout that web designers should be aware of.
It also goes over the basics of responsive web design, or a means of designing for both computer screens and smaller smart devices, the importance of using CSS for styling purposes and gives the beginner a solid grounding in the general vocabulary of the industry.
This relatively brief course, like all Udemy courses, requires purchasing, and has 11 hours of video training, as well as standard Udemy features, such as articles, downloadable resources, mobile access and a certificate of completion.
2. Ultimate Photoshop Training from Beginner to Pro
This course takes you from basic skills like learning how to use layers and brush tools and into making illustrations and print design materials.
It also goes into the fine art of photo retouching, using filters and effects to your advantage and is designed for the beginner.
It does require a one-time purchase, however, and the version of Photoshop used requires no earlier than the 2020 edition of Photoshop.
This course offers over 14 hours of instructional video, as well as standard Udemy features.
3. Master Web Design in Photoshop
Once truly familiar with Photoshop, this course can be especially beneficial.
This class dives into web design especially, going over not only the tips and tricks that Photoshop can help with, but also web design fundamental standards and practices, which is even more valuable.
This is, like all Udemy classes, a fee-based class, but is designed for any version of Photoshop since CS4.
This course takes you through 18 hours of instruction and examples, articles, resources, and the usual certificate of completion.
4. UX & Web Design Master Course: Strategy, Design, Development
This course gets more into the nuts and bolts of why we do what we for end users, in terms of design.
This is a more in-depth course than the previously mentioned classes, featuring almost 24 hours of video lessons and reference, and for good reason; it involves learning how to best serve your audience while taking advantage of your classic design education at the same time.
This course also begins to get into one of the most in-demand skills requested of web designers and developers: knowledge of content management system (CMS) editing and modification, with a section on WordPress, the most popular CMS platform on the web now.
5. Practical Web Design & Development: 7 Course in 1
For the budget student, this course gives a prospective student a lot of information for a cost-effective price.
The one weakness it has is that it is VERY brief, with only five hours of video training and lessons.
However, it goes over a very broad level of information, from Photoshop to CSS to Bootstrap coding.
This course is best utilized by a complete beginner who is not absolutely certain that web design is what they want to do as a career; if the student wants to continue, they’ll know enough to be dangerous, and if they do not want to continue, it’s a relatively inexpensive lesson that helps them on their way to finding what they really want to do.
6. The Complete Graphic Design Theory for Beginners Course
One of the shortfalls of many professional web design courses is a reliance on coding and computer app-based education.
What many tend to forget is that at the root of web design is the concept of graphic design itself, and it pays to have more than a working knowledge of the field.
This crash course features a brisk seven hours of training and example videos going over everything from layout design, color theory, identity/branding, typography, and other fundamentals.
7. Graphic Design Masterclass – Learn GREAT Design
This course features 20 hours of training and example videos, and builds upon the skills and knowledge in the previous course, where said skills and knowledge are put to practical application in everyday tools in the average designer’s kit, primarily in Photoshop, Illustrator, and InDesign.
8. Graphic Design Masterclass Intermediate: The NEXT Level
This is a great continuation of the previous course.
First, it builds on a theory level by getting more into design theory by exploring the Golden Ratio and other concepts.
Secondly, it touches upon other facets of graphic design that you might not even need for your everyday web design needs, but still nevertheless helpful (such as learning about package design and magazine layout).
Additionally,, this course goes in depth with personal portfolio creation, which is one of the most important things every designer must prepare and maintain.
Coursera Courses
9. Web Design for Everybody: Basics of Web Development & Coding Specialization
This course goes into a bit more depth than anything you’re likely to get from Udemy, as it is initially from the University of Michigan.
It is recommended to take three hours of lesson per week, which would take approximately six months to complete.
All things considered, you get into much more coding than the previous courses, especially in the JavaScript language.
10. Graphic Design Specialization
This course might be one of the most valuable you can take; this is a course on overall design theory and practice, and originates from the legendary CalArts, an extremely competitive school with a legendary pedigree of professional artists and designers.
This is where you go to learn about the importance and fundamentals of typography, 2D design, color theory, art history and more.
This course takes a good six-month timeframe to complete, but is well worth it…even for experienced designers who might like to experience the CalArts learning experience firsthand.
11. UI/UX Design Specialization
Another valuable course from CalArts goes into depth on user experience design.
This course takes roughly four months to finish, and culminates with a large final digital project that is designed to use everything (or close to everything) you’ve learned over the course’s history.
12. Build Your Portfolio Website with HTML and CSS
This is a very brief guided project, but one that should be on the forefront of every web designer’s mind.
If you wish to find employment in either a business or a design firm, or you wish to entice business as a freelancer, you have to have a home online that not only showcases your best work, but is also an operating example of your design prowess and gives your prospective clients/employers an idea of how you work.
edX Courses
13. Front End Web Developer Certificate
This seven-month collection of 5 courses is designed to make beginners into designers and developers, with an emphasis in HTML5, CSS3, and JavaScript coding.
The courses are run by instructors working in tandem with the World Wide Web Consortium (W3C) with backgrounds in both academia and corporations like Microsoft.
Khan Academy Courses
14. Unit: Intro to HTML/CSS: Making Webpages
Khan Academy has a helpful unit in part of its Computer Programming coursework that goes a little bit into the basics and explains very basically how to create a simple site.
That being said, there are not a lot of web design tools on Khan Academy, and those that are there are strictly coding-based, as opposed to teaching design itself.
Student Guide
Should you learn coding (HTML, CSS, JavaScript…) or only graphic design?
Just as there are designers who cannot draw well, there are designers who cannot code, and both types of designers can (and do) still flourish professionally.
That being said, no one ever lost a design contract or a long-term design position because they took the time learn how to code.
While there are many professional coders in the world, there are not that many who can code as well as design applications and websites to be used as intuitively as possible.
Learning both makes you more valuable as a contractor or an employee.
Coding knowledge plus graphic design knowledge is what is commonly referred to as interdisciplinary studies in academia, meaning that you are combining two seemingly unrelated areas of study, but these studies complement each other, and make your skillset in the workforce much more desirable.
Also, for many web designers, the design and build process becomes significantly faster once one learns how to code properly.
What tools should a prospective web designer use?
The tools you use, especially when working with one organization for a long-term engagement, are often not up to you to choose; you are often told what you will be working on.
In some cases, you may find that you need to brush up on applications that aren’t even being made anymore.
However, there are items you should probably be up to speed on regardless of an employer’s or a client’s mandates.
One toolset that no one ever talks about: reference books. This is not limited to books on coding; books on design history and theory should be on hand throughout your career.
Most design books are relatively easy to find and inexpensive to purchase, either new or used. In many cases, they can be significantly less expensive than coding books, which are always in higher demand.
For standard web design, you should have a good working knowledge of a number of Adobe Creative Cloud apps, such as Photoshop, Illustrator, Dreamweaver, and others, depending on your field of concentration (for example, you might be using Spark depending on your needs, or if you deal with shooting or editing video, you may need to know how to operate Premiere Pro and AfterEffects).
Creative Cloud is expensive in general, and is available only as a subscription, but students have significantly reduced (yet still expensive) price options.
If you choose to learn how to code, a robust code editing app can help you with visual aids and shortcuts.
If you are a Mac user, a program like CotEditor is beneficial, while Windows users have the ever-reliable Notepad++ at the ready; both of these apps are free to use.
If you are uploading files to an online server for a website, an FTP program is a necessity.
There are proprietary options, such as Cross FTP and ClassicFTP, and many open source/free options, such as FileZilla and FireFTP. You must learn how to use FTP programs.
One other item that is often overlooked, especially in a visually-oriented field such as design – accessibility standards.
Website information should be available to anyone visiting a site, and that includes people with visual and/or hearing impairment.
Thankfully, there is a website dedicated to explaining and notating global standards for accessibility, and it is updated regularly.
And it is operated by the World Wide Web Consortium (W3C). There are also in-browser tools you can use to help determine the accessibility of any page you design, such as the Web Accessibility Evaluation plugin (WAVE).
Mobile apps, responsive website design… do I need a specific course?
The widest variety of basic training is available to Udemy, but the best quality instruction is most likely going to come through Coursera courses designed by universities.
That being said, Udemy is probably the best place to start, but Coursera is where you want to go when you relly want to get serious about your education.
If you plan on going into mobile app development, you can start with basic coding in Swift for free, more or less, directly from Apple through games and free manuals.
As for responsive website design, any good course of HTML5 and CSS3 should go into a good amount of detail on the matter, as most of this is determined by CSS rules in some form or another.
Mobile development is probably going to be the next standard for web designers and developers due to the proliferation of mobile device popularity, and so while it’s not a requirement, a general knowledge of mobile app development is advisable.
UI / UX focused softwares like Adobe XD are often prominent in mobile app design.
What web design tips would you give a beginner?
- Design is design. Do not approach your work as if it is inferior or superior to another type of design; you and your print design colleagues are all working from the same basic design skillset.
- Begin with the purpose in mind. Every design is a solution to a problem.
- Take your time. Rome was not built in a day, and a slower, more deliberately built project almost always beats a hastily built project.
- Do not make the mistake of assuming that because a design course has little to no coding or computer work means that it is somehow not as important. Steve Jobs credits his calligraphy coursework at Reed College as being essential to the development of the original Mac’s interface, as it made him more aware of subtle aesthetics in the overall product.
- Your portfolio is key. Your portfolio website shouldn’t be the most impressive thing you’ve designed (that honor belongs to a few pieces in your actual portfolio), but it should be close. Even if you have no plans on being a freelance designer, you are still going to need to sell prospective employers on your talent and abilities. Even after you are initially employed, you will want to regularly update your portfolio.
- When working for an actual client, make sure that your design works best for the intended audience. Yes, you may have to add things that a client or supervisor insists upon, whether you like it or not (and that will continue throughout the years); overall, however, your expertise is in anticipating the needs of your audience and, if necessary, explaining those needs to your supervisors or clients.
- Be professional in your professional life. Reliably showing up on time, turning in projects on time, meeting a project’s mini-deadlines on time and having a reputation for being reliable will serve you well. If you are a student, start practicing now by sticking to a schedule and producing work in a reliable fashion (even if you are unhappy with it in the beginning).
- Much like healthcare professionals, your education is never done. Keeping up with technology, hardware and design theory will keep your mind fresh and open to adapting to new challenges.
Mac or Windows to begin designing websites?
This question has been a bigger issue in the past, and while the operating systems are interchangeable for a lot of professional concerns in today’s world, there are still issues to consider.
While most things can be used, one way or another, with both operating systems, your best bet, once you are working as a web designer, would be to have access to both, if possible.
That does not mean buying top-of-the-line computers for each operating system; that means using one computer with the operating system that you like, and having the least expensive option for the other operating system.
If you use a MacBook Pro, see about getting a used Windows laptop as well, or even a Surface tablet; if you prefer a Windows system, see about getting a new or used Mac Mini…maybe even a used iPad Pro.
The reasoning behind this is that there are times you will find that you need access to one for a client’s files.
For example, HEIC files (or iPhone photo files) can be difficult to open in Windows, even with Photoshop. Opening. Such a file in Mac’s Photos app, however, easily allows you to export such files to the JPG format.
On the other hand, you may run into a small business where everything they send is based on Microsoft files, and simply accessing text might require having access to a program like Microsoft Publisher, which is available only on Windows.
As obscure as these examples might seem, they do come up, and you need to be ready to roll with anything you are sent. Remember: the client wants what they paid for, not what works best for you.
He has been professionally designing websites and original media, both in print and in digital platforms, for almost 15 years.
He lives in the Mid-west with his wife and two dogs, and does not keep a personal social media handle.
