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.
Typography and Font Tools
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.
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.
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.
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.
Markup and Content Tools
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.
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!
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.
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
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 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.
Simple web tool that helps designers produce color themes.
CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography.
A highly useful tool creating a table and throw in column classes quickly
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.
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.
Easily create your own custom favicons for free with Favicon Generator…
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.
More favicon tools:
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.
Generate tartan patterns. For scottish lovers and fancy designers!
Web-based image editor with a Photoshop-like user interface; pixlr has similar features like layers, filters, and even a Clone Stamp tool.
Web-based application by Adobe that helps you create and share color themes.
Testing site layout and structure
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.
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.
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.
Really handy tool for checking if all links on you web pages are valid.
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.