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<\/a> 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. 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<\/a>. 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<\/a> 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. It’s a long running debate, should designers code?<\/a> 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<\/a> is an authority on all things HTML & CSS and there’s new educational content added daily, but their Guides section<\/a> 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<\/a> for those new to code. The goal of Don’t Fear The Internet<\/a> 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. 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<\/a> course. This guide is extensive, and it even includes little projects and challenges for you to practise with. 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<\/a> 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<\/a> 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’<\/a> and ‘Learn basic UI Design in 5 minutes’<\/a> to just name a few. Flux<\/a> 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<\/a> — 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. 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<\/a> 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. 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<\/a> 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<\/a> and a book<\/a> too if you want to get more from Steve & Adam.
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19051907\/Learn-Web-Design-Free-UXPin-eBooks.jpg.webp\")
<\/p><\/span>Balsamiq — Wireframing Academy<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052039\/Learn-Web-Design-Free-Balsamiq-Wireframe.jpg.webp\")
<\/p><\/span>Design Tips — Steve Schoger & Adam Wathan<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052046\/Learn-Web-Design-Free-Design-Tips.jpg.webp\")
<\/p><\/span>HTML & CSS Basics — CSS-Tricks<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052052\/Learn-Web-Design-Free-CSS-Tricks.jpg.webp\")
<\/p><\/span>Don’t Fear The Internet — Basic HTML & CSS for Non-Web Designers<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052059\/Learn-Web-Design-Free-DFTI-HTML-CSS.jpg.webp\")
<\/p><\/span>Making Webpages — Khan Academy<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052106\/Learn-Web-Design-Free-Khan-Academy-HTML-CSS.jpg.webp\")
<\/p><\/span>Case Study Club<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052112\/Learn-Web-Design-Free-Case-Study-Club.jpg.webp\")
<\/p><\/span>FreeCodeCamp<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052119\/Learn-Web-Design-Free-FreeCodeCamp.jpg.webp\")
<\/p><\/span>Flux — Web Design Course 2020<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052125\/Learn-Web-Design-Free-Flux-YouTube.jpg.webp\")
<\/p><\/span>DesignCourse<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052132\/Learn-Web-Design-Free-DesignCourse-YouTube.jpg.webp\")
<\/p><\/span>Refactoring UI<\/span><\/h2>
\n![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2020\/07\/19052139\/Learn-Web-Design-Free-Refactoring-UI-YouTube.jpg.webp\")
<\/p><\/span>Where Do You Learn Web Design?<\/span><\/h2>