12 Useful Web Tools for Designers

Three color blocks with corresponding color codes in HSV, RGB, and CMYK models. From left to right: dark blue with codes HSV (232, 53, 55), RGB (66, 76, 141), CMYK (53, 46, 0, 45); bright red with codes HSV (0, 100, 100), RGB (255, 0, 0), CMYK (0, 100, 100, 0); and bright orange with codes HSV (27, 95, 91), RGB (232, 111, 12), CMYK (0, 52, 95, 9). Below each are sliders and input fields for color adjustment.

4 min. read
William Craig

CEO & Co-Founder
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.

When it comes to design, there’s a plethora of free web-based tools to help you accomplish tasks such as color palette selection, creating unique fonts, editing images, and testing typography. In this article, you’ll find a bunch of handy online utilities for designers.

kuler Create

kuler is a web-based application by Adobe that helps you create and share color themes. You can peruse the user-submitted color themes or create your own color themes with the kuler Create web tool.

pixlr

pixlr is a web-based image editor with a Photoshop-like user interface; pixlr has similar features like layers, filters, and even a Clone Stamp tool.

For more image-editing web tools, check out this list of web-based image editors.

Wellstyled Color Scheme Generator

Wellstyled’s Color Scheme Generator is a simple web tool that helps designers produce color themes. It has an intuitive interface and the ability to bookmark generated color themes.

FontStruct

FontStruct is a web-based tool created by font retailer FontShop for creating, editing, and sharing fonts. The FontStructor tool is a simple and innovative font editor for designers who want to create beautiful type.

You’ll need to sign up for a free user account to access the tool.

Typetester

Typetester - screen shot. Typetester allows you to test, tweak, and compare screen typography. It has a variety of typefaces that include web-safe fonts like Arial and Verdana – but it can also use your personal fonts.

TypeNavigator

TypeNavigator - screen shot. TypeNavigator is a very clever web tool that can help designers identify typefaces. It’s great for hunting down a font you saw that you’d like to use on your own designs.

Dummy Text Generator

The Dummy Text Generator is a versatile and useful web application for generating dummy text.

Though branded as a “Lorem ipsum generator for web designers”, it will also come in handy for designers working on print layouts.

BGPatterns

BGPatterns - screen shot. BGPatterns is a web tool for generating tiled patterns. Its intuitive (yet robust) user interface will allow you to tweak, edit, and resize a wide range of patterns.

Dabbleboard

Dabbleboard is a convenient web-based collaborative drawing tool that’s designer-friendly. Create web layouts, design user interfaces, or draw freehand with other fellow designers.

For more web-based collaboration tools, check out this list.

PicMarkr

PicMarkr is a web-based custom watermarking tool that you can use to protect and prevent design theft. It’s great for mockups or copyrighted designs that you publish online.

favicon.cc

favicon.cc is a favicon design tool. With the favicon.cc, you can either create favicons from scratch or upload and edit images from your computer.

For more favicon tools, check out this list of web-based favicon generators and resources.

templatr

templatr - screen shot. templatr is a handy web application for creating web page templates. It has a very simple user interface, making itself an excellent tool for quick-and-dirty mockups of web layouts.