I am available for freelance work - HIRE ME

10 Of My Favorite Online Tools for Design and Development

posted by Matt Ward on Aug 7, 2010.

In this article, I want to share 10 awesome online resources that I use to make my work as a designer and developer faster and easier. These range from grid customization, to typographical tools, to icons and other forms of graphical generators. Be sure to check them all out.

As a designer, writer, husband and father (among other things), my life is pretty full and I absolutely love pretty much anything that can save me time. This is especially true when doing my work as a designer. Over the years, I’ve come across a number of awesome little websites and web apps, created by brilliantly helpful people to make my life easier – and yours too.

So, in this article, I’ve decided to share some of my favorite online resources. This isn’t to say that they are necessarily the best or the most powerful. They’re just the ones that I like to use. Some of them are generators of sorts, while others offer customizable and downloadable content that you can use in your own work.

Grids

I like using grids when I build websites, and the one I use most often is probably the 960 grid system, which I wrote about in one of my first posts on this blog. Not only does the grid allow me to create a beautiful, proportionate structure for my designs, it also provides an excellent and consistent framework. This, in turn, means that I can build concepts and prototypes faster than I could if I was coding the entire thing from scratch.

I’ve found this to be especially useful in my last few projects, in which I did a lot more of the design work in the browser itself, rather than mocking it all up in Photoshop.

Anyhow, while the plain-jane 960 grid worked well enough for me for my first few grid-based sites, I’ve been finding more and more that I want to tweak the basic parameters of the grid. For instance, I may want to increase the size of the gutter between columns, or change the number of columns from the standard 12, 16 or 24. Well, there are some awesome grid generator tools out there that I’ve used to do this.

Grid System Generator

The Grid System Generator is a great tool. Personally, I was first drawn to it because it could allow me to customize the standard 960.gs that I had become so accustomed to using. It allows me to specify different widths for the document, change the number of columns, and tweak the spacing of the gutter (through left and right margins). Yet, while CSS is adjusted for my settings, the basic syntax remains the same!

Generate custom CSS grids based on four different frameworks

Generate custom CSS grids based on four different frameworks

The Grid System Generator isn’t a one-system app, though. You can also generate custom grid frameworks based on the Golden Grid, 1KB Grid and Simple Grid systems, making it a truly flexible tool with appeal and practical application for a wide range of designers and developers.

Tiny Fluid Grid

As a matter of personal preference when it comes to coding, I tend to prefer working with fixed-width layouts. It just tends to match the way I think – mostly in exact pixel widths. However, on one website that I was designing recently, the background image was extremely important for my client, and because I was using a base width of 960 pixels, this background became somewhat obscured on displays set to 1024 pixels in width.

So, I needed a way to shrink the content area down for smaller displays, while still maintaining the default width for larger displays. In other words, I needed a fluid grid. I could probably have done the math myself and converted the existing, static grid to a fluid one, but fortunately I had just discovered the Tiny Fluid Grid generator a few days earlier!

Generate a custom fluid grid based on the 1KB Grid system

Generate a custom fluid grid based on the 1KB Grid system

This little web app will generate a fluid grid – based on the 1KB Grid System – and allows you to select the number of columns, the percentage width of the gutter, and (most importantly) the minimum and maximum widths of the grid itself. The syntax is pretty similar to the 960.gs, so I only had to make one slight tweak to the CSS to apply the grid to the existing site, though I had some other CSS trickery to do to force the grid to shrink down when I wanted it to.

Regardless, Tiny Fluid Grid was a real life saver on that project. It also has an awesome GUI. While most other generators just accept numeric input, this one has some really slick sliders that just make it fun to play with!

Typography

Obviously, typography is a hugely important aspect of any design, and the web is no exception. With the increasingly broad browser support for @font-face, and with font replacement services like TypeKit, designers are finding more and more freedom to do incredible things with typography on the web.

It has also paved the way for some really awesome typography-based tools on the web.

Font Squirrel

Looking to add some flair to your website, and move away from standard, web-safe fonts? Using @font-face is a great way to do this, but there are all kinds of licensing issues to be considered before you go uploading fonts to your server. There are also conversions to be made to account for the widest possible browser support.

Font Squirrel helps alleviate some of these issues.

Find fonts and download kits for @font-face integration

Find fonts and download kits for @font-face integration

It is basically a repository of different fonts which, based on Font Squirrel’s interpretation of their licensing, are freely available to use on your websites. That’s pretty awesome. But it gets even better. The site also allows you to download @font-face kits, which include the font files along with a complete stylesheet that you can easily integrate into your own code.

It has made finding and integrating new fonts into my website an absolute dream.

What the Font?

Ever seen a cool font and wondered what it was? If it was from a famous image or logo, you may be able to find the answer on a forum somewhere (I have before), but that’s not always going to work for everyone. Well, the folks at MyFonts.com have developed a handy little app that you can use to try to satisfy your curiosity. Meet WhatTheFont.

