We just launched a great new feature, Timers! There are lots of situations where you might want to auto-advance to the next screen. It can be useful for simulating loading states, or showing a couple frames of a complicated animation or transition, to get the idea across in your prototype.
Timers work just like normal links. Instead of drawing a link, just click the little clock icon in the corner of a screen, and target another screen. You can adjust the duration too.
Designers can now use Flinto Lite's super-fast editor to build incredibly realistic prototypes for Android and install them on-device.
When creating a prototype, you can choose from Nexus 4, Nexus 5 or Nexus 7 as your target device. You can install the prototypes on any Android device capable of running the latest version of Chrome. We’ll be adding more target devices in the future, let us know which ones you’d like.
In the editor, you can add a custom icon, and choose from a new set of Android-specific transitions. The share page shows your prototype with the appropriate device frame for the device you chose. Sharing and installing Android prototypes on-device is the same easy process as with iOS. No special viewer app is required, just open the install link and you’ll have the prototype installed with a couple taps.
One of the most annoying parts of Android design is handling all the various screen sizes. You might share your prototype with someone who isn’t using the same device you’re targeting. To make this work better, we’ve provided a way to toggle between a centered view, or a scaled-up view of your prototype. Set your preference in the “Share View” section of your prototypes settings.
We’ve been hearing lots of great stories from a wide range of people who are loving Flinto. Just last week someone from a Fortune 500 company told us that Flinto was instrumental in selling his vision for an app within the company. Another customer who is a freelance designer in the Philippines told us that her clients are loving the Flinto prototypes she shares with them. With the introduction of Android support, we’re excited for even more people to enjoy testing and sharing Flinto prototypes.
Today, along with the introduction of Android support for Flinto prototypes, we’ve simplified our pricing. Don’t worry, if you’re already a customer, your subscription will be grandfathered in—you’ll continue to pay the same amount if not less.
Flinto subscriptions now cost $20. No fancy plans or feature comparison charts. Make as many prototypes as you want. You can still create teams too. Each member will cost $20 and can collaborate on prototypes with the rest of the team.
Today we launched a refreshed site design. In addition to a cleaner visual style, it includes:
A new prototypes listing page.
New filtering tools for teams.
An improved prototype creation page.
The prototype index page is now a bit more compact and easier to take in, especially for customers who make lots of prototypes.
Those of you with team accounts will love the new index page because it contains creator information and filters. You can filter by team, device and creator. This means you can view just your prototypes, instead of all the prototypes created by your team, keeping the information more focused.
There’s now a dedicated page for creating new prototypes. The device choices are more clear, and there is a "More Options" section which allows you to choose a status bar style and set a password before creating your new prototype.
Most exciting for us is that this new design is easier for us to extend. It will serve as a great foundation for all the features we’ll be creating throughout the new year.
Hi, I’m Kaz, Flinto’s engineer. This is my first post on the Flinto blog! A few people have asked how we were able to produce black status bars in Flinto prototypes that run on iOS 7.
Web apps in iOS have two states. They are either running in Mobile Safari or running as a standalone web app installed on the home screen. You can detect which state your app is in with Javascript using window.navigator.standalone. That value will be false if your app is running in Mobile Safari, and true if it is installed as a standalone web app.
While your web app is running in Mobile Safari (before it is installed as a standalone web app) set the status bar to "black-translucent" using the following meta tag.
This way, your web app will be installed with the black-translucent status bar, which is actually a status bar with white text in iOS7. I know, it’s a confusing name—I assume Apple named it this way to maintain consistency from iOS 6 where this value produces a semi-translucent black background with white text.
When launched, your web app’s status bar will have white text and an entirely translucent background. However, I discovered that web apps actually start up with “black text” status bar at first, then immediately change to “white text” status bars due to the black-translucent meta tag.
So I thought, “What if I remove status bar meta tag right after web app is launched?” I tried, and it worked! That’s now what Flinto does to produce a status bar with black text.
Here’s the Javascript (and jQuery) code that does it.
Now you can produce a status bar with black text in your web apps. This solution is an undocumented workaround which may not work with future versions of iOS. I found this workaround accidentally and it seems to be working well in all my tests.
One of Frito-Lay’s largest factories produces more than half-a-million pounds of snacks daily. Potato chips are transported around the factory on conveyer belts moving as fast as 60 miles per hour. How is it possible to do quality control on all those chips?
In this podcast, Brendan O’Donohoe explains how Frito-Lay and others pull it off. Chips move down a conveyer belt while an overhead camera photographs them. The images are analyzed by a computer program that determines if any of the chips are the wrong color, size or shape, and records their positions. Moments later, the chips go airborne over a gap in the conveyor belt. Above that gap is an array of jets that deliver precise puffs of air, blowing away offending chips, just like magic.
An optical sorting machine in action. Notice how quickly the chips are moving as the rejects are blown away. The action is 10 seconds long beginning at 1:21.
We don‘t naturally give serious consideration to ideas as outlandish as optical sorting quality-control systems. Could you have imagined this idea? If you had, would you have seriously considered it, or dismissed the idea as being too complicated?
Penn Jillette (of the magic duo Penn & Teller) revealed in an interview that “the absolute secret of magic” is that the magician is willing to work harder than the audience would expect. He explained that it’s not so much that you’d refuse to do the work required, it’s that you’d subconsciously dismiss the idea as preposterous before giving it actual consideration. All that effort just doesn’t seem reasonable to most of us.
Penn Jillette explaining the secret of magic. The relevant portion starts at 1:08.
Products that work well are often described as working “like magic.” This means the products are fast, beautiful, useful and delightful. As a designer, you want all of your products to be magical.
So how does one make the mental shift necessary to concoct and give full consideration to these magical ideas?
When designing anything, ask yourself, “how would this work if it were magic?”
Don’t think about how you’d build the product, just think about how it would work from the user’s point of view. Give your idea a moment. OK, now think about what it would take to make the product reality.
Is it within the realm of possibility to create the product in the way you’ve imagined? If it appears not, slowly take a small step back toward reality and consider your idea again. Make sure you explore every possibility thoroughly before dismissing the idea. Magic happens when we work on something that seems too difficult or too time consuming. By working backward, you’ll end up at the most magical outcome.
Not every difficult idea is worth pursuing, but this exercise at least makes you consider such ideas.
When building Flinto, we applied this way of thinking to create LinkSnap. Our process started with the question, “How would this work if it were magic?” The most magical solution we thought of was for all the links to be created automatically. That solution seemed impossible. We took a step back toward reality—how about a single click to create a link? After some consideration, we realized that was possible, just very difficult. It took weeks before we had an acceptable version of LinkSnap. It ended up being our most magical feature. LinkSnap never fails to make people say, “wow!”
A demonstration of LinkSnap. The first link is drawn normally, the subsequent ones are drawn with a single click, using LinkSnap.
Like a magic trick, truly great design is not something that is created with ease, but almost always requires more work than seems reasonable. A typical business-oriented designer won’t take this path. An artist will. Decide to be that artist. The execution will be challenging. Jump the mental hurdle to magic. Don‘t stop before you even get started.
Update: We’ve added a technical blog post explaining how we got black status bars to work in iOS 7.
Flinto now supports black transparent status bars. This style is the default in iOS 7, and has been unavailable in Flinto until now. In a previous blog post we explained the issues preventing us from offering this status bar style as an option. Fortunately, we’ve found a workaround and the black transparent status bars are now available.
If you change the status bar style, your prototype will need to be re-installed before it shows up correctly on-device. If you continue to see the wrong status bar, just delete the prototype, refresh the installation page, and try again.
Install this prototype, Parks to see an example prototype with a transparent black status bar.
You can now include transparency in your Slicers! This will allow nice effects like floating buttons, drop shadows and semi-transparent title bars. Just produce your screen images with transparent regions, then slice ’em. It’s great for more closely simulating iOS 7 title bars.
We’ve made the slicer handle more precise too. Now when you drag one pixel on screen, the slicer moves one pixel relative to the original image. It’s much easier to position slicers precisely. An issue that caused slicers of odd number height to render incorrectly has also been fixed.
