Docsity
Docsity

Prepara i tuoi esami
Prepara i tuoi esami

Studia grazie alle numerose risorse presenti su Docsity


Ottieni i punti per scaricare
Ottieni i punti per scaricare

Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium


Guide e consigli
Guide e consigli


Appunti di Web Design, Appunti di Design

Appunti su cos è il Web Design

Tipologia: Appunti

2023/2024

Caricato il 03/03/2026

netta-2
netta-2 🇮🇹

2 documenti

1 / 6

Toggle sidebar

Questa pagina non è visibile nell’anteprima

Non perderti parti importanti!

bg1
COS’È IL WEB DESIGN? Vuol dire la progettazione
multimediale interattiva
- Un sito web è una rete di unità informative (pagine) contraddistinte da una omogeneità
tematica e stilistica.
I siti web sono trasmessi in rete telematicamente attraverso il protocollo http
protocollo è un insieme di due calcolatori devono andare in contatto. Http è un
protocollo che permette ad un pc di collegarsi ad un server remoto, chiedere delle
risorse come: immagini, video etc e riceverle in cambio. Ne esistono di tanti tipi.
Ma un sito web non è solo un insieme di pagine ma è molto di più, noi con un sito web
comunichiamo, creiamo uno spazio di comunicazione.
Esistono 2 grandi tipologie di siti web dai confini molto simili:
- Siti orientati ai contenuti principalmente chi lo produce pubblica delle informazioni e
le rendono navigabili: siti quotidiani, siti aziendali etc.. Realtà dove lo spazio
d’interazione lasciato al cliente è navigare sul sito, leggere le notizie etc
- Siti orientati ai processi/ azioni applicazione web, sito che non è nient’altro che
un’applicazione, un programma informatico, fruibile tramite un browser. All’utente è
data grande libertà esempio Google document
Per pubblicare un sito web ci sono diverse fasi da rispettare:
- Analisi preliminare (dove si analizzano le spere utenti, contesto contenuti e tecnologia)
- Ideazione / Progettazione (architettura, come devono funzionare i sistemi nel sito Web)
- Realizzazione / Sviluppo (si trasforma il progetto in qualcosa di concreto)
- Test e debug (fase di pre pubblicazione, una fase di test dove vengono eliminati gli
errori, dove ci si chiede se il sito funziona veramente)
- Pubblicazione, monitoraggio e manutenzione ( sempre misurate le performance, se ciò
che avevamo pensato nella fase di progettazione vada effettivamente bene per gli
utenti, cambiare o correggere nel caso serva)
Si tratta sempre di un lavoro di gruppo di diverse professionalità, ci sono tempistiche
complessive e delle singole fasi possono variare molto da progetto a progetto.
Il WEB COME PROFESSIONE
Un sito web è il risultato di un processo di lavoro collettivo che vede coinvolte diverse figure
professioni:
- project manager
- analista
- art director
- developer
- esperto di interazione uomo-macchina
- content manager
- information architect
Un sito web alla fine è anche un INTERFACCIA – UTENTE
- l’interfaccia utente è la superfice di contatto tra un mondo fatto di funzioni, interazioni
etc gli utenti finali.
pf3
pf4
pf5

Anteprima parziale del testo

Scarica Appunti di Web Design e più Appunti in PDF di Design solo su Docsity!

COS’È IL WEB DESIGN?  Vuol dire la progettazione

