1. Lunacy

We’ll start with bigger and more popular must-have tools for web designers. Lunacy is a free alternative to Sketch, a vector graphics editor only available on macOS, for Windows. It’s a fully functional design software, offering all the standard features of UI. Lunacy has screen design tools and a free library of high-quality graphic assets. It also includes full support for Sketch files, if you choose to switch from Windows to Mac.

Features

• User Interface Design;
• Collaboration;
• Wireframing;
• Prototyping.

Pros

• Cross-platform app;
• Low system requirements;
• Built-in graphics;
• Real-time collaboration;

Cons

• No cross-application import/export of other file formats;
• Lacks prototyping features.

Pricing

• Free

2. FluidUI

FluidUI is a design tool perfect for prototyping and building UIs. The tool enables prototyping and wireframing for desktop and mobile. FluidUI is widely known to enable fast prototyping with built-in elements with great interaction functions. You can even share prototypes with your teammates via email or share links to get immediate feedback.

Features

1. Quick Prototyping;
2. User Interface Design;
3. Wireframing.

Pros

1. Quick and easy to use;
2. Real-time collaboration;
3. Offers high-fidelity and low-fidelity; prototyping.

Cons

1. Limited free version;
2. Not ideal for higher-fidelity mockups ;
3. Pricey.

Pricing

1. Solo - $8.25/mo
2. Pro - $19.08/mo
3. Team - $41.58/mo

3. Marvel

Marvel is an all-in-one prototyping tool for bringing all your ideas to life. Marvel has many features, several integrations among which is the integrated user testing feature, which is highly important but rare among web design tools. But Marvel doesn’t stop there, it also enables real-time collaboration and handles all the design stages from prototyping to hand-off.  

Features

• Prototyping;
• User Testing;
• Collaboration.

Pros

• Integrated user testing features;
• User-friendly interface.

Cons

• No offline option;
• Handoff does not include HTML;
• Limited free version.

Pricing

• Free
• Pro - $12/mo
• Team - $42/mo

4. Webflow

This won’t be the last time we mention Webflow. Webflow is one of the best no-code tools often used by pro and beginner web designers, and non-designers to bring their ideas to life with ease. Webflow allows you to build digital products of different complexities and without code. The best part of the platform is the high level of customization and dozens of responsive templates. The limitless possibilities of Webflow allow you to build anything you have in mind, and it also has various integrations which widen the horizon. Nevertheless, if it's not really your cup of tea, there are some Webflow alternatives worth considering.

Features

• API;
• Third-Party Integrations;
• Customizable Branding;
• Activity Dashboard;
• Reporting & Statistics;
• CMS.

Pros

• Highly intuitive;
• Customization features;
• Directory of clonable projects;
• Fast layout design.

Cons

• Steep learning curve;
• Pricey;
• No live chat available.

Pricing

• Starter - Free
• Basic - $12/mo
• CMS - $16/mo
• Business - $36/mo
• Enterprise - custom

5. Vectr

Our next web designer resource is Vectr. Vectr is a cloud-based illustration tool that enables creating both simple and complex illustrations, designing websites and mobile apps, and much more. The tool has a short learning curve with a simple drag-and-drop editor with which you can create, edit beautiful designs, blur-free logos, presentations, cards, and brochures.

Features

• Arrange elements;
• Shape tools;
• Align elements;
• Gradients;
• Pathfinders;
• Fills and strokes;
• Pen tool.

Pros

• Cloud-based;
• Real-time collaboration;
• Wide-set of design tools and features.

Cons

• No import functions are available;
• Many distractions and ads;
• Works solely online.

Pricing

• Free

6. Softr’s SVG Wave and Shape generators

SVG icons and illustrations take a massive part in the web design process. Softr’s wave generator will help you create colorful, simple, and complementary waves to add more peculiarity to your design. The tool is fully customizable, helping you generate waves in seconds. Softr also offers an SVG shape generator which is pretty similar to the first tool but for generating random organic-looking shapes with different angles, complexity, and so on. Same as the wave generator, the tool is login free, and with the availability of SVG and PNG formats. You can use both generators to add more peculiarity to your home page, product pages, landing pages, and more.

