Menu

12 Useful Web Tools for Designers

Advertisement

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

This was published on Jan 15, 2009

63 Comments

Great post as usual, thanks!

Abulafio Jan 15 2009

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

Geoserv Jan 15 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/

Nice list. These are all great resources!

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 Jan 15 2009

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

Chris W. Jan 15 2009

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

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

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

netgeek06 Jan 16 2009

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

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

Tobi

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

Pavel Ciorici Jan 16 2009

favicon.cc is a very useful tool… recommended…

Great tips! Kuler and BGPatterns is very usefull.

very useful lists!

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

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

Dietmar Jan 16 2009

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

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 Jan 16 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 Jan 16 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 Jan 16 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).

Thanks for sharing, really useful tolls… ;)

davelog Jan 16 2009

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

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

Syed Balkhi Jan 16 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.

great suggestions…

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

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

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!

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

andy matthews Jan 16 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.

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

wiktor w. brodlo Jan 16 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 Jan 16 2009

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

Brian Reavis Jan 16 2009

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

Just do all that stuff in Adobe Creative Suite.

These are useful. Really like BGPatterns and Kuhler thanks!

Rasmus Schultz Jan 16 2009

Dude, you totally missed my Grid Designer tool:

http://grid.mindplay.dk

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

Greg Johnson Jan 16 2009

The original: http://lipsum.com

PureDezigner Jan 17 2009

@T lol umm missing the point a little

charles palma Jan 17 2009

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

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

Martin Leblanc Jan 17 2009

What? No iconfinder?…. http://www.iconfinder.net

great post thanks
favicon design tool is just what i need

hey GREAT tools, love Kuler. Thanks

Bunny got Blog Jan 25 2009

Thanks for the fantastic article and tools.

Muhammad Wasim Jan 28 2009

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

rinewalt Jan 29 2009

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

Baking Chef Jan 31 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 Feb 05 2009

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

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 Mar 06 2009

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

thanks for sharing! bookmarked!

Well thank you for this great resource

Mohamed El-Metwaly Jun 17 2009

realy its very good
very great

Ashely Adams Sep 11 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 Oct 10 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 06 2010

Some new tool.it can help me….

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

hey , favico.cc is the best.

cathrene Nov 15 2010

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

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 Apr 07 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 Aug 29 2012

wow, great list of tools here, thx!

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners