Sintesi delle funzionalità del sito in base alle proposte grafiche presentate Marco Sacco.

Presentazione sul tema: "Sintesi delle funzionalità del sito in base alle proposte grafiche presentate Marco Sacco."— Transcript della presentazione:

1 Sintesi delle funzionalità del sito in base alle proposte grafiche presentate Marco Sacco

2 Premesse Le tre proposte grafiche presentate riportano molti elementi in comune, questi elementi rappresentano soltanto le aree messe a disposizione allinterno del layout per presentare delle funzionalità. Banner, immagini e testi sono da considerarsi, salvo rare eccezioni, solo a puro scopo di esempio. La disposizione dei menu è studiata per mantenere un legame logico e di navigazione con il precedente sito e quindi mantenere anche una certa familiarità con il nuovo impatto grafico. Le icone invece sono posizionate per dare maggior risalto allargomento trattato e quindi posizionate per essere più o meno raggiungibili e quindi visive. Università per Stranieri di Siena Sintesi delle funzionalità del sito in base alle proposte grafiche presentate Marco Sacco - ITC Consultant – mark.sacco@gmail.com

3 Le proposte grafiche Caratterizzate dalla posizione del logo delluniversità in posizione «classica» in alto a sinistra, presentano tutte e tre la sobrietà imposta dallautorità del soggetto pur spaziando nella disposizione dei contenuti. Per esemplificazione nella presentazione sono stati utilizzati gli contenuti testuali e grafici attualmente presenti in home page, ad eccezion fatta per alcune icone. Marco Sacco - ITC Consultant – mark.sacco@gmail.com

4 Le proposte grafiche Le icone introdotte sono specifiche per alcune funzionalità che nellattuale sito si presentano in modalità testuale. Il primo blocco di icone è quello relativo allarea dedicata alla modulistica attualmente non presente, allaccesso allarea riservata e alla accessibilità e quindi luso di caratteri più grandi e con alto contrasto. Le altre icone introdotte sono quelle relative ai social network e alle funzionalità per gli RSS ed il live stream. Ed infine tre icone a rappresentare i tre calendari presenti nel sito ovvero lorario di ricevimento per gli studenti, lorario delle lezioni e le date di appello degli esami. Queste le «novità grafiche» comuni a tutti i layout offerti. Marco Sacco - ITC Consultant – mark.sacco@gmail.com

5 Layout n.1 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Rappresenta il layout più simile al presente. Una rivisitazione dellattuale dove i concetti comunicativi vengono espressi in maniera grafica e non più soltanto testuale. Gli spazi sono ottimizzati per dare risalto alle informazioni in primo piano che vengono separate graficamente dal banner di promozione di attività interne alluniversità.

6 Layout n.1 Limpianto grafico in testa alla pagina rappresenta luniversità e la identifica. Le immagini sono a rotazione o, come per lattuale si modificano al cambio di pagina pur rimanendo poche e specifiche. Gli sponsor principali del sito rimangono in vista anche se con minor rilievo visivo. Gli altri sponsor che compaiono a rotazione perdono di visibilità. Marco Sacco - ITC Consultant – mark.sacco@gmail.com

7 Layout n.1 Le notizie in primo piano presentano una notizia «fissa» che offre anche spazio ad una immagine. Le altre informazioni sono a rotazione, tre per volta che sostituiscono le precedenti. Gli avvisi perdono labstract e di uniformano alle notizie in bacheca con il solo titolo in mostra Marco Sacco - ITC Consultant – mark.sacco@gmail.com

8 Layout n.1 La posizione delle icone di utilità è di fianco alle sezioni principali del sito questo per permettere un immediato contatto visivo con questi link rispetto allattuale sito. Al passaggio del mouse queste icone presenteranno la descrizione delle loro funzioni, ovvero «modulistica», «area riservata» e «accessibilità» Marco Sacco - ITC Consultant – mark.sacco@gmail.com

9 Layout n.1 Linformazione «Università Internazionale» acquisisce una notevole importanza in quanto posizionata proprio sotto della testata visiva e prima di tutti i comandi come a chiudere la parte di benvenuto e dare inizio alla parte contenutistica. Marco Sacco - ITC Consultant – mark.sacco@gmail.com

10 Layout n.1 Le icone dei social network vengono relegate in uno spazio più nascosto a fare da corollario alla pagina stessa; il messaggio è chiaro «siamo al passo con i tempi ma per noi non sono così importanti» a queste icone si dovrà aggiungere anche licona del servizio di sito web per tecnologia mobile non appena sarà pronto. Marco Sacco - ITC Consultant – mark.sacco@gmail.com

11 Le icone delle date e orari utili agli studenti chiudono la pagina con una certa rilevanza. Limpatto visivo è maggiore rispetto alle icone dei social network proprio per catturare meglio lo sguardo. Marco Sacco - ITC Consultant – mark.sacco@gmail.com Layout n.1

