WeHaventTheTime - home

Anything But iPod Website

AnythingButiPod was in dire need of an update. The content was top-notch, but the site lacked its own style. WHTT was hired to take their exisiting content (using the Movable Type content management system) and create an identity that was professional and relevant.

Collaborating with the client, we developed a logo and a brand. WHTT also created a new slogan for the site with which the client was very pleased. WHTT applied the new design to both the Movable Type 4 and vBulletin templates, and during the transition, WHTT also aided in upgrading the site from Movable Type 3 to version 4.

www.anythingbutipod.com

Red Devil USA Website

Well established in Europe for 12 plus years, Red Devil Energy Drink approached us to create for them a North American web presence. In addition to the website, a Myspace profile was custom designed to provide the energy drink with an appeal towards the youth of America.

www.reddevilusa.com

www.myspace.com/reddevilusa

Decapolis Labs Website

The Decapolis Labs site was created as a brand new web presence for the recording studio. Previously, they had relied only on a MySpace profile. With a lot of style and intelligent organization of information, our design and implementation imbues a sense of professionlism that the MySpace profile cannot.

www.decapolislabs.com

onCurrent Website

Geared toward lovers of art and music, the goal of the site is to deliver pertinent information regarding the arts in a user-friendly and interactive way. The site was coded using Ruby on Rails. It has elements of user registration / login and event submission and management. Earlier versions also included detailed profiles for artists and musicians as well as integration of a PHP message board.

www.oncurrent.com

HydraCMS

Developed as a proprietary content management system, HydraCMS powers several high profile websites including the city of Lafayette, IN. Through customizable "modules," HydraCMS empowers site owners with the ability to easily manage their sites. Adding content is as simple as using Microsoft Office.

HydraCMS is programmed in PHP. Several modules of note that we have worked on include a blog module which allows for easy posting and archiving of blog articles; a photo gallery module in which users can upload and manage their photos through the use of groups; and the event module which simplifies the management of a large calendar of events.

hydracms.com || lafayette.in.gov

Decapolis Labs Flier

This flyer was designed as the first round of promotional material for Decapolis Labs, a recording studio located in Harrisburg, PA. These flyers were distrubited to music venues, clubs, coffee shops, and various other businesses in the area.

Design by Christopher Thomas!

www.decapolislabs.com

Welcome the Ghost
Package Design

Album artwork for Darling's debut album, Welcome the Ghost.

Illustrations by Joe Whiteford. Layout and design by Christopher Thomas!

www.darlinglittlesongs.com

onCurrent Flier

Designed, printed, and distributed for the onCurrent.com launch party, this poster was created with the sole purposes of grabbing attention and displaying information. To do this, a bright, fun, yet simplistic color scheme was selected; one that would immediatly shout out to any passer-by. Once attention was focused, the positioning of the text communicated what was intended, without confusing the viewer's eyes.

Design by Immanuel Mullen.

www.oncurrent.com

Purdue University
PILES Program
Bus Ad

Bus ad for the PILES program (a part of the education department) at Purdue. It was displayed on the back of a commuter bus.

Design by Christopher Thomas!

Decaplis Labs Business Card

The Decapolis Labs Recording Studio needed business cards to hand out to clients. They needed to be interesting and visually similar to the studio's website in order to maintain a single visual identity. Several designs were created, but ultimately this design was chosen for its epic attitude.

www.decapolislabs.com

Darling Sword Sticker

Sticker design for our band, Darling

Design by Christopher Thomas!

darlinglittlesongs.com

Darling Bird T-Shirt

The first Darling t-shirt design.

Talking bird design by Dave Evans. Modifications by Christopher Thomas!

darlinglittlesongs.com

Darling Ghost Sticker

Sticker design for our band, Darling

Design by Christopher Thomas!

darlinglittlesongs.com

onCurrent Yell Sticker

