Creazione del wireframe del modello "Calendario"

[EnigmaEdivad]

Mobile: https://ibb.co/XVRcKD2

[olistik]

Non tutti gli eventi potrebbero essere dotati di cover. Prevediamolo.

[EnigmaEdivad]

Tolgo direttamente quindi?

[olistik]

Meglio prevedere che alcuni li abbiano e altri no.

[EnigmaEdivad]

quindi ne faccio due? Una versione con e l'altra senza?

[olistik]

No, una versione sola con alcuni progetti dotati di cover e alcuni senza. Se possibile, intervallati fra di loro. Per esempio 1 con, 2 senza e 1 con.

[EnigmaEdivad]

Ok

[EnigmaEdivad]

Mobile: https://ibb.co/Kw5NVhV Così?

[olistik]

Ho solo il dubbio se lo stacco tra i singoli progetti sia sufficiente o se serva rafforzarlo in qualche modo ma mi sembra che già così funzioni abbastanza bene. 👍

[EnigmaEdivad]

Produco anche la versione desktop quindi?

[EnigmaEdivad]

https://ibb.co/gW8CMRY

[olistik]

Nel caso desktop sarebbe utile provare ad introdurre una visualizzazione più densa.

Fai una pensata sulla base di questi esempi:

[olistik]

@EnigmaEdivad il commento https://github.com/scuoleparrocchialidesio/www/issues/16#issuecomment-474859601 è pertinente anche a questa issue.

[EnigmaEdivad]

Quindi rifaccio ma senza immagini e sulla versione desktop invece una versione "Time line"

[olistik]

@EnigmaEdivad Sì, togli le immagini. Mentre ripensi al wireframe desktop in modalità timeline e/o con card cerca di capire se e in caso come ci sono elementi che potrebbero essere portati anche in mobile.

[EnigmaEdivad]

Bhe, se si utilizzasse la versione con card non andrebbe bene utilizzarla anche su mobile?

[EnigmaEdivad]

Come rich media si posso utilizzare due icone che simboleggiano pedagogico e amministrazione

[olistik]

Bhe, se si utilizzasse la versione con card non andrebbe bene utilizzarla anche su mobile?

Esattamente. Cerca di considerare le card e il concetto di timeline come ispirazioni. Non ti sto dicendo di usare solo uno o per forza tutti e due.

Per esempio, nel mobile si potrebbe tenere una linea verticale laterale rappresentante il tempo, con dei punti in prossimità degli eventi (con o senza card a supporto) mentre nel desktop, la linea temporale potrebbe essere portata nel centro, o dividendo la pagina in due, con le card che si alternano ai lati, oppure congiungendo un evento con l'altro (senza quindi essere una linea continua).

[olistik]

Come rich media si posso utilizzare due icone che simboleggiano pedagogico e amministrazione

L'uso di icone, come di colori del testo/sfondo, è una buona idea come anche affiancargli una rappresentazione testuale, in ottica di accessibilità dei contenuti.

Qui, intanto, altri esempi di card: https://getbootstrap.com/docs/4.3/components/card/

[EnigmaEdivad]

mobile: https://ibb.co/c6d3kBR

[olistik]

mobile: https://ibb.co/c6d3kBR

Bello. 🎩

L'unico dubbio è relativo alla dimensione/posizionamento dell'icona ma possiamo delegare questo dettaglio visuale alla fase di implementazione dello statico, contesto in cui dovremmo effettuare il design del componente. Potremmo anche arrivare a decidere di rimuovere completamente l'icona o anche solo di usare l'icona a discapito del testo.

A questo punto resta da capire come far evolvere il design su desktop.

[EnigmaEdivad]

Timeline in mezzo, così da formare due colonne e a capo di esse icona e descrizione della rispettiva categoria?

[olistik]

Ha senso. 👍 Attento all'importanza della data. Per consistenza con il mobile ti consiglierei di metterla in evidenza sulla timeline. In caso dovessi fare economia di spazio puoi spostare icona e categoria dentro la card.

[EnigmaEdivad]

E se la mettesssi al posto del pallino?

[olistik]

Non male. In seguito sarà interessante capire come visualizzarlo in armonia (per esempio, racchiuso in un bordo?) ma per ora va bene.

[EnigmaEdivad]

https://ibb.co/jDD7HzR

[olistik]

Oh, non avevo compreso che volessi creare due tracce distinte. Dopo un po' di esitazione ti dico che mi piace.

[olistik]

@EnigmaEdivad Ho avuto un ripensamento. Se c'è un'asimmetria tra il numero o anche solo la distribuzione di una categoria di eventi, la timeline presenta contesti visivi con metà schermo vuoto. Dovremmo invece implementare un design che permette la presenza di queste asimmetrie di contenuto. Suppongo che una opzione adeguata (non l'unica) sia mostrare gli eventi in sequenza, a prescindere dalla loro categoria.

[EnigmaEdivad]

Appena torno a casa provvedo.

[EnigmaEdivad]

1: https://ibb.co/JsTMjdF 2: https://ibb.co/tqGdycv @olistik So che forse non va bene ma ci provo

[olistik]

Innanzitutto complimenti per entrambi gli esperimenti. Sono interessanti ma temo che per questo contesto soffrano di due problemi:

1. viene posta troppa attenzione alla categoria
2. il posizionamento della data non crea una forte associazione con l'evento. A mio parere appesantisce un po' la fruizione da parte del visitatore perché gli richiede una maggiore attenzione nel capire quale sia la data dell'evento.

Mi piace molto la versione con la linea orizzontale, perché non sfruttarla per farle contenere data e categoria? In questo modo risolveremmo entrambi i punti.

N.B.: sia questi ultimi esperimenti che la timeline con suddivisione verticale restano ottimi per altri contesti 🎩 . Ora stiamo raffinando gli schemi visuali fino a trovare una composizione ottimale al nostro caso. :-)

[EnigmaEdivad]

https://ibb.co/9ZgZHZZ Che ne pensi di questa?

[olistik]

Molto, molto bella. Posizionare l'icona sulla sinistra è un'ottima idea. Complimenti. 🎩

[EnigmaEdivad]

Metto nell'altro repository?

[olistik]

Un consiglio, in seguito carica le immagini direttamente qua come allegato, invece che inserire il link, così evitiamo che i link scadano.

[EnigmaEdivad]

Va bene