flukeout luke pacholski's design & illustration

I alternate between Chrome and Firefox pretty often and one thing that annoys me is that I’ve got different bookmarks in each browser. Another thing is that depending on the time and day, I’d like different bookmarks to be more prominent. Chrome’s New Tab page is pretty handy in this regard, but it always shows me the same stuff and often lists one site multiple times.

To get out of this first-world quandry, I built a homepage that opens when I open any browser (and when I create a new tab) and shows me the bookmarks I’m most likely to need depending on the time and day.

How’s it work?

The top row are my always-on staples. Damn I love Google. The middle row is time-aware and only shows the bookmarks I want to see on the weekend. The faint bottom row are the rest of my bookmarks, lying in wait until their time to shine has come.

Each active bookmark has a letter below it, which I can press to launch that site.

Try it Out Should work in Firefox and Chrome

Change the day and time slider to see how the page looks at different times.

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!

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.

One of the things I work on at Vibes Media are large-scale visualizations that people at a venue can interact with via SMS. For example, at a concert people can send text messages that will then appear on a big screen everyone to see.

I built Tic Tac Tailgate as a prototype of a SMS-driven multiplayer game where large teams can alternate texting in their moves (each square corresponds to a number from 1 to 9).

Try out the Prototype Click the numbers to make moves as both sides. Use Firefox!

How’s it work?

Guys and girls play against each other. Each turn, while the turn timer is running, players from that team text the number corresponding to square they’d like to place their piece. Each team has a unique shortcode assigned to it to make texting easier. Every time a vote comes in, a small puff of fire appears in that square to help the rest of the team clue in to what other people are doing.

Once the turn timer runs out, the game figures out the most voted for square and makes the appropriate move. In case of a tie, the game randomly chooses between the tied squares. If there are no votes, the game chooses a random square for the team.

The game continues until there’s a tie or a winner.

How’s it made?

It’s all a bunch of HTML/CSS driven by some messy JavaScript. The animations are powered by jQuery with a little bit of help from Spritely for the smoke and fire sprites.

What’s next?

I’m planning to finish the prototype and have some folks at the office give it a try. Text-based interactions are kind of limited, and we’ve also started to experiment with web-based UIs that people can use on their smartphones. This would dramatically increase the depth of interactions available. I’d like to take a crack at making some more elaborate games.