Speed Up Your Design and Development

June 10, 2009
Posted By: Jonden Jackson

Look, as designers and developers alike, at some point in time we are all guilty of it. Maybe we spent a little too much time on design, or maybe we just couldn’t seem to get the right color scheme, or worse we spent too much time indenting our CSS and not enough time thinking about the code we were writing. Whatever the case may be at times we need some helping hands, and we need them to be lightweight.

Well you are in luck! We have been scouring around studying and finding some of the most common practices in design and development today and have prepared a list of applications that will save you time in the long run. Without all of the fluff of course.

So take a peek, give these sites a chance, we use them and you would be surprised how much time and tears this could wipe off of your projects.



Typetester is an online application to compare and contrast fonts on your screen. By controlling line height, word space, and weight you can visually see what your type will look like before even adding it into your stylesheet. Oh yea, did we mention it generates the CSS for you?

Feed Icons


Need to grab some feed icons on the fly? Check out Feed Icons and simply grab the standard or colorized RSS feed icons. Also has some ul styles and li styles with the icons that could save some valuable development time.



Big backgrounds slowing your load time down? Check out Smush.it, a site solely built to compress the life out of your images without losing any clarity or quality. Don’t believe it? Try it out.



Ever had De Ja Vu? Of course. But have you have had it while writing code? Even worse. If you are starting to notice things that you consistently write out and wish there was a faster way just simply drop by SNIPPLR. This site will store those little pieces of code that you write over and over again so next time you catch yourself starting to write it out – stop – then go grab it from SNIPPLR.

Another great feature to this site is you realize quickly there are more developers out there who share your pain, but they also carry burdens of their own. You can view the codes that they use the most often and you can copy theirs! Great find!

jQuery Themeroller

jquery themroller

I’m pretty sure everyone is familiar with jQuery now so we will cut right to the chase. You should check out jQuery Themeroller. It allows you to design custom jQuery UI themes for your projects. Go ahead and customize your theme and if you change your mind later, simply alter it and download the code. If you don’t have time to customize your own, just go check out the theme gallery and download one within seconds. Just one more reason flash should never be used for displaying content :)



Kuler is an Adobe created themed community built around one thing. Colors! You can explore others custom created colors, create your own or upload your personalized and custom photos to create your personalized themes. This is a MUST have!



This one is pretty much a no-brainer but very handy to have when you want to just grab the image and grab the colors from it. Super simple, and the colors automatically picked are usually spot on. Give this one a go when your custom schemes just aren’t getting the job done in time.



Stripemania is a simple free tool to create seamles stripes for your designs. You can able choose the size, spacing, color, and gradient. This should save you a lot of time when your next striped background comes along.

launch splash


Working on a site but need a temporary splash page for it? Check out Launch Splash. Simply fill in the domain you want and pick from a list of nicely designed templates that fills in the blanks for you. A must have!



Have you ever been in such a rush to start coding your stylesheet that you just start coding on one line and don’t even bother with indenting? This is fine…if you are doing a 404 page. As we all know that when coding like this it’s going to be a mess down the road. That’s way we suggest Tabifier, if you do happen to find yourself rushing through your code to see the outcome, take a breather, copy the code and let tabifier take of it. It will indent it all for you!

Em Calculator


Are you good at math? If so then lucky you! If not, however, you are in good company. You know the difference between ‘px’ and ’em’ and when you should use them, but what about when you have to convert pixels relative to em units? Look no further, just visit Em Calculator and skip the hassle.

  1. Ema

    Posted on Jun 11th, 2009 at 6:13

    Lifesaver. No, really.

  2. Shibi Kannan

    Posted on Jun 18th, 2009 at 6:13

    Very nice and useful collection. I really like your site design. I am a web designer just starting out, but very good with Photoshop. Let me know if you need any help with your projects. I will do it free as long as you share attribution credits and a small link to my portfolio. Thank you,

  3. Adrian Rodriguez

    Posted on Jun 20th, 2009 at 6:13

    First of all. Awesome Work! Second, thanks for the tips, this should really help me with my future designs, thanks.

  4. Conrad Chu

    Posted on Jun 30th, 2009 at 6:13

    Give punypng a try ….pretty good compression compared to smush.it

    Make the world more puny!


  5. Grant McAllister

    Posted on Jul 4th, 2009 at 6:13

    Great list, I will definetly be checking some of these out.

    I love the site btw, one thing is the text could do do be a bit bigger as I have good eye sight but still had to zoom in on the mac (using safari 4, not tried it on any other browser).

    Grant McAllister

  6. Bill Gates

    Posted on Jul 11th, 2009 at 6:13

    Amazing. I really appreciate the time and effort you put into your website. Also, I’ve been working on a website myself and your blog posts are a solid inspiration to “keep it steady”

    Great freebies!

    -Microsoft Founder Bill Gates.

  7. Bill Gates

    Posted on Jul 15th, 2009 at 6:13

    BOOKMARK’d and added to the library of things to study!

    great motha fucking post!