multimediale interattiva

  • Un sito web è una rete di unità informative (pagine) contraddistinte da una omogeneità tematica e stilistica. I siti web sono trasmessi in rete telematicamente attraverso il protocollo http  protocollo è un insieme di due calcolatori devono andare in contatto. Http è un protocollo che permette ad un pc di collegarsi ad un server remoto, chiedere delle risorse come: immagini, video etc e riceverle in cambio. Ne esistono di tanti tipi. Ma un sito web non è solo un insieme di pagine ma è molto di più, noi con un sito web comunichiamo, creiamo uno spazio di comunicazione. Esistono 2 grandi tipologie di siti web dai confini molto simili:
  • Siti orientati ai contenuti  principalmente chi lo produce pubblica delle informazioni e le rendono navigabili: siti quotidiani, siti aziendali etc.. Realtà dove lo spazio d’interazione lasciato al cliente è navigare sul sito, leggere le notizie etc
  • Siti orientati ai processi/ azioni  applicazione web, sito che non è nient’altro che un’applicazione, un programma informatico, fruibile tramite un browser. All’utente è data grande libertà esempio Google document Per pubblicare un sito web ci sono diverse fasi da rispettare:
  • Analisi preliminare (dove si analizzano le spere utenti, contesto contenuti e tecnologia)
  • Ideazione / Progettazione (architettura, come devono funzionare i sistemi nel sito Web)
  • Realizzazione / Sviluppo (si trasforma il progetto in qualcosa di concreto)
  • Test e debug (fase di pre pubblicazione, una fase di test dove vengono eliminati gli errori, dove ci si chiede se il sito funziona veramente)
  • Pubblicazione, monitoraggio e manutenzione ( sempre misurate le performance, se ciò che avevamo pensato nella fase di progettazione vada effettivamente bene per gli utenti, cambiare o correggere nel caso serva) Si tratta sempre di un lavoro di gruppo di diverse professionalità, ci sono tempistiche complessive e delle singole fasi possono variare molto da progetto a progetto.

Il WEB COME PROFESSIONE

Un sito web è il risultato di un processo di lavoro collettivo che vede coinvolte diverse figure professioni:

  • project manager
  • analista
  • art director
  • developer
  • esperto di interazione uomo-macchina
  • content manager
  • information architect Un sito web alla fine è anche un  INTERFACCIA – UTENTE
  • l’interfaccia utente è la superfice di contatto tra un mondo fatto di funzioni, interazioni etc gli utenti finali.
  • Nel caso dei sistemi informatici, due sono le principali funzioni di un’interfaccia:
    1. Consentire un’azione diretta sull’oggetto (input)
    2. Comunicare all’utilizzatore lo stato dell’oggetto (es. homepage) (output)
  • Non solo: l’interfaccia è il luogo dell’interazione e dalla comunicazione tra i destinatari e i “mittenti” del sistema

INTERFACCIA – UTENTE & WEB

  • Il web è un ambiente di comunicazione in cui il protagonista è l’utente, ogni utente vive il sito web in modo originale. C’è chi di un giornale legge una notizia ma una no, c’è chi si iscrive e chi no
  • Web design significa progettare interfacce che accompagnano il flusso operativo dell’utente può essere accompagnato in modo naturale, anticipando le sue esigenze e senza mostrare il proprio funzionamento interno
  • Lo strumento deve essere un interlocutore e un collaboratore dell’azione, non un’autorità che impone il proprio modo di lavorare e di funzionare … spesso accade l’inverso.

IL COMPITO DEL DESIGNER

  • Il ruolo del web designer è rendere ottimale l’interazione
  • Qual è il primo passo? FASE DI ANALISI
    1. Se contenuti e funzionalità del sito esistono già, è necessario strutturarli e rappresentarli secondo forme adeguate alle conoscenze e le abilità degli utenti
    2. Se il sito è in fase di ideazione, è necessario conoscere i propri utenti al fine di identificare quali contenuti/ servizi proporre e come strutturarli e rappresentarli. FASE DI ANALISI  dedicata alla conoscenza e all’apprendimento di:
  • Obiettivi
  • Contenuti
  • Aspetti tecnologici
  • Destinatari
  • Contesto PER CONOSCERE GLI UTENTI  la ricerca su HCI ha messo a punto alcuni metodi utili ad aumentare le conoscenze circa i propri utenti:
  • Interviste agli stakeholders  interviste con coloro che hanno voce in capito con il sito es. il direttore della pubblica amministrazione che ci ha commissionato il sito x farci raccontare come vedono i loro utenti.
  • Analisi ai competitors
  • Osservazione
  • Interviste agli utenti finali Ma l’utente non è un designer!
  • Spesso non sa cos è meglio per sé
  • Non ha la visione di insieme del progetto come i limiti economici, i vincoli tecnologici etc
  • Il progettista deve quindi riuscire ad interpretare i dati ottenuti dall’analisi degli utenti e fornire risposte adeguate Un altro metodo per conoscere gli utenti senza il loro coinvolgimento come:

