Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
IL WIREFRAME, CONCETTO E IDEA
Il wireframe è una bozza grafica, uno schizzo che i più creativi realizzano
su un foglio di carta con una matita.
I più tecnologici, invece, si avvalgono di programmi online per creare gli scheletri dei propri progetti.
In qualunque modo lo si realizzi, il wireframe rappresenta la base dell’idea.
Solitamente, è in bianco e nero
perché in questa fase, l’attenzione è focalizzata
sugli elementi che caratterizzano
il proprio sito, come la posizione del logo,
quella del menù e la struttura base di articoli,
categorie ed immagini.
Questo è un esempio pratico di wireframe. Come si nota, gli elementi sono rappresentati semplicemente da bozze, mappe e contenuti astratti. Non sono presenti colori, indirizzi, testi reali proprio perché in questa fase è fondamentale concentrarsi sullo scheletro del progetto. Una volta approvato il wireframe, si può realizzare il mockup.
IL MOCKUP,UN’ISTANTANEA DEL PROGETTO
Quando si parla di mockup, significa che il designer ha ricevuto il wireframe
ed ha provveduto ad aggiungere grafica, colori e solitamente contenuti indicativi più realistici
rispetto ai precedenti.
Solitamente, vista l’indispensabilità di un design responsive, si preparano mockup per pc, tablet e smartphone. Dopo alcune revisioni e modifiche grafiche, il mockup è quindi pronto per essere passato allo sviluppo web, essere elaborato con il codice sor-gente per la messa online del sito.
Prima di iniziare con il codice, un web designer deve organizzare le idee, strutturare la gerarchia degli elementi in rapporto alla loro importanza
e cominciare a disegnare con carta e matita!
LA MAPPA DEL SITO
HOME
AZIENDA
STORIA
CHI SIAMO
TEAM ASSISTENZA
CONSULENZA
NOLEGGIO
VENDITA
CATEGORIA PROD. ARTICOLO
ARTICOLO
ARTICOLO
ARTICOLO
ARTICOLO
ARTICOLO
ARTICOLO
ARTICOLO
CATEGORIA PROD.
SERVIZI PRODOTTI CONTATTI
HOME AZIENDA
STORIA
CHI SIAMO
TEAM ASSISTENZA
CONSULENZA
NOLEGGIO
VENDITA
CATEGORIA PROD.
CATEGORIA PROD.
SERVIZI PRODOTTI NEWS / BLOG CONTATTI
HOME
SERVIZI
AZIENDA
FORM CONTATTO
MAPPA
DATI CONTATTO
AZIENDA
CHI SIAMO
TEAM
NOLEGGIO
VENDITA
CATEGORIA PROD.
CATEGORIA PROD.
FOTO AZIENDA
STORIA
SERVIZI
CONSULENZA
NOLEGGIO
ASSISTENZA
VENDITA
PRODOTTI
CATEGORIA PRODOTTO
CATEGORIA PRODOTTO
CATEGORIA PRODOTTO
NEWS / BLOG
ARTICOLO
ARTICOLO
ARTICOLO
...
CONTATTI
MAPPA
INDIRIZZI
EMAIL / TEL. CELL.
ORARI
FORM CONTATTO
MAPPA OPERATIVA DEL SITO
PROGETTARE E STRUTTURAREIL PROPRIO SITO WEB
Lo sviluppo dovrà rispettare le seguenti fasi:
1 • scelta voci menù e sottomenù di navigazione
2 • struttura ad albero delle pagine web (mappa del sito)
3 • realizzazione con wordpressoppure
visualizzazione wireframe e mockup delle pagine webutilizzando di immagini campioni
MODALITA DI REALIZZAZIONEIl progetto potrà essere realizzato,
in base all’attrezzatura grafica disponibile, con le seguenti procedure:
per i possessori di computer e software graficirealizzazione dei punto 1, 2 e 3
con Adobe Illustrator o software similarie salvataggio ed invio in PDF
per i NON possessori di computer e software graficitracce e disegno su carta
schemi e foto campioni incollate su cartamassima precisione e pulizia
fotografia ed invio con smartphone jpg o pdf
Invio dei progetti tramite Google Classroom, in fase di attivazione.
FASE OPERATIVA: 1
selezionare e presentare una lista di 6 links di siti scelti come campione
per il proprio progetto
es:https://www.templatemonster.com/it/
https://www.joomlart.com/https://themeforest.net/top-sellers
selezionare demo o prewiew
FASE OPERATIVA: 2
A •scrivere il proprio menù di navigazione
B •disegnare su un foglio
il proprio albero di navigazione
FASE OPERATIVA: 3A •
disegnare la struttura wireframedella propria Homepage
B •disegnare la struttura wireframe
della pagina dei contenutipresentazione / categorie foto / galleria fotografica
C •disegnare la struttura wireframe
della pagina contatti
FASE OPERATIVA: 4
preparare graficamente il contenuto della Homepage
es:
testatina sito / logo personale / scelta slogan
foto per scroll / foto per sezioni
scelta testi da abbinare alle foto
FASE OPERATIVA: 5
preparare graficamente il contenuto della categorie
es:
foto per sezioni / galleria fotografica
scelta testi da inserire nella categoria
scelta testi da abbinare alle foto