progettazione layout asia

Elisa BarracoGestione contenuti per il web - Joomla

Elisa BarracoProgettazione web - Raccolta di memorie

Analisi del soggetto: storico, culturale, commerciale.Spunti, comparazioni, eventuale bibliografia o linkografia.

Analisi del contesto:

Il sito che ho progettato vede come protagonista l’Associazione Culturale ASIA Associazione Spazio Interiore e Ambiente. Tale associazione nacque ufficialmente nel 1994, anche se il nucleo fondatore si frequenta dagli inizi degli anni ’80.

Il motivo trainante, come esprime il nome “Associazione Spazio Interiore e Ambiente”, è l’interesse per la dimensione interiore dell’uomo e l’approfondimento della relazione tra questa e l’ambiente circostante.

La stessa sede dell’Associazione, situata nell’ex santuario della Madonna della Pioggia in via Riva di Reno 124 a Bologna, edificio storico le cui prime notizie risalgono al XIII secolo, nonché collocata sopra l’attuale santuario, mette in evidenza lo spirito di rispetto e sacralità con il quale si intende proporre la ricerca.

Per poter percorrere questa delicata ricerca, viene considerato fondamentale il confronto tra la nostra cultura e quella orientale, che sin dal II o III millennio a.C. ha sviluppato ed approfondito diverse pratiche di ricerca interiore, prime fra tutte lo Yoga e la Meditazione.

La ricerca viene portata avanti con attività che coinvolgono in maniera globale sia il corpo che la mente e possono essere approfondite a diversi livelli a seconda dell’interesse personale.

Le Vie percorse non sono soltanto quelle classiche esperienziali dell’Oriente, quali lo Yoga, l’Aikido e la Meditazione, ma comprendono anche lo studio e l’analisi della filosofia occidentale, cercando di cogliere quelli che possono essere i punti di contatto e soprattutto di capire in che modo le discipline orientali possono andare incontro a domande espresse attraverso linguaggi e modalità totalmente differenti.

Scelte stilistiche:

Il layout grafico da me sviluppato per il sito “Asia - Associazione Spazio Interiore Ambiente”, prevede il colore bianco per il background, simbolo di purezza e relax dei sensi, l’azzurro chiaro (utilizzato per le voci di menù, per i titoli e per i link) come rimando all’interiorità e allo spirito nonchè alla purezza dell’acqua e del cielo, ed il nero, simbolo di forza (scelto come colore di fondo per il menù principale e per l’immagine riportata nel footer) colore caratteristico ricorrente nei costumi delle arti marziali).

Ho scelto come immagine principale, riportata nell’ header, la fotografia di una ragazza intenta nella pratica dello Yoga in quanto raffigura una tra le attività più rilevanti proposte dall’associazione.

Ho adottato un tono di comunicazione visiva che risultasse in linea con il targhet di riferimento: i giovani ed adulti che desiderano trovare uno spazio in cui ritrovare il mondo della natura e della spiritualità che al giorno d’oggi viene sempre più dimenticato ed accantonato. Ho deciso per questo motivo di limitare il più possibile l’utilizzo di elementi grafici superflui lasciando trasparire ed emergere i contenuti, le immagini ed i vdeo forniti dall’associazione a scopo didattico.

In conclusione ho realizzato un sito dalla grafica pulita ed essenziale, facile ed intuitivo da navigare e ricco di contenuti.


Analisi dei materiali a disposizione. Schedatura e divisione in categorie e tipologie.Flusso ragionato della struttura dei dati.

Asia - Associazione Spazio Interiore Ambiente

PRIMA PAGINA - CHI SIAMO - STORIA - CORSI - C. STUDI - VACANCES - VIDEO - CONTATTI

Struttura e flusso dei dati:

Ho deciso di strutturare il flusso dei dati nel seguente modo:

Nella home page sarà presente un menù principale distribuito in senso orizzontale, preceduto dalla testata riportante l logo dell’associazione.

Cliccando su ogni voce di menù si accederà alla pagina dei contenuti ed ai relativi sottomenù, i quali sono riportati sulla parte destra dello schermo in modo da renderli immediatamente visibili, assieme al logo specifico di sezione, ad ogni cambio di pagina.

Da ogni pagina e sottomenù sarà possibile tornare con facilità alla home page e/o al menù principale, ciò garantirà una completa libertà di accesso ai contenuti.

Sul lato sinistro ho deciso di mantenere dei sotto menù fissi comuni a tutte le pagine; ritengo che tale organizzazione renda il sito fruibile e comodo da navigare.

R = 0 G = 0 B = 0

R = 255 G = 255 B = 255

