June 2
Wireframing è una tecnica per aiutare a immaginare e costruire un layout sito web prima di iniziare la progettazione vera e propria. E 'in grado di risolvere i lunghi periodi di blocco creativo di fronte a una pagina vuota nel software di progettazione. Meglio di tutti, si pone una fondazione o progetto che è possibile seguire una volta di iniziare a creare elementi grafici. Un wireframe garantisce gli elementi di design sono allineati correttamente con uno spazio bianco sufficiente. Wireframing può essere fatto in diversi modi, da software per carta e matita. Ma alcuni metodi sono molto più facili di altre.
1 Prendete carta e penna e delineare la tua idea utilizzando il righello per creare una griglia. Questo è il metodo più semplice di wireframing, ma ha alcuni svantaggi. Potrebbe non essere un grande artista o può venire contro lo stesso blocco creativo con la carta che hai avuto con il software. Senza uno scanner, uno schizzo inoltre non aiuterà a costruire i mock-up o progetto finale da un punto di vista tecnico. In questo caso, uno strumento software progettato specificamente per wireframing è quello che serve.
2 Scegliere uno strumento wireframing online gratuito come MockFlow, bella grafici o Gliffy. Se si preferisce avere una applicazione desktop, si può optare per uno strumento come diagrammi semplici, denim, o anche utilizzare il software di editing grafico. Il vantaggio di wireframing è che sono facili da usare e offrono pre-made forme, schemi, modelli e linee guida destinate al Web e il design del documento.
3 Decidere la larghezza della vostra area di contenuto (320px, 960px, 1020px, e così via) Iniziare disegnando un riquadro che rappresenta il contenitore per il layout. Ora avrete un tempo molto più facile il posizionamento degli elementi di contenuto e allineandoli uno con l'altro.
4 Disegnate altre tre caselle, ognuno dei quali rappresenta l'intestazione, l'area contenuto principale, e il tuo piè di pagina. Questi sono gli elementi di base di ogni progetto e mentre non possono finire per assomigliare scatole nel disegno finale, il wireframe aiuta a visualizzare come il codice HTML sarà costruito e come il design grafico sarà disposto.
5 Trascinare o creare forme nel layout che rappresentano altri elementi di design, come ad esempio il logo, immagini, caselle di contenuto, le intestazioni, e call-to-action pulsanti. Ora avete la libertà di riposizionare, ridimensionare e trascinare intorno a questi elementi al vostro desiderio creativo fino a quando il layout si sente giusto.
6 Salva il tuo wireframe e esportarlo in un formato JPG o PNG. È ora possibile aprire il file in Photoshop o il vostro programma di grafica preferito, e usarlo per aiutare l'insieme guide e creare il vostro disegno.