Novizi : Utenti alle prime esperienze.  Perpetuamente intermedi : Utenti che restano in una posizione di competenza media senza evolversi. Il metodo dei personaggi (User Personas) Obiettivo del designer:Costruzione di un modello degli utenti : Il designer deve creare un modello degli utenti potenziali, utilizzabile come riferimento nelle fasi successive del progetto. Metodo delle personae:Obiettivo : Creare rappresentazioni di gruppi specifici di utenti, ognuno con obiettivi, capacità e contesti d'uso ben definiti. Cos’è una persona:Descrizione : Una persona è una rappresentazione di un utente ipotetico con: o Caratteristiche adeguate o Competenze e motivazioni specifiche o Obiettivi precisi da perseguire in un contesto d’uso plausibile. Caratteristiche delle personae:Finzionali : Sono costruzioni immaginarie basate sui dati raccolti nella fase di analisi degli utenti. Perché sono utili Funzioni delle personae:

  1. Danno "sostanza" al concetto di utente : o Rappresentano obiettivi, motivazioni e necessità plausibili, sebbene finzionali.
  2. Danno "complessità" agli utenti : o Aiutano a rappresentare comportamenti degli utenti più realistici e variegati.
  3. Aiutano a delimitare l'ambito del progetto : o Facilitano la definizione del perimetro del progetto.
  4. Costituiscono un parametro per valutare la qualità del prodotto : o Permettono di monitorare e migliorare il prodotto durante lo sviluppo.
  5. Prevengono errori concettuali : o Evitano problemi come:  Design per i casi limite  Design auto-referenziale  Design indifferenziato
  6. Facilitano il consenso nel gruppo di design : o Rendono più chiaro a tutti chi sia il destinatario del progetto, favorendo l’allineamento.

Costruire uno user journey

 Il metodo dei personaggi può essere arricchito mediante la creazione di scenari (User journey): descrizioni narrative di come l'utente modello può interagire con il sistema per raggiungere i propri obiettivi;

 Importante mantenere distinti il piano logico (sequenza di azioni) dal piano realizzativo (elementi dell'interfaccia) per focalizzare l'attenzione sull'interazione e non sul piano tecnico; inoltre, gli scenari sono indipendenti dalla tecnologia che potrebbe cambiare nel tempo;  L'esame degli scenari può consentire al gruppo di progettazione di tradurre gli obiettivi dell'utente in requisiti:  Contenutistici: quali informazioni dovranno essere manipolate mediante il sistema?  Funzionali: quali operazioni dovranno essere possibili?  Contestuali: quali relazioni tra contenuti e operazioni? Google Analystics  strumento che può essere molto utile nella fase di analisi della creazione di un sito web, permette di misurare ed avere molte informazioni sulle visite, le modalità di visita di un sito web. Utile quando ci troviamo a dover modificare un sito già esistente per comprendere le abitudini e le preferenze degli utenti. Inoltre, ci consente di avere informazioni degli utenti senza trarre in ballo i rappresentanti degli utenti finali, visti nelle precedenti slide. È uno strumento gratuito, non è l’unico, basta inserire un blocco di codice per ogni pagina del sito web, e quando l’utente ci interagisce, scarica o accede, questo blocco invia una serie di informazioni a google Analystics. Per monitorarle le statistiche: Nella sezione proprietà  informazioni di monitoraggio  codice di monitoraggio  codice html da inserire in una pagina web per ottenere poi le statistiche.

LINGUAGGIO HTML (introduzione)

Per scrivere il codice basta avere un programma che ci permette di scrivere un testo  banalmente NOTEPAD++ Per salvare il file  salva (CTRL+S) su una cartella magari soprannominata “Web Design” e importante dare come l’estensione (formato del file) progetto.html o .htm SALVARE SEMPRE!!! HTML  linguaggio di marcatura di ipertesti, qualsiasi web può essere un ipertesto  Linguaggio di marcatura, non di programmazione (poiché nell linguaggio di programma possiamo costruire delle strutture logiche es. se A è = a B scrivi questo)  Il linguaggio di marcatura, HTML, non abbiamo delle strutture logiche come per la programmazione, ma ci permette di attribuire dei comandi presenti nella pagina per attribuire loro un valore, un significato:

  • Semantico= questo è un link, immagine etc
  • Strutturale= questa è la testata del sito Per attribuire questa struttura HTML utilizza i “TAG”