30 Essential Tools for Web Designers

November 28, 2009 · 45 comments

by Lars

For designers nothing can be more handy than effective and time saving tools supporting their creative process. Of cause dependant on the specific needs free web-based tools can significantly help you accomplish tasks such as color selecting, color palette, creating own and unique fonts, editing images, and testing typography.

In this article tripwire magazine presents 30 essential Tools that hopefully will be useful for most Designers.


ElegantThemes
ThemeForest

Advertisement

Typography and Font Tools

Bit Font Maker

This is not really AJAX but a very rich Javascript experience, BitFontMaker is an online bitmap fonts editor for Win and Mac allowing to create TTF fonts online simply by using a browser. The resulted application is amazing as functionalities offered and many pixel graphics designer will be certainly interested into give it a try. It’s easy to use but you’ll need help to read the help page cause it’s in japanese.

pentacom

Font Struct

FontStruct is a free font-building tool brought to you by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. You create ‘FontStructions’ using the ‘FontStructor’ font editor. Once you’re done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application. You can keep your creations to yourself, but we encourage users to share their “FontStructions”. Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations.

fontstruct

Fontifier

Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.

fontifier

Typechart

Typechart lets you quickly evaluate an assortment of web typography. Once you’ve discovered the font you like, you can use the Get CSS button to obtain the style rules for it.

typechart

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

typetester

Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.

fonttester

Markup and Content Tools

templatr

A web application for  creating web page templates. It has a very simple user interface, making itself a good tool for quick-and-dirty mockups of web layouts.

html-ipsum

HTML Ipsum

A useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!

html-ipsum

GoldenRatioCalculator

If you want to dramatically improve composition of your website design, you might need to consider applying the divine proportion to your design. This tools calculates the golden ratio for your designs.

blindtextgenerator

Dummy Text Generator

This handy tool helps you create dummy text for all your layout needs. Dummy text: Its function as a filler or as a tool for comparing the visual impression of different typefaces

blindtextgenerator

CSS Text Wrap

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Designer Plaything

Designer Plaything lets you experiment with different web typography and color combinations. It also allows you to check color accessibility. There’s a web-based version and a downloadable version which you can grab on this page.

designerplaything

Wellstyled Color Scheme Generator

Simple web tool that helps designers produce color themes.

designer-toolbox

CSSTXT

CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography.

csstxt

Kotatsu – a simple html table generator

A highly useful tool creating a table and throw in column classes quickly

CSS Font and Text Style Wizard

Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

somacon

CSS Type Set

CSS Type Set lets you experiment with different styles and attributes (such as font size, font weight, font family) of web typography. Once you’re satisfied with your tweaking, it’ll generate the appropriate CSS code for you.

csstypeset

Graphical Tools

Favicon Generator

Easily create your own custom favicons for free with Favicon Generator…

csstypeset

FavIcon Generator (dynamicdrive)

Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu.
csstypeset

More favicon tools:

FavIcon from Pics
Favicon.ico Maker

BGPatterns

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.
BGPatterns

Tartan Designer

Generate tartan patterns. For scottish lovers and fancy designers!

BGPatterns

pixlr

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

BGPatterns

kuler Create

Web-based application by Adobe that helps you create and share color themes.

blindtextgenerator

Testing site layout and structure

Crossbrowsertesting (free/commerical)

CrossBrowserTesting.com allows website designers to test the cross browser compatibility of their website across different browsers and operating systems. CrossBrowserTesting.com is a commercial service where users buy credits giveng 5 min usage each. Anyone can register and use the service for for free but the free service has a 5 min max length.

crossbrowsertesting_req

BrowserShots (free)

BrowserShots is a free open source service that allows you to make screenshots of any web page available on the Internet (be aware that robots.txt can prevent this service). Most browser types (Firefox, Opera, IE and Safari, Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey etc.) in relevant versions is available and you can also choose between the following Operating System: Linux, Windows, Mac OS and BSD.

browsershots_site

You can adjust the width of the screen size (640 – 1600), color depth (8 – 32 bits per pixel) as well as the JavaScript-, Java- and Flash-support. BrowserShots rely on distributed computers that are run by volunteers and the most popular Browsers may be quite busy and it this means that getting your screenshot may take some time. As screenshots become ready they will be available for viewing individually or for download of the full package.

browsershots_download

Browsercam

