Image listing - collage view with dynamic column generation.
Image listing - grid view
Image details page
Moodboard application

Image Spark

www.imgspark.com
Project By: teehan+lax
Scope: front-end and backend-end development, firefox extension
Built Using: HTML / CSS / JavaScript / MooTools / PHP / CodeIgniter / Amazon S3

As one of the first labs projects at teehan+lax we decided to build a tool that would help fix a problem that we saw happen time and time again. As designers you collect bits of inspiration as run across them on the web. For most it's a folder on their desktop where they horde pictures without any thought. When it comes time to check out what you've collected it's a big jumbled mess of images. Our solution was to build an online tool that would allow you to catalogue what you've collected and organize them with tags. Not only are you able to draw inspiration from your own library, but other's libraries as well.

This was a big project for our 2-3 man developer team, especially since our PHP skills were a little rusty. It was also the first time we'd ever used a PHP framework, Amazon S3, and the first time we ever had to deal with more than 500 users. After laying out the architecture for the site and shaking off our PHP rust, the ball was rolling and before long we had a semi-functional backend with a truly barebones front-end. We started laying the front-end skin of the backend bones and the site started to take shape. Several AJAX calls, some JavaScript trickery, and a moodboard application later the site was finished. While I just made this seem like a simple task, it was anything but. Through a lot of it we were learning as we worked, which is my favorite way to work (really!)

Some of the key features of the site include:

  • Collage view listing pages with dynamic column generation, and resorting on window resize
  • Ability to create instances of other peoples images
  • Moodboard dock at bottom of every page
  • Ability to drag any image into your moodboard dock and add it to any one of your moodboard libraries.
  • Full moodboard application with it's own set of features
    • Reposition, resize & restack images on the moodboard
    • Ability to move the whole moodboard canvas
    • Ability to change background colour, grid, and snap to grid
    • Moodboard grid colour (black or white) determined by background colour brightness
  • Firefox extension for right click uploading of any image on the web

latest project

Image Spark Image Spark A creative tool that helps you collect, discover, share, tag and converge images that inspire you and your work.

latest tweet

I'm happy IE9 will be a decent browser, but why is everyone so excited about it? It can almost do what other browsers already can. Big whoop

lastest photos

Time Square New York Skyline World Trade Center hell U.S. Postal Service Temporary Headquarters