User:Francg/expub/hookedlooped/diagram

From XPUB & Lens-Based wiki
< User:Francg
Revision as of 14:59, 11 January 2017 by Francg (talk | contribs)

"Habit Design" diagram based on the notes from Nir Eyal
File:Diagram.pdf



In order to get use to exercise with different programming tools, I have prototyped an interactive diagram with Adobe XD software, which allows you to create wireframes of your storyboards, having the option to simply animate buttons to see a life-like final result of the website or app. It also allows to drag vector files from Illustrator into the templates or to use already-designed interfaces, which shortens time and reduces effort.

Process1.png

Process 2.png

Process3.png


After I have double checked that the buttons are properly framed to each corresponding board, I save the project as svg. files and open them again in Sublime. Then I transform the files as html and link them all by adding a sound file to each button, resulting on 31 html pages.


Process4.png

Process6.png
Process7.png
Process9.png
Process11.png


The final result is an interactive diagram that resembles the smartphone's messaging experience, hooking the user up to the last response, creating a game-like effect on the reader.