Use this tool to identify cool fonts

Use this tool to identify cool fonts

Basically, you take a screenshot or photograph of some typography – preferably something unique and well spaced – and upload it to the site. It will then try to decipher the different characters and ask you to confirm that it identified the letters properly. One you’ve done that, the app will go out and try to determine what the font is.

Obviously, it’s not perfect, and the results are going to depend a great deal on the quality of the original source image. From what I can tell, the results also appear to be from MyFont’s own library (which really makes sense, all things considered). Still, it’s a useful little tool that’s fun to play with, and which can potentially introduce you to some awesome new typefaces. I have an app for my iPhone too!

Icons

I love icons. I love finding them, designing them and finding interesting ways of integrating them into my work. A few months ago, I also wrote a series about using icons on the web. All that being said, there are a few really awesome icon resources out there.

Iconza

Iconza is a free icon set fused together with a customizable generator. Basically, it is a set of 112 awesome, monochromatic icons that you can download and use in your designs (with attribution). All on its own, that’s pretty awesome. But it gets better.

Download this icon set with customized size and colour

Download this icon set with customized size and colour

The Iconza website actually allows for a reasonably broad range of customization options. There are 15 different colour options, including five shades ranging from black, to grey, to white. There are also three different sizes – 32×32, 24×24 and 16×16, and even just a cursory glance will reveal that the icons are optimized for quality at each size, rather than just scaled down. Lastly, this little web app provides an RGB colour selector for setting the background colour of the icons.

Feedicons.com

There is no shortage of RSS icons out there on the web, but if you’re looking for a nice simple solution for your visual RSS needs, then Feedicons.com could be a great solution for you.

Free and simple RSS icons

Free and simple RSS icons

There are a few different download options, such as a 2 icon pack of 28×28 and 14×14 (the smaller one does look a bit off though). There is also a tiny pack of coloured 12×12 icons. The big one, however, is the developer pack, which contains icons ranging from 12×12 to 128×128, in all kinds of different image formats including editable vectors. This allows you all kinds of flexibility to customize the icons.

iconSweets

Monochromatic icons are probably some of the most useful, in terms of being able to easily integrate them into so many different types of designs, and there are so many different places to find and download such icons. One of my recent favorites is the iconSweet set, by YummyGum.

60 simple and beautiful monochrome icons

60 simple and beautiful monochrome icons

This pack contains 60 beautifully designed vector icons that appear to be designed primarily for use in your next iPhone or iPad app, but which could easily also become a focal point of your next web design too. Again, the fact that they are vector based makes them extremely customizable, which is always a bonus for any designer.

Admittedly, I also just really love the design of the website, which is part of the reason that I chose to include this particular set over some of the many others. The pink and grey colour palette and sliding images within the balloon are all really slick. That being said, however, there are lots of other similar sets available out there. To find more, check out this recent article of at SpyreStudios: 40 Minimalist Icon, Symbol & Pictogram Sets.

Other Graphics

As great as icons are, however, they are not the be all and end all of supporting graphics, and there a few other cool graphic-generating web apps that I really dig.

Placehold.it

When building prototypes and mockups of websites, I often don’t have actual images that stick in yet, and need to create a placeholder image. Traditionally, what I used to do was to create a single pixel image and then adjust the properties to stretch it out the the required size. That worked pretty well, but thanks to a recent tweet from SwissMiss, I discovered this incredibly simple and useful little site called Placehold.it.

Grab simple placeholder images of any size

Grab simple placeholder images of any size

Basically, this simple web app does one thing – it generates greyscale placeholder images of absolutely any size, all with a really simple, URL based syntax that is super easy to remember. All you have to do is insert the appropriate URL into your code, and the app will serve up a placeholder image for you.

It may not seem like a huge deal, but I’m pretty excited about this recent find. I can see it saving me a ton of time in future projects.

StripeMania

Stripes don’t seem to quite as popular in web design as they were two or three years ago, but they’re still something that will never really go out of style entirely. Every once in a while, I find myself needing some stripes for this or that – and not always just for on the web.

StripeMania is an awesome little web app that I’ve blogged about before in my article “17 Useful Pattern Resources“, which I always return to when I need some kind of repeating stripe pattern.

Stripemania

Stripemania

For an app that just generates stripes – something that might seem relatively simple – there are a surprising number of options and controls on this one. You can adjust the stripe width, the spacing width, the orientation, the colours of the stripes and the background and so forth. You can even set a gradient. All this makes for a powerful little tool with almost limitless customization.

AjaxLoad

If your websites are loading any kind of dynamic data through either AJAX or some other custom methodology, chances are that you’re going to want to include some sort of animated graphic, in order to indicate to the user that the data is actually loading. The AjaxLoad site is an awesome solution for this need.

AjaxLoad allows you to generate custom loading animations in GIF format

AjaxLoad allows you to generate custom loading animations in GIF format