Features

• Creating SVG waves and shapes;
• Changing the number of waves/angles;
• Complexity, height, colors, and gradient.

Pros

• No registration needed;
• SVG, PNG formats are available.

Cons

• None detected

Pricing

• Free

7. ShortPixel

Our next web design resource will be for sure one of the handiest ones. Short Pixel is an image compression tool enabling you to speed up your website by compressing images up to 90% without dropping the quality of the images. More than 7 million images have already been compressed, resized while keeping them smaller and visually similar to the original images.

Features

• Optimization for all files;
• Automatic & bulk optimization;
• One-click backup & restore.

Pros

• Easy to use;
• No file size limit.

Cons

• None detected.

Pricing

• 100 images/month - Free
• 7000 images/month - $3.99/mo
• 16000 images/month - $8.33/mo
• 55000 images/month - $24.99/mo
• 100000 images/month - $41.66/mo
• 220000 images/month - $83.33/mo
• 16000 images/month - $8.33/mo
• 2 millions+ - $350/mo
• 4 million+ - $500/mo
• 16 million+ - $1000/mo

8. Coolors

Color palettes are an inseparable part of the web design process. So we thought we could automate your process with a color palette generator. This web design resource is all you need to create a palette and color combinations that tell your story and compliment your brand voice. Coolors is pretty simple; it gives you a set of colors and once you “lock” it by clicking the button, the tool generates the matching colors to create the color palette. The freemium tool also allows you to create a palette from photos, generate collages, and much more.

Features

• Contrast checker;
• Color picker;
• Changing colors on SVG images;
• 10k+ color schemes on the free version/ 5M+ ready color schemes in the pro version.

Pros

• Highly adjustable;
• Easy to use;
• Most of the features are available on the free version.

Cons

• Too many ads.

Pricing

• Free
• Pro - $3/mo or $36/yearly

9. Material Design’s Color Tool

Material design’s color tool allows you to create, and apply color palettes to your UI, measure the accessibility level of color combinations, and much more. The tool is pretty simple but highly important to visually understand how color combinations work on UI. You just choose a primary and secondary color from the color palette to represent your brand. Each color's dark and light variants can then be applied to your UI.

Features

• Color themes;
• Hierarchical, legible, expressive principles are available;
• Light and dark themes.

Pros

• Easy to ease;
• Highly customizable;

Cons

• None detected.

Pricing

1. Free

10. FontJoy

Next up is Fontjoy, a font combinations generator. Created by Jack Qiao, Fontjoy is a simple web tool that leverages machine learning to help you select the perfect font combination. All you need to do is "Generate" a new font pairing, "Lock" fonts you want to preserve, and "Edit" manually by selecting a font.

Features

• Font activation;
• Font pairing.

Pros

• Easy to use;
• Customizable.

Cons

• None detected.

Pricing

11. Subtle Patterns

Subtle Patterns is a website that offers a collection of over 300 free downloadable patterns. Users can post the patterns in their blogs, use them for commercial projects, or post the CSS/code version of the pattern. The only requirement is to give credit to Subtle Patterns.

Features

• Library of patterns and textures;
• Photoshop plugin.

Pros

• Easy to use.

Cons

• The Photoshop plugin is not free.

Pricing

• Free
• A single license with a 30-day money-back guarantee for $11.99 on the Photoshop plugin

12. Pattern Library

A library by Tim Holman and Claudio Guglieri. This ongoing project compiles patterns shared by the most talented designers out there for you to use freely in your design.

Features

• A library of downloadable patterns.

Pros

• You can add your patterns.

Cons

• Will be difficult to navigate at first.

Pricing

• Free

13. Google Fonts