R = 20 G = 113 B = 144

Analisi delle scelte cromatiche: Ho scelto il nero, il bianco e l’azzurro per le loro radici simboliche,rispettivamente forza, purezza e spiritualità.


Ipotesi di interfaccia grafica.Layout con le aree funzionali. Menu di navigazione.Palette di colori. Elementi tipografici.

PAGE

LOGO ED ELEMENTI TIPOGRAFICIIl logo è sovrapposto ad un fondino semi trasparente per essere distaccato dallo sfondofotografico.

FOOTERIl footer è una fascia semitrasparente con angoli arrotondati riportante un’immagine sul lato sinistro.

MENU PRINCIPALEIl menù principale è progettato per rimanere

invariato nel tempo, nonostante questo è sempre possibile intervenire sul CMS per aggiungere o togliere voci su richiesta della cliente.

MENU SECONDARIO FISSOIl menù secondario fisso è progettato per rimanere invariato in tutte le pagine del sito, è sempre possibile però intervenire sul CMS per aggiun-gere o togliere voci in fase di aggiornamento e manutenzione.

TESTATAImmagine fotografica comune ad ogni pagina.

LOGO DI SEZIONEIl logo specifico

riguardante argomento ed attività proposta dall’associazione varia in base alla sezione visitata.

MENU SECONDARIO VARIABILEIl menù secondario varia a seconda della sezio-ne del sito. E’ sempre possibile aggiungere o togliere voci in fase di aggiornamento e manu-tenzione.


Esempi applicati: home page e pagine interne delle sezioni principali.

Home:

Articoli in evidenzagli articoli di questa sezione dovranno essere

sostituiti ogni poco tempo per mantenere vivo l’unteresse degli utenti.


Esempi applicati: pagine interne delle sezioni principali.

Plugin QTubeI video sono stati inseriti tramite l’installazione

di un Plugin di Joomla che mi ha permesso di riportare all’interno di ogni articolo un di video presente su You Tube.

Questa pagina è stata strutturata come “articolo categoria blog”: in questo modo è possibile visualizzare su di una sola pagina tutti gli articoli contenenti dei video (precedentemente salvati in una categoria ben precisa).

Video


Esempi applicati: pagine interne delle sezioni principali.

Menu secondario variabilenel menu secondario sono elencati tutti i corsi

disponibili.

Modulo GMapAttraverso l’installazione di un modulo sul cms è

possibile impostare una mappa dettagliata su come raggiungere la sede.

Gli articoliLa pagina è strutturato come sezione blog, in questo

modo è possibile visualizzare una breve introduzione di più articoli contemporaneamente.

Ogni introduzione è linkata tramite un leggi tutto riconduce all’articolo completo.

Corsi - Vacances de l’espirit - Contatti


Modalità tecniche di realizazione. Soggetti coinvolti, tempi e costi previsti.Ipotesi di manutenzione: come gestire il progetto nel suo continuum.

Soggetti coinvolti:

Le figure professionali che eventualmente dovrebbero essere coinvolte nel progetto sono queste:

un • account che sappia interagire con il cliente e procurarsi gli elementi necessari per una progettazione efficacce, mirata e dettagliata un• grafico creativo che si occupi di ideare il progetto nella sua totalità eventualmente un • grafico esecutivo che si occupi dell’assemblaggio dei contenuti e della gestione delle immagini • un copy writer, che garantisca una suddivisione curata e strategica degli argomenti principali e la corretta stesura dei testi un • web designer / programmatore esperto nella realizzazione di siti in Joomla e nella gestione dei fogli di stile

Manutenzione e gestione del progetto nel tempo:

Il progetto sarà tenuto aggiornato nel tempo su richiesta del cliente, il quale sarà libero di far aggiungere o togliere materiale dai contenuti oppure richiedere un periodico restyling della grafica e delle applicazioni per mantenere il sito funzionale e al passo coi tempi.

Scelta del software:

Il sito che ho progettato dovrà essere realizzato mediante Coda o Adobe Dreamweaver, per la gestione delle pagine html, php, css, e per l’up-load del materiale on line. Sarà necessario inoltre installare un CMS per la gestione dei contenuti e l’inserimento di moduli e plugin per rendere il sito, di grandi dimensioni, più faccile da modificare ed aggiornare.

Ho previsto la relizzazione tramite Joomla perchè è un CMS relativamente semplice da utilizzare ed è indicato per la gestione di contenuti composti per la maggior parte da articoli di testo.

Elisa BarracoGestione contenuti per il web - Joomla

progettazione layout asia

Documents

Transcript of progettazione layout asia