Dane Pieri – Build-A-Site

by dpieri @ 1:43 pm 28 April 2011

http://buildasite.heroku.com

Build-A-Site is a tool for making generative CSS based on select parameters. After surveying tons of sites designed in the last year, I have distilled what I think tipifies the design of sites in the categories Webapp, B2B, Social, and Lifestyle. Once you choose what type of site you want, and tweak the colors, you can download a CSS file that can function as a base for your website.

Inspiration
I can’t really think of many specific projects that inspired me. Mostly it was just observations about the formulaic nature of web design.
Things like this automatic movie plot generator pop up now and again, so I am somewhat inspired by stuff like that.

Research
You can see the screenshots that I saved into Evernote during my research here
Note that you can filter the screenshots by tag. I used more tags to categorize them than I included in the final tool.

From these screenshots I tried to distill generalizable features of different types of websites. For example, what are some features that one could find in 80% of mobile webapp site designs, or what are some features that would make a site instantly recognizable as a mobile webapp site.

Code
Build-A-Site is a Rails app. The full code is here

But these are the key files:
interface_controller.rb
_css.css.erb
show.html.erb
color_helper.rb

Video
Sorry, the free screen grab software I found does not show the mouse moving. Also for some reason the frame rate gets messed up when I upload to YouTube.
The best way to see the site is to just try it out for yourself.
http://www.youtube.com/watch?v=VwNw6iNKBNw

Icon

Short Description
Build-A-Site is a tool for making web designs based on user selected paramaters. Much like Build-A-Bear, after making a few choices the user is given a CSS file to take home with them.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2017 Interactive Art & Computational Design / Spring 2011 | powered by WordPress with Barecity