3. Officina 31
-Collettivo di professionisti nel settore
web / video / marketing.
Siamo 8.
Siamo ad Arezzo.
Organizziamo workshop ed eventi.
www.officina31.it
Siamo su Medium con articoli
medium.com/@officina31
22. prototipo
/pro·tò·ti·po/
sinonimo maschile [dal gr. πρωτότυπος, comp. di πρωτο- «proto-» e τύπος: v. tipo].
—
1.
Primo esemplare, modello originale di una serie di realizzazioni successive (spec. con
riferimento a congegni e macchine), costruito, per lo più artigianalmente,
possibilmente nella sua grandezza normale e suscettibile di collaudi e
perfezionamenti, su cui è basata poi la costruzione in serie.
2.
Modello cui si ispirano o sono riconducibili fatti o fenomeni che si verificano in
seguito, a distanza di tempo.
27. prototipo ≠ progetto
Il prototipo è un artefatto (o modello) che possa
avvicinarsi al prodotto finale, in modo da poter essere
sperimentato nel suo reale contesto d’uso.
Il suo scopo è quello di raccogliere feedback al fine di
evolvere il prodotto che stiamo realizzando.
36. definizione
STRATEGIA
esecuzione
LAVORO
INTUIZIONE
1. IDEAZIONE
(fase divergente)
CAPIRE e SCOPRIRE
il mercato e l’utenza
interviste
osservazione
benchmark
valutare la strategia
2. DEFINIZIONE
(fase convergente)
DEFINIRE
requisiti
fattibilità
criticità
swot
presentare il piano
DECISIONE
3. PROGETTAZIONE
(fase divergente)
PROGETTARE
comportamenti
approccio
flussi e sistema
sketches e prototypes
realizzare un prototipo
PIANO E ANALISI
4. SVILUPPO
(fase convergente)
SVILUPPO
implementazione
controllo funzionalità
affinamenti
report analisi
consegna progetto
CONSEGNAPROTOTIPO
51. riassumendo quindi
a cosa serve fare un prototipo?
- sviscerare meglio il progetto e “immergersi maggiormente”
- empatizzare con gli utenti finali
- avere in modo molto veloce dei navigabili che possono essere
sottoposti ad un primissimo round di feedback
- ridurre di molto le incertezze progettuali riducendo l’insuccesso
- capire e analizzare meglio fattibilità di alcune attività e costi con tutto
il team di sviluppo
76. - regole generali -
ui-patterns.com
- esempi da mobile -
pttrns.com
- animazioni per mobile -
capptivate.co
- ispirazione per UI e comportamenti -
dribbble.com
79. Per cliente target
che ha questo bisogno
il nome prodotto è un categoria prodotto
il quale beneficio principale / ragione d’uso
che a differenza di competitor
il nostro prodotto differenziazione principale
value
proposition
80. Per gli appassionati di calcio
che amano costantemente seguire notizie sulla propria squadra
del cuore, soprattutto durante il calciomercato
il SocialSoccer è un social network
il quale aggrega in un unico luogo tutte le news ufficiali della
propria squadra (presi anche da canali non ufficiali), potendole
commentare, e partecipare a delle chat dedicate di fans
che a differenza di Kick / Footmob
il nostro prodotto permette l’accesso a notizie esclusive (anche
rumors) direttamente da questi canali meno in vista e più faziosi,
e agevola il supporto alla squadra grazie a chat di gruppo
dedicate, e attività social (contest? partnership? etc.)
value
proposition
84. News
stream delle news (squadre seguite)
prese dai vari canali
categorizzazione
condivisione nei social
CLAN
chat rooms
creazione / accesso
consultazione / interazione
gestione clan?
CALCIOMERCATO
stream delle news
sul calciomercato (a sé)
CLUB
info sui club
stream news squadra
prossime attività
accesso ai giocatori / stats / social
match
match della squadra
calendario
formazioni
tabellino / live
classifiche
calssifiche
squadre
marcatori
notifiche
notifiche
eventi in arrivo / live
news in arrivo da stream?
attività chatrooms?
impostazioni
personali
social connect
profilo
squadre seguite
gestione notifiche
gestione clan?
Stream Chat Informazioni Account
86. M AT E R I A L D ES I G N
Prima di agire nella preparazione dei wireframe ho
deciso di dare una controllata alle attuali
potenzialità di material design, per capire quali
saranno i pattern logici e di posizionamento degli
elementi in pagina.
A tal proposito consiglio questi utilissimi siti:
Design Google (linee guida generali)
http://www.google.com/design/
Material color Palette (colori standard e match)
http://www.materialpalette.com/
Material Up (pattern e progetti)
http://www.materialup.com/
87. I O S H U M A N I N T E R FAC E G L
Se invece avessi dovuto agire con dei device Apple,
allora mi sarei guardato ovviamente tutte le
guidelines iOS.
A tal proposito consiglio questi utilissimi siti:
Design for iOS
https://developer.apple.com/library/ios/
documentation/UserExperience/Conceptual/
MobileHIG/
iOS Design Headlines
http://iosdesign.ivomynttinen.com/
Design + Code
https://designcode.io/
110. Proviamo:
- ragionare sui pattern da seguire (iOS o Android)?
- disegnare un’idea di interfaccia base e navigazione (hamburger icon? tab bar? altro?)
- prendere un FLUSSO
ad esempio: straming news -> accesso alla singola notizia -> condivisione
oppure: match -> giornata di campionato -> tabellino partita
- DISEGNARE le schermate del Flusso e le interazioni
ad esempio: disegnare la schermata di streaming notizie con la possibilità di filtaggio
(Squadre preferite, tutta Serie A, tutta Serie B, Calciomercato).
BUON DIVERTIMENTO!