Time saving project starter kit

It’s time to talk a bit about some time-saving techniques.
Both graphic and web designers lose precious time rebuilding the same graphic elements, recreating browser form elements, coding the same code blocks, finding doctype syntaxes and what not. Just imagine how much you’d improve your web design workflow by having all of these reusable elements at your finger tips!

Inspired by Ben Gribbin’s post Save time and money by systematizing your photoshop workflow, I’ve built a customized project starter kit to not only ease the work for graphic designers, but for web designers as well.

Improving your photoshop workflow

Regardless of the design’s complexity, redesigning certain elements throughout your mockup is inevitable. As a graphic designer, you lose a great deal of time recreating bullets, shaping containers, adding text blocks over and over again. Inside the project folder, located in source files you’ll find a home.psd file that contains some basic and commonly used elements, created by Ben Gribbin.

What about form elements? How much time do you spend redesigning them? In source files, I’ve included Geoff Teehan’s browser form elements in PSD format, where you can easily drag and drop the form elements you need, they come in MAC Firefox 3 and Vista IE7 styles.

Improving your web design workflow

A well constructed HTML mark-up has a few good elements to consider, including the doctype, which few bother to remember them all since you can end up mistyping them, and do not worry, most web developers keep a nearby list of the doctypes that they can copy and paste from. All commonly used doctypes are found in : resources/doctypes.txt

Finally, you have a code folder with an index.html file containing the start-up HTML structure, followed by a css, an img and a js folder. The css folder already has the reset stylesheet built by Meyer Web and an empty style.css file for further styling purposes.

This looks pretty good for new projects, my personal project kit has a bunch more code snippets and other stuff I reuse within my designs, but then again, it’s entirely a matter of preference and I encourage you to customize your own project starter kit to match your needs. Add more reusable code snippets, perhaps some basic icons. Just copy the folder, rename it and get to work! 😛

I’d love to hear the time-saving tehniques you’re using, share them in the comments.


My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

8 thoughts on “Time saving project starter kit

  1. I’m still in my learning stages and I don’t have nearly enough content to have to worry about optimizing my work flow, but thanks for the tips. Wish me luck in class!

  2. Its an excellent post, Most of the designers they didn’t aware about this time saving kit. Which is very much useful for designers.

  3. Very nice post… i like this post most… it is very helpful to me… i like the content about improve web design work flow….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">