Free Design Tools

As designers, we’re always looking for ways to simplify and streamline our creative process so we can get down to the heart of the work – creating a compelling user interface mixed with beautiful visual designs and an overall effective user experience. In this space, I will be posting free design tools that I hope you will enjoy using in your development and design processes. I will continue to add more neat design templates so check back soon!

Here are two Photoshop (CS4) templates you can use to get right down to work on your next web designs. As an avid user of the popular Blueprint grid, a 960 pixel wide framework, I merged it with the Firefox browser to create a solid template that I use in my day to day work to help me create quick designs that I can present to my clients and developers alike. One template is for 1280 x 800 layouts, and the other is for 1440 x 900 layouts.

NeatOSheetO Wireframe Components
I’m a big Illustrator-lover and sometimes I like to make my own graphics for wireframing. For those designers or UX folks who dabble in Illustrator, here’s the first of several sheets of free sketch-style graphics you can use when you make your own mock-ups or wireframes from scratch. I like that handmade, rough feel that you get with my trusty Sharpie marker. Here’s one tool that can help you bring a little of that into your designs. Check back later for more of my free sketches.

Download some cool wireframes from Konigi for free. The wireframes are great for all types of designers from user interface and user experience designers to information architects. The wireframes are in pdf form and include wireframe with notes, wireframe (landscape), wireframe (portrait), storyboard, storyboard with notes, a two by two grid, and a basic grid.

Stylekit by Wizzart, as the site states, is a free real time cross-browser styling tool for user experience designers, web designers, and web developers. Put in any URL and alter your CSS on the left hand side to test the look of your website on the right hand side. This is a great way to ensure that your site is rendered correctly on all browsers. Also, this gives you the opportunity to experiment without breaking your website.

Clean CSS optimizes and formats your CSS code to make it cleaner, and more new and improved. This free design tool also offers shorthand coding that releases you from the tediousness of the longhand stuff.

Icon Finder is an icon search tool to help you find icons. Icons are mostly free, but you can also buy custom icons and submit your own icons to share. Also, check out the tools page to find cool icon related offerings.

What the Font is a free design tool that can identify the name of the font used based on the image that you provide or the URL that you submit. If the automated system cannot identify the font, then there is also an option to go to the forum and ask the masses for their input.

We Transfer is an online service that allows you to transfer files up to 2GB for free and without any registration required. You can send your files to up to 20 people per transfer and your files are available for two weeks. This image shows the simple transfering process where the only fields you need to fill out are the file to transfer, your recipients email addresses as well as your own, and an optional message. Note: this site is in beta.

Here is a list of some fun dummy text or filler text to add to your placeholders if you’re tired of the old “lorem ipsum” text.

Here is a gangsta lorem ipsum from Zicht. It’s got some foshizzle nizzle in it.

Duck Island provides a variety of dummy text including Hillbilly speech about shootin’ possums and Technobabble about potentiometer and digital inversion scalar.

This text generator from Malevole claims years of research was compiled to create this interesting and fun creation.

This one is just funny and provides a different spin on your content from Rink Works. The Dialectizer changes the text on your website to Redneck, Cockney, Pig Latin just to name a few.

I attended the Adobe Max this year and this great app called Adobe Ideas was showcased on the iPad. It’s a free design app for artists who want to sketch out their ideas without having to use pencil and paper. Check out what President Obama did with the Adobe Ideas app. The app works with both the iPad and iPhone.

Free Visual CSS app brought to you by myself and Scott Tran from Applied Constraints. This is for CSS web designers and web developers for on-the-go CSS testing. We hope you enjoy the app. The app is accessible to iPhone and iPhone Touch users. Feel free to add comments or suggestions on the Visual CSS website. Note: This app is now $1.99.

Wirify by Volkside is a bookmarklet that allows you to see the wireframing of a website with a click of a button. This is a very simple to use wireframe tool. Great idea making it so convenient to use Volkside!



Launch List is just that. It’s a pre-made checklist (customizable by adding more fields) done before launching a website. The free design tool is for web developers and web designers who are at a stage where development and design are done, but testing is necessary before the website goes live. The last thing they want are a bunch of hiccups after launch.

Brickify created by the Carsonified Think Vitamin team turns your artwork into a brick-like image. It’s a pretty fun tool to add some creativity to the imagination.




Placehold.it is a really simple image placeholder tool for your mockups. Simply place your image size after the Placehold.it URL. There’s also a place to include formatting, text, and color. It can’t get any easier than this.




Here are some free textures from Bittbox for your design pleasure. They’re a series of high resolution wrinkled paper in white and yellow. This is a great free design if you need something quick and dirty.




Protonotes allows you to adds notes to a prototype you’re working on. All you have to do is copy/paste a few lines of javascript into your website to install the free annotation tool. This is a great collaboration tool where you can drag and drop your notes, and even mark them as reviewed or completed. The save feature is automatic. You can view a listing of all your notes. Also, you can download your notes to CSV format. The free design tool supports all major browsers. Below are great ways to use Protonotes as indicated on its website.

Use Protonotes to annotate your prototypes for:

• Requirements collaboration
• Design crits
• Usability test findings
• Heuristic reviews
• QA testing

