Have you ever caught yourself focusing on minor and repetitive tasks instead of doing what’s important? That would be the aftermath of poor organizational skills and workflow. A well-organized workflow is an important factor that contributes to a web designer's skill set. Many web designers turn to time-saving and useful tools and resources to automate their processes, which, in turn, gives them more time for creativity. Today we’re highlighting some of the best web designer resources to help you make that happen.
Table of Contents
Tools + Apps
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
- Quick Prototyping;
- User Interface Design;
- Wireframing.
Pros
- Quick and easy to use;
- Real-time collaboration;
- Offers high-fidelity and low-fidelity; prototyping.
Cons
- Limited free version;
- Not ideal for higher-fidelity mockups;
- Pricey.
Pricing
- Solo - $8.25/mo
- Pro - $19.08/mo
- 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
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
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
- 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
- Free
Web Design Libraries
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
Frameworks and Guidelines
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
Learning Resources
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
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
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
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
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
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
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
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
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
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
UI (USER INTERFACE) KITS
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.
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.
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.
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.
Newsletters
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.
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.
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.
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.
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.
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.
Wrap up
As a web designer, you are always on the lookout for shortcuts that can make your life simpler. Presented web designer resources and tools have already managed to help many designers to automate their workflows, cut down time-consuming tasks, improve collaboration, and so much more. You’re guaranteed to have a more productive and simplified work life and focus on what’s more important.
About Softr
Softr is an easy-to-use no-code platform that turns Airtable bases into powerful web apps and client portals. Softr offers a way for you to authenticate your end-users, control access to your content and data based on conditional rules like roles, logged-in status, subscription plans etc. If you're using Airtable as a product catalog you can use a Softr template to build your e-commerce website. Or maybe you'd like to build a custom website for your travel journal, there's a template for that too!
