Upload
todi-appy-days
View
353
Download
0
Embed Size (px)
Citation preview
From idea to concept o meglio: ma veramente tu stai tutto il giorno a fare disegnini? o fai anche qualcosa di serio?
Riccardo Ghignoni
- Designer
Erik Peruzzi
- Sviluppatore iOS
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
Cosa faremo in queste 2 ore? ?
1. Cos un prototipo, perch puo servirci, un caso concreto desempio.
15:45
2. Cosa serve per prototipare, Cosa sapere prima di cominciare, Qualche consiglio pratico.
15:45
3. Un progetto concreto: Value Proposition, VP Canvas, Funzionalit, etc.
15:45
4. Sporchiamoci le mani!!
15:45
Lampada ARCO
Flos - 1962
Achille e Piergiacomo Castiglioni
PRO TO TI PO ?
Cosa NON E un Prototipo?
prototipo /prottipo/ 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.
Cosa E un Prototipo?
prototipo progetto
Il prototipo un artefatto (o modello) che possa avvicinarsi al prodotto finale, in modo da poter essere
sperimentato nel suo reale contesto duso.
Il suo scopo quello di raccogliere feedback al fine di evolvere il prodotto che stiamo realizzando.
Un esempio pratico: Cartella Clinica Informatizzata
Dovr andare anche sui tablet
SCELTA
PROPOSTA
( METODO )
definizione STRATEGIA
esecuzione LAVORO
INTUIZIONE PIANO E ANALISI CONSEGNA
definizione STRATEGIA
esecuzione LAVORO
INTUIZIONE
1. IDEAZIONE(fase divergente)
CAPIRE e SCOPRIRE il mercato e lutenza
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
Come funziona cosa deve fare, a chi rivolta
prototipare ponendo lattenzione su dei flussi specifici in maniera da poterli testare.
Invisioninvisionapp.com
https://vimeo.com/60660426
Lookbacklookback.io
+
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 linsuccesso - capire e analizzare meglio fattibilit di alcune attivit e costi con tutto
il team di sviluppo
Qualche consiglio sui materiali
Basta poco, fidatevi: - Carta (anche fogli A4) - Post-it - Forbici - Penne / Matite / Pennarelli- qualcosa che animi il nostro
prototipo
Pop App (mobile)popapp.in
https://www.youtube.com/watch?v=EGp20lVwUa8
Sulla carta
esistono template
ma va benissimo anche la carta comune A4 anzi un piccolo trucco
POST-IT la misura pe
r tutto
7,6cm
A4 21 x 29,7 cm
3 cm circa
1,5 cm circa
la met di prima in pratica
piegare in orizzontale
piegare ancora
aprite
tagliamo e
1 : 1,776 (formato 16:9)
un ultima cosa prima di disegnare !
PATTERNS
Perch importante progettare utilizzando i patterns?
Errori comuni: Login forzato
Possibile soluzione: Login forzato
Errori comuni: Tutorial prolissi UI/Gesture inusuali
Possibile soluzione: a Tutorial prolissi
Errori comuni: Form troppo lunghi
- regole generali - ui-patterns.com - esempi da mobile - pttrns.com - animazioni per mobile - capptivate.co - ispirazione per UI e comportamenti - dribbble.com
IL PROGETTO
Social network del calcio!
Per cliente target che ha questo bisogno il nome prodotto un categoria prodotto il quale beneficio principale / ragione duso che a differenza di competitor il nostro prodotto differenziazione principale
value proposition
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 laccesso 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
un consiglio
value proposition canvas
Funzionalit -
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
Prototipiamo!
M AT E R I A L D E S 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/
http://www.google.com/design/http://www.materialpalette.com/http://www.materialup.com/
I O S H U M A N I N T E R FA C 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 iOShttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
iOS Design Headlines http://iosdesign.ivomynttinen.com/
Design + Code https://designcode.io/
https://designcode.io/
Streaming News
layout topbar e scelta categoria
accesso alla singola news e condivisione
notizia esclusiva
menu
ACCOUNT
MENU INFO
CHAT SOCIAL
IMPOSTAZIONI
T&C - PRIVACY
lista squadre?
aggiungere squadra da seguire?
Proviamo: - ragionare sui pattern da seguire (iOS o Android)?
- disegnare unidea di interfaccia base e navigazione (hamburger icon? tab bar? altro?)
- prendere un FLUSSO ad esempio: straming news -> accesso alla singola notizia -> condivisioneoppure: 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!