A custom-built Rails application for raffle drawings at BarCamp Rochester
October 2011
When BarCamp Rochester approached me to build a web app to draw winners for raffle drawings, I let my imagination run a bit wild and came up with the concept for the RAFFLE-O-TRON 3000. Who doesn't love a fun project to take their minds off their regular work?
Raffle-O-Tron app in the browser. View full resolution image.
Inspiration
To connect with the hacker spirit of BarCamp, I chose to use design elements that hearken back to old electronics. Here are some of the images that I used as reference:
Design and Custom Graphics
After collecting inspiration, I set to work creating the graphic elements that would form the final design.
All of these elements were created from scratch. I used a stylized, largely flat-shaded style that clearly communicated the purported era of the tech without striving for hyper-realism.
Some of these graphic elements (like the reel-to-reel tape) were not used in the final design. View full resolution image.
While I liked the label tape in concept, I ended up not using them in the final site.
I was able to find a nice set of transparent segment display PNGs from Wikipedia. With some CSS, I displayed the transparent images over a red background to create a dynamic segment display that we could easily update with semantic markup.
This tractor feed dot-matrix paper image was created completely from scratch. Conbined with a fixed-width font in the browser, it created a nice effect for our winner listing page.
The final product
Once the graphic elements were created, I moved on to building static prototypes for the two key views of the app.
Where possible, I used CSS and webfonts to minimize image use. Futura PT was the font of choice and was served via Typekit. The logo uses Outage from Lost Type Co-op.
The glow of the "CRT" text was achieved using CSS text shadows, with the aperture grille screen effect implemented as a background image of a CSS pseudo element layered on top of the text. The "screws" at the corners of the main panel are actually all the same image, but rotated using CSS transforms to appear at different angles. Other engraved/embossed text effects were also created using text shadows.
The "Luck Amplitude Interference Quotient" meter is just an animated GIF. View full resolution image.
jQuery used for the type-on animation effect. Download video
The winners list. View full resolution image.
While I was working on the front-end, my partner Rufo Sanchez was busy building the Ruby on Rails backend of the app. The Middleman prototypes I built were easily converted into Rails layouts and views.
The Future
The Raffle-O-Tron 3000 is no longer live, but may be resurrected for future BarCamp Rochester unconference events.
