Share
Wireframing è una parte utile del processo di progettazione del sito web. È fantastico separare questa fase di pianificazione e avere il posizionamento della pagina, la spaziatura, il layout e altri elementi come la dimensione e il tono del testo prima di entrare in Photoshop per aggiungere colore, texture, immagini ed effetti per rifinire il tuo design.
Fireworks è un ottimo strumento per creare un wireframe e, anche se non funziona perfettamente con Photoshop, puoi esportare lì e quindi costruire il tuo wireframe. Tratteremo il processo di progettazione della creazione di un wireframe per un sito Web di un'applicazione iPhone in Fireworks. Per quelli di voi che non hanno familiarità con questo programma, sarà un buon punto di partenza per usarlo per wireframe i progetti di web design. Questa è una prima parte di una serie in più parti e sarà divertente!
Di seguito è riportato il wireframe su cui lavoreremo e puoi visualizzare qui la versione wireframe a dimensione intera. Vuoi accedere ai file Sorgente completi e alle copie scaricabili di ogni tutorial, incluso questo? Unisciti a Vector Plus per soli 9 $ al mese.
Ci sono numerosi vantaggi nella creazione di wireframe come fase separata nel processo di progettazione del tuo sito web. Qui ce ne sono un po:
Ci sono un bel po 'di programmi là fuori per i web designer da utilizzare per il sito web wireframing. Alcuni criteri per scegliere un programma da utilizzare su un determinato progetto sono: la familiarità con il programma, la capacità di lavorare rapidamente in esso, la funzionalità dei programmi, la sua adattabilità al progetto, la capacità di memorizzare elementi riutilizzabili, ed è flessibilità per fare modifiche.
Potresti voler usare un programma al di fuori della famiglia Adobe, come Omni Graffle, e ce ne sono sicuramente anche altri. Se hai intenzione di utilizzare un programma all'interno di Adobe Suite per il wireframing, le regole di Fireworks sono le migliori.
È possibile utilizzare Photoshop, sebbene sia più lento lavorare con wireframing e manchi della funzionalità di più pagine e di altre funzionalità che consentono a Fireworks di pianificare rapidamente siti Web grandi o piccoli. Ho scritto un articolo sull'utilizzo di Illustrator per la costruzione di wireframing all'inizio del 2008 (più una dimostrazione di concetto che una raccomandazione). Sebbene sia possibile utilizzarlo per questo scopo, non ha gli strumenti che Fireworks ha per il wireframing. Consiglio di utilizzare Fireworks nella maggior parte dei casi per wireframing. E 'davvero costruito bene per questo scopo.
Stiamo utilizzando Fireworks per questo progetto perché è veloce da utilizzare. Inoltre, puoi creare facilmente scatole, posizionarle, aggiungere testo, aggiungere angoli arrotondati e costruire rapidamente i layout con Fireworks. È impostato per lo sviluppo web e la prototipazione. Quando si disegnano le caselle, si agganciano automaticamente ai pixel. Questo è senza nemmeno attingere alle funzionalità più avanzate dei programmi.
È anche possibile esportare in Photoshop quando hai finito di creare il wireframe, che è un flusso di lavoro ideale quando il tuo progetto finale avrà i migliori dettagli creati in Photoshop. Ci sono alcuni problemi che mi piacerebbe vedere l'indirizzo Adobe nella sua prossima versione, sebbene con l'integrazione del flusso di lavoro da Fireworks a Photoshop.
Ora iniziamo il processo di pianificazione del nostro progetto e costruzione del nostro wireframe.
Prima di saltare a Fireworks e iniziare a costruire un sito Web, ci sono alcuni passaggi da seguire. Il primo naturalmente è la definizione del tuo progetto, il contenuto che conterrà, il suo scopo, ecc. Una volta che avrai risolto questo problema con il cliente, o ristretto il tuo focus se si tratta di un progetto personale, allora è il momento di fare qualche ricerca.
Per questo progetto fittizio stiamo creando un sito Web promozionale per iPhone per Aurora, un'ipotetica app per iPhone per illuminare il tuo iPhone con i pattern di luce Aurora Borealis. L'idea è che questa è una pagina di un progetto più ampio per un'azienda che vende più app per iPhone. Ci stiamo concentrando su questa pagina per questo tutorial.
Come designer siamo piuttosto interessati allo stile sin dall'inizio. Potresti voler prendere appunti sugli stili che trovi nella tua ricerca visiva o costruire un mood board. Il nostro obiettivo primario sulla creazione di un wireframe è la definizione del layout e della funzionalità (senza preoccuparsi del colore o dello stile in questo momento).
Per questo progetto ho esaminato una serie di siti di applicazioni per iPhone. Ho notato che ci sono alcune parti comuni di funzionalità che penso possano contribuire a vendere un'app. Mi sono imbattuto in alcuni layout che mi piacevano. Ecco alcuni di loro:
Mi è piaciuto il menu secondario di Tapulous. C'erano alcuni altri siti con più icone di app in verticale, il che ha il vantaggio che potevano aggiungere app illimitate e il menu sarebbe adatto, ma mi è piaciuto molto il facile accesso di averlo eseguito orizzontalmente verso l'alto, come questo sito fa.
Il sito Tapbots ha alcuni elementi comuni su molti dei siti di promozione delle app per iPhone di maggior successo. Ha una grande immagine di iPhone che ha un file video incorporato che mostra l'applicazione in azione. Ha una chiara lista di caratteristiche, testimonianze e altri contenuti in una griglia organizzata, collegamenti in miniatura a schermate più grandi e un link all'app store di iPhone che spicca audacemente.
Il sito di Sonico Mobile ha anche una navigazione secondaria fatta di icone orizzontali che mi sono piaciute. Mi è piaciuto molto anche il loro uso dello spazio promozionale e di come l'iPhone verticale in piedi abbia rotto quello spazio promozionale orizzontale. Anche il modo in cui ruppero i prezzi dallo spazio promozionale è ben fatto.
Sono sicuro che potrei trovare più siti che hanno influenzato il design, ma quelli sono quelli che si sono davvero mescolati di più per il layout di base del sito. A questo punto ho una buona idea di quello che voglio che il sito assomigli nella mia testa. Quindi ora ho bisogno di scaricarlo sulla carta.
Puoi vedere lo schizzo qui sotto. Spesso faccio schizzi multipli per provare layout diversi, il che è molto veloce da fare quando si lavora a crudo con carta e matita, ma in questo caso mi sono sentito subito dopo il primo disegno, quindi avevo finito. Si noti che affronto il problema sia visivamente che verbalmente, prendendo appunti e elencando le funzionalità che voglio vedere.
Tieni presente che va bene che le cose cambino man mano che si passa dallo schizzo al wireframe in Fireworks, ma lo schizzo aiuta a far scendere le idee fondamentali e a elaborare i pensieri iniziali.
Ora che sappiamo cosa stiamo per creare, impostiamo il nostro documento. Ho deciso di utilizzare il 960 Grid System come base per il design. Ora, non importa se tale framework viene persino usato per codificarlo alla fine, ma è una griglia che è già stata stabilita, è facile da lavorare, e so che si adatta alla maggior parte dei monitor, quindi lo uso spesso per progettazione.
Vai avanti e scarica il 960 Grid System. Decomprimilo, all'interno di quella cartella seleziona templates> fireworks e apri il documento "960_grid_12_col.png" in Fireworks (il PNG è un file Fireworks con livelli).
Vai a Modifica> Area di disegno> Dimensioni tela e modifica le dimensioni dell'area di lavoro su 1060 px di larghezza per 1500 px di altezza. Ora fai clic sulla cartella di livelli "12 Col Grid" nella palette dei livelli. Sbloccalo, quindi seleziona tutte le colonne rosa, allungale verso il basso per tutta la lunghezza del documento e richiudi nuovamente la cartella del livello.
Ora vai su File> Salva, scegli dove posizionarlo e chiamalo "wireframe.png".
Ora impostiamo i nostri livelli per mantenere organizzato il nostro file. Faremo dei cambiamenti mentre procediamo, ma questo è un buon inizio. Segui lo screenshot qui sotto. Nota che "Web Layer" non è qualcosa che useremo per questo progetto, ma non può essere cancellato da Fireworks.
La creazione di un layout wireframe è un po 'un processo organico. Fai riferimento allo schizzo e inizia prima con gli elementi più grandi. Inizieremo con il posizionamento dei nostri sfondi per le nostre sezioni principali. Alcune sezioni useranno lo sfondo del sito.
Usa lo strumento Rettangolo (U) per creare gli sfondi "header" (altezza 80px) e "bottom" (altezza 360px), che coprono l'intera larghezza del nostro sito. Crea anche la nostra area di sfondo "promozione" (lasciando spazio per la nostra navigazione secondaria) ed è larga 940px (la dimensione della nostra area di documento principale con margini di 10px su ogni dimensione) di 280 px di altezza.
Uno dei vantaggi di lavorare con Fireworks è la finestra di ispezione Proprietà. Ho dato a questa scatola una rotondità del 10% dall'ispettore, che sembra buono. Nota che una cosa che vuoi evitare di fare con le caselle arrotondate è ridimensionarla manualmente, in quanto eliminerà la curvatura della scatola. Utilizza i campi larghezza e altezza nella finestra di ispezione Proprietà per regolare la dimensione.
Iniziamo con "header" e "secondary_nav areas". Molte di queste aree costituiscono la navigazione principale e la navigazione secondaria, oltre ad alcuni altri dettagli. Innanzitutto, posiziona il nome del sito allineato sul lato sinistro della nostra "intestazione". Questo è un segnaposto per il design del logo finale.
Inizia posizionando il testo di navigazione nel livello "intestazione" usando lo strumento Testo (T) e usa un font sans-serif standard come Helvetica, Myriad Pro o qualsiasi carattere che preferisci. Si consiglia di attaccare con i caratteri web-friendly. Ho impostato il tipo su 13pt, con un colore nero, e l'ho reso grassetto. Quindi aggiungere scatole arrotondate alte 26px e larghe in modo appropriato. Imposta la spaziatura come meglio credi e allinea le scatole alla linea guida destra come mostrato. Nota come la navigazione selezionata è rappresentata con uno sfondo scuro e testo bianco.
Ora aggiungi caselle per la navigazione secondaria. Crea ogni box con icone a 57px per 57px con una forte rotondità. Lascia spazio per un'altra casella di 90 px di larghezza per 100 px di altezza per adattarsi dietro la navigazione dell'icona con lo spazio assegnato tra ciascuna. Aggiungi nomi sotto ogni icona impostata su 10pt, nero e grassetto. Inoltre, ho aggiunto una grafica segnaposto per un pulsante App Store standard allineato a destra, che aggiunge un invito all'azione e una certa legittimità.
Il primo passo qui è creare due box usando gli stessi metodi descritti sopra. Quello grande a destra rappresenta uno spazio dove andrà l'immagine di un iPhone, quale video potrebbe essere aggiunto allo schermo di. La scatola inferiore è la nostra principale chiamata all'azione.
Ora questo pulsante ha le stesse dimensioni del pulsante standard di App Store e entrambi si collegano allo stesso posto (stanno offrendo una funzione simile). Questo può sembrare eccessivo nel wireframe, ma con il colore e altri dettagli questo può funzionare una volta creato il progetto finale. Questo è qualcosa da prendere in considerazione però.
La mia impressione è che il pulsante Standard aggiunga un po 'di credibilità, e possiamo trattare l'altro pulsante stilisticamente in modo che risulti più rilevante e attira l'attenzione come la principale chiamata all'azione.
Nota come queste caselle si sovrappongono allo sfondo dell'area promozionale. Questo tipo di layout rende davvero questi due elementi spiccano nella pagina.
Creiamo un'area per posizionare il prezzo dell'app. Prima crea una scatola usando lo strumento Rettangolo (U). Durante la creazione della casella tieni premuto il tasto Maiusc per renderlo un quadrato perfetto. Vai avanti e fai questo 170 px di larghezza per 170 px di altezza.
Ora premi Comando + T, tieni premuto il tasto Maiusc e ruota il quadrato con un angolo di 45 gradi. Quindi allinealo come mostrato di seguito in modo che sia posizionato uniformemente sullo sfondo dell'area promozionale. Ora copia (Command + C) lo sfondo dell'area promozionale e Paste (Command + V), che in Fireworks incolla automaticamente una copia sul posto.
Ora seleziona il quadrato e lo sfondo, poi vai a Modifica> Combina percorsi> Interseca. E la tua sinistra con la forma che vogliamo.
Ora aggiungi tutto il testo come facevamo prima. Potresti esplorare varie opzioni di testo a questo punto. Sono principalmente concentrato su dimensioni, peso e posizione in questo wireframe e lavorerò su stile e caratteri nel progetto finale. Anche il prezzo viene creato premendo Command + T, tenendo premuto shift e ruotando il testo di 45 gradi. Quindi modifica la spaziatura e la dimensione finché non sembra buona.
Aggiungi anche una regola orizzontale sotto il testo più grande (rettangolo di altezza 1px). Quindi attiva le guide premendo il tasto Comando + Colon. Assicurati che tutto ciò che hai creato si allinei come mostrato di seguito.
Le tecniche utilizzate per inserire queste informazioni sono tutte di base. Sono tutte caselle e testo di base. Quindi vai avanti e posiziona le informazioni sul corpo come mostrato di seguito (potresti voler attivare le guide e la sovrapposizione della griglia come mostrato nella sezione successiva). Lo scopo di questa sezione è di aggiungere dettagli di vendita. Stiamo descrivendo l'app, quello che fa, mostrando gli screenshot di esso in azione, aggiungendo dettagli tecnici minori e fornendo testimonianze.
Vai avanti e attiva il livello "12 Col Grid" che contiene la nostra griglia e accendi le nostre guide. Si noti come questa sezione utilizza un'impostazione a tre colonne. Ogni colonna è larga 300 px. La griglia non è così ovvia sopra, ma puoi vedere come si allinea la scatola di iPhone con la terza colonna, e il testo promozionale si allinea con le prime due colonne della sezione del corpo. La struttura della nostra griglia sta davvero mostrando adesso.
Assicurati di mantenere i tuoi livelli organizzati, come mostrato di seguito.
L'immagine sotto mostra ciò che stiamo creando per la sezione inferiore. Ci sono quattro sezioni, quindi mantieni i tuoi livelli organizzati di conseguenza. Questa sezione è focalizzata sulla società e non sull'applicazione. Molti siti che vendono app per iPhone hanno più di un'app che vendono o, in alcuni casi, si concentra maggiormente sulla vendita di app per iPhone. Quindi lo scopo di questa sezione è promuovere l'azienda, il suo blog, il suo supporto clienti e il suo feed Twitter.
Nota come stiamo utilizzando la nostra griglia in modo diverso per questa sezione. Siamo andati con una colonna di quattro colonne qui, che rende ogni colonna di 220 px di larghezza.
La maggior parte della costruzione di questa sezione è costituita da testo e caselle di base. Le caselle di collegamento nella parte inferiore di ogni sezione hanno le stesse dimensioni della nostra navigazione principale e possono essere copiate da lì. Diamo un'occhiata ad alcuni aspetti di questa sezione. Il primo è come creare una linea tratteggiata, che è semplice da fare in Fireworks.
Ovviamente puoi usare lo strumento Linea (N) per creare la linea, ma ho usato lo strumento Rettangolo (U). Rendi le dimensioni di 220 px di larghezza di 1 px. Non dare un riempimento e un colore di traccia che è un grigio più scuro dello sfondo. Crea la dimensione della bobina 1. Quindi fai clic sul pulsante accanto alla dimensione della traccia, che ci fornisce le opzioni di linea. Vai su Trattini e quindi seleziona Puntato come mostrato di seguito.
Una cosa che faccio spesso quando creo wireframes è pensare a qualsiasi icona che verrà utilizzata nel progetto finale. In questo caso ce n'è solo uno che useremo da altrove. Puoi mantenere l'icona a colori, ma voglio questo wireframe in scala di grigi e concentrarti sul layout e sulla spaziatura, e non sul colore a questo punto.
Scarica il pacchetto gratuito di Practika Icon da Smashing Magazine. Trascina e rilascia il file 64px per 64px "twitter.png" nel documento. Posizionalo come mostrato e assicurati che la scatola su cui è posizionata sia abbastanza ampia per adattarsi. Ora con l'immagine selezionata vai a Filtri> Regola colore> Tonalità / saturazione, quindi ruota la saturazione fino in fondo.
Ancora una volta, manterremo le nostre cartelle organizzate.
Questo è veramente di base. Assicurati di aggiungere il nome del sito e il copyright. Inoltre, posiziona link testuali che ripetono la navigazione del sito principale. Se ci sono dei collegamenti supplementari importanti, allora potresti volerli inserire anche qui. Allineare il copyright al bordo sinistro e i collegamenti al lato destro come mostrato di seguito.
Nel tutorial Creazione di un sito Web Wireframe in Illustrator Discuto dell'aggiunta di callout a un wireframe e questo è un modo utile per aggiungere note a un wireframe. Un altro modo utile è mettere le note in linea. Questo è abbastanza semplice ed è utile per comunicare funzionalità, funzionalità o problemi con i client.
Mi piace posizionare le note in blu, in modo che le note rimangano sulla parte superiore del wireframe e il blu abbia una sensazione di cianografia. Il wireframe finale è sotto ed è possibile visualizzare la versione wireframe a grandezza naturale qui.
Separare tutto ciò che non si desidera rasterizzare quando si utilizza Photoshop. Ad esempio, se si desidera mantenere la commestibilità del testo, è necessario assicurarsi che il testo non sia raggruppato in nulla. Va bene però posizionare le cose nelle cartelle. Questa è una delle peculiarità dell'esportazione da Fireworks a Photoshop.
Potresti anche decidere se vale la pena portare il testo da Fireworks a Photoshop (puoi scegliere di eliminarlo e quindi di ricrearlo in Photoshop). Ho avuto l'esperienza che le caselle di testo sono finite strane, che vedrete nel prossimo tutorial che prende questo wireframe e crea un disegno di un sito Web di Photoshop a colori. In questo caso, terremo il testo in posizione.
Vai su File> Salva con nome e fai clic su Opzioni. L'impostazione predefinita è Mantieni la modifica su Aspetto. Vai avanti e lascia questo al valore predefinito, quindi fai clic su Salva. Il mantenimento dell'edibilità posizionerà le forme come livelli di forma in Photoshop, anziché rasterizzarle, che in questo caso è preferibile.
Fireworks è ottimo per wireframing e siti di prototipazione. Anche in un design a una pagina noterai quanto velocemente potrai elaborare varie opzioni di layout e costruire rapidamente la struttura del tuo design. Una volta che inizi a lavorare con questo programma per progetti più grandi, scoprirai anche una vasta gamma di strumenti. Nel prossimo tutorial di questa serie, utilizzeremo questa applicazione per iPhone wireframe e completeremo il design in Photoshop.
Ci sono un bel po 'di funzionalità aggiuntive in Fireworks, che non sono state trattate in questo tutorial, ma ti aiuterebbero nel tuo prossimo progetto. Di seguito sono riportati alcuni tutorial utili sull'utilizzo di Fireworks per Wireframing. Inoltre, se incontri tutoriali o risorse pertinenti, assicurati di collegarli ai commenti per condividerli con la community.
Iscriviti al feed RSS di Vectortuts + per rimanere aggiornato con le ultime esercitazioni e articoli vettoriali.
Accentsconagua