All released this year, each of these free web-based apps offers a time-saving solution to many of the web design tasks you will need to perform from time to time. Without ever having to install anything, all you have to do is bookmark and save them for that day when they will be called upon.
Some of these tiny time-savers will help to manage the performance budget of a project, organize code snippets, create professional design briefs, generate CSS animations, or even give detailed stats about CSS stylesheets. Whatever the time-saver you’re looking for, the chances are you will find them here.
We’ve categorized all of the apps and tools into: Web Typography Tools, CSS Tools, Responsive Web Design Tools, Web Performance Tools, Checklists & Guides, Image Tools & Editors, Handy Directories, and finally a bunch of uncategorizable Miscellaneous Tools.
You might also find this collection of free web-based apps and tools useful as well.
Web Typography Tools
Megatype is a small tool for executing typographic structure with ease.
Type Terms is an online tool for learning the basics of typographic terminology.
glyphdiff is a simple tool for comparing the differences between two fonts.
Web-Based CSS Tools
Based on the CSS flexbox specification, Flex Layout Attribute is a useful HTML layout helper.
CSS Stats is a web-based application that visualizes various stats about your stylesheets.
img2css is a super-simple tool for converting any image to pure CSS.
Pixel Art to CSS is a web-based, React.js powered, pixel art drawing tool.
cssFilters.co is a small playground for creating custom CSS photo filters.
Blend is a tool for generating simple CSS3 gradients.
Filter Blend is a CSS blend modes and filters playground & generator.
You might also like to take a look at the Top 50 CSS Tools from 2015.
Responsive Web Design Tools
Resizer is a web-based viewer for testing how digital products respond to Material Design on all devices.
embedresponsively.com is a web-based app that helps build responsive embed codes for third-party media.
Responsive Image Breakpoints Generator is a handy tool from Cloudinary for generating the optimal responsive image dimensions.
Web Performance Tools
Performance Budget Builder Tool is a small tool created by Brad Frost for planning and making your own web project performance budget.
Online Checklists, Guides & References
Security Guide for Developers is a practical checklist for preventing security issues.
Web Designer’s Checklist App is a simple tool for managing all of the tasks of aweb project.
Image Tools & Editors
Vectr is a free graphics editor used to create vector graphics easily and intuitively.
Visual Center is a tool that will find the visual center of your images.
Photopea Photo Editor is a web-based photo editor for editing Photoshop files quickly and easily.
SVGOMG is a web-based app for optimizing and configuring SVGO.
Handy Directories for Web Designers
Sketchpacks – Sketch.app plugin registry and directory.
PostCSS.parts – A searchable catalog of PostCSS plugins.
Good Copy – Examples of email copy from some of the biggest businesses in the world.
Codepad is a handy tool for organizing and sharing code snippets.
Grid.Guide is a small tool to help create pixel perfect grids within your designs.
CreateBrief is a tiny and super-easy to use web-based tool for creating basic design briefs.
Launchaco is a handy tool for instantly searching domains, social media handles and logos.
ViewedIt is a free tool for recording and sharing your screen, and you will instantly know when people are watching.
Site Auditor is a small tool for finding, fixing and optimizing your site for search engines.
Hero Patterns – A Collection of Repeatable & Customizable SVG Backgrounds.
Word HTML is a free online Word to HTML converter with built-in code cleaning features.
JSON Editor is a web-based tool for viewing, editing, formatting, and validating JSON.
The post 30+ Tiny, Time-Saving, and Free Tools for Web Designers appeared first on Speckyboy Design Magazine.