Progettazione Multimediale 2: UX/UI Design e Responsive Design

NABA: Nuova Accademia di Belle Arti

NABA NUOVA ACCADEMIA DI BELLE ARTINABA NUOVA ACCADEMIA DI BELLE ARTI

Progettazione multimediale 2 UX/UI Design A.A. 2023 24

Docenti Francesco Di Muro e Tommaso BiondoCC cc C BY NC SA

Queste slides fanno parte del corso "UX & UI Design". Il presente materiale è pubblicato con licenza Creative Commons "Attribuzione - Non commerciale - Condividi allo stesso modo - 3.0" (http:// creativecommons.org/licenses/ by-nc-sa/3.0/it/deed.it) La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, che, ove possibile, sono stati indicati.

Programma del Corso

UX UI Development UX/UI Content Strategy

Responsive Web Design

Responsive Design Il Design responsivo nasce con la necessità di rendere i siti web accessibili su ogni dispositivo. ... . . " airbnb.it @ + 88 @ airbnb Siviglia 28-30 gen 2 ospiti Diventa un host AA. artrbt # + 88 Prezzo Tipo di alloggio Cancellazione gratuita Wi-fi Cucina Lavatrice Piscina Parcheggio gratuito Self check-in Filtri Siviglia: oltre 300 allogg Prima di prenotare, verifica la presenza di eventuali restrizioni di viaggio legate alla pandemia di COVID-19. Scopri di più - 02 C. Tomen 106€ SAN GTE SAN LORENZO 590 LA ROSALEI FERIA SAN JULIAN 60€ / notte 120€ in totale 146€ ..... * 4,75 (51 recensioni) Intero aloggio unità in affitto a Casco Antiguo Appartamento El Salvador Square 2 ospiti . 1 camera da letto . 1 letto . 1 bagno Wi-fi . Cucina . Lavatrice . Riscaldamento .Tomeo MUSEO 9BC 61℃ LE 716 89€ CENTRO C. Luis Montoro 3 78€ % SALVADOR. Centro storico, artistico. Keyed 2 ospiti . 1 camera da letto - 1 letto . 1 bagno condiviso Wi-fi . Lavatrice " Occasione unica M 576 51€ / notte Google Sconcisesie da tastiera Dari mappa 00002 Google, inant. Geogr. Nacional " Termini e condizioni d'uso Segnala un amore nella mappa Desktop Tablet 8:41 Siviglia . 28-30 gen Prezzo Tipo di alloggio Servizi Cance Prima di prenotare, verifica la presenza di eventuali restrizioni di viaggio legate alla pandemia di COVID-19. Scopricinie Imero alloggioc unità in affitto a Casco Antiguo AlohaMundi Alameda ! 1064 620 596 LA ROSALE AN JULIAN 776 690 4€ CASCO ANTIGUO 45€ MUSEO 71€ 1 61€ NIviglia SÁ SSC @ 70€ LA BUHAIRA CRUZ 102€ SAN BERNARDO NE 83€ 71€ / notte 1416 in toMes 4,63 (55 recimilan) * 4,75 (51) Intero alloggio: unità in affitto ... AlohaMundi Alameda I 60€ / notte EL PORVENIR- Wi-fi. Lavatrice ₱ Occasione unice 57€ 51€ / notte 4,50 (452 maceralon) Mostra la mappa [] tto a Casco Antiguo Appartamento Centro Encarnación 1ª 1 < Mobile Intero alloggio unità in affitto a Casco Antiguo AlohaMundi Alameda I 4 ospiti . 1 camera da letto - 2 letti - 1 bagno wi-fi . Cucina . Lavatrice . Riscaldamento 4 ospiti - 1camera da letto - 2 letti - 1 bagno Wi-fi - Cucina - Lavatrice - Riscaldamento 60€ / notte .... # 4,75151 recensioni] Intero alloggioc unità in affitto a Casco Antiguo Appartamento El Salvador Square 3 SAN VICENTE 3 . SANTA IN A Zaipiti - 1camera da letto . 1 letto - 1 bagno Wi-fi. Cucina . Lavatrice . Riscaldamento Stanza privata a Casco Antiguo 3 & SALVADOR. Centro storico, artistico. Keyed 2 ospiti - 1 camera da letto . 1 letto - 1 bagno condivisa L ABEN 55€ LA BUHAIRA 0 SANTA CRUZ 1026 Canal de Alfonso xhr SAN BERNARDO 4,63 (95 recensioni) 836 71€ / notte 1410 in totake 108€ Stanza privata a Casco Antiguo Cerca mentre mi sposto sulla mappa + Prezzo Tipo di alloggio v Cancellazione gratuita wi-fi Swigla: oltre 800 alloggi 28-30 000 2 ospiti Diventa un host EL AR Oltre 300 alloggi disponibili @airbnb.it Aria condizionata

Caratteristiche del Responsive Design

Lo sviluppo di siti web responsive si basa sull'utilizzo di layout fluidi, immagini flessibili e delle media query.

• Le media queries consentono alla pagina di usare diverse regole di stile in base alle caratteristiche del dispositivo utilizzato.

→ Il concetto di layout flessibile si applica utilizzando unità di misura relative come percentuali, em e rem. Attualmente è legato all'utilizzo delle regole display flex e grid.

→ Le immagini flessibili devono poter essere visualizzate con dimensioni diverse, in modo da potersi adattare all'impaginazione evitando di sovrapporsi agli altri elementi. In questo modo i contenuti presenti su un unico sorgente HTML, vengono disposti in modo Wikipedia

Breakpoint di Risoluzione

La necessità di adattare l'impaginazione alle diverse dimensioni dei dispositivi, ha introdotto il concetto di "Resolution breakpoint", in modo da stabilire delle soglie per identificare dei range di rappresentazione. Queste soglie sono definite in pixel e con l'aumentare della risoluzione dei nostri dispositivi non sempre rappresentano la densità reale dello schermo., ma quella gestita dal browser. Per poter utilizzare le regole di media query all'interno dei nostri fogli di stile bisogna prima inserire uno specifico tag HTML nell'head che definisce appunto come il browser dovrà gestire la dimensione della finestra e del nostro <meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Media Query

La regola @media permette quindi di applicare delle condizioni alle nostre proprietà css.

@media screen (min-width:768px) and (max-width : 992px) Regola Tipologia di media Caratteristica Operatore Caratteristica

• Media Type: indica la tipologia di device per il quale vogliamo applicare le nostre proprietà. Si utilizza spesso il valore screen, ma ne esistono diversi: all, print, screen, speech.
• Media Feature: indica la caratteristica del nostro dispositivo da utilizzare per il "confronto". Le più utilizzate sono: max-width, min-width, orientation, aspect-ratio. Sono state introdotte numerose caratteristiche sopratutto per le preferenze utente come quelle per lo schema colore o l'accessibilità.
• Operator: permette di aggiungere delle condizioni logiche per combinare più caratteristiche (and, or, not) Guida

Griglie CSS

Nella definizione del layout di una interfaccia utente, la griglia è una suddivisione dello spazio tramite precise spaziature verticali ed orizzontali. Nella fase di sviluppo questo concetto si associa a quello di flexbox, cioè un modello di layout in grado di offrire la distribuzione e l'allineamento nello spazio dei vari elementi. Il modello viene costruito sull'utilizzo della proprietà display:flex. La dimensione delle "colonne" possono essere espresso in pixel (richiedono un utilizzo più spinto delle media query in quanto statiche) oppure in unità di misura "flessibili" come la percentuale o meglio ancora vw o vh. VW: indica la viewport-width cioè la larghezza della nostra finestra del browser, in particolare 1vw = 1% della dimensione della finestra; VH: indica la viewport-height cioè l'altezza della nostra finestra. 1vh = 1% della dimensione della finestra;

- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

NABA: Nuova Accademia di Belle Arti

NABA NUOVA ACCADEMIA DI BELLE ARTI Grazie Francesco Di Muro e Tommaso Biondo