Designing Six Full Screen Gesture Widgets For Mobile

While working on an iOS app, our team became frustrated at the speed and efficiency of native mobile widget interactions. The new mobile/touch platform is still using widgets and interactions from the old desktop/mouse platform. Realizing an opportunity for new paradigms, we challenged ourselves to reimagine widgets using the full screen. The original ideas flowed from a full screen color picker which is the first widget we implemented. The color picker was the first step in creating the Conopsys (COS) widget set.

COSGestureColor—The Aurlien inspired picker is used to select colors for smart lights. Most color pickers don’t offer great interactivity and revolve around traditional RGB or HEX desktop color pickers. GestureColor creates a playful interface which takes advantage of the whole screen. The GestureColor view replaces...

In November, Adam Roben (@aroben) went on a mass pull request spree merging hundreds of gitignore templates into GitHub’s master repository. Finally! Before he combed though 100’s of pull requests, it seemed like nobody was maintaining the official repo. The lack of an updated repository was one of my original reasons for creating www.gitignore.io. Since the official repository was updated, I received a suggestion from @mlang38 to create a submodule repo for gitignore.io that points to GitHub’s official list. That request combined with a few other features prompted me to spend a few hours updating the site and here are the results of the update.

• Proper Bootstrap 3 support. Why? When I first migrated to Bootstrap 3, the Select2 box didn’t have the correct styles to support Bootstrap 3 so I found a work around. Now that there is better support, I’ve used the new Bootstrap 3 large style...

Visualize Touches, Pans and Long Presses

I was working on a project with my co-founder this weekend and my task was to record a simple video that helps onboard users. One of the concepts we are using in our app is something we call Full Screen Gesture Controls. These are similar to what was demonstrated by Matthaeus Krenn in his New Car UI Video. In his video, he was able to physically show you his fingers moving across the screen, but what if you’re doing a live demo and people can’t see your hands?

That’s where Touch Visualizer comes in as an way to visualize three types of interactions with the screen.

1. Touches: Visualized by a circle which expands and fades out
2. Pans: Visualized by a circle with contracts and fades out into a tiny dot
3. Long Presses: Visualized by a morphing circle

You can also customize the colors of the fill, stroke, opacity and fade out duration. Here is a...

Flappy Bird Clone using the iOS7 Physics Engine

FlappyBird — Need anything else be said? The game is so simple, yet it mixes the right amount of frustration and entertainment that was in the early 90’s nintendo games like Double Dragon 3, and Teenage Mutant Ninja Turtles. With Dong Nguyen announcing that he was taking the game down, I wanted to figure out how hard it would be to replicate the game’s physics and interactions with the new iOS7 physics engine. I’m writing this because it’s apparent that a lot of developers don’t even know that iOS 7 has a built in physics engine – UIKit Dynamics.

Physical Interaction 1: Flap

Flapping requires three steps. The first step is to create a gesture which recognizes a tap.

UITapGestureRecognizer *singleTapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTapGesture:)];
[self.view