Now, we’ll smoothly move to the next important web design asset – fonts. Like color palettes, fonts are a big part of your work and we are here to help simplify the process with a few tools. The first one is Google Fonts. It’s an open-source free library of fonts to help you bring personality to your brand and products. You can find 1,365 licensed font families and APIs for convenient use on IOS, Android, and the web.

Features

• Fonts available in 135 languages;
• Analytics on fonts’ usage and demographics.

Pros

• Collaborative;
• Allows to customize fonts by families, weights, and scripts;
• Easy to use.

Cons

• None detected.

Pricing

• Free

14. Undraw

One of our go-to places to find free SVG illustrations is unDraw. Here you will find a great collection of trendy yet simple illustrations on various topics that are entirely free and open-source. You can also change the primary color of the SVG images to match your existing palette.

Features

• Wide range of SVG illustrations.

Pros

• Open-source;
• Easy to use.

Cons

• Lack of customization.

Pricing

• Free

‍

15. Material Design

Material Design is a Google visual language that strives to integrate traditional design concepts with technological innovations to provide a flexible foundation for your website. Websites and apps built with the tool look modern and responsive, making it easy for users to engage with your product right away. There are numerous tools available to assist with design systems and much more to look forward to.

Features

• 3D effects;
• Animation features;
• Platform-consistent GUIs.

Pros

• Flexible;
• Self-contained UI components;
• Responsive layout.

Cons

• Steep learning curve;
• Poor UI.

Pricing

• Free

16. Ant Design

Ant is a distinct design language that appears and feels completely different from Material Design. The framework is user-friendly, with an extensive toolbox where you can find all the components you need to get started on your projects right away. Ants' designer resource package, along with well-executed documentation, makes the framework 10x better.



Features

• Wide range of design and user input components;
• Comprehensive guidelines.

Pros

• Responsive layout;
• Typescript friendly;
• Frequent updates.

Cons

• The bundle size is large;
• Users have issues with theming and testing.

Pricing

• Free

17. Grommet

Grommet is a part design system, part framework, and provides a vibrant, eye-catching feature toolkit and the code that supports it. It is one of the more customizable design languages on the market, with CSS Grid and Flexbox compatibility, and also has a comprehensive set of components for making your interfaces more accessible.

Features

• Easy to use component library;
• Powerful theming tools.

Pros

• Easy to use;
• Open-source.

Cons

• Lack of customization.

Pricing

• Free

18. Gymnasium

Gymnasium is our first web design learning resource. Gymnasium has a wide range of free courses on web design and development, UX, prototyping, and more. The courses are updated regularly and won’t take long for you to complete them. You can even pass exams, get a certification, and much more.

Duration: 3-6 hours

Topics:

• HTML & CSS;
• Responsive design;
• JavaScript;
• Modern web design;
• Infomration design & visualtazion;
• UX & UX fundamentals;
• Rapid Prototyping.

Pricing

• Free

19. Webflow University

What’s better than a web design resource containing a range of courses for beginner and pro web designers? Webflow is one of the best and top no-code tools heavily used by web designers to build custom blogs, eCommerce stores, portfolios with flexible CMS, and much more. The greatness of Webflow doesn’t stop there. They even offer free courses on HTML, CSS, CMS essentials, and much more. The courses are tailored for both beginners and advanced designers. We would highly recommend starting with “The Ultimate Web Design Course”.

Duration: Spans from 20 minutes to 6 hours.

Topics:

• HTML & CSS basics;
• Web structure;
• Buttons;
• Typography;
• Components;
• Layout basics;
• Styling basics;
• Responsive design;
• CMS & dynamic content.

Pricing

• Free

20. Skillshare Online Web Design Classes

If you’re looking for something considerably affordable and creative, Skillshare's web design classes are just right for you. The best thing about Skillshare is the subject-oriented, courses curated by skilled experts that bring a unique approach to learning web design fundamentals. There are many courses on web design but we recommend checking out “User Experience Design Essentials - Adobe XD UI UX Design” and “Digital Design: Creating Design Systems for Easier, Better & Faster Design”.

Durations: Spans from 50 minutes to 12 hours

