Latest Posts in Web

This is stuff filed under Web.

Interactive Sign In Page

When redesigning the Vibes Sign In page, one of the concepts I came up with was a threaded SMS-style conversation. Vibes is all about mobile so it seemed fitting. Try it out, it has a very rudimentary capacity to carry (a pretty boring) conversation about signing you in. Bonus points if you get the hunter 2 reference.

Click the Boring Sign In link at the bottom see a static version of the final design.

Try out the Prototype Use Firefox – It’s going to look terrible otherwise!

Vibes OnScreen Controller

At Vibes, we offer a cool system that lets our customers display interactive, SMS-driven visualizations on large screens in front of an audience. To control these visualizations (I’ll post some examples later), we built a remote controller. The controller lets users select the visualization they want to show, configure it to fit the screen they’re displaying it on, and control what’s being shown on the screen.

The controller below controls a vote visualization. People at the venue text in to choose the next song they want to hear. The remote controller shows the state of the visualization (currently displaying the vote options) as well as the number of votes received.

When time is up, the person in charge of the clicks the Winner screen to display the vote winner to the audience.

Putting a Visualization on a Screen

When the user selects a visualization, the remote controller and popup appear. To put the visualization up on the large venue screen, the user follows the instructions on the popup. When the visualization popup is put into fullscreen mode, it automatically resizes it’s contents to best fit the available screen real estate.

The screen adjustment controls in the remote controller help fine-tune the display and when everything looks correctly positioned the visualization can begin.

The Visualization Popup

Zeep Mobile Website

Here are some components of the Zeep Mobile website I designed. Zeep is basically an API that allows developers to interact with their website users via SMS.

Homepage

Sign-up Panel

To subscribe users to receive text messages from a website, the developer would embed the Zeep Mobile panel into their site with an iframe (so web 2.0!!!). Here’s the panel.

Mobile Slingshot

I mentioned in a previous post that one of the products I work on at Vibes allows people at concerts or other venues to text messages to a big screen for everyone to see. Texting’s great and all, but we want to come up with cooler, more interactive ways for people to send messages to the screen.

Enter the slingshot, it lets people type out a message and then aim it at a target. The message would appear on the big screen according to where it was aimed. This would allow people to shoot over other people’s messages, or to combine their message with an existing one for potential comedy gold.

Try out the Prototype Type a message and launch it with the mouse!

How is it built?

The prototype is built using HTML/CSS + jQuery + CSS animations. I made another version that works on mobile devices via jQuery Mobile. On the iPhone pure jQuery animations are quite slow, but mobile Webkit’s hardware-accelerated CSS transitions came to the rescue.

CSS animations got the job done, but I can’t say I’m a fan. Most of the slingshot animations are triggered by adding a class to some DOM element via jQuery, which then causes the corresponding CSS animation to trigger, seems clunky.

Zeep Media

As co-founder and VP of Pixels of Zeep Media, I was in charge of basically everything visual. Here’s a roundup of some of what I made.

Name & Logo

The name Zeep Media came out of day-long brainstorming session (read: beating my head against desk). I think it references the sound of a cell phone when it both beeps and vibrates on a hard surface.

Website

I was in charge of designing and implementing the HTML/CSS layer of the website, as well as light front-end programming duties.

Homepage

The homepage was meant to get potential advertisers going right away. They could fill out their ad copy and move directly to the next step of creating their first campaign.

How it works

This is a step-by-step explanation of the campaign creation process. I included it to show some of the icons and illustrations I made.

Creating a campaign

This is one of the steps in our “wizard” style interface for creating a campaign.