GRANDI MOSTRE E MUSEALIZZAZIONI weblab

Transcript

1 GRANDI MOSTRE E MUSEALIZZAZIONI

2 CHI È IL WEB DESIGNER E COSA FA Il web designer è fondamentalmente un comunicatore, capace di coniugare le esigenze del cliente con quelle degli utenti. Il web designer si occupa di progettare aspetto visivo e del coinvolgimento emotivo Le sue funzioni si articolano in diversi compiti, svolti in collaborazione con un team di lavoro.

3 CHI È IL WEB DESIGNER E COSA FA Egli infatti: comprende la tecnologia da usare, conoscendo le possibilità e i limiti che si possono incontrare nella realizzazione di un sito e ne discute con i clienti e gli altri professionisti impegnati nel progetto traduce le esigenze, i contenuti e il marchio del cliente in concetti strutturati adatti a un sito web, rispondendo alle esigenze degli utenti e proponendo prove a colori, adatte allo strumento su cui saranno veicolate e realizzabili dal punto di vista tecnico progetta i componenti necessari alla navigazione trasforma gli elementi di progettazione realizzati con software grafici (Photoshop e Illustrator per esempio) in componenti utilizzabili e modificabili su un sito Web

4 CHI È IL WEB DESIGNER E COSA FA prepara il layout delle pagine del sito utilizzando l HTML e altri linguaggi di programmazione(javascript e fogli di stile) insieme a sviluppatori e tecnici web decide lo stile delle pagine web a livello di grafica, layout, tipografia, colori prepara e presenta i contenuti in modo che risultino ben leggibili e ben strutturati seguendo le linee guida stabilite dal content manager è responsabile del mantenimento del sito, aggiornando e curando il sito.

5 CHI È IL WEB DESIGNER E COSA FA Il team di produzione, composto da il web concept designer: stabilisce col cliente e con il project manager l identità digitale che il sito deve trasmettere e che deve essere coerente all interno di tutte le pagine che compongono il sito stesso. il web designer: costruisce l architettura del sito, il modello di navigazione e di interfaccia utente. Decide l aspetto del sito, integrando testo, grafica e animazione per avere un unica soluzione che soddisfi gli scopi e i desideri del cliente specialista del multimediale: audio MP3, Flash e Realmedia sono tra le opportunità che il web offre per chi crea pagine web. Vista la complessità di questi programmi, è utile affidare a figure professionali specializzate la creazioni di animazioni e applicazioni altamente interattive esperti di programmazione

6 CREAZIONE DEL CONCEPT Il concept è un idea e Internet è il campo ideale dove trasferire l idea che il concept definisce. Un sito è quasi sempre la metafora comunicativa di ciò che il concept vuole trasmettere. Il concept si trasforma in vero e proprio progetto perché esso diventa l elemento che fornisce identità al marchio, da sviscerare in tutte le sue componenti fino ad arrivare alla definizione del piano editoriale. In questo processo si evidenzia la differenza più forte tra il Web e i media tradizionali.

7 CREAZIONE DEL CONCEPT Le attività fondamentali del concept possono essere sintetizzate in questo modo: 1. Analisi siti esistenti 2. Strategia: programma di comunicazione 3. Produzione

8 DOCUMENTO DI CONCEPT Il lavoro del concept designer si concretizza nella redazione di un documento di conceptche definisce l identità, i messaggi comunicativi, la strategia e i tipi di interazione che si vogliono avere con gli utenti. A ciò si aggiunge la definizione delle aree concettuali. Sintetizzando le diverse parti di questo documento, che dà il nome al professionista che lo scrive abbiamo: Obiettivi del progetto Utilizzo delle piattaforme Concept: è il cuore del documento, l idea Linee guida della comunicazione, elementi soggetti a modifiche costanti Grafica: forme, colori, icone, foto, modalità di fruizione dei contenuti, struttura

9 CONTENUTI DEL SITO Scelti in maniera coerente con l obiettivo del sito, i contenuti possono avere diversi formati: testi (per cui si dovranno gestire lunghezze, suddivisioni, ipertesti, archivi); immagini (l attenzione qui sarà posta su dimensioni, taglio, figure, sfondo, peso, sequenze, didascalie, copyright); elementi di interazione (form, , forum, chat, sondaggi, questionari, newsletter); audio, video e altri file (la presenza di file da copiare, visualizzare, ascoltare e scaricare crea problemi legati ai limiti di peso e banda come per il mobile, convergenza fra internet e la televisione, download, necessità di software per diffusione e utilizzo).

