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.
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!
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!
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!
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.
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.
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.
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!
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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: