{{ Alessio Delmonti }}Passions: Development, blues, creepy images

Mail: alessio.d@gmail.comRole: wiralist CTO

@alexintosh2014

Summary● Cos'è un prototipo ?● Perché protipizzare ?● Come si prototipizza ? Principi di base● Come realizzare un buon prototipo in 72h - Team● Come realizzare un buon prototipo in 72h - Developers

● Cos'è Ionic framework● Perché ionic ?● I componenti● Come installarlo● Protokit● Dipendenze di protokit● Features

Parte tecnica

Cos’è un prototipo

Il prototipo è la prima fase del processo produttivo.

Un modello approssimato o parziale del sistema che vogliamo sviluppare che simula o esegue alcune funzioni del sistema finale, realizzato allo scopo di

valutarne le caratteristiche (in particolare, la usabilità)

Perché prototipizzare● Per tenere il design centrato sull’utente

● Per sperimentare design alternativi

Prototyping is the way to find what doesn’t work early and cheap, and spend your time and money on

solutions that do work

Principi base

Brainstorming

I dettagli non sono importanti, state

cercando di stabilire il flow

Testare il prototipo

coding

feedb

ack

DATIesperienza

L’importanza dei test

Testing with 5 users finds 80% of the usability problems

“Jakob Nielsen”http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Prototipo in 72h - Team

● Non perdere tempo● Impostare le attività secondo la logica "pull"

e non "push" (realizzare un'attività solo quando il processo a valle lo richieda).● Testare il prototipo direttamente online● Dare potere al team

Prototipo in 72h - Developers

● Prima cerca SEMPRE su Google● Stack Overflow è tuo amico● Data model document based.● Go open source● Usa Git e committa sempre

Parte tecnica

Perché ionic

● Tecnologia web● Cross-platform● Librerie AngularJs ● Sviluppo più veloce● Faster go-to market strategy● Perfetto tool per arrivare al MVP (Minimum viable product)● Vi permette di testare online

I componentihttp://ionicframework.com/docs/

Protokithttps://github.com/Alexintosh/Protokit/

A prototype kit for Ionic Framework

Struttura dei file|-- www |-- css |-- img |-- js |-- lib |-- templates |-- index.html

|-- hooks|-- platforms|-- plugins|-- scss|-- config.xml

Features

● Splashscreen● Sidemenu● Social login (auth0)● List view / Split view + Detail View● Api calls● Maps

Risorse

Doc: http://ionicframework.com/docs/Video tutorial: http://learn.ionicframework.com/Snipplet: http://codepen.io/mhartington/tag/ionic/Forum: http://forum.ionicframework.com/Italian community:https://www.facebook.com/groups/380772785422827/

Grazie dell’attenzione!

Credits:http://thenounproject.com/term/teacher/14888/

http://thenounproject.com/term/brainstorming/76607/

http://thenounproject.com/term/beaker/9665/

http://thenounproject.com/term/code/75686/

http://thenounproject.com/term/team/8185/

http://thenounproject.com/term/console/8571/

http://thenounproject.com/term/folder/25369/

http://thenounproject.com/term/list/59948/

@alexintosh