Best 8 Web Design Courses Online 2024 - Guide & Reviews
Top web design courses covering all the major elements of web design including Typography, Responsive Web Design, Wireframing, and much more.Web design can be a complex subject that involves a multitude of skills and challenges. As a full-time freelance web designer and app developer of 15+ years, many people have asked how they can get started in web design and how to stay up-to-date with such a fast-paced industry.
I've put together this list of the best courses and learning resources for (1) people new to the industry, and (2) developers who want to refine their design skills.
Best web design courses for 2022:
- The Complete Graphic Design Theory for Beginners Course (Udemy)
- Master Photoshop for Web Design (5 courses) (Linkedin Learning)
- DESIGN RULES: Principles + Practices for Great UI Design (Udemy)
- Web Design: Strategy and Information Architecture (Coursera)
- Advanced Styling with Responsive Design (Coursera)
- Introduction to Typography (Coursera)
- Landing Page Design & Conversion Rate Optimization (Udemy)
- Seth Godin's Freelancer Course (Udemy)
A couple of honorable mentions:
UI & Web Design using Adobe Illustrator CC (Udemy) - I found this to be a great intro to Adobe Illustrator for Web Design. Daniel Walter Scott has a very enjoyable and fast-paced teaching style while still being very thorough and concise.
Running A Web Design Business (Udemy) - This course will teach you about running your own business and dealing with clients. As someone who's been working professionally in the field for many years, I found this to be an accurate and solid resource for people new to freelancing/contracting.
*Full disclosure: purchases made through some of the links on this page may result in a commission. Thanks in advance for helping support this site!
Elements of Web Design
The courses in this list cover the major elements of web design. This includes:
- Typography - the art and technique of arranging type to make written language legible, readable, and appealing when displayed
- Responsive web design (RWD) - adapting your layout to the viewing environment by using fluid, proportion-based grids, flexible images, and breakpoints
- Wireframing & prototyping - create visual guides that represents the skeletal framework of your site
- Principles of good design - core design principles that translate to virtually all design-based mediums - including web design - that one must know to create beautiful and intuitive layouts
- User experience research - the process of enhancing user satisfaction with a product by improving the usability, accessibility, and desirability provided in the interaction with a product
- Tools of web design - Photoshop, Illustrator, InDesign, etc.
- Conversion optimization - systems used to increase the percentage of visitors to a website that convert to customers
- How to do great work and have a long-lasting career - learning the skills needed for web design is only part of building a career, you also need the mindset and know-how to build your own brand, acquire the right kinds of clients, and push yourself to do truly great work
Web design is a complex subject and no single course teaches everything necessary. The following courses are not ranked against one-another, but instead are recommended because each one tackles a specific skill-set needed for web design. At the end of this course list I provide a few free resource links as well as helpful notes on how to choose a web design niche, typical freelance rates, and other tips.
This is a really solid graphic design course that will gently introduce you to the basics of design. This course is not specific to web design but I would highly recommend starting with it as your first introductory course to graphical design before moving to more domain-specific web design courses.
- 4.5 star rating
- 5 hours of video content.
This is a beginner level introduction to the world of design - if you already understand basic color theory, typography, composition, and other basic graphic design concepts - I'd suggest moving on to some of the other more domain-specific courses below.
Curriculum:
- The Basics of Graphic Design
- Color Theory
- Typography
- Layout
- Composition
- User Experience
- Branding
- Logo Design
- Photography in Graphic Design
- Modern Trends and Themes
- The Legal Side of Graphic Design
This course series teaches all the skills necessary for responsive web design using Adobe Photoshop.
Most web designers use Adobe Photoshop, Adobe Illustrator, and Adobe InDesign. Since Photoshop is the most commonly used all-around tool for photo editing, general graphic design, and UI design it's a mandatory skill to start with. Once you've mastered these basics you will likely eventually want to look into learning Adobe Illustrator and Adobe InDesign.
This is one of the most comprehensive course series available that focuses on web/UI design rather than graphic design, logo design, or photo editing. I'd highly recommend it as your first intro to using Photoshop as a Web Designer.
- About 6 hours of content
- 5 courses to mastery
Curriculum:
- Photoshop for Web Design
- Web Design: Efficient Workflow
- Creating Optimized Web Graphics
- Modular UX Design with Photoshop
- Photoshop for Designers: Designing with Grids and Guides
This course thoroughly covers many mistakes that new designers make. It’s less about the tools and more about the underlying principles behind design.
The instructor has 27+ years experience in UX and UI design and has a clear, real-world approach to helping you learn proper design principles.. You’ll learn what makes great UI design, how to come up with good, brand-specific UI designs, and the difference between being a "decorator" vs. a real designer.
This course is a bit less flashy in terms of video production quality in comparison to other courses in this list, however there are many extremely important principles that Joe Natoli mentions that takes designers years to learn on their own.
Overall, this course is great for both beginners and those looking to bring their design skills to the next level. No prior knowledge is necessary however general familiarity with graphic design and/or UI design is ideal before digging into this course.
I would highly recommend not skipping this course.
- 4.7 star rating - over 10K students
- 5 hours of content - broken into 50 short, digestible lectures.
Curriculum:
- Ground Rules: What You Need to Know Upfront
- Organizing Visual Information
- Using Color and Contrast Appropriately
- Designing with Typography and Imagery
- Creating and Simplifying Visual Cues
- UI Design Mantras
Taught by Roman Jaster at the California Institute of the Art, this course focuses on usability, user research, information architecture/wireframing, and prototyping.
This comprehensive curriculum is ideal for those who already have some previous graphic design experience (or web/software developers) and who are looking to add UI and UX design/strategy to their skill set.
This course walks you through creating a real-world project and the pitfalls and gotchas of large scale site strategy. I highly recommend this course for anyone who wishes to work on large-scale, content-rich sites.
- Intermediate level
- 4.8 Star rating
- Approx. 31 hours to complete
Curriculum:
- Different job descriptions in the web design industry and where UX and UI skills fall within this spectrum
- How to design contemporary, responsive websites
- Complete the first half of a large scale project—developing a comprehensive plan for a complex website—by defining the strategy and scope of the site, as well as developing its information architecture and overall structure
- The difference between native apps and websites
- The difference of agile vs. waterfall approaches
- User personas and site personas
- User testing
This is a beginner level intro to responsive development geared more towards helping designers understand how grids/columns and fluid layouts can work across any screen layout - it's recommended that you have a basic understanding of CSS and HTML before starting.
Though this course teaches some very basic CSS/HTML code, it's extremely important that web designers understand how their designs will be utilized in code. Even if you don't plan to learn web development, an intro course for responsive development is a must to properly round out your web design skills.
Furthermore, the course also heavily covers Twitter's bootstrap grid system which is one of the most popular responsive grids used by front-end developers.
- 4.7 Star rating
- Approximately 10 hours to complete
- 31K+ students enrolled
Curriculum:
- Learn how to explain the mobile-first paradigm and the importance of wireframes in the design phase
- Create sites that behave across a range of platforms
- Utilize existing design frameworks such as Bootstrap
I really enjoyed the coursework here; the materials are extremely well-done and succinct, and even after many years of design I still found value in this course. This is definitely a "must" for anyone interested in web and graphic design.
Not only will you learn about type anatomy and how to select and combine different typefaces, but you'll also discover the rich historical, cultural, and aesthetic histories of common typefaces.
You'll learn time-tested best practices in type setting, as governed by the principles of hierarchy and spatial organization.
- 4.8 star rating
- 57K+ students enrolled
- 8 hours to complete
Syllabus
- Week 1: Talking Type
- Week 2: Typefaces and their Stories
- Week 3: Putting Type to Work
- Week 4: Making Meaningful Type
What you'll learn:
- Conduct a peer-reviewed typesetting exercise
- Design of a full-scale typographic poster
- Explore how typefaces tell stories and understand the historic evolution
- Review the terminology and measuring system used to describe type
Isaac Rudansky has created one of the best conversion rate optimization courses for landing pages out there. He speaks less to great design principles or design tools and instead focuses completely on the art of conversion.
There are numerous great tidbits throughout this course. I've run many real-world conversion campaigns and optimization tests/studies over the years and can say without a doubt that Isaac definitely knows his stuff.
This course is great for building your optimization/conversion expertise.
- Contains around 10 hours of content
- 4.7 star rating with over 25K students
This course covers:
- How to implement persuasion frameworks like scarcity, reciprocal concessions and cognitive dissonance theory in your landing page design
- How to write headlines and calls to action that will motivate your users to act instead of turning them off
- How to design an action block with a clearly defined conversion goal
- How to triple your conversion rates by using the principles of readability, simplicity, perceived value and clarity in your landing page design
- How to run professional usability tests on a tight budget
- How to build a landing page from scratch on a custom domain without writing a single line of code
- The Fogg Behavior Model and how it applies to good landing page design
- Why understanding the AIDA sales funnel is so important in conversion rate optimization
And last but not least - this course is geared towards helping you find clients and create your own brand and do great work that you can be proud of.
Seth Godin is a very well-known and highly-respected author and lecturer who helps freelancers build lucrative, long-lasting careers.
If you are thinking of making a career out of web design, Seth's course is a must to understand how to attract and retain the right kinds of clients.
- 4.7 star rating - 23K+ students
- 4.5 hours of video content
What you will learn:
- Master how to make your work unique, create a well-known brand, find clients, and increase demand for your products or services
- Understand what it takes to be more than the average freelancer
- Turn professional and make a commitment to finding better clients and doing better work
What defines web design?
Web design is a mix of graphic design, UI design, and web development. You design specifically for websites (and often mobile apps/software). You need to think about how your design functions, who you are designing for, what devices will be accessing your work, limitations of network availability, brand style, and many other aspects.
Web design is not necessarily web development, and it's not uncommon for professionals to do both. However, the term web designer refers to someone who utilizes design software such as Photoshop/Illustrator/InDesign/etc. to design layouts that are handed over to a development team, who then convert the design into the final, functional site.
Web/software design is an extremely broad and complex subject, covering many varieties of traditional design, typography, user research, and art. It can be a very satisfying career path with endless learning opportunities while having a relatively low barrier-to-entry.
Web designer is often a catch-all term used for UI Designers as well (although technically web design is a subset) - user interface design is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.
Focusing on a niche can help you stand out
Within the web design industry there are many subsets that designers often niche into - it is worth considering what niche you are most attracted to and build a solid portfolio for this niche when getting started.
Here is a small sample list of niches within the web design industry:
- E-Commerce sites – showcasing products, pricing, sales, shopping carts, etc.
- High conversion landing pages – designs focused on the user experience and achieving higher conversions through tactics such as unique/limited time sales, trust symbols, key user reviews, authenticity of branding, A/B test options, up-sells, etc.
- Small business/local sites – Restaurants, salons, cafes
- Content first sites – Blogs, news, scientific journals
- Medical – Hospitals, dentists, medical equipment
- Data based layouts featuring control panels and tabular/complex data – admin panels, calendars, calculators
Expected Rates (in USD)
Freelance rates can vary greatly due to many variables including; location, who you know, your reputation, your portfolio, brand names you have worked with, and many other factors. However, during my 15+ years of working in the industry, helping clients hire additional designers, and talking with colleagues, the following is roughly what I expect to see when evaluating designer portfolios in the USA and Canada:
Typically junior designers would charge around $35-$45/hour, intermediate designers with a couple years experience usually charge around $60/hour.
I've known some A-list designers who bring in $150+ hourly. Personally, I charge around $100/hour and get more work than I can handle. That being said, I primarily work as a developer, so even with nearly 20 years of design experience, I don't consider my design to be top A-list level.
A few extra materials
Here are a few must-use sites for inspiration, showcasing your work, communities, learning, and popular design tools.
Awwwards - Awwwards recognizes and promote the best of innovative web design (bare in mind, the most awarded sites are often the prettiest - not the most user friendly or usable)
Dribbble - A place to showcase your work, find jobs and look for inspiration
Behance - A service owned by Adobe. Most designers maintain their design portfolio on Behance's platform
Nielsen Norman Group - My favorite site for useful, research-backed UX studies and articles
Photoshop's Official YouTube channel - Great resource to stay up-to-date on the latest Photoshop features, as well as tons of tutorials on how to accomplish just about anything in Photoshop
Shutterstock - My favorite stock photography site - millions of photos, many truly beautiful works, you can purchase a recurring subscription if you use stock imagery regularly
Lorem Ipsum Generator - This is one of many free placeholder copy generators, lorem ipsum (placeholder text) is a must for any designer (Photoshop also has a built-in command to auto-generate lorem ipsum text: Type > Paste Lorem Ipsum)
Typewolf- What's trending in Type, curated type inspiration from the SOTD (Site of the Day), virtually endless typography inspiration
Google Fonts - Completely free fonts from Google (many clean font options, though not quite as beautiful as some premium font resources). Very easy to integrate on the web with their embed options
Smashing Magazine - Smashing magazine regularly has in-depth tutorials and articles discussing web design (and other design/development topics) written by real-world professionals in the field
A List Apart - Quality articles exploring design, development, and the meaning of web content - specifically focusing on web standards and best practices
Color Hunt - Free and open list of thousands of gorgeous color palettes to fit any mood
SnazzyMaps - Most sites need a map, with Snazzy Maps you can quickly find a map that fits your brand
/r/web_design - Reddit design community for people interested in web design - good for getting critiques and asking questions with a large community of nearly 400K designers. /r/webdev and /r/web_design also have an active discord channel linked in the subreddit
Meggs' History of Graphic Design (Book) - This fascinating book presents an all-inclusive, visually spectacular account of the people, events, and signal creations that have shaped the field of graphic design. I'd suggest getting the hardcover version, this is a gorgeous book that you'll likely keep returning to.
Wrapping up
While taking the courses listed above, make sure to practice by creating your own design mockups. You can either make sample mockups for well-known brands or come up with fictional brands to practice putting all these ideas into your own works. Once you have a solid grasp of the basics try reaching out to family or friends to build your first few real-world designs and begin building your portfolio.
Remember to have fun, and best wishes on your web design journey!
