DesignM.ag

As a designer, anything that you can do to make more efficient use of your time will ultimately increase your productivity. When you’re starting a new design you probably do many of the same tasks over and over again to build the foundation of the site. I’d like to point out a number of resources that others have created to streamline the process and give you a starting point that can save you some time.

CSS frameworks are of course popular for this purpose, and there are a number of different frameworks available. However, outside of the typical framework choices there are some other great resources including skeleton templates that will simply give you a starting point for your design that you can style in any way you like.

Additionally, for WordPress designers/developers there are a few different blank themes that you can download. These themes will include the standard WordPress files and the coding to have a functional site (which can save you a few hours) but they’ll leave the styling up to you.

UPDATE: We recently launched a gallery site to showcase the best blog designs for your inspiration – Blog Design Heroes.

Blank HTML/CSS Templates

Dyanamic Drive

Dynamic Drive provides a large number of CSS layouts, including two column, three column, fixed width, liquid layouts, and CSS frames.

Code Sucks

Code Sucks offers over 90 free CSS layouts. There are over 50 fixed width layouts and over 40 faux column layouts.

Layout Gala

Layout Gala has 40 CSS layouts to choose from. You can download them individually or as a pack.

CSS Creator

CSS Creator is a little bit different from the others. Rather than providing blank templates, you will enter the details that you want and it will create the code for the layout.

Blank WordPress Themes

Whiteboard

Whiteboard is a free WordPress theme framework. It contains all the necessary tags and files, plus a little bit extra. Unfortunately there is no demo available on the site. I’ve downloaded it and it really does give you a blank theme with just the basics (see image below).

Starkers

Elliot Jay Stocks has created the Starkers theme with no formatting whatsoever, just the basic WordPress coding. Again, there is no demo available on the site, but you can refer the image below to see it in action.

Naked

Unlike Starkers, Naked does contain some very basic formatting. You may prefer it one way or another, so try them out and see what works best for you.

Sandbox

“The Sandbox is a powerful tool available for WordPress theme designers and developers. The Sandbox can be easily designed just with CSS, so beginners will feel comfortable not bothering with PHP.” You can see a live demo of Sandbox at plaintext.org.

Starter Theme

WPCandy has released the Starter Theme. It is not an out-of-the-box usable theme. From the words of the creator, “This isn’t a framework, and it’s not intended to work as a theme right out of the box. Rather, it’s a basic template that I can paste right into without worrying about typing out the loop and standard header.php information every time I create a theme.”

CSS Frameworks

YAML

Yet Another Multi-Column Layout (YAML) “is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.”

YUI Grids CSS

YUI Grids CSS from Yahoo! “offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.”

Blueprint

Google’s Blueprint “is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.”

What Do You Use?

If you’ve used any of these themes/templates/frameworks please share your thoughts in the comments.

For more design/development resources and tutorials see:

• Easy Display Switch with CSS and jQuery
• Create a jQuery Image Rotator with Description
• 25 jQuery Navigation Tutorials
• 25 jQuery Plugins for Navigation