I Like Your Colors allows you to see the colors used based on the URL you provide. It’s a cool free design tool, even though the user experience isn’t there.

CSS Compressor reduces your CSS code to remove the unnecessary fluff. This is a great free design tool for search engine optimization and user experience because it reduces the load time to your website. There are several compression options to choose from, and a compression mode ranging from low to highest.

Here is another free CSS compressor tool you can use by CSS Drive.

Here is a free Javascript Compressor tool you can use as well. This will help with your load time and help further optimize your website.







How readable is your website? Find out with a Readability Test by Juicy Studio. Based on who your audience is, you want to get the right message out and that includes the right reading level. This free readability test uses three types of reading level algorithms: Gunning Fog, Flesch Reading Ease, and Flesch-Kincaid to score the readability of your website content. All content is taken into account even content in the navigation buttons, so the results are somewhat skewed. Try it out and see how your website’s content does.




BrowserShots will test your website’s compatibility against many of the web browsers out there from the well known to the unknown. Just enter in your website and presto screenshots of your websites on various web browsers are displayed all in one page.



ClickHeat by Labs Media is an open source software that operates at the server level showing you a hot and cold visual heatmap of clicks to your website. This is a great visual form of analytics to locate the popular and unpopular web pages of your site and initiate the thought process to understand what content or area better resonates with the user.




Here is a fun free design tool – Ransom Note Generator. Self explanatory. Have fun with it!




FontStruct by FontShop lets you build free fonts on a grid and share them with others as well as on your website. There is a gallery of fonts created by talented FontStruct members that you can download and even rate. Put this fun and simple design tool to work.




The Stripe Generator allows you to customize stripes – size, spacing, color, background style, gradient, etc… It’s a pretty nifty free design tool for lets say a background image or a tie design. You can download your design, share it with the community, and rate their work.




This may not be a web design tool, more of a web development tool, but it’s still very important to the health of your website. Check out Pingdom. With this free web development tool you can test the entire page load time of your web page, test your DNS servers, and your network connectivity to a server. Great free tool to ensure your website is running correctly, which will help your website rank better in the search engines. Also Google has great webmaster tools, of course, to use. Additionally, check out its page speed tool.




Try out Color Scheme Designer. It’s a fun free color creation tool with lots of options to get the unique color you want.







Here is a great site to make free background patterns called BgPatterns. This free design tool is simple to use, and with just a few clicks you can download your background and be on your merry way to creating a great web page.




For all you mobile developers out there, try mokk.me. You can create a mockup with such functionality as drag, drop, and edit text, images, forms and buttons. Also, you can link text and integrate Google Maps. Save, Share, and Test the mockup. And as the site states, “Reuse the HTML, UI CSS and JS, and add behavior with jQuery to build your production solution.” It’s compatible with the iPhone, Android, and WebOS.  According to the site, this free mobile design tool works on Chrome and Safari only and there are some bugs. What do you expect from beta? Still worth playing around with nonetheless.

Google’s Swiffy, part of the Google Labs family of apps, converts flash (SWF) files to HTML5. Now you can render content that does not open Flash files (i.e. iPhone and iPads). Currently this neat free file conversion tool works for only small animations and ads. Can’t wait for this free web application to expand!

Check out Mocklinkr, a free mockup tool for web designers that’s really simple to use. It turns mockups from just a bunch of static images to a linkable and clickable website. This is a more interactive and user friendly way to show your clients your mockups. Clients can also give feedback by selecting a region and adding comments. The entire experience is all web based. Up to 10 images are free and after that it’s $19/month for unlimited images.

Here are some cute free designs you can use from Stampaxx. You can get them in psd or eps formats. Use them for whatever projects you like according to the producers. These stamps would make great social buttons to promote your social involvement. Just an idea.




Free stock textures from TextureKing. There are currently about 345 free textures to choose from in grunge, plaster, concrete, plaster, dust, rust, etc… Enjoy the design freebies.

Here is a great design freebie for creating dimensions. The free design tool is called the Golden Ratio Calculator created by Kevin Cannon. According to the website here is how it works. “There are two scenarios the calculator is designed for. The first is that you have a column with a certain width (perhaps to achieve a nice word:line ratio). You wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column. The second scenario is that you have a container and wish to divide it in two. Type in the container width and use the right side measurements.” Check out the site to see it in action.

Get free Subtle Patterns, a project by Atle Mo. There are at least 96 free design patterns you can use that are high quality and contributed by all over. You can download all patterns if you scroll to the bottom of the web page, but it’s a .pat zip file.

This is a really cool, but limited free design tool for web topography. Play around with the Font Combinator by changing the font types and dragging the levers left and right. The fonts come from the Google Font Directory mostly.

Here are two neat free color tools: Colour Check and Colour Blind Simulator. The colour check gives you feedback on brightness and contrast of the combination of foreground and background colors you input. The colour blindness simulator shows you how your image would look to a person who is color blind. The types of color blindness explained include protanopia, deuteranopia, and tritanopia. As the site indicates, the two free design tools are a work in progress so they’re open to feedback.

Check out this cool free Chrome plugin at the Chrome Web Store – MeasureIt!. This free design tool provides a way for you to figure out the sizes of any elements on a web page by merely drawing a box over it. This helps out tremendously when you’re trying to fit images into a specific area.