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