Five free tools for finding design inspiration

Whether you’re working on a personal project or a package for your news organization, there will be times when you simply hit a wall and have a hard time moving forward design-wise. It happens to the best of us. When those moments inevitably occur, these are the websites I visit for finding inspiration in color schemes, design layouts, logos, CSS structure, and typography.

Design samples

Web Creme

Web Creme is a regularly-updated gallery of websites with rockin’ designs. There are hundreds of designs to peruse if you’re looking for inspiration in general site design, creative navigation or use of imagery and graphics. It’s also a one-stop shop for simultaneously finding color and typography inspiration. There’s nothing wrong with finding bits and pieces you like from each site and putting it together to make your own masterpiece with your own twist. Stand on the shoulders of giants, right?

Color schemes

If you’re looking for an individual color, a full palette or patterns, ColourLovers is the community to visit. With more than a million schemes to choose from, you can browse through categories like weddings, home, fashion or business. If you have an eye for colors, you can make an account and upload your own for the world to use. The ColourLovers blog features some of the best colors and patterns from the community.

Other great places to go for finding colors are Adobe’s Kuler which you can sync with your Photoshop preferences if you have CS4 or higher,  and Color Scheme Generator if you already have a good idea of the base colors you want to use.

Identity inspiration

Logo Pond

For me, the biggest roadblocks come when creating a logo for a website or a graphic, but we can’t skip out on these elements. They’re important for visual engagement. LogoPond has great identity inspiration from very talented designers who upload their comps to the site to be rated.

CSS Frameworks

HTML5 Boilerplate is a well-document framework for getting started with HTML5.  From Github, you can download a .zip file that includes images, CSS, javascript and all the other necessary files to get the site up and running. And if you have any questions, mosey on over to the documentation or forums to search for answers or ask.

If all you’re looking for is a basic CSS framework, the 1140-pixel grid system and 960-pixel grid system are excellent starting points. These layouts are based on percentage-width columns so that you don’t have to worry about applying classes and pixel widths to divs when creating a site. All you have to focus on is the content within and which column widths you want to use — and where.


Google Webfonts

Google has a nifty font API that allows you to use pretty fonts on your site without needing to purchase a license, replace fonts with images, or do any other annoying technique.  The API is limited to fonts within Google’s own directory, but the selection isn’t terrible, especially considering that it’s free.

Using the open-source API (a collaboration with TypeKit) is simple. Just define the replacement fonts in a stylesheet and use the WebFont Loader to call the Google API and ta-da — you’re on the path to overcoming your design roadblock and making your site a little prettier.