Clearing your creative block – CSS Galleries

November 1116, 2009
Categories: Blog, Resources, Tutorials

CSS Gall thumb

One of the first things I do when I design a website, even before I open Photoshop or Fireworks, is I start researching other websites.  As the saying goes, “The wheel has been invented already…by some guy…with a big nose…in Pittsburgh…on a Wednesday” (Or something like that.  I never really remember saying that well).  I generally need to look at 100+ websites analyzing layout, colors, typography, user-interface, and all those good things that makes a web design stand out.  This process is important because creativity comes from your five senses and this exercise helps with one particular sense (say it all with me)… VISION.  Some of you may said EYES which is also correct (but not grammatically correct).  Yes, your friends have told you that you have a ‘creative eye’ not a ‘creative nose’ or creative tongue’ (insert joke here).  So exploit that creative eye, and input vast amounts of information at once.   I find, after about 10-20 site, my mind automatically starts formulating the overall concept, and slowly the website visually starts to take form.

Lets Get Started

There’s a beautiful service that many people provide these days called CSS Galleries.  These websites are created so YOU can be inspired (I’m pointing my finger to the screen to be dramatic, but my office friends now think I’m crazy).  Yes, hundred and hundreds of websites laid out for you to see. Some are categorized by industry, some are categorized by colors, and layouts.  Most of them are sortable and filterable by rank and date.  Use these filters to your advantage.  As you narrow your creative vision for your web project, you will also narrow your search.  But to start,  just like you used to do with a Sears catalogue (oops, dated myself), open the gallery and start browsing through the pages.  I’ll get you a good list of CSS Gallery websites, but first some…

Quick Tips

  1. Browse first, then analyze second.  I do this by not just clicking on the link, but hold down the CTRL key and click.  This opens the page in a tab across the top of your browser.  I generally open 20-25 tabs before my computer starts slaving like beaten-mule.  Then I click through the tabs and start analyzing the design.
  2. Put on music.  Yes, you’ll be here for an hour or 2.  Maybe 3.  Music (or as I call it ‘Organized Noise’) will help draw out your creativity.  And it helps pass the time.
  3. Pencil and paper.  Yes old school, art school.  I’m assuming you have some sort of artistic skill, and at some point you, your mom made you go to bed, but instead you grabbed a paper and pen and a flashlight just to doodle a little more under the sheets.  As you look through all these websites, take notes.  Jot down drawings.  Again with the senses, you should translate information from your eye, to your brain, back down to your hands.   This is, what I call, eye-brain-hand-pencil-paper.  OK, I’ve never ever called it that.  But I should from now on.
  4. You use Delicious right?  Or some sort of bookmarking tool?  I do.  At this point, just after I’ve used-and-abused all the inspiration from a website, and I’m just about to close the tab, I do a magic trick and split my brain into two. I first decide if I’ll need to go back to this website for further discovery, during my designing process, and create a tag specifically for that client.  Then I decide if there are particular design elements that I could use in the future and create tags accordingly.  For example, wood, blue, sky, large-background, grunge, etc.  Nothing worse then saying “I remember this site I once saw but….
  5. For goodness sake don’t plagiarize.  Inspire don’t desire.  (car tire?)  And don’t give me that, “Everything is done already” or “I just changed this little bit”.  If you have to make an excuse, than stop and slap yourself.  And start over.

CSS Galleries List

And now for the much awaited list.  There are 100+ different sites to visit, but I generally start with these 10 css gallery sites.

Best DesignsCreamy CSS





There are hundreds of more galleries, and new ones are popping all the time.  A great place to find more galleries is at where they not only list links to galleries, but Alexis rankings and a direct link to the submission page as well.

« | »

One Response to “Clearing your creative block – CSS Galleries”