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.
8 thoughts on “Time saving project starter kit”
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!
Good luck! I’m sure you’ll make progress and eventually feel the need for more rapid ways to start implementing the usual tasks.
I’ve got a few old projects that are a mess, I really could have used your tips back then
It’s never too late to learn new tricks, in this case, things that help and improve the workflow 😛
Its an excellent post, Most of the designers they didn’t aware about this time saving kit. Which is very much useful for designers.
Very nice post… i like this post most… it is very helpful to me… i like the content about improve web design work flow….
whats your facebook profile?
Hello, here’s the URL to my facebook profile page: http://www.facebook.com/catalinberta