Flinto Lite

Flinto Lite is a prototyping tool that I designed and built with my co-founder. I conceived of the product while teaching an iOS UI design course at CCA. Flinto Lite was widely praised for its speed, ease of use and realism. Some concepts we invented quickly became standard across the industry. On this page I’ve highlighted some of my favorite Flinto Lite features.

Speed

Flinto Lite was all about speed. It’s easy enough to build a system that links screens together, but we pushed the limits to make it as fast and easy as possible.

LinkSnap

LinkSnap automatically detects link areas under the cursor using edge detection and flood fill algorithms, this allows for the fastest possible creation of links between screens.

Thinking of ways to make Flinto Lite faster kept me up at night. I used to try to imagine the fastest possible way to create links between screens. This led me to come up with the idea for LinkSnap. It was a big engineering effort, but created an absolutely magical experience for our customers.

Canvas View

The simple decision to show all the uploaded screens in a single view makes development much more complicated, but allows users to create their prototypes much more quickly because they don’t need to remember screen names, or change context ever.

Sharing

Prototypes could be shared to a list of emails or phone numbers by clicking the share button. This process was very fluid for the sender and the receiver, because the prototype could be installed as a web app, without the need to download any new apps or make an account.

Instant Uploads

When a user dropped screens into Flinto Lite, they see them immediately and can start working with them while the image uploads in the background. This is enabled by the Javascript FileReader API, which at the time was not widely used, and is still under-utilized in web apps that make you wait and show spinners.

Slicers

Slicers provide a way to create fixed headers and footers on flat mockups. I put special care into building the UI to allow for easy targeting of precise values.

There were many details which we addressed to ensure a flawless experience for our customers using Slicers:

Truly Fixed

The fixed headers and footers created with slicers need to be really fixed in place, they can’t pull down with the page as it scrolls. This is surprisingly difficult to do with web technologies on iOS.

Transparency

The fixed ares need to support transparency in order to simulate floating buttons and mimic the iOS 7 style translucent effects.

Precise Placement

It needs to be possible to position the slicers precisely, being off by one pixel in either direction ruins the effect. This was achieved by translating 1px of on-screen movement to 1px of on-image movement with the slicer UI. This adapts for the zoom level of the screens on the canvas.

Transitions

The fixed areas should transition in a manner similar to the actual iOS transitions when both screens have fixed areas of the same height. The body content does a push transition and the header/footer content do a crossfade.

The Odd Pixel Problem

When a slicer is placed at an odd number of pixels from the top or bottom of the screen, it creates a situation where it would need to have a height with a half-pixel in it when viewed on-device on a retina display. We developed a unique solution to this which our customers never need to know about.

Color Continuation

With elastic scrolling in iOS, it’s possible to scroll beyond the top or bottom of a screen. Instead of showing some generic shade of gray, we continue the most common color of the row of pixels next to the slicer. This is such a nice effect, and it’s easy to forget that it’s even happening!

Snapping

Using our LinkSnap technology, we automatically detect the slicer point for many screens. This means you can select all your screens, and drag the slicer into the pre-determined snap point and be done setting all of your slicers in just a couple of seconds!

The Slicers feature worked so well that several competitors adopted the idea, but our attention to detail was unmatched.

Flinto Lite Website

I also designed and built the marketing website for Flinto Lite which was full of hand-coded interactive elements and animations which invited the visitor to experience what makes Flinto Lite special.

Please take a look at the archived website for the full experience.