12 Useful Web Tools for Designers

Jan 15 2009 by Jacob Gube | 63 Comments

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 Create - screen shot.

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 - screen shot.

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 Color Scheme Generator - screen shot.

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 - screen shot.

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

Dummy Text Generator - screen shot.

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 - screen shot.

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 - screen shot.

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 - screen shot.

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.

Related content

63 Comments

Matt

January 15th, 2009

Great post as usual, thanks!

Abulafio

January 15th, 2009

Wow, very useful links! Right now directly in my favourite folder! thank you!

Geoserv

January 15th, 2009

Great list, some I already use, others I haven’t seen before.

I did a similar post at http://www.pliggs.com/free-online-design-resources/

Jeremy

January 15th, 2009

Nice list. These are all great resources!

Travis

January 15th, 2009

Great list, but you can’t have Kuler and not have COLOURlovers, a much better colour tool/site (in my opinion):

http://www.colourlovers.com

Raymond Selda

January 15th, 2009

Nice list. I’m using Wellstyled and will try out bgpatterns. Thank you.

Chris W.

January 15th, 2009

Typetester.org has to be one of the coolest sites on that list.

Daisy

January 15th, 2009

Wow, some of those are awesome. I especially like the ones based around type like FontStruct and FontNavigator.
:D

Karla

January 15th, 2009

Very cool! I always feel like I’ve hit the jackpot with your postings. Thank you!

netgeek06

January 16th, 2009

Nice List. Wellstyled Color Scheme Generator still my fav from this list. Never tried favicon.cc but like to try.

Tobi

January 16th, 2009

Great selection, there are some usefull tools I haven’t known before. Thank you very much!

Tobi

insic

January 16th, 2009

I agree KULER is very usefull also the dummy text generator but i opt to use the lipsum site.

Pavel Ciorici

January 16th, 2009

favicon.cc is a very useful tool… recommended…

Niklas

January 16th, 2009

Great tips! Kuler and BGPatterns is very usefull.

foo

January 16th, 2009

very useful lists!

Zohair

January 16th, 2009

Jacob, thanks for including Dabbleboard! Just in case some of your readers are interested, Dabbleboard makes it easy to save your own custom elements to use later in user interface designs. To get started, you can use the UIToolkit which has some commonly used elements (more coming soon).

Geeee

January 16th, 2009

Very nice list of tools .. I like FontStruct and PicMarkr .. thanks for sharing and looking for more ;D

Dietmar

January 16th, 2009

Wow! I really like the first color schemer! This kuler Creator is definitivly a bookmark worth.

Pam

January 16th, 2009

Wow, that’s a cool list… I will check them out in detail later when I have more time. I already love Kuler! That is an awesome site, so I’m sure the rest are great too.
You share so much awesome info… how DO you do it?
thanks!

Timothy

January 16th, 2009

I love the Wellstyled Color Scheme Generator. And it’s been around for quite a while. I use it whenever I don’t have Photoshop open.

Scott Petrovic

January 16th, 2009

pixIR image editor. Holy *%(#*. I thought photoshop online was going to be the leader in the online photo editing, but this is a much better path and solution than adobe has taken.

Jacob Gube

January 16th, 2009

Hey all,
Thanks for all your positive comments! I hope you find a few tools that will help. These are some of my favorite tools and I concur with everyone, kuler is such an amazing tool. For people using Photoshop: I’ve recently upgraded to CS4 and it has a cool little kuler panel – pretty awesome.

@Travis: I was going to mention COLOURlovers along with kuler, but I have better plans for it. Stay tuned! :)

@Pavel Ciorici: Yeah, the favion you see here on Six Revisions was made through favicon.cc.

@Pam:

You share so much awesome info… how DO you do it?

A variety of ways, mostly through experience and my passion for design and development (which leads me into exploring and learning as much as I can).

@Scott Petrovic: I’ve actually used pixIR on a design piece when my primary computer – which had my favorite image editor (Photoshop) – was out of service. It’s surprisingly similar. Like I said, it even has a Clone Stamp tool which uses the same shortcut as Photoshop to sample the area you want to clone (ctrl+click to define the source point).

Love

January 16th, 2009

Thanks for sharing, really useful tolls… ;)

davelog

January 16th, 2009

The best dummy text generator is over at malevole.com.

http://www.malevole.com/mv/misc/text/

Syed Balkhi

January 16th, 2009

I usually don’t comment on sites that I arrive to from digg unless it is super useful. I have to say these tools are very good for designers. Great list, and keep up the good work.

g6

January 16th, 2009

great suggestions…

would it be too obvious to suggest wordpress as web designer tool?

james

January 16th, 2009

kuler defiantly deserves to be there. love the way you can download what you create as a swatch

max

January 16th, 2009

