I wireframe dei siti Web sono semplici disegni a linee che mostrano il posizionamento di elementi in una pagina Web. Puoi risparmiare un sacco di tempo modificando il layout di un semplice wireframe all'inizio del processo di progettazione invece di un progetto complesso in seguito.
L'utilizzo di wireframes è un ottimo modo per iniziare un progetto di sito Web, poiché consente a te e al tuo cliente di concentrarsi sul layout senza la distrazione di colore, tipo e altri elementi di progettazione. Concentrati su ciò che accade dove sulle tue pagine web e sulla percentuale di spazio occupata da ciascun elemento, che può essere determinata dalle esigenze del tuo cliente.
Cosa includere in un sito Web Wireframe
Tutti gli elementi importanti di una pagina web dovrebbero essere rappresentati nel tuo sito web wireframe. Usa forme semplici invece di grafica reale ed etichettale. Questi elementi includono:
- Navigazione: pulsanti per consentire agli utenti di visitare le sezioni principali del tuo sito.
- Logo aziendale: può essere rappresentato solo da una scatola.
- Aree di contenuto: dove verranno visualizzate le tue diverse sezioni di contenuti?
- Caselle di ricerca
- Aree di accesso dell'utente
Come creare Wireframes sito Web
Esistono vari modi per creare un wireframe del sito Web. Loro includono:
Disegnandolo a mano su carta
Questo metodo è utile quando faccia a faccia con un cliente. Disegna le tue idee di layout su carta, concentrandoti su quali elementi dovrebbero andare dove.
Uso di Adobe Photoshop, Illustrator o altro software
La maggior parte dei pacchetti di software di grafica sono dotati di tutti gli strumenti di base necessari per creare wireframe. Linee semplici, forme e testo (per etichettare i tuoi elementi) sono tutto ciò che serve per creare un wireframe presentabile.
Utilizzo del software creato per questo tipo di attività
Mentre Photoshop e Illustrator possono fare il trucco, alcuni pacchetti software sono sviluppati specificamente per questo tipo di lavoro. OmniGraffle è un software che semplifica la creazione di wireframes fornendo strumenti di forma, linea, freccia e testo da utilizzare su una tela bianca. Puoi persino scaricare set grafici personalizzati (gratuitamente) su Graffletopia, che ti offre più elementi, come i comuni pulsanti web, con cui lavorare.
03 del 03I benefici
Con i wireframe dei siti Web, hai il vantaggio di modificare un semplice disegno al tratto per ottenere il layout desiderato. Anziché spostare elementi complessi attorno a una pagina, può richiedere pochissimo tempo per trascinare un paio di caselle in nuove posizioni. È anche molto più produttivo per te o per il tuo cliente concentrarsi prima sul layout … non inizierai con commenti come "Non mi piace quel colore lì!" Invece, inizierai con un layout e una struttura finalizzati su cui basare il tuo design.
