Time saving project starter kit

Filed in Dev talk 8 comments

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

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

Posted by Catalin   @   18 May 2011 8 comments
Tags : , ,

Share This Post

RSS Digg Twitter StumbleUpon Delicious Technorati


Nov 29, 2010
8:35 PM
#1 Carlton :

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!

Dec 1, 2010
11:30 PM
#2 Visitor :

I’ve got a few old projects that are a mess, I really could have used your tips back then :)

Author Dec 2, 2010
12:50 AM
#3 Catalin :

It’s never too late to learn new tricks, in this case, things that help and improve the workflow :P

Author Dec 2, 2010
2:29 PM
#4 Catalin :

Good luck! I’m sure you’ll make progress and eventually feel the need for more rapid ways to start implementing the usual tasks.

Dec 7, 2010
11:19 AM

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

Dec 5, 2011
10:49 AM
#6 open source development :

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

Jan 4, 2012
7:27 AM
#7 1099 form :

whats your facebook profile?

Author Jan 4, 2012
9:32 AM
#8 Catalin :

@1099 form

Hello, here’s the URL to my facebook profile page: http://www.facebook.com/catalinberta

Leave a Comment

Previous Post
Next Post
Luix designed by Video Game Music In conjunction with VPS Hosting , Website Hosting and Shared Hosting.