Nice collection Jacob.

I think you could also include http://www.tinEye.com , so useful for finding where any picture comes from ( i often use it to know if a picture came from flickr, istock or another site )

TinEye is also great to make sure no-one is copying your original copyrighted work!

Maria

January 16th, 2009

Cool. I didn’t realize there are so many other good software for web designers. I always do my work in Photoshop. :)

andy matthews

January 16th, 2009

I’ve got a nice greek text generator over at my website:
http://commadelimited.com/code/fillertext/

It’s doesn’t offer the features this one does, but it’s got different variations of text styles including metropolitan, hillbilly, pseudo-german, and techo-babble.

Hope you like it.

sergi

January 16th, 2009

great list. i had no idea there were so many web-based apps out there for font work – favicons, too.

wiktor w. brodlo

January 16th, 2009

A nice list of tools. Some of them I’ll certainly use. From myself, I’d like to add that the Wellstyled Color Scheme Generator has one *very* important (and nice) feature to it: there is a little drop-down box in the bottom-right corner that makes your scheme display the way a colour-blind person would see it. a You’d be surprised, believe me, how the colours can sometimes change. Personally, I also use colorblender.com, quite a nice tool.

Stefan Tell

January 16th, 2009

Nice list, gave me some new stuff to try out. Thanks

Brian Reavis

January 16th, 2009

Excellent list. Colourlovers (http://www.colourlovers.com/) would be a great addition too it too.

T

January 16th, 2009

Just do all that stuff in Adobe Creative Suite.

John

January 16th, 2009

These are useful. Really like BGPatterns and Kuhler thanks!

Rasmus Schultz

January 16th, 2009

Dude, you totally missed my Grid Designer tool:

http://grid.mindplay.dk

Shame on you! it’s the best there is! ;-)

PureDezigner

January 17th, 2009

@T lol umm missing the point a little

charles palma

January 17th, 2009

Adobe is far the best tool for me. Yes. All of the things above are available on Adobe Creative Suite.

Alex

January 17th, 2009

This is definitely being saved. That favicon site saved me allot of time. Thanks!

Nenad

January 20th, 2009

great post thanks
favicon design tool is just what i need

Kay

January 22nd, 2009

hey GREAT tools, love Kuler. Thanks

Bunny got Blog

January 25th, 2009

Thanks for the fantastic article and tools.

Muhammad Wasim

January 28th, 2009

Hey thanks. It’s a great resource for web designer. Thanks again.

rinewalt

January 29th, 2009

Nice work man. . . these things are very useful, hope you’ll have some updates soon. . .

Baking Chef

January 31st, 2009

these look pretty useful I already use kuler but that favicon editor looks pretty awesome. I always get frustrated trying to make a favicon because photoshop can’t make one (at least by default i think)

Midnite sky

February 5th, 2009

What a great list of tools. it will be handy for web developers like me.

Rahul

February 11th, 2009

This link was forwarded to be my sister. thanks to her for this and thanks to the author for this wonderful article useful for us, designers.

Adi levy

March 6th, 2009

Thanks! great post with soo much usefull things!
will use some of it in my next project :)

Cecil

March 30th, 2009

thanks for sharing! bookmarked!

mike

May 24th, 2009

Well thank you for this great resource

Mohamed El-Metwaly

June 17th, 2009

realy its very good
very great

Ashely Adams

September 11th, 2009

There are so many similar posts out there…..but you definitely have some great collections. I found favicon.cc very useful. Thanks once again Jacob.

shannon

October 10th, 2009

As a freelance designer, I have found http://contentcube.com indispensable. Unlike a few of the file storage and backup services I tried, it’s great at handling my photoshop and illustrator files and lets me custom brand the pages my customers use to retrieve their proofs. Very cool.

yoomark

May 6th, 2010

Some new tool.it can help me….

paula

May 23rd, 2010

really and interesting article .did try templerto will check all other as well.

andre

August 20th, 2010

hey , favico.cc is the best.

cathrene

November 15th, 2010

Wow! Amazing article… I want that which provides project management too…

Alex

March 2nd, 2011

Nice post Jacob. Being as an designer, I understand how useful these websites are and how helpful stuff these websites provide.

I would also recommend you to include an invoicing app in this post as an invoicing app is mandatory app to run a business and a designer is required to use one to manage his invoices and payments. I personally use http://www.invoicera.com to invoice my clients and to keep track of my projects and expenses. This really made my work so easy.

Manish Chiniwalar

April 7th, 2011

Wonderful list! Helped big time. Here’s another design search engine i found. It uses Google’s result. But optimized to show design specific results and better quality link too.
http://flevr.com

Brad Favicon

August 29th, 2012

wow, great list of tools here, thx!

Leave a Comment

Subscribe to the comments on this article.