The primary purpose of the onCurrent.com sticker designs was to grab the viewers attention and hold it long enough for them to remember the onCurrent name until they got back to their computers. To accomplish this, different stylistic designs were explored for each sticker. This one centered on simplicity and humor to get the message accross.

Design by Immanuel Mullen.

oncurrent.com

Darling Ghost Button

The second round of 1" Darling Buttons. In the spirit of keeping with the cute theme to Darling's merchandise, I wanted to incorporate previous character designs. By reusing these characters, a kind of branding is being established; people will associate them with Darling. The pastel blue of the Darling shirts inspired the pastel colors of these buttons.

Sad ghost design by Christopher Thomas! Layout and colors by Eric Salczynski.

darlinglittlesongs.com

Darling Bird Button

The second round of 1" Darling Buttons. In the spirit of keeping with the cute theme to Darling's merchandise, I wanted to incorporate previous character designs. By reusing these characters, a kind of branding is being established; people will associate them with Darling. The pastel blue of the Darling shirts inspired the pastel colors of these buttons.

Talking bird design by Dave Evans. Layout and colors by Eric Salczynski.

darlinglittlesongs.com

onCurrent Crest Sticker

The primary purpose of the onCurrent.com sticker designs was to grab the viewers attention and hold it long enough for them to remember the onCurrent name until they got back to their computers. To accomplish this, different stylistic designs were explored for each sticker. This one was more about displaying a visually dynamic image to garner interest.

Design by Immanuel Mullen.

oncurrent.com

Windowless Popups

Inspired by Lokesh Dhakar's Lightbox project, we devised a way to create popup windows using absolutely positioned div elements who's content is built into your existing markup.

Benefits

• These popups won't get blocked by popup blockers.
• The implementation retains your pages' xHTML Strict validity.
• It's perfect for information that doesn't quite require an entire page to itself.
• This opens up all kinds of new design possibilities.
• It's easy to implement and use.

Setup:

1. Include the javascript files in your header:

   <script src="prototype.js" type="text/javascript"></script>
   <script src="scriptaculous.js?load=effects" type="text/javascript"></script>
   <script src="popup.js" type="text/javascript"></script>

2. Include the popup.css stylesheet:

   <link href="style.css" rel="stylesheet" type="text/css" />

3. Add the conditional comments for IE6.
   Currently, due to inadequate support for transparencies in IE6, the background must be removed:

   <!--[if IE 6]>
      <style type="text/css">
         .popup_box {
            background-image: none;
         }
      </style>
   
   <![endif]-->

Activate

1. Add rel="popup_XXXX" attribute to any link tag to activate the popup.
   "XXXX" is the id of any div element:

   <a href="#popup_example" rel="popup_exampleBox">

2. Give your div element the class "popup_box" and a display style of none.
   The id of the element is equal to "XXXX" in the link tag:

   <div id="exampleBox" class="popup_box" style="display: none;">

3. Wrap your content with a div element with a class of "popup_content":

   <div class="popup_content">
      ...
   </div>

Customization

1. You can customize the look of the popup using CSS:

   .popup_box {
      position: absolute;
      background: url(shadow.png) bottom right no-repeat;
      margin: 0;
      width: 740px;
      height: 540px;
   }
       
   .popup_content {
      background: #fff;
      border: 5px solid #a9a9a9;
      width: 700px;
      height: 500px;
      padding: 5px;
      margin: 10px;
      overflow: auto;
   }

2. If you change the width in the ".popup_box" class, you have to change the "popupWidth" variable in the popup.js file around line 18:

   var popupWidth = 740;

Download

• popup.zip - All necessary files plus example HTML.
• popup.js - This file makes it work.
• popup.css - The stylesheet and PNG support for IE6.
• shadow.png - The background for the popup window.
• scriptaculous.js - Required javascript library.
• prototype.js - Another required library.

Coded by Eric Salczynski
Inspiration from Lightbox v2.0