Data, Maps, Usability, and Performance

Design Tools and Resources Online

Last updated on July 2, 2012 in Design

Design Resources

If you do any web design or graphics work, you will find many of the following online resources very helpful. I have been bookmarking these for a while and wanted to share my collection. Below you will find 35 online design tools:

Dribble - show and tell for designers. Image inspiration.

COLOURlovers – creative community where people share colors, palettes and patterns.

wordmark.it – helps with font selection process by quickly displaying font previews.

placehold.it – A quick and simple image placeholder service.

Lorempixel – Placeholder Images for every case.



Colr – lets you grab colors from images.

WhatTheFont – Find the correct font inside an image.

Color Scheme Designer – Generate a color scheme by choosing one color.

TypeTester – online application for comparison of the fonts for the screen.

ResizeMyBrowser – online tool that lets you set the browser size by both Inner window and Outer window.

Bounce – quick screenshot tool with sharing and making notes features.

CSS Cheat Sheet – A quick reference guide for CSS.

XHTML Character Entity Reference – contains the 252 allowed entities in HTML 4 and XHTML 1.0.

Browser Safe Fonts Analyzed – Common fonts to all versions of Windows & Mac equivalents

The Pixelator – Converts images into a pixelated version.

Kuler – Adobe application for generating color themes.

Copaso Color Palette Software – generating color palettes.

Wirify – lets you turn any web page into a wireframe in one click.

Striped Backgrounds – generates free stripe backgrounds.

Slickmap CSS – simple stylesheet for displaying finished site maps directly from HTML unordered list navigation.

CSS Gradient Generator – A powerful Photoshop-like CSS gradient editor.

CSS3 Generator – Generate CSS3 code via an online form.

Twitter Profile Designer – tool to easily design a twitter profile.

RGB Hex Colors – Color Codes Cheat Sheet

CSS Button – CSSButton is a tool to help web professionals create, save, and share their CSS buttons.

HTML Ipsum – sample html code for your web design.

Gridr – online tool to build CSS grids for layout.

PX to EM – allows you to quickly convert PX to EM and vice-versa.

LaunchList – One Stop Website Checklist for Web Designers.

Wordle – lets you create word visualisations using text you enter.

PEN 3D – Drawing board in 3D using the pen or pattern.

Bootstrap from Twitter – Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

FontSquirrel – list of some great commercial-use free fonts.

FontSquirrel Font-Face Generator – nline generator for creating ready-to-use kits for your fonts, using @font-face.

Webfont Services – overview of different online webfont services.

Have I missed anything?

Facebook Twitter Hacker News Reddit More...