Name: SERVICE DESIGN : LES FONDAMENTAUX #Distance
Start: 2024-04-25
End: 2024-04-26
Location: Distanciel

Ogni giorno, su incarico, devo confrontarmi con diversi attori di un progetto. A seconda della posizione e dell'appetito per la disciplina del design UX-UI, ognuno ha una diversa conoscenza dei termini utilizzati.

Nel corso delle missioni ho quindi raccolto un gran numero di concetti ed è un vocabolario che avrei voluto avere quando ho iniziato e che ho quindi consolidato man mano che procedo per aiutare futuri studenti o neofiti del digitale.

Ho quindi preparato per te una serie di articoli in cui ogni concetto verrà spiegato in modo che tu possa farvi riferimento.

Abbiamo iniziato la serie il mese scorso con la prima parte, la continuiamo con le successive 19 nozioni.

#1 _Tipi di pagine e schermate

Modello (modello, layout in inglese)

Un modello funge da documento di riferimento che utilizza la stessa struttura degli elementi che lo compongono.

Ad esempio, su un sito multimediale, creeremo una pagina standard per gli articoli che verranno ripetuti ogni volta. Testo e immagini avranno il loro posto designato.

Schermata iniziale

Questa è una schermata che viene visualizzata all'apertura di un'applicazione o durante il caricamento dei dati sullo schermo.

Questa schermata consente all'utente di attendere. Il logo dell'app è spesso evidenziato.

Procedura di Onboarding

I passaggi dell'onboarding sono rappresentati da alcune schermate per presentare il prodotto o una nuova funzionalità a un utente quando vi accede per la prima volta.

Questo è un passo importante nell'esperienza che si trova sempre più negli strumenti che utilizziamo perché aiuta a fare una buona prima impressione e guida alle funzionalità chiave.

Landing page

Una landing page è una pagina web specifica. L'utente vi accede dopo aver fatto clic, ad esempio, su un annuncio o su un pulsante di azione. Il suo obiettivo è lanciare una campagna di marketing per commercializzare un prodotto o servizio.

L'utente può arrivare su una landing page consultando i social network, una pubblicità su un sito o una mail.

#2 _Organizzazioni trasversali

testata

Un'intestazione designa la parte superiore di una pagina su un sito web. È per lo più trasversale, vale a dire che è presente nella stragrande maggioranza delle pagine del sito.
Ha un duplice obiettivo, identificare l'azienda e presentare la navigazione.

Barra laterale (a parte o barra laterale in inglese)
Una barra laterale ti consente di avere un gruppo di azioni di navigazione o di contenuto sul lato della pagina.

footer

Un piè di pagina designa la parte inferiore di un sito web. Come l'intestazione, si trova identica, come regola generale, su tutte le pagine.

Il piè di pagina ti consente di finalizzare il sito. Il suo design è quindi importante. Puoi farvi riferimento per link e testi che devono comparire in tutte le pagine, come le informazioni di contatto, la mappa del sito, le note legali, ecc.

Briciole di pane

Il breadcrumb consente agli utenti di vedere la loro posizione corrente e visualizzare la gerarchia dei contenuti. L'utente potrà tornare più rapidamente ad una pagina consultata durante la sua navigazione.

Stendardo dell'eroe

Un hero banner è una sezione di una pagina web che si estende per l'intera larghezza dello schermo.

Viene spesso utilizzato nella parte superiore delle pagine per ispirare l'utente e creare un universo.

#3 _Identità di marca

Il logo

Un logotipo corrisponde al nome dell'azienda che è disegnato per rappresentarlo graficamente.

Utilizzeremo spesso un carattere o forme che personalizzeremo per trasmettere l'identità e i valori dell'azienda.

logo Google

Il logomark (= distintivo in francese)

Il logomark di solito non include il nome dell'azienda. Questa è una rappresentazione più astratta che contribuirà a rafforzare l'identità di un'azienda.

Spesso utilizziamo un pittogramma molto eloquente che consentirà al lettore di identificare la natura dell'azienda. Inoltre, spesso è il logomark ad essere utilizzato su oggetti (goodies), capi di abbigliamento e altri elementi pubblicitari.

Marchio del logo di Google

il logo

Il logo si riferisce a tutti i tipi di emblemi che possono rappresentare un marchio. Quindi sia logotipi che logomarks.

Alcuni loghi sono entrambi contemporaneamente, ad esempio il logo UX Republic. Contengono sia un elemento di testo stilizzato che un elemento grafico. A seconda dell'uso, troveremo il logotipo, il badge o la combinazione dei 2.

Il logo della Repubblica UX

favicon

Questa è l'icona che appare nelle schede e nei collegamenti aggiunti ai preferiti nei browser web.
La parola favicon è una contrazione dei termini "preferito" e "icona". È un elemento grafico progettato per identificare più facilmente i siti negli elenchi e nelle barre dei preferiti del tuo browser web.

La tavolozza dei colori

La tavolozza dei colori è solitamente divisa in diversi gruppi:

● Colori primari e secondari

● Sfumature di grigio

● Colori di stato (successo, avviso, ecc.)

La tavolozza dei colori permette di creare l'universo di un marchio e di guidare il consumatore nelle sue ispirazioni.

Definendo una tavolozza, ci assicuriamo di portare coerenza e omogeneità ai percorsi per ottimizzare l'esperienza dell'utente.

#4 _Tipografia

La polizia

Il carattere designa un assortimento di caratteri tipografici con un disegno particolare (lettere, numeri, punteggiatura, ecc.).

Un font ha 5 caratteristiche che possono essere variate individualmente:

● la famiglia

● grasso

● forma o stile

● la taglia (il corpo)

● maiuscole (maiuscole, minuscole)

Font

È un insieme di caratteri dello stesso font aventi la stessa famiglia, lo stesso peso, la stessa dimensione e la stessa forma. Ad esempio, in UX Republic utilizziamo il carattere Montserrat.

Famiglie tipografiche

Ci sono 5 famiglie:

● Serif: che include i font serif (esempi: Times New Roman, Georgia, Garamond…)

● Senza grazie: o font sans serif (es. Helvetica, Montserrat, Myriad…)

● Corsivo: quali sono i font che simulano la scrittura a mano (es: Lucida Handwriting, ma anche Comic Sans MS (e sì!))

● Fantasia: caratteri più esotici e decorativi (ad es. Impact, Fraktur…)

● monovolume: font a larghezza fissa (larghezza utilizzata per ogni carattere) (es. Courier New, Lucida Console, ecc.)

# Conclusione

Ci ritroviamo per la prossima serie, la terza e penultima, dove vedremo insieme 3 temi principali: griglia e spaziatura, notifiche e avvisi e infine le diverse tipologie di menù sul web.

Se ti sei mai perso la prima parte di questa serie, ti invito a consultare questo link.

Se vuoi approfondire le tue conoscenze ed esercitarti nella progettazione di un'interfaccia web, il centro di formazione UX Republic offre formazione "UI Design, i fondamenti". Voici le lien per ulteriori informazioni.