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!