10 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Definire il concept del sito e i suoi obiettivi SKETCH Organizzare l albero di navigazione tipo di navigazione, numero di pagine, collegamenti interni ed esterni, contenuti sia grafici che testuali, principali tecnologie da usare.

11 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Organizzare l albero di navigazione

12 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Definire il concept del sito e i suoi obiettivi Wireframing individuare, disegnandole, le aree principali del sito. Logo, menu principale, eventuali colonne laterali, l area dei contenuti

13 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Wireframing con schizzi

14 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Wireframing_grafica digitale

15 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Definire il concept del sito e i suoi obiettivi Creazione mockup creare grafica e tutto ciò che è visual design

16 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Creazione mockup Per questo è bene rispettare delle impostazioni di base del file grafico: impostare una larghezza standard in pixel pari all area del browser in cui apparirà la grafica (900px, 960px, 1200px, 1680px, 1920px, ecc.) impostare una risoluzione di 72 dpi (la risoluzione media di un monitor) impostare il modello colore RGB suddividere la grafica in livelli ben separati e distinti (logo, testata, contenuto, footer, pulsanti, banner, ecc.) in modo da facilitare successivamente il ritaglio degli elementi grafici che appariranno nelle pagine web

17 LA SCELTA DEI FONT Genere Font Nota serif (con grazi e) Times New Roman, Georgia o Palatino I font serif, graziati vanno bene per i documenti stampati, ma sono meno leggibili sullo schermo di un computer. sans serif (senza grazie) cursive (corsivi) fantasy (fantasi a) Arial, Helvetica,Tre buchet, Lucida eve rdana Arabic Symbolix Arial e Helvetica sono le più usate online, perchè godono di ottima leggibilità e compatibilità multipiattaforma. Il supporto standard di font corsivi come l handwritten Arabic o fantasia come Symbolix è molto limitato. Meglio inserire web fonts di questo genere solo via monospace (monospaziati) Courier Sono font a larghezza fissa. Le lettere non hanno kerning ma sono spaziate tutte con la medesima distanza. I monospaziati sono i caratteri tipici di una vecchia macchina da scrivere e sono utilizzati principalmente sul Web per pubblicare snippet di codice (tutorial, tecniche, guide, ecc.). Testi molto lunghi sono difficilmente leggibili e stancano la vista.

18 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Creazione mockup

19 PROGETTARE LA PAGINA WEB: IDEA, WIREFRAME E MOCKUP Definire il concept del sito e i suoi obiettivi Prototyping I prototipi sono solitamente delle semplici interfacce create con le quali il team di produzione e il cliente possono avere feedback reali sull utilità e sull accuratezza del progetto direttamente nel browser.

20 CON QUALI PROGRAMMI?

21 FLASH Flash è un software che ti permette di realizzare animazioni per il web e non solo. I filmati che puoi produrre con Flash sono grafici e animazioni composti principalmente da grafici vettoriali, e possono contenere audio e grafici bitmap importati. Attraverso i filmati realizzati in Flash puoi realizzare un contenuto interattivo per il tuo sito.

22 DREAMWEAVER Dreamweaver è un programma per la realizzazione di siti web prodotto ed è tra i programmi più utilizzati nel suo campo. Dreamweaver è utile anche per i programmatori che preferiscono scrivere autonomamente il codice sorgente: il programma aiuta l'utente dando suggerimenti mentre vengono scritti i tag e gli attributi (ad esempio, scrivendo le prime due lettere di tag e attributi viene proposta automaticamente una lista tra cui scegliere, una funzione molto simile

23 WORDPRESS WordPress è una piattaforma di editoria personale allo stato dell arte che si focalizza sull estetica, sugli standard web e sull usabilità. WordPress è uno strumento che al tempo stesso è gratuito e senza prezzo per le sue infinite possibilità. COSA FARE COME PRIMA COSA? TEMPLATES

24 ESEMPI SITI ISTITUZIONALI DI MUSEI SITI MUSEI ISTITUZIONALI METROPOLITAN TATE MOMA BRITISH MUSEUM LOUVRE

25 ESEMPI BERHARD WOLFF PHOTO BRAD MILLER STUDIO DONTCLICK.IT

26 WORDPRESS

27 REGISTRARE IL SITO SU ARUBA

28 SCELTA DEL TEMPLATES TEMPLATES FREE WORDPRESS TEMPLATES modernthemes TEMPLATES EXPRESS

29 PLUGIN 100 MIGLIORI TEMPLATES PER WORDPRESS 10 MIGLIORI TEMPLATES

30 LEZIONI ONLINE SOS WORDPRESS

31 LEZIONI ONLINE SOS WORDPRESS