12 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Layout n.2 Nel secondo layout limpatto grafico è più «compatto» la sensazione è di maggiore incisione viste anche le ombre laterali che larea dei contenuti lascia sul video. Il logo è sempre in alto a destra mentre il fondo bianco permette di scrivere il titolo ed il «payoff» del sito nei due colori istituzionali che vengono ripresi anche nella testata e nel piè di pagina della home.

13 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Layout n.2 Lintroduzione di un terzo colore ovvero del grigio come sfondo dei box e del footer dona eleganza e grazia oltre a rendere più leggero il testo nelle scritte. La leggibilità totale non viene assolutamente intaccata e comunque assicurata, qualora si voglia un sito più accessibile, clickando sullicona con la lente sopra il logo.

14 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Layout n.2 Come per il precedente layout le informazioni in primo piano vengono diversificate e mentre la prima rimane fissa le due sottostanti, connotate da uno sfondo leggermente più chiaro, si alternano con le altre disponibili. Anche in questo layout limmagine in home page varia, rappresenta luniversità ed il territorio ma anche gli studenti.

15 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Layout n.2 Le icone in questo approccio grafico sono tutte nella parte alta della pagina in quanto si delimita così unarea funzionale di utilità, non strettamente legata ai contenuti. Mentre per le icone utili specificatamente agli studenti si è lasciato lo spazio di «chiusura» dei contenuti.

16 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Layout n.2 Anche in questo layout gli sponsor vengono ridistribuiti. Viene dato maggior rilievo ai più importanti, anche se con minor dimensione, ponendoli sotto il menu delle sezioni, mentre vengono relegati nel footer gli altri che si alternano allinterno dellarea delimitata dalla cornice blu.

17 Layout n.2 Lo spazio ora occupato dal banner del progetto Lingua e Cittadinanza è uno spazio reso disponibile per ogni tipo di comunicazione visiva o testuale. La predisposizione potrebbe lasciare il posto ai link dei contenuti della bacheca qualora si voglia reinserire labstract per gli avvisi. Marco Sacco - ITC Consultant – mark.sacco@gmail.com

18 Layout n.3 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Il layout n.3 è quello che si discosta di più dallo stato attuale del sito. Il concetto comunicativo è stravolto, si punta allaffermazione dei colori istituzionali, si introduce il grigio per dare maggior risalto ai contenuti in primo piano che con sfondo bianco vengono «fuori» dallo schermo. Anche qui il primo articolo rimane fisso mentre i restanti, se necessario, si alterneranno.

19 Layout n.3 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Anche per questo layout la parte in alto presenta alcune funzionalità ovvero quelle più espressamente legate al sito e ai suoi contenuti. Come nel precedente progetto grafico limmagine principale della home deve variare e lasciare spazio ad altre foto inerenti luniversità e i suoi studenti.

20 Layout n.3 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Gli sponsor vengono affiancati allelenco delle sezioni per ridurre limpatto visivo che risulta già più «pieno» visti i colori di sfondo a tutta pagina. Allinterno delle pagine si procederà a spostarli di nuovo sotto lelenco. A chiudere visivamente il quadro e a completare e armonizzare i contenuti ci sono le icone funzionali per gli studenti.

21 Layout n.3 Marco Sacco - ITC Consultant – mark.sacco@gmail.com La seconda parte della pagina è formata dagli avvisi che «ritrovano» il proprio abstract e dallelenco degli articoli in bacheca. A bilanciare la pagina il banner e gli sponsor di minor importanza. Ovviamente il banner può essere sostituito da una seconda fila di sponsor che si alterneranno con i successivi.

22 Layout n.3 Marco Sacco - ITC Consultant – mark.sacco@gmail.com Per chiudere il footer. La parte più bassa del sito che contiene tutte le informazioni di contatto delluniversità è divisa in due colori per ospitare le icone dei social. Nellottica dellaffermazione dei colori istituzionali nel footer si è dato più spazio al secondo colore predominante nel logo ovvero loro.

23 Conclusioni Si è cercato di proporre tre versioni grafiche che fossero un passaggio logico dallattuale ad un eventuale cambio radicale.

24 Conclusioni Molto simile ma più compatto, elimina gli sponsor dalle colonne laterali e riordina i contenuti. Vengono introdotte le ombre ai lati per rafforzare il concetto di compattezza.

25 Conclusioni Sempre presenti le ombre ai laterali impone ai contenuti aree più definite e meno dispersive. Lampiamento del footer consente di separare gli sponsor.

26 Conclusioni Totalmente diverso come impatto visivo comunica un chiaro passo comunicativo verso laffermazione dei colori e del logo delluniversità. Il secondo step nelle procedure per il posizionamento di un prodotto nel mercato.

27 Nella speranza di aver colto le vostre necessità comunicative e imprenditoriali vi porgo i miei più cordiali saluti. Marco Sacco Università per Stranieri di Siena Sintesi delle funzionalità del sito in base alle proposte grafiche presentate Marco Sacco - ITC Consultantmark.sacco@gmail.comMob. 349.670.3532