Share
Dopo aver disegnato, c'è un'ultima cosa su cui dovresti lavorare prima di iniziare a progettare (anche se, certamente, tutto questo fa parte della progettazione). Wireframing è essenzialmente una guida visiva per un sito Web che ti aiuta a guardare il layout senza pensare all'estetica del progetto.
Come dovrebbe apparire un wireframe varierà selvaggiamente, a seconda di chi parli. Hai molte opzioni quando crei wireframe: dal modo in cui mostri i wireframe, al software con cui li crei.
Quando crei i tuoi wireframe, devi lavorare con il layout e con i contenuti che hai precedentemente curato. L'idea di un wireframe - come un deliverable per un cliente, o semplicemente come un ulteriore passo che preferiresti fare - è quella di essere in grado di visualizzare il layout visivo e il flusso di una pagina del sito web, prima di impantanarti con il design dettagli come colore, tipografia o altri tipi di effetti visivi.
Il modo migliore per passare alla creazione di wireframes digitali per il tuo progetto è quello di passare direttamente dalla fase di sketch. In quella sezione dovresti aver già giocato con il layout, ma creare un wireframe digitale è un modo molto più professionale di inchiodare le tue idee sul layout e sul flusso della tua pagina web.
Durante la progettazione di wireframes creativi, devi assicurarti di utilizzare il contenuto reale che hai curato più vicino all'inizio del progetto. Personalmente, preferisco progettare wireframe privi di qualsiasi cosa che possa influenzare un cliente nel pensare che siano prese decisioni di design che influenzeranno l'aspetto del progetto. Pertanto mi assicuro sempre di progettare un wireframe che si concentri solo sul contenuto del progetto e sul modo in cui il contenuto viene presentato sulla pagina.
Un esempio di wireframe creato utilizzando l'applicazione Balsamiq Desktop. Il contenuto che è ben scritto e visualizzato in un modo che è utile e pertinente a coloro che lo leggeranno, porterà sempre a un design migliore e all'esperienza online. Un wireframe ben progettato è uno che tiene a mente che il contenuto è la cosa più importante nella pagina ed è solidale alla visualizzazione di quel contenuto in un modo che è adatto per il progetto e per i suoi utenti finali.
La fase wireframe di un progetto si relazionerà pesantemente a quando stavi modificando e lavorando con il tuo contenuto più vicino all'inizio del progetto. Come un breve esempio, a quel punto avrai lavorato duramente per assicurarti che il contenuto fosse facile da leggere usando correttamente i titoli e gli elenchi. Progettare un buon wireframe significa trasportare quel contenuto (in paragrafi, intestazioni, liste e qualsiasi altro modo in cui hai scelto di formattare il contenuto) nel tuo wireframe e guardare come puoi iniziare a creare visivo relazioni tra ogni bit di contenuto, collegando i punti fino a quando non si ha una rappresentazione visiva di come il contenuto potrebbe apparire su una pagina.
Per mantenere i wireframe privi di design e incentrati sul contenuto, lavorare con i blocchi è un modo molto semplice di separare parti di una pagina per aree di contenuto particolari.
In pratica, questo significa che se, ad esempio, si desidera un'intestazione standard nella parte superiore della pagina, si aggiungerà un blocco all'inizio del progetto wireframe. Se, ad esempio, per esempio, si desidera aggiungere un logo e un'area di navigazione all'interno dell'intestazione, posizionare ulteriori blocchi per questi elementi all'interno dell'intestazione del progetto wireframe.
È quindi possibile utilizzare i blocchi nel resto del progetto wireframe, continuando a separare le aree per parti specifiche del contenuto.
Tuttavia, i blocchi non devono essere solo un quadrato o un rettangolo monocromatico letterale: una volta che hai un'idea del layout di base con i blocchi che hai aggiunto, sentiti libero di utilizzare il tuo contenuto reale in luoghi che saranno utili. Ad esempio, utilizza il contenuto reale per gli elementi di navigazione, un'introduzione a una pagina, i titoli e così via. Questo aiuta come puoi iniziare a vedere visivamente come i contenuti interagiscono nel layout che stai creando.
Quando stai progettando i tuoi wireframe, assicurati sempre di etichettare le aree o le sezioni che inserisci nel wireframe. Sebbene tu possa capire che cosa indica un certo blocco (in particolare quando il contenuto reale non è inserito lì), un cliente o un collega potrebbero non farlo e dovresti renderlo il più chiaro possibile per loro per capire che cosa stanno guardando.
Quando stai progettando i tuoi wireframe, una cosa a cui devi pensare è il flusso della pagina: guarda il modo in cui il contenuto si trova sulla pagina e come passa da una sezione di contenuto a un'altra.
Lo scopo qui è di assicurarsi che il contenuto sia letto correttamente e che l'occhio si muova fluidamente da una sezione all'altra. Ciò è particolarmente importante quando si hanno pagine ad alto contenuto: gli utenti dovrebbero essere in grado di spostarsi facilmente da una sezione a quella successiva, senza che ciò sia un'esperienza sconvolgente. Se le pagine sono troppo occupate e non hanno il giusto flusso verso di loro, gli utenti saranno spenti da ciò che sembra un processo difficile da capire o da seguire.
Un'idea è quella di pensare a ciò che faresti intuitivamente quando navighi su un sito web: inizia guardando verso il logo e l'intestazione, quindi verso il basso fino all'intestazione principale e seguendo il contenuto principale, spostandoti gradualmente verso una barra laterale e così via.
Quando si progetta un sito Web, è quasi impossibile creare un wireframe separato per ogni singola fase che il sito Web potrebbe cambiare, come appare o si adatta. Invece, dopo aver pensato in precedenza al flusso del design e del contenuto, puoi guardare un flusso reattivo al design del wireframe.
Questo è stato un suggerimento che ho preso dal discorso di risposta di Sarah Parmenter a Intervento, in cui Sarah ha spiegato come aggiunge numeri ai suoi wireframe che aiutano ad aiutare un cliente a capire in che modo il contenuto e gli elementi possono essere raggruppati su uno schermo più piccolo. Questo è davvero utile in quanto aiuterà un cliente a capire anche la gerarchia dei contenuti, il che significa che puoi iniziare a guardare a tutte le possibili insidie o sfide quando lavori in modo reattivo molto presto nel progetto - qualcosa che potrebbe farti risparmiare molto tempo dopo nel progetto.
Quando si progettano i wireframe, si ha una scelta ridicola quando si tratta del software che è possibile utilizzare. Personalmente, penso che ci siano ben tre scelte che sembrano più popolari, in particolare nel settore web.
Quando si progetta un wireframe, probabilmente la soluzione più semplice è quella di lavorare con un'app di grafica a cui si è già abituati - o almeno averla usata un po 'prima. Questo significa che c'è poca o nessuna curva di apprendimento, quindi si può sperare di andare avanti con la progettazione dei wireframe un po 'più veloce.
Il modo più semplice per progettare con il tuo software di grafica è quello di utilizzare gli strumenti di forma e testo, utilizzandoli per creare i blocchi di base e aree specifiche con contenuti reali. Ricorda di etichettare i blocchi wireframe usando lo strumento testo mentre vai avanti.
Questo potrebbe essere una sorpresa per alcuni, in quanto Keynote e Powerpoint vengono solitamente utilizzati per la creazione di presentazioni. Tuttavia, sono strumenti davvero potenti e facili da usare per creare altre cose, inclusi i wireframe. Usando gli strumenti predefiniti disponibili nelle app stesse, puoi creare facilmente wireframe dall'aspetto professionale molto rapidamente.
La mia preferenza personale, Balsamiq Mockups è un'app dedicata alla creazione di wireframe. Questa app semplifica la progettazione dei wireframe e dispone di molte risorse a disposizione per trascinare rapidamente gli elementi che desideri posizionare.
Una cosa che mi piace di Balsamiq Mockups è che utilizza uno stile approssimativo e abbozzato che si presta davvero a mostrare che i wireframe sono proprio questo: un'idea di layout che potrebbe essere successivamente tradotta in un design appropriato. Hai la possibilità di scegliere tra un tocco più standard per i wireframe e la finitura abbozzata, se ritieni che un cliente sarebbe più ricettivo a quello.
Con l'introduzione di kit di interfaccia utente, è anche molto semplice iniziare a progettare wireframes più complessi su una varietà di app. Dai kit completi che puoi scaricare per usare come PSD in Photoshop, per i set che ti aiutano a creare wireframe in Keynote molto più facilmente - c'è qualcosa lì per aiutarti.
Accentsconagua