Browsercam, probably the most featurerich screen capture services available. It even offers an extensive browser remote control service giving you access to check javascripts, DHTML, forms and other dynamic functionality on any platform. The number of available browsers, versions and operating systems is permanently growing. 90+ browsers, Linux, Win, Mac and even the presentation in different versions of browsers on mobile devices (BlackBerry, Win Mobile) can be tested. You can also adjust the screen resolution (640×480, 800×600, 1024×768), set up the access to password protected sites and download all screenshots in a .zip-archive.

browsercam

The service offers everything you might ever need. Browsercam if not free but it has different price plans; the price varies bettween 20 and 1000$ per month. There is also a 24 hours free test evaluation which requires the registration on Browsercam.

W3C Link Checker (free)

Really handy tool for checking if all links on you web pages are valid.

link checker

Markup Validation Service (free)

Markup that is not well formed may give your site serious presentation issues in some Browsers while they are barely visible on others. It is always recommended to validate your site with the W3C Markup Validator and fix all the errors it reports.

validate_html

{ 23 comments… read them below or add one }

Thijs August 15, 2011 at 7:41 pm

Great list!

An interesting addition would be a web-based code editor, like http://codey.co/ or http://shiftedit.net/

Reply

alex November 13, 2010 at 6:53 am

I think I have something new and better choice for online work. I am using proofHub for the last 6 months and I feel wow. I suggest for increasing workability use just try this and I guarantee you would like it. For designers it’s amazing.

Reply

Marketing in Manchester May 15, 2010 at 5:53 pm

great post! will use some of these :)

Reply

orka April 29, 2010 at 5:23 pm

I found another interesting resource, http://clipardo.com/ that searching clipart images by black&white sketch. Try it!

Reply

Dani April 10, 2010 at 3:32 am

Thank you for the great collection.

Reply

alfade March 30, 2010 at 4:41 pm

You should consider to put this in your list : http://cssgallerysubmission.com
It’s a free css gallery submission tool, will help us to promote our webdesign easily ;)

Reply

White Bath Towels March 10, 2010 at 7:49 am

very nice, great selection.

Reply

Patrick Heck February 4, 2010 at 8:11 am

When it comes to favicon generators I highly recommend the open source program GIMP http://www.gimp.org/ . As far as I know it’s the only tool that can write .ico files with alpha transparency.

Reply

Mizake January 27, 2010 at 1:45 pm

Thhis is a great list..thnaks you very much

Reply

Anna November 6, 2009 at 10:10 pm

Great list! Though I’d say validator should be first.

Reply

Blogging Tips July 17, 2009 at 9:16 am

Here is a simple step by step tutorials to create your own FAVICON easily on
photoshop cs version.
How to create FAVICON using Photoshop?

Reply

Mike Haynes July 3, 2009 at 2:27 pm

Thanks for the nice list. I have also found some very useful resources while browsing around at http://www.forwebdesigners.com/

Reply

johnsaint July 3, 2009 at 10:24 am

Even though i am not a web designer, but i have many of my friends who are into this profession. i think this is indeed a treasure of information for them as i hope it can help them in their work

Reply

steven July 3, 2009 at 5:56 am

It’s realy useful for me, thanks !

Reply

Vladimir July 2, 2009 at 10:10 pm

Great list. I think that this tool also belongs to this list: Sketchbook for web designers :)

Reply

Jake July 2, 2009 at 9:15 pm

Wow, awesome collection! I didn’t even know about most of these, so great to see them all added in one place.

Reply

favSHARE July 2, 2009 at 6:16 pm

This article has been shared on favSHARE.net.

Reply

Mahallo Media July 2, 2009 at 1:18 pm

Hey, thanks for sharing this cool list.

Reply

Christian Gehrke July 2, 2009 at 12:43 pm

Wow very nice list and some very handy tools. I had been using probably 5 or 6 of them already but I am impressed, especially with Pixlr that is amazing. Flash at it’s absolute best.

Reply

Young July 2, 2009 at 12:19 pm

It’s a pity that they are not all free.haha~

Reply

julia July 2, 2009 at 7:41 am

Thanks for sharing.

Reply

Heiko Schmieder July 2, 2009 at 7:07 am

Great list – very useful ! I would just add ColorPic – free tool to pick a colour on screen.
thx

Reply

Fraser July 2, 2009 at 7:37 am

As an online marketer working closely with web designers, that’s a pretty impressive list you’ve created. I’ve found browsershot to be ineffective and have used the paid litmusapp.com solution to be more helpful.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 22 trackbacks }

Previous post:

Next post:


Web Analytics