Annuncio pubblicitario
A livello tecnico, un sito Web moderno non è solo una cosa. È una complessa serie di tecnologie interattive, come HTML (il markup che vedi sulla pagina), JavaScript (il lingua in esecuzione nel browser, influendo sulle interazioni), CSS (la lingua per l'impostazione dell'aspetto della pagina) e Di Più. Ma a un livello più semplice, un sito Web è un'idea.
Se è il tuo sito web, probabilmente sai cosa vuoi che faccia o cosa vuoi che gli utenti ne escano. Forse dovrebbe essere un posto facile per loro per trovare informazioni sulla tecnologia; o forse dovrebbe spiegare perché sei la migliore band o dog-walker in circolazione. In ogni caso, molto prima che tu abbia a che fare con HTML, CSS, JavaScript o qualsiasi altro sviluppo Web specifico tecnologia, dovresti avere un'idea molto chiara di cosa dovrebbe fare il tuo sito e di come dovrebbe essere generalmente piace. E i wireframe dei siti Web sono il modo per consolidare quell'idea e comunicarla.
La parte posteriore di un tovagliolo
Un wireframe di un sito Web è solo uno schizzo di come si desidera che il tuo sito assomigli. Non dovrebbe essere carino e non hai nemmeno bisogno di software per crearlo. Puoi semplicemente prendere un pezzo di carta, o anche un tovagliolo, e iniziare a bloccare nel tuo sito Web, elemento per elemento. “Il titolo va qui... e poi abbiamo un menu di navigazione... oh, e qui posso mettere una casella di ricerca."Solo in termini generali e semplici, metti insieme una parte del tuo sito Web, fino a quando il risultato finale è simile a questo:
Come puoi vedere, questo non è un codice per computer o qualcosa di eccessivamente tecnico o complesso. Chiunque potrebbe guardare questo rapido schizzo e capire immediatamente cosa stanno vedendo. Ed è questo il punto dei wireframe: sono molto veloci da capire e facili da capire. Ti consentono di ottenere correttamente le cose importanti, come il layout del sito, la struttura di navigazione e il posizionamento degli annunci, prima di toccare una singola riga di codice. E se lavori con altre persone, come un programmatore o un designer, ti permettono di raggiungere un accordo su come sarà il risultato finale. Questo può risparmiare un sacco di confusione e doppio lavoro, soprattutto quando si tratta di progetti più grandi.
È importante notare la mancanza di dettagli nel wireframe sopra: le immagini accanto a ciascun articolo non sono immagini "reali", ma ovvi segnaposto. Anche il testo dell'articolo non è compilato, è solo un mucchio di righe. Non puoi vedere quale sarà la combinazione di colori: è tutto solo in bianco e nero. Questo è un wireframe ipotetico assomigliare. Non dovrebbe essere una rappresentazione completa del sito web finale, ma solo il suo spirito o essenza, se vuoi. Sono solo le cose più importanti.
Strumenti per Wireframing
Come ho già accennato, lo strumento migliore per il wireframing è spesso solo un pezzo di carta e una penna. Allontanarti dal tuo computer può davvero aiutarti a liberare la mente e concentrarti su ciò che vuoi che il tuo sito Web appaia, senza fastidiose interruzioni o pasticciare sull'apprendimento di un nuovo strumento di wireframing. Un blocco note matematico (come mostrato sopra) di solito funziona meglio perché si traccia la traccia lungo le linee, si creano rettangoli ordinati e si allineano facilmente i diversi pezzi del sito. Prendi uno, una penna o due e vai a prendere una tazza di caffè da qualche parte lontano dal tuo computer. Tornerai con una chiara idea di cosa stai esattamente cercando di creare.
Detto questo, a volte è necessario un software di wireframing. Ad esempio, forse stai lavorando come parte di un team che è distribuito in tutto il paese o in tutto il mondo, o forse stai scrivendo un post sul blog sul wireframing. In questi casi, la scansione manuale dei wireframe non è una soluzione molto pratica. Ecco alcuni strumenti software gratuiti che possono aiutarti, se davvero non puoi usare carta e penna:
- Lumzy: uno strumento gratuito di wireframing basato su Flash con una ricca libreria di oggetti. Questo è lo strumento che ho usato per creare il wireframe che vedi sopra: è rapido e indolore.
- Fili di QuirkTools [URL rotto rimosso]: uno strumento più semplice, senza opzioni di allineamento. Tuttavia, non è basato su Flash.
- mimo: Uno strumento commerciale, ma ha un piano gratuito limitato.
Non solo per i siti Web
Probabilmente te ne sei reso conto tu stesso, ma questa è una buona nota per concludere: Wireframes è uno strumento fantastico per creare qualsiasi prodotto, non solo un sito web. Forse hai un'idea approssimativa per un'app per iPhone o Android o anche per un'applicazione per computer a tutti gli effetti. In questi casi, i wireframe dei siti Web sono preziosi per mostrare come appare tutto e possono anche aiutarti a convincere le persone a supportare il tuo progetto in diversi modi.
Hai mai creato tu stesso un wireframe? Inizierai ora che hai letto questo? Fatemi sapere nei commenti!
Crediti immagine: Immagine di tovagliolo spiegazzato tramite ShutterStock, Immagine del quaderno rosso tramite ShutterStock