Topics:

• HTML & CSS essentials;
• UI/UX Design essentials;
• Responvie design;
• Digital design;
• Webflow;
• Figma.

Pricing

• Free
• Premium - $40/mo or $216/yearly

21. OpenClassrooms Course: Build Your First Web Pages With HTML and CSS

Next up we have OpenClassrooms free introduction course, which is perfect for beginners who feel lost in the huge pile of information streaming at them all at once. The course begins from HTML5 and CSS3 fundamentals and smoothly moves on to more complex topics. Have we mentioned the course is also free?

Duration: 10 hours

Topics:

• HTML5 and CSS3 fundamentals;
• Page structure and SEO;
• Image optimization;
• Block and inline elements;
• Fonts;
• Color theory;

Pricing

• Free

22. The Responsive Web Design Bootcamp

This next course is perfect for designers who are ready to upgrade their professional level in responsive web design. The course is the only one you need to learn all about responsive web design. The Bootcamp includes 173 lectures (overall 15 hours of content), interactive challenges, and even a certificate of completion. The Bootcamp might be pricey for some but we got your back. There is a tutorial available on Youtube “Introduction To Responsive Web Design - HTML & CSS Tutorial”. The tutorial is a part of the Bootcamp and will serve as a great start for your journey.

Duration: 15 hours

Topics:

• CSS fundamentals;
• Responsive thinking;
• Styling;
• CSS Grid.

Pricing

• Free
• PRO dev - $16/mo

23. Treehouse Web Design Track

Next up is the Treehouse web design track which is a series of courses tailored to help you learn the fundamentals of web design starting from HTML and CSS to more complex aspects like mobile-first, responsive layouts, and much more. Treehouse’s tutorials and resources will be great for those who are just starting but want to quickly get up to pace.

Duration: 41 hours

Topic:

• HTML and CSS basics;
• Responsive and mobile-first design;
• Flexbox, Bootstrap, transforms, and more;
• Prototyping.

Pricing

• Courses - $25/mo
• Courses Plus - $49/mo

24. Code Academy’s Web Design Courses

Code Academy is one of our favorite learning platforms. It has all beginners and skilled designers need to reach higher levels of success. You will find various articles, tutorials, and curses curated to help you regardless of where you are on your professional paths.

Duration: Spans from 4 to 30 hours

Topics:

• HTML;
• CSS;
• Bootstrap;
• Responsive Design;
• Color Design;
• Navigation Design.

Pricing

• Free
• PRO Courses - starting from $15.99USD/mo

25. Web Design for Everybody – University of Michigan Coursera

It wouldn’t be right to have a list of web designer learning resources and not mention a single course on Coursera. Coursera is the platform that will certainly provide you with the right courses, experts to help you upgrade your skills. That’s what the “Web Design for Everybody” course does. Covering topics from HTML, CSS fundamentals to responsive design and JavaScript, the course is tailored for beginners and will be enough to learn the most important aspects of web design. Though the course's duration is estimated to be six months, it’s self-paced so you got all the time you need to digest the given information.

Duration: 3 hours/week

Topics:

• HTML5;
• CSS3;
• Interactivity with JavaScript;
• Advanced styling with responsive design.

Pricing

• Free

26. Domestika's Design, Development, and Launch of a Website

Next up we have one of the best courses on Domestika by web design expert Javier Usobiaga Ferrer, “Design, Development, and Launch of a Website”. With 27 lessons in the curriculum, you manage to gain vital knowledge on visual design, front-end development, and much more. But it doesn't stop there, and you even get 33 additional resources and compilation certificates

Duration: 3 hours

Topics:

• Visual design;
• Frontend development;
• Publication of a website;
• Ideation of website;
• Template system;
• Web interaction.

Pricing

• $11.99USD

27. Don’t fear the Internet

