Thinkyhead's Site Portfolio

Alchemist Lounge
http://www.thinkyhead.com/_alchemistlounge.com/

Sadly, this restaurant closed! The link above will take you to my local copy of the site. Enjoy!

Alchemist Lounge was a restaurant conceived and executed by the genius restaurateurs Lyndon Fuller and Relena Erskine. For most of the 2000's Lyndon and Relena honed their service skills in the trenches of restaurant service, saving their pennies and waiting for the right time to take their first bold step into restaurant ownership. After years of blood, sweat, and tears - not to mention a few precipitous moments - Alchemist Restaurant and Lounge opened in 2006 to rave reviews.

The restaurant's interior was high-quality and high-ceiling'ed, Relena's misty black and white photographs were framed by walls of deep orange and brick. Sights, sounds, seats, tables, and more were provided courtesy of the kismet of Craig's List. Somehow the basic style of the interior led me to try an unusual color scheme: Black and White on Red-Orange. Just finding other colors that fit with red-orange was the strongest design challenge of this site.

The "Circle-A" logo was conceived by Lyndon and Relena, produced by Keith Clark Design, and given to me to build a website around. I chose to use Flash for its idea-generating power, and the results were very rewarding.

Alchemist Flash Posters

My favorite part of working on Alchemist Lounge was making posters for their special events. These give me a chance to have a little fun and make funny music loops in GarageBand. Some of them were admittedly pretty bad, but Flash is like that! Here are a few of the less egregious examples:

Educational Video Center
http://www.evc.org

Educational Video Center teaches young people to use the tools of media production to tell stories. Students use their skills to produce documentary videos that are available for purchase.

This was my first experience building a site with the Drupal CMS, under contract for Knectar Design. The visual Design was produced by RockPaperPixel, and my job was to implement the various pieces that make the site work, including a few Modules, the Theme, and other custom elements.

Let me point out one cool part. Drupal uses a Javascript library called "JQuery" that makes it very easy to do dynamic content. The Video selector on the right side of the home page is built from two separate Drupal Views, with one designed to manipulate the other. Given more time it would have been easy to implement cross-fading or other fancy effects, but I restrained myself! Before JQuery it was voodoo to build such things, especially with so many cross-browser issues. Thanks to Drupal and JQuery, this only took about an hour to build.

Thinkyhead
http://www.thinkyhead.com

Thinkyhead was originally built in a very minimal style without any kind of framework, just using PHP as a glorified template system. For this reason it was a little tedious to add new content, and it didn't have all the bells and whistles we've come to expect in today's socially-interconnected Web 2.0 world. When it came time to update the site and give it a more modern foundation, I didn't have to give it a second thought. Drupal was the only way to go.

The Thinkyhead site remains pretty simple, but makes full use of the powers of Drupal for content management, syndication, caching, breadcrumbs, indexing, sitemaps, keywords, event logging, analytics, and much more. In terms of design, I expanded the layout and enlarged the font to accommodate today's higher resolution displays, added a nifty breadcrumb region to the page, and simplified the templates by using a table-free CSS layout.

The site has become my main staging ground for Drupal modules in development and for exploring new ideas and technologies. While not nearly as media-centric as EVC, the site hosts a little audio and will soon be featuring video demos of my Mac and iPhone software. At the moment the pages are kind of homogenous, but I'll soon be playing with the interior page layouts to add some variety.

UMass Amherst Gateway
http://www.umass.edu/

In my capacity as a developer for Gravity Switch I had the opportunity to be the sole programmer on UMass Amherst's overhaul of their main gateway site and their News and Feature Story pages. The design was done in-house by Hal Marshall, and my first task was to adapt the code produced by Dreamweaver to create standardized HXTML / CSS templates that are used throughout the site.

The code behind the site is all custom PHP, using CodeIgniter and a couple of custom CMS's. The back-end connects to MySQL and Oracle databases to produce the timely content that appears on the front page and the large archive of News, Events, and Features. I was responsible for adapting their existing CodeIgniter News system to produce the Feature Stories that appear in different parts of the site.

The slideshow at the top of the page is based on Slideshow Pro, which uses a couple of XML files as input to customize both the appearance and content. The images and XML that drive the slideshow are generated by the CodeIgniter Feature Story back-end. (It's always fun to write code that generates other code - in this case XML -especially when it produces such nice graphical results.) Different sections of the site have different slideshows depending on where each Feature Story is set to appear.

As UMass Amherst prepares to update their site over the next year or so - this time with Drupal - I look forward to having the opportunity to work with them again!

Vegan Radio
http://veganradio.com/

Vegan Radio is an irreverent radio show and podcast about veganism, animal rights, compassion, and other issues related to sustainable living. The show originally aired on WXOJ-LP in Northampton, Massachusetts, but in 2010 it went on hiatus and switched over to a podcast-only format. I've been a co-host of Vegan Radio since 2006, at which time I also helped update and manage the original site.

The original Vegan Radio was built on older technology so it took some extra time to publish new episodes and other content, but hey, it was all we really needed! You know the rest of the story: social media exploded, Facebook and Twitter festooned the internet with annoying little buttons, and user expectations for websites went up another fathom. Instead of reloading whole pages, sites use AJAX to fetch just the portions of the page that change. We actually find it inconvenient now if we can't use our Facebook or Disqus accounts on sites that require a login.

To make all this possible on our new site I started with Drupal 6 and the Zen theme. Drupal would immediately provide most of the vital features we'd been missing, while Zen makes theme creation go really quick. The new design was composed in Adobe Illustrator and Photoshop from a combination of original line art and photographic elements. I decided to use an 1100 pixel fixed-width layout, which is really nice for laptops and gives a lot of room to play with designs.

Taking cues from news sites, the important content appears "above the fold" with prominent links for the main destinations. Behind the scenes the content is structural and accessible, and should work very well with screen readers and special input methods.

I followed the principles of progressive enhancement get the best balance between accessibility and features. The site uses jQuery and AJAX magic for enhancements like the Previous Episodes browser on the front page, and to make the imported content on the Friends page more readable.

I added a 'business region' to the top of the page for the login form and when a user is logged-in their options appear here in a dynamic drop-down menu. The interior pages use a simplified theme based on elements from the front page. These pages are set up to be very simple, readable, and discoverable.

On the back-end we have a very easy time creating and publishing new episodes. We just fill out the form, attach our podcast file, and submit. The podcast goes into publication, notifications go out to Facebook and Twitter, and our work is done. Until the next episode.