Where to Learn Web Design for Free Right Now

Liam McKay May 25, 2021 · 8 min read

If you’ve ever dreamed of a career as a web designer, but don’t know where to start, or if you are simply looking for ways to sharpen your existing design skills or shift towards Web and UI design, the great news for you is that there is a huge amount of educational content out there which will get you comfortable with web design and best of all, much of this educational content can be consumed without spending a single cent.
To help make this wealth of free information easy to navigate, I have scoured the web and pieced together this list to showcase some incredible places to learn web design online completely for free. Nothing but straightforward, open & free educational resources without any catches.

UXPin e-Books

UXPin is a design tool intended to help you to create design prototypes that feel like the real thing. These guys clearly know a thing or two about design and they are not shy of sharing that knowledge. Their fantastic collection of Free e-Books is available to download directly to your email address. There is an impressive selection available, especially when it comes to content that relates to web, UI and UX design, covering topics such as responsive web design, UI components, design trends, and usability.

Balsamiq — Wireframing Academy

Planning any design is important, and learning how to wireframe before you dive into a project can be a useful skill and habit to pick up. Balsamiq is a popular wireframing tool that has been around for as long as I can remember. The tool itself is fantastic, but they also have a good number of free online resources to help you learn important design principles and wireframing fundamentals through the Balsamiq Wireframing Academy.

Design Tips — Steve Schoger & Adam Wathan

Education comes in many forms, and while we might all be used to long form articles, or extensive multi-part courses to take us on a journey when learning something new, this fantastic collection of short and sweet design tips comes in the form of a Twitter thread and as it turns out, it’s actually the perfect way to digest a bunch of incredibly useful micro-tips all at once. Steve manages to condense each tip down to just one or two sentences and posts each of them along with a before & after image example to break down each tip, so if you prefer a more visual learning style these series of tips could be perfect for you, and they are great to reference back to time and time again.

HTML & CSS Basics — CSS-Tricks

It’s a long running debate, should designers code? We won’t get in to that, but if you do want to add some front end development skills to your skillset it certainly can’t hurt. Designing a website prototype is one thing, but transferring that concept into working code is an entirely different challenge. CSS-Tricks is an authority on all things HTML & CSS and there’s new educational content added daily, but their Guides section is a particularly good destination for digesting information around a specific topic. Some of those topics that I can recommend checking out include: Just Starting Out with CSS & HTML for those new to code.

Don’t Fear The Internet — Basic HTML & CSS for Non-Web Designers

The goal of Don’t Fear The Internet by by Jessica Hische & Russ Maschmeyer is to be an introduction to HTML & CSS for designers who are looking to build a website for the first time. The 8 part series will walk you through the steps to “take a basic WordPress blog and manipulate the css, html (and even some php!) to match your aesthetic.” — You’ll get an introduction into everything from typography to css classes and layouts. The videos themselves are quite short and sweet, so it’s a brief introduction if that’s what you are after, but they still contain plenty of substance and serve as a great way to understand what the role of a web designer is.

Making Webpages — Khan Academy

Sticking with HTML & CSS again we look to Khan Academy, which is a non-profit organization famous for empowering people the world over with free education on a range of education fundamentals. While they are known largely for their maths and science content, the courses they offer go far beyond just that, and thankfully for us they have an Intro to HTML/CSS: Making Webpages course. This guide is extensive, and it even includes little projects and challenges for you to practise with.

Case Study Club

Case studies are a unique way of learning from the professionals as you get a detailed look at the thoughts and processes that went into designing, or redesigning a project and you can really see the journey that the designers took to get from start to finish. Case studies won’t teach you how to do the same, these are not tutorials, but they will give you a sort of ‘behind the scenes’ understanding of what it takes to successfully complete a project. Case Study Club curates some of the best design case studies on the web, and there are a number of web design related case studies available which makes it a perfect addition to our list here.

FreeCodeCamp

FreeCodeCamp as the name suggests is aimed at developers, much of their courses are front-end based, so it’s perfect for web designers and it also has a huge number of free articles that cover design theory and techniques too. The learn page contains all the courses, mostly code based of course, but using the search function on the site is incredibly useful and I was able to find a number of design focused articles for beginners, such as ‘Fundamental design principles for non-designers’ and ‘Learn basic UI Design in 5 minutes’ to just name a few.

Flux — Web Design Course 2020

Flux is a fantastic YouTube channel that caters for a wide variety of creative tutorials, while they are not all strictly all web design related, there are a lot of videos available on the topic or Web, UI and UX Design and related fields. I wanted to draw particular attention this web design focused playlist that Ran Segall, the owner of Flux, has put together for us called Web Design Course 2020 — Ran says this was created to offer a full and free web design course to anyone who wants it. This series does focus entirely on the visual design side of things (as it stands) covering some important points such as Color Theory, Typography, Software choices, Layouts & Structure and even Photos and Imagery for your website. It’s truly a brilliant way to get yourself familiar with designing for the web, and there’s plenty of other videos on the channel if you’re ready to dip into other areas of design too.

DesignCourse

Here’s another playlist on YouTube that includes a ton of free tutorials around web design. Again, the whole channel is really worth a watch (or a subscribe) — but I wanted to share this Design Tuts Playlist as it groups together lots of videos that are directly, or in-directly related to Web / UI design. The channel currently has an impressive 31 million views and once you are done with the design based content, you can find hours of footage covering front end development and other advanced skills that you can move on to once you are ready.

Refactoring UI

We’ve already talked about the incredible Design Tips Twitter thread from Steve Schoger & Adam Wathan, but for those looking for longer form step-by-step re-designs that you can learn from and watch in real time, you’ll likely find their Refactoring UI Playlist on Youtube very useful too. Essentially it’s the same kind of tips and tricks as the Twitter thread, but you get to a lot more context and information behind the design changes, as they are made. Hopefully through these video walkthroughs and you’ll pick up some important habits and principles that you can take with you and put to use on your own work in the future. There is a Refactoring UI website and a book too if you want to get more from Steve & Adam.

Where Do You Learn Web Design?

Let us know what we might have missed, if you know of any useful resource for free web design eduction that deserve to be on this list we’d love to hear about it using the comments below. If you’re interested in a similar list of resources geared toward graphic design in general, check out ‘Where to Learn Design for Free Right Now’ on our blog for more classes and inspiration.

Products Seen In This Post: