Web Design: concetti fondamentali, UX, UXD e schemi ad albero per la navigazione

INTRODUZIONE AL WEB DESIGN: ELEMENTI BASEUX e UXD

La User Experience (UX) è un mondo in cui utente e prodotto sono estremamente collegati. In termini di design si riferisce a tutto il mondo del web e quindi della connessione; ai prodotti digitali. Fu infatti con la nascita di Internet che tutto il mondo ha iniziato a connettersi senza limiti, portando al fenomeno che conosciamo come "globalizzazione". Il mondo della User Experience (esperienza dell'utente) è un mondo in costante espansione; quasi un trend all'interno dell'universo digitale dell'UX Design (UXD).

Business Value UX STRATEGY User Needs Technical Capability

Il concetto centrale di questo mondo, è appunto l'esperienza dell'utente; e ciò che deve quindi fare un designer di siti web, app o campagne social, è concentrarsi sulle richieste dell'utente e progettare in base ad esse, così che l'esperienza sul web sia la migliore possibile.UX e UXD

In termini pratici, la UX mette al centro del processo progettuale l'utilizzatore del prodotto (l'utente). Perciò, nel campo dell'UXD non si progetta partendo da ciò che piace al designer, ma da ciò che soddisfa l'utente e lo si fa migliorando usabilità, accessibilità e piacere dell'utilizzo del prodotto.

/ F - - -- I JX Z% X% Y%

UX DESIGNER VS UI DESIGNER

• Abbiamo detto che la User Experience (UX) definisce l'interazione tra una persona e un prodotto o servizio, mettendo al centro del processo progettuale l'utilizzatore. Possiamo quindi definire la UX la disciplina che studia la facilità di utilizzo e la soddisfazione che un utente prova con il prodotto durante tutta la durata del suo utilizzo.
• La User Interface (UI), in informatica, è il design del layout grafico di un'applicazione o sito web. Consiste nel progettare i pulsanti che cliccheranno gli utenti, nel decidere quali immagini utilizzare e quale aspetto dovrà avere il copy, i cursori, i campi di immissione testo e tutti gli altri elementi con cui interagirà l'utente.

UX & UI

Interaction Design Visual Design Wireframe & Prototypes Colours Information Architect User Research Scenarios $20 Graphic Designer Layouts AV Typography

UX DESIGNER VS UI DESIGNER

Se con la UX è possibile sviluppare la customer journey all'interno di un sito, attraverso la UI si potrà, invece, realizzare la sua interfaccia grafica. Metaforicamente si può dire, che la UX è lo scheletro del prodotto/servizio (analogico o digitale che sia), mentre la UI i muscoli e la pelle che avvolgono l'ossatura. Il primo studia la struttura, l'altro la grafica. Spesso UX e UI sono figure che coincidono, si parla quindi di UX/UI Designer.

UX UI User research C MY OUDERE BUYNOW Interaction design Personas o Layout Usability testing Visual design

REALIZZAZIONE DEL SITO WEB

Come abbiamo detto, lo scopo del designer di un sito web è quindi quello di realizzare un prodotto che soddisfi le necessità dell'utente creando un progetto grafico chiaro e rapido. L'INTERFACCIA GRAFICA deve essere costruita secondo regole precise sulla psicologia percettiva e cognitiva (stabilite dalla Human Computer Interaction). Forme, colori e simboli devono essere coerenti con gli standard universali del web e le variazioni sono accettate solo se rimandano a significati e funzionalità particolari. Un sito web ideale deve quindi essere: gradevole, di facile navigazione, che presenti in maniera chiara i propri contenuti, utilizzabile in sicurezza e con semplicità.

PROGETTAZIONE SITO WEB_LE FASI

1. Composizione di testi o selezione di testi esistenti
2. Scansione di immagini o selezione di immagini esistenti
3. Scetta di oggetti multimediali più idonei

Briefing + Brainstorming + Realizzazione MOODBOARD ( UXD + VID)

1. Struttura grafica del sito WIREFRAME + LAYOUT (UXD )

PROGETTAZIONE SITO WEB_LE FASI

1. Raccolta di materiale e impaginazione con (VID) un software web editor
2. Verifica del funzionamento delle pagine web su un browser
3. Pubblicazione del sito

Queste fasi sono solitamente destinate a un programmatore, che però, prosegue il lavoro sempre affiancato dal web designer

APPROFONDIMENTO_LA MOODBOARD

Una moodboard è una rappresentazione visiva di concetti e idee creata utilizzando una disposizione di immagini, testi, video e altri materiali di design. L'intenzione di creare una moodboard è quella di evocare o rappresentare lo stile o il tono particolare di un progetto. Alcuni pensano a una moodboard come a un collage di idee più piccole che contribuiscono a un concetto più ampio.

Website moodboard ArtHub Photography under the call to action Love this! Background pattern Hot Pink Indigo Casablanca work made simple 3 Message Us 0 T .... CSS Animations 0 cards Message Us

APPROFONDIMENTO_LA MOODBOARD

Textural closeups of building materials D Poolside Palm Springs.mp4 Download - 136.7 MB Minimal and uninterrupted footeage Black Pearl #5EC5BE 2244 E #2587C8 POOL TV . A Hotel Yellow sepia tones to reflect the hot climate #E16647 Ogni aggiunta alla moodboard rappresenta diversi segmenti del progetto più ampio. Quando vengono combinati in un unico spazio, gli elementi si uniscono per evocare particolari sensazioni o idee astratte. Capture the dryness of the desert Bankof Anette Ry aloha

