25 Useful Web Design Tools 2017

This post presents a collection of tools that will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of the project. So here are 25 web design tools to make your next project a little easier.



Singleton UI Pack

Perfect, fresh and stylish UI Kit for building beautiful Landing Pages. This clear and practical UI tool consists of 120 elegant cards in 12 categories.

Singleton UI Pack

Element

It is a desktop UI library based on Vue.js 2.0. It provides dozens of components for you to build desktop websites.

Element

Weex

Different from a “web app”, “HTML5 app”, or “hybrid app”, you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript.

Weex

CXS

It is a functional CSS-in-JS solution that uses atomic styles to maximize deduplication and help with dead code elimination.

CXS

Moon

It differs from the existing solutions by providing a faster, yet compact library with a simple but powerful API. It uses a virtual DOM system similar to React, but includes advanced optimizations crafted specifically for Moon, similar to the Glimmer engine by the Ember team. In a variety of benchmarks, Moon has proven itself to be the fastest UI library out there.

Moon

WebGradients

A curated collection of splendid gradients made in CSS3, .sketch and .PSD formats.

WebGradients

Materialette

A material design color palette.

Materialette

Open color

Open-source color scheme optimized for UI like font, background, border, etc.

Open color

Drizzle

A streamlined tool for developing, documenting and presenting UI pattern libraries.

Drizzle

Auto Layout for Sketch

This is a plugin for Sketch that enables designers to design fully responsive artboards.

Auto Layout for Sketch

PulltoRefresh

A small, but powerful Javascript library crafted to power your webapp’s pull to refresh feature. No markup needed, highly customizable and dependency-free!

PulltoRefresh

Typography Handbook

A concise, referential guide on best web typographic practices.

Typography Handbook

XVG

A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.

XVG

Anime

Lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

anime

Cleave.js

It has a simple purpose: to help you format input text content automatically.

AR.js

Efficient Augmented Reality for the Web – 60fps on mobile!

ar.js

Docsify

A magical documentation site generator.

docsify

Visual Center.

This is a tool that will find the visual center of your images.

Visual Center.

Text Spinners

Pure text, CSS only, font independent, inline loading indicators.

Mobile Checker

iziToast

Elegant, responsive, flexible and lightweight notification plugin with no dependencies.

iziToast

Waffle grid

An easy to use flexbox grid system.

Waffle grid

Reframe

Reframe unresponsive elements responsively.

Reframe

Siema

Lightweight carousel plugin with no dependencies and no styling.

Siema

Tippy

Lightweight, pure JS tooltip library powered by Popper.js.

Tippy

Lightgallery

Full featured javascript lightbox gallery, No dependencies.

lightgallery

2 Comments

  1. Gagansays:

    Great List !!

  2. Great List !!

  3. Great list for the designers and design makers

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.