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

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

Marco Sacco

Premesse

Le tre proposte grafiche presentate riportano molti elementi in comune, questi elementi rappresentano soltanto le aree messe a disposizione all’interno 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 all’argomento trattato e quindi posizionate per essere più o meno raggiungibili e quindi visive.

Università per Stranieri di SienaSintesi delle funzionalità del sito in base alle proposte grafiche presentate

Marco Sacco - ITC Consultant – [email protected]

Le proposte graficheCaratterizzate dalla posizione del logo dell’università in posizione «classica» in alto a sinistra, presentano tutte e tre la sobrietà imposta dall’autorità 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.


Le proposte graficheLe icone introdotte sono specifiche per alcune funzionalità che nell’attuale sito si presentano in modalità testuale.

Il primo blocco di icone è quello relativo all’area dedicata alla modulistica attualmente non presente, all’accesso all’area riservata e alla accessibilità e quindi l’uso 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 l’orario di ricevimento per gli studenti, l’orario delle lezioni e le date di appello degli esami.

Queste le «novità grafiche» comuni a tutti i layout offerti.


Layout n.1


Rappresenta il layout più simile al presente.Una rivisitazione dell’attuale 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 all’università.

Layout n.1

L’impianto grafico in testa alla pagina rappresenta l’università e la identifica.

Le immagini sono a rotazione o, come per l’attuale 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à.


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 l’abstract e di uniformano alle notizie in bacheca con il solo titolo in mostra


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 all’attuale sito. Al passaggio del mouse queste icone presenteranno la descrizione delle loro funzioni, ovvero «modulistica», «area riservata» e «accessibilità»


Layout n.1

L’informazione «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.


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 l’icona del servizio di sito web per tecnologia mobile non appena sarà pronto.


Le icone delle date e orari utili agli studenti chiudono la pagina con una certa rilevanza. L’impatto visivo è maggiore rispetto alle icone dei social network proprio per catturare meglio lo sguardo.


Layout n.1


Layout n.2

Nel secondo layout l’impatto grafico è più «compatto» la sensazione è di maggiore incisione viste anche le ombre laterali che l’area 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.


Layout n.2

L’introduzione 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 sull’icona con la lente sopra il logo.


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 l’immagine in home page varia, rappresenta l’università ed il territorio ma anche gli studenti.


Layout n.2

Le icone in questo approccio grafico sono tutte nella parte alta della pagina in quanto si delimita così un’area funzionale di utilità, non strettamente legata ai contenuti.

Mentre per le icone utili specificatamente agli studenti si è lasciato lo spazio di «chiusura» dei contenuti.


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 all’interno dell’area delimitata dalla cornice blu.

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 l’abstract per gli avvisi.


Layout n.3


Il layout n.3 è quello che si discosta di più dallo stato attuale del sito. Il concetto comunicativo è stravolto, si punta all’affermazione 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.

Layout n.3


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 l’immagine principale della home deve variare e lasciare spazio ad altre foto inerenti l’università e i suoi studenti.

Layout n.3


Gli sponsor vengono affiancati all’elenco delle sezioni per ridurre l’impatto visivo che risulta già più «pieno» visti i colori di sfondo a tutta pagina.

All’interno delle pagine si procederà a spostarli di nuovo sotto l’elenco.

A chiudere visivamente il quadro e a completare e armonizzare i contenuti ci sono le icone funzionali per gli studenti.

Layout n.3


La seconda parte della pagina è formata dagli avvisi che «ritrovano» il proprio abstract e dall’elenco 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.

Layout n.3


Per chiudere il footer.

La parte più bassa del sito che contiene tutte le informazioni di contatto dell’università è divisa in due colori per ospitare le icone dei social.

Nell’ottica dell’affermazione dei colori istituzionali nel footer si è dato più spazio al secondo colore predominante nel logo ovvero l’oro.

ConclusioniSi è cercato di proporre tre versioni graficheche fossero un passaggio logico dall’attualead un eventuale cambio radicale.

Conclusioni

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

Conclusioni

Sempre presenti le ombre ai laterali impone ai contenuti aree più definite e meno dispersive.L’ampiamento del footer consente di separare gli sponsor.

Conclusioni

Totalmente diverso come impatto visivo comunica un chiaro passo comunicativo verso l’affermazione dei colori e del logo dell’università. Il secondo step nelle procedure per il

posizionamento di un prodottonel mercato.

Nella speranza di aver colto le vostre necessità comunicative e imprenditoriali vi porgo i miei più cordiali saluti.

Marco Sacco

Università per Stranieri di SienaSintesi delle funzionalità del sito in base alle proposte grafiche presentate

Marco Sacco - ITC Consultant [email protected] Mob. 349.670.3532

Documents

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