APPROFONDIMENTO_LA MOODBOARD

+1m +5m Le moodboard possono essere fisiche, utilizzando pezzi di carta, o digitali su una lavagna online. Molti scenari e settori utilizzano le moodboard come metodo efficace di presentazione a clienti, membri del team e stakeholder.

Moodboard exploration Matt Bea 3 = planchette. SKATE & MAGAZINE Grobe Deutschmeister IFACE 12 SQUARES HASSİKTİR HASSINTIR E - MUSICA ERRE look https://www.behance.net/gallery/115670791/Poster-and-Things-2ND- SERIES?tracking source=search projects%7Cskate Sadie "From the Ry" a photo journey across the US #0139FF #FFF501 #232323 #E9E9E9 Mae - 100% + Font exploration Neue Machina Neue Machina Neue Machina ice.net/gallery/91912415/BrasilBrasil-Zine? w=search_projects%7Cskate Chris https://unsplash.com/photos/CYfAhAVh7F4 3 https://unsplash.com/photos/OLSWeb52rZ8

APPROFONDIMENTO_LA MOODBOARD

REALIZZAZIONE:

1. Farsi un'idea di come sono fatti i siti web dello stesso settore: faccio una ricerca online osservando bene i componenti principali di un sito web come header, footer, slider ... Questa fase è utile anche per capire come comunicano questi siti. Posso anche cercare siti di altri settori per farmi un'idea sul design. Dove cercare:

• cercare sul browser: "best settore web design"; per esempio: "best car web design"
• cercare siti di altri settori per osservare il design. Piattaforme utili: Pinterest, Dribble, Awwwards, Lapa Ninja

1. Estrapolare ciò che è mi dà ispirazione e che penso possa essere in linea con il mio progetto: realizzo degli screenshot delle pagine. posso fare lo screen dell'intera home page con il Plug in di Google Chrome "GoFullPage": https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbb bknoalclacl

APPROFONDIMENTO_LA MOODBOARD

1. Oltre agli screen dei siti faccio una ricerca di font e colori; inserisco dunque:

• gabbie di testo con vari font. Cercare il font su vari percorsi:
• Adobe Fonts: https://fonts.adobe.com/
• Font Finder di Google Chrome: https://chromewebstore.google.com/detail/font-finder/bhiichidigehdgphoa mbhibekalahgha
• campioni con i colori che mi interessano
• Color Picker Figma: https://www.figma.com/color-picker/
• estrapolo in colore direttamente dall'immagine che importo su Figma

1. Cerco anche delle gallerie di icone

GLI ELEMENTI GRAFICO-STRUTTURALI (per UXD)

· STRUTTURA AD ALBERO , Serve per stabilire come (o SCHEMA AD ALBERO) si desidera che l'utente navighi e quindi permettugli di trovare velocemente i contenuti che cerca. Lo schema riproduce quindi il percorso di navigazione HOMEPAGE CATEGORIA CATEGORIA CATEGORIA pagina prodotto pagina prodotto pagina prodotto pagina prodotto pagina prodotto pagina prodotto pagina prodotto pagina prodotto pagina prodotto

SCHEMA AD ALBERO

L'alberatura del sito web, permette di avere una chiara visione di tutti i contenuti che saranno inseriti non solo nel menù di navigazione, ma anche nel resto del sito. Comprende, di conseguenza, anche tutte quelle pagine che non risultano raggiungibili dal puro menù di navigazione. Organizzare in modo accurato l'architettura della propria vetrina sul mondo porta a molteplici benefit, tra cui:

• Facilita la User Experience, permettendo al visitatore del sito di trovare in modo rapido esattamente ciò che sta cercando; di conseguenza, diminuisce la frequenza di rimbalzo e incrementando la durata media di permanenza.

SCHEMA AD ALBERO

• Permette al motore di ricerca di comprendere il contenuto del sito facendo una scansione delle pagine giuste per l'indicizzazione (portare il sito come prima scelta nel browser): un sito ben strutturato è più semplice da scansionare perchè i robot dei motori di ricerca danno più importanza alle pagine di livello superiore (1 e 2) . Ciò è facilitato dall'utilizzo delle keyword più adatte. È fondamentale che ogni categoria, ogni sezione e ogni pagina del sito siano ottimizzate per una specifica keyword. Ciò permette agli spider di Google di comprendere il contenuto del sito e di posizionarlo per le giuste parole chiave; inoltre, fare macrocategorie ci aiuta a costruire i collegamenti. Una volta stilata una lista di tutte le parole chiave ideali per il tuo sito, dovrai riordinarle in una struttura gerarchica; appunto il nostro schema ad albero.

SCHEMA AD ALBERO_PROGETTAZIONE

Questa struttura guida gli internauti dalle pagine generali fino alle pagine specifiche. Si adatta alla maggior parte dei siti Web, compresi quelli con un numero molto elevato di pagine. Questa architettura è generalmente suddivisa in livelli: livello 1 (home page), livello 2 (pagine di categoria), livello 3 (pagine di sottocategoria e rubrica), ecc. Ogni livello corrisponde a un ulteriore grado di profondità.

HOME PAGE 1º LIVELLO MAIN SECTION MAIN SECTION MAIN SECTION 2º LIVELLO 1 SUBSECTION SUBSECTION SUBSECTION 3º LIVELLO SUBSECTION

Un buon menu di navigazione, in genere, non supera i 3 livelli di gerarchia: un'elevata profondità in senso verticale potrebbe, infatti, allontanare o mandare in confusione l'utente.