PROGETTO WEBSITE 3.0

WIREFRAME E MOCKUP: LE FASI PRELIMINARI DEL WEB DESIGN

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

FASE OPERATIVA: 6

realizzazione con wordpressoppure

rappresentazione grafica tramite mockup

del sito progettato