20 Free Web Design Tools from Spring 2022

Free resources from the design community can improve a web project.

Here is a list of new tools and design elements from spring 2022. This list includes project collaboration tools, site generators, API resources, color palettes, checkout optimizers, loading icons, free fonts, and more. All the tools are free or have free plans.

Free Design Tools

Werk is a remote working toolkit for teams to work seamlessly through asynchronous collaboration. Manage and build tasks, share files and HyperDocs, take notes and collaborate on voice chat, and asynchronously collaborate on records. Free for up to five teammates.

Werk

Pages is a new resource for Scribe, an application for creating step-by-step guides and product demos. With Pages, you can now combine Scribe recordings on a process document and add text, descriptions, hyperlinks, Loom and YouTube videos, and more.

API Tracker is a search engine to find the best APIs and SaaS applications to build native integrations. Track API specs and docs, developer experiences, SDKs, developer docs, IDE support, platform strength, authentication, and API styles. Free for up to 2,000 API calls per month.

Eleventy is a new and straightforward static site generator. It allows you to mix and match templating engines to easily migrate existing content, transforming a directory of templates into HTML. Content templates can use a different templating engine than layout files. Eleventy works with HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, and Pug.

Screenshot from the Eleventy home page

Eleventy

Reasonable Colors is an open-source system to build accessible, nice-looking color palettes. Spaced uniformly, the 24 sets of named colors each have a hue 15 degrees from its neighbors on the LCH color wheel. This uniform spacing makes it simple to find complementary pairs and build attractive color palettes.

SellKit is a checkout optimizer for WooCommerce that uses dynamic discounts, smart coupons, and checkout alerts to drive more sales, increase order value, and boost engagement.

Loaders is a collection of free animated loaders (visible on a web page as it’s loading) to add to your next project. Built with HTML, CSS, and SVG, these loaders are fun, creative, and pleasing.

Screenshot of the Loaders web page from uiball.com

Loaders

Lexical is an extensible JavaScript text-editor framework that scales in size and functionality. Lexical makes it possible to easily create complex text editing experiences that otherwise would be very complex with the built-in browser tooling.

Scrollex is a React library for building beautiful scroll experiences using minimal code. Scrollex provides keyframe helpers to define the elements of each scroll position.

Formspector is a tool to ensure forms are working. Set up automated tests for any form without writing a line of code. Review your forms for newsletters, contact us, signup, support, and other uses. Free for up to three forms.

Screenshot of the Formspector home page

Formspector

QlndR.io is a handy QR code generator for events and appointments. Smartphones automatically add the event to a calendar and show the user if there’s any conflict at that time.

Sections are new building blocks and full-site templates for Studio, a web design platform. Following user-experience best practices, Sections templates maintain a minimalistic look. Pick and choose from various elements to create a personalized website. Sections offers 18 complimentary pre-crafted templates and is free for up to 1,000 CMS items and 10,000 views per month.

Yaade (Yet Another API Development Environment) is an open-source, self-hosted, collaborative API development environment. Yaade is developed with security in mind so that users can safely store sensitive information in API requests on their own servers.

Plexi is a free tool that simplifies payments and shipping for direct message orders. Generate your checkout page in a few steps with mobile. Enable shipping and create discounted shipping labels. Receive seamless payments and automate order updates.

Screenshot from the Plexi home page

Plexi

Free Fonts

Habanero is a playful and dramatic display font to enhance any creation. The cartoonish style is both clean and audacious. Helpful for grabbing attention.

Screenshot of the Habanero font from Behance.net

Habanero

Lastik is a serif typeface inspired by the educational materials of the late 1990s and early 2000s. Lastik is versatile and unobtrusive while maintaining a personality and touch of nostalgia.

Screenshot of the Lastik font from Behance.net

Lastik

Rakyat is a youthful, confident, handwritten font for any project with an energetic and romantic vibe.

Screenshot of the Rakyat font from Behance.net

Rakyat

Vistol is a Neo-Grotesque sans-serif typeface family that’s clean and timeless. Vistol comes in 18 weights, nine uprights, and includes italics. Get Vistol Black for free, or purchase the complete family starting at $12.

Screenshot of the Vistol font from Behance.net

Vistol

Kapisan is a cute, playful, and quirky handwritten font. It’s crafty and readable.

Screenshot of the Kapisan font from Behance.net

Kapisan

Candy is a fun and colorful high-resolution 3D letter set. The colors are easily changeable by hue and saturation.

Screenshot of the Candy font from Behance.net

Candy

Leave a Comment