The last web design resource is pretty peculiar in its teaching methods. “Don’t fear the Internet” is meant for web designers, photographers, and any creative person who wants to be better at what they do and contemporize their work online. You get a set of helpful tutorials, resources, and articles on various aspects of digital design. You’ll master working with HTML and CSS, web typography and much more to reach your aesthetic goals of building a responsive website.

Duration: Spans from 3 to 15 minutes

Topics:

• HTML & CSS;
• Responsive web design;
• Layout & styling basics;
• Web typography.

Pricing

• Free

28. Boomerang free Bootstrap web UI kit

Web design is more than just aesthetics. The way a website's UI "feels" to the user is equally important. The following UI kits will assist you in ensuring that your UI design is on point. Boomerang is a high-quality UI kit built on the Bootstrap 4 Framework that includes a variety of features and controls to expand the color palette and add gorgeous typography.

29. The Biggest free UI kit

Next up is the Biggest free UI kit by Krasi Stoimenov. The name of the course speaks for itself; you get 450+ premium assets for free. The UI kit includes Google fonts, vector graphics, with all the assets being pixel perfect. Though there are many assets on the display you won’t have a hard time crawling through the kit since Krasi made sure it's easy to use, with a clear file structure and perfect layer organization.

30. Web UI framework Sketch resource

This web UI kit was created by the Toptal team. It’s a part of their how-to guide on building an effective design framework. The UI kit might be a little confusing at first, that’s why we highly recommend you check out the guide to use the kit to its core.

31. Universal web UI kit + free version

It’s a UI package with 523 universal, personalized and minimal UI components. The UI kit is fully customizable with a well-organized layout. Additionally, the files contain two colors and fonts (Graphik and Roboto Slab&Lato) to help you create modern online stores, blogs, online media, and much more.

32. Sidebar

Sidebar is your go-to web design newsletter if you want to stay updated and get the best info possible. By subscribing to Sidebar, you get five design links daily. You get fresh articles on web design, cool portfolios, a CodePen demo, and much more, all hand-picked by numerous curators. If you also have a cool link you want to share with fellow designers, check out the guidelines here.

33. Creative Market

Another highly recommended web designer resource is the Creative Market newsletter. Once a week, Creative Market’s subscribers get 5 free downloads, including unique templates, themes, fonts, patterns, and much more. If you’re looking for some inspiration, Creative Market’s website will come in handy. You can discover around 4+ million web design resources created by artists all around the world.

34. Responsive Design Weekly

RWD is a weekly roundup of the best web design articles, tools, tutorials, and much more.  Justin Avery is the person behind RWD, who spends hours curating the best content, interviewing industry experts, and sending it all to you on Friday; all for free.

35. Hack Design

Hack Design is one of the must-have web design resources to subscribe to no matter the level of expertise. More than 395,000+ designers get weekly design lessons, handcrafted by pros and all for free. If you feel lost and want to get all the previous lessons in one place, here is the page where you can find 100+ design lessons for proficiency.

36. The UX Newsletter

Our next design newsletter is by Mailchimp. Subscribers get UX research and design stories on a monthly basis. The UX newsletter will be handy if you want to learn more about translating data, patterns, systemic design, and all of the other aspects related to UX.

37. Dribbble Newsletter

Dribbble’s newsletter drops periodic updates, news, and design inspiration directly to your inbox. Dribbble’s team makes sure to only share the most important and fresh news with their subscribers, making the newsletter one of the best and most important ones.

38. The UX Collective Newsletter

The UX Collective is a weekly, ad-free newsletter curated by UX designers. So, anytime you get a new issue from them be sure you’re getting what’s actually must know and up to date. The newsletter doesn’t only share information with you on web design, it also challenges you to think outside the box and critically to make you a better expert.

‍

39. The Smashing Email Newsletter

Smashing’s newsletter makes sure their subscribers get a bulk of highly useful tips and tricks on front-end and UX every Tuesday. The fun doesn’t end there: you also get a Vitaly's Interface Design Checklists PDF as a little gift. The newsletter keeps ads to the minimum, doesn't have third-party mailings or hidden advertising. All to provide the best web design resources without distribution.