Templates & Frameworks to Work more Efficiently

Posted August 19th, 2010 in web design, web development

Over the past few months, I’ve been looking at ways to really streamline my design and development process. When I create my design mockups in Photoshop, I tend to have hundreds of layers and sometimes when inspiration hits, my first instinct isn’t to organize these layers. So I end up with a crazy mess of layers and I have to hunt around for that header background gradient. I was using the 960 grid template to make sure everything was in the right place but it still didn’t help my layer disaster zone. Then, I came across this post by Mindy Wagner. Being an experienced designer, Mindy was having the same issues I was and decided to do something about it by putting together these Photoshop templates that have all the layers named with the 960 grid layer already in there. It is extremely organized and has helped me tremendously. So now when inspiration hits, I just open up this template, save as and everything’s already organized for me! She also includes a style guide template so you can organize the colors you’re using for links, headings, etc. This is great if you have to pass this work onto another designer. So many thanks to Mindy Wagner for putting these together and giving them out for free!

Now I touched on the design process, but I also wanted to mention how useful and time-saving it is to put together your own frameworks for front end development. I’ve used the 960 frameworks before but I find you end up with too many divs since you may not be using all of them. So you wind up with too much code or have to waste time deleting loads of code. So instead I put together my own frameworks based on the 960 grid system but with a lot less code. I just included all the basics like the doctype, meta, links to stylesheets and JavaScript and then some of the basic layout like containers, headers, menu, content, sidebar and footer. I’m sure I’ll be updating and adding to it from time-to-time but its great to at least have a starting point rather than write everything from scratch each time.

bexxie frameworks Templates & Frameworks to Work more Efficiently

Anyone else have any time-saving tips for the design and development process?

Bexxie Avatar

About the author

Bexxie has been designing for the web for over 5 years specializing in pixel perfect designs, clean, semantic code and custom WordPress themes. She also enjoys producing music, doing yoga, eating noodles and playing with her dog Jack.


4 Responses so far

  1. flash says:

    nice post // are you gonna release your streamlined 960 template ?? (:

    • Bexxie says:

      Maybe in a future post :)

      It’s really just a stripped-down, starting point with basic styling and layout. I just got sick of writing the same code over and over again or using a bloated framework where I didn’t need to use all the containers and divs that were in it. This has helped me keep my code a lot more stripped down and keeping the file size smaller, which helps optimize the site I’m working on.

      • flash says:

        word // that’s really smart // i’m in the process of getting a nice strip’d down version of wordpress for myself cause i’m tired of all the bloat ..

        your stuff seems really great, maybe we can co.laborate sometime (:

      • Bexxie says:

        Sure if you got a project you need help with, feel free to contact me!

Leave a Reply