You can select from over 30 different animated graphics, select the foreground colour and the background colour, then generate and download an animated GIF based on your choices. If you want, you can even make the background transparent, though of course you’ll have to take into consideration the natural drawbacks of GIF transparency.

With the broad range of animations and the extensive customization, this little resource is a great one to keep in your bookmarks!

Conclusion

Obviously, this list is not an exhaustive roundup of all the different resources that are out there on the web. Such a list would be much, much longer and would include all kinds of goodies and awesomeness that I didn’t have the chance to include here. As I stated in the opening, these are merely some of my favorite, bookmarked resources, which I thought might be worth sharing.

What about you? What are some of your favorite resources and web apps that make your work as a designer or developer go more easily? Please feel free to share them!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Aug 7, 2010

Jocke says:

Some of these tools sounds very interesting. Had big trouble with fonts, thanks for sharing :)

Aug 7, 2010

Ben says:

Nice article.

That ‘Ajaxload’ website will come in handy, thanks for bringing it to my attention

Aug 7, 2010

Kevin Tan says:

Thanks for sharing such great resources, Matt. Photoshop and Dreamweaver are my main tool when I’m developing a site. These web-based tools will surely help a lot, especially the fonts, icons and stripe mania.

Aug 7, 2010

Sergei Tatarinov says:

Thanks Matt, bookmarked 6 of them for future use.

Aug 8, 2010

Rehaan says:

Hey thanks for sharing it. I like placeholder it would be very handy.

One small input if it might help some one for icon http://www.iconfinder.com / its very useful and free i often use it

Thanks

Aug 8, 2010

Elliott the web design guy says:

Some great tools here, i’ve been using the photoshop 960 grid for a while now but never real thought about using the already generated HTML template – you have certainly inspired me to take a different approach to the way I design. Thanks for sharing

Aug 8, 2010

Seemly says:

I love articles like this, at it shows how pro-active people in the design industry need to be to make their website design projects run easier, quicker and smoother.

I really like the idea of the image placeholder tool. Although it’s such a small and simple tool, thats what makes it so appealing.

Many thanks for sharing Matt. Much appreciated.

Aug 8, 2010

Ryan says:

Nice list =) If you code in Notepad++ you should take a look at the WebEdit plugin, a real time saver. It allows you to create keyboard shortcuts for inserting HTML- eg: Ctrl+Shift+D would insert an opening and closing div. It could easily be customised for use with the 960gs to deploy blocks with just a few keypresses

Aug 9, 2010

Alex says:

Great articles! Thanks for the tools.

Aug 9, 2010

A Different Designer says:

Thank you for sharing these… I have a few new favorite sites.

Aug 9, 2010

Matt Magi says:

Added this to my AWESOME DESIGN TOOLS bookmark folder! Thanks for this.

Aug 9, 2010

Ryan says:

Hey thanks, the generators and the icons are a big help. I usually use iconfinder.com for icons and general graphics but I think I’m depleting that one dry!

Icons and subtle backgrounds are my weak points as a designer as I’m not an artist… :S

Aug 10, 2010

Tony says:

Placehold.it is a win!

Aug 10, 2010

Ling says:

Thank you for sharing these… I have a few new favorite sites

Aug 10, 2010

Leo Diniz says:

Nice article. Thanks!

Aug 11, 2010

FeryKloucek says:

Thanks for sharing these great tools. I didn’t know about some of them, but I’m going to try them for sure! :)

Aug 12, 2010

BreRoz says:

Fantastic! There are some new ones in here for me I can’t wait to view! Thanks.

Aug 14, 2010

Hugo says:

Great, very thanks

Aug 16, 2010

Linda says:

This is a good post, I stumbled across your post while looking for downloads. Thanks for sharing, I’ll be sure to come back.

Oct 12, 2010

Bunny Zeoli says:

Great style is usually excellent by some, but to some, it’s trash. Trust us, we’ve encountered our share of differing views on our very own design work…

Oct 26, 2010

Desenvolvimento de Websites says:

Wow…
Sites are really valuable for developers sites …
Mainly this means to discover the sources of images.
I’ll recommend

Dec 7, 2010

Libby Fisher says:

Wow – this is a GREAT collection of tools. I haven’t heard of a lot of them, I can’t wait to use them!

One of the sites I use often is http://www.border-radius.com – it generates the codes you need for a border radius and its very easy to use.

And I use http://www.december.com/html/spec/color.html regularly to find new colors.

Another tool that makes my life 100 times easier, is FireBug – and yes, I know it’s a plug in but I had to mention it anyways because it is an absolute lifesaver… :)

Dec 10, 2010

ketty james says:

Appreciating the time and effort you put into your blog and comprehensive information you provide! I’ll bookmark your weblog and have my children check up here frequently. Thumbs up!

Feb 18, 2011

Larry Popestephulous says:

for image mapping I LOVE image-maps.com/.

saved my butt.

Leave a Comment

Copyright © Echo Enduring Media 2009-2014