This prototype was made as pure personal test. While learning some of the JS/Coffeescript basics I also wanted to stress Framer Studio to see how far I could go adding multiple views and basic interactions. The code is far from be polished, but the prototype works as supposed.
- Scroll interaction for the Following screen
- Tap on “Design” tile to access the content detail view
- Share content via mail (just the screen)
- Add content to two different personal mags
- Add content to a new mag (jus the “Create” new mag window)
- Add interest note
- Show / hide the social sharing card
The graphic files were imported via Sketch 3 although I’ve used Photoshop to cut all the main pieces. Since most of the buttons where flat graphics, I’ve used a mixed approach to define tappable areas: some buttons where made via transparent layers used as hot areas; other tap interactions were made calculating x/y coordinates. This latest solution was a bit tricky to handle due to some limitation of JS with touch events on mobile. To solve this problem, I relied on a function created by Jordan Robert Dobson.
You can test and download the project here (tested on Chrome for Os X 10.10).
Note for the mobile versione:
- Prototype optimised for iPhone 5s
- For a better experience, please install Frameless mobile browser (available for free on the App Store)