This document provides instructions for using the Fluid app for prototyping mobile applications. It explains how to create an account, add pages, drag widgets onto pages from the toolbox, set properties of widgets like background color, create interactions between widgets by linking them to other pages, and share or export completed prototypes. The document is intended as a guide for students in an ITP mobile application technologies class.
This document provides instructions for using the Fluid app for prototyping mobile applications. It explains how to create an account, add pages, drag widgets onto pages from the toolbox, set properties of widgets like background color, create interactions between widgets by linking them to other pages, and share or export completed prototypes. The document is intended as a guide for students in an ITP mobile application technologies class.
This document provides instructions for using the Fluid app for prototyping mobile applications. It explains how to create an account, add pages, drag widgets onto pages from the toolbox, set properties of widgets like background color, create interactions between widgets by linking them to other pages, and share or export completed prototypes. The document is intended as a guide for students in an ITP mobile application technologies class.
0sing a web biowsei, go to http:www.fluiuui.com anu click on )./ ().
Click on the 0$12 $2 button in the uppei iight coinei. If you uon't have an account, then use youi email auuiess anu cieate one. This way you will be able to save youi woik. If you aie in ITP 14u, then youi gioup shoulu have an account. 0se the email auuiess (itp14ugioup#gmail.com) anu the passwoiu that was emaileu to you.
Stait by uouble clicking to auu a page.
To auu a new page at othei time, click on the 3 button on the top iight coinei.
!"#$% '( )#*+,$-" !"#$ * '( )
Aftei uouble clicking on the page, two new things will pop-up: 1. )++"4+5 - wheie you can auu all the new wiugets 2. 6-17 - wheie you can cieate youi actual view anu uo piototyping
0n the Page view (i.e., the Scieen), theie aie S basic options: 1. 07**$218 - It has all the settings about the page like scieen size, uevice, page oiientation, anu navigation piopeities. 2. 9"+27 - Clone by clicking this option, you can uuplicate the page. This featuie is helpful when you have multiple pages oi you want to show the flow in one view. Foi example, an aleit appeais on a view. You want to show the flow by touching the button, thus making the aleit appeai. Then you want to touch a button in the aleit view to navigate to anothei view oi have the aleit view close. S. :,$% - Nost of the uesigneis use this featuie a lot to exactly ueteimine wheie you want to put youi wiuget oi stuff at theii exact position. Anu foi this ieason, most of the uesigneis use 6;+*+8;+< to piototype final uesign befoie staiting couing so that they can ueteimine the exact location of eveiy item pixel by pixel. 4. =+*78 - Notes featuie is just to auu notes foi eveiy scieen. S. >7"7*7 - Belete button to uelete the page you aie euiting. !"#$% '( )#*+,$-" !"#$ + '( )
6-17 07**$218? 6-17 )$*"7 - To give a title to the page. @-A7 *;$8 *;7 8*-,* <-17 - This option sets the cuiient page as the staiting page of youi app (i.e., the fiist scieen foi youi app). '87 1,$% - Auus a giiu to the existing view. >7B$C7 - Change the uevice you want youi page to be uesigneu foi such as iPhone Su, 4, 4S, S, anuioiu phone, anuioiu tablet, anu iPau. 6-17 0$D7 - Change the wiuth anu height in case youi uevice is not piesent in the list.
!"#$% '( )#*+,$-" !"#$ , '( )
)++"4+5 is the main aiea fiom wheie you can uiag anu uiop items into youi page. It contains all soits of wiugets to auu to youi page fiames.
Click on the E$,7F,-G7 pull-uown to see the vaiious looks of the wiugets. It incluues Wiiefiame, iPhone, iPau, Anuioiu, Anuioiu-4, Anuioiu-Tablet, anu Winuows-8.
Click on one of the wiugets anu uiag it onto youi page. E$%17* +<*$+28? >7"7*7 (tiash can) - to uelete the selecteu wiuget 0;-<7 (coloi wheel) - to change the coloi options 072% *+ 4-CA (squaies) - to senu to back, biing to fiont, senu backwaius, oi senu foiwaius in ielation to othei objects 9"+87 (sheep) - to cut, copy, oi paste the object )++"4+5 (wiench) - to show oi hiue the options H$2A (chain) - to cieate a link to anothei scieen !"#$% '( )#*+,$-" !"#$ - '( )
'<"+-% I+#, +J2 $G-178? 1. In the Toolbox, click on the E$,7F,-G7 pull-uown. 2. At the bottom of the list unuei the !"#$ heauing, click on the '<"+-%8 option. S. Click on the 9;++87 !$"78 button. 4. Finu anu select youi files. S. Click on the 9;++87 button. Youi uploaueu images will now be available unuei 0ploaus.
)+ -%% - 4-CA1,+#2% C+"+, *+ *;7 <-17? Biag the Backgiounu wiuget fiom the toolbox on the left to youi page. You can change the coloi by clicking on the coloi palette button.
0;-<7 options: K-CA1,+#2% - the coloi of the shape K+,%7, - the coloi of the boiuei L<-C$*I - the tianspaiency. It ielates to what level uo you want to make youi backgiounu tianspaient. !"#$% '( )#*+,$-" !"#$ . '( ) K+,%7, - the boiuei of the aiea. Not useu foi the backgiounu wiuget, but useu foi othei wiugets such as Shapes. .-%$#8 - the coinei iauius of the iectangle view. Not useu foi backgiounu wiuget. M7$1;* - the height of the aiea. Not useu foi the backgiounu wiuget, but useu foi othei wiugets such as Shapes. E$%*; - the wiuth of the aiea. Not useu foi the backgiounu wiuget, but useu foi othei wiugets such as Shapes.
To uelete the backgiounu view, click on it anu click the *,-8; C-2 icon to the left of the %&'&$ )*'#++# icon. You may also click the uelete button youi keyboaiu.
9,7-*7 $2*7,-C*$B7 8C,7728? 1. In the Toolbox unuei Botspots, uiag one of the shapes. 2. Click on the H$2A option. S. You will be given a blue aiiow. Biag it to anothei scieen anu ielease. You now have cieateu inteiactive scieens. 0se this featuie to ueteimine the flow of youi app.
!"#$% '( )#*+,$-" !"#$ / '( )
0nce you aie uone with this app piototyping, you can test it out by clicking on 6HN/ button (gieen aiiow) on the top iight coinei of youi biowsei scieen. By using youi mouse as a touch, you can see the flow of youi app.
0;-,7 *;7 <,+O7C*? 1. Click on the @72# icon (peison icon on the top iight coinei). 2. Click on the 6,+O7C*8 button. S. Click on the blue bottom bai foi the pioject you want to shaie which will give you access to the pioject's settings. 4. In the settings menu, click on the 0MN.P button. S. Click on the option you woulu like: Test on uevice Link Email Expoit Piint Social
9+<I +27 <,+O7C* F,+G +27 -CC+#2* *+ -2+*;7, -CC+#2*? 1. Click on the @72# icon (peison icon on the top iight coinei). 2. Click on the 6,+O7C*8 button. S. Click on the blue bottom bai foi the pioject you want to shaie which will give you access to the pioject's settings. 4. In the settings menu, click on the )PHP6L.) button. S. Entei the email auuiess of the account you want to senu a copy to such as itp14ugioup#gmail.com. 6. Click the )PHP6L.) button.
The ieceiving account will neeu to sign out anu then sign in to see the new pioject.
!"#$% '( )#*+,$-" !"#$ ) '( )
This uocument was piepaieu by Poojan }haveii anu Tiina uiegoiy foi the ITP 14u Nobile Application Technologies class at 0SC taught by Tiina uiegoiy. In case of any queiies oi help, feel fiee to email Poojan at pjhaveiiusc.euu.