Wireframe Toolkit per Keynote consente a chiunque abbia una conoscenza di base su come utilizzare il software di presentazione per creare rapidamente prototipi di interfacce utente per iOS e il Web. Se non hai Keynote, non preoccuparti, c'è anche una versione di Powerpoint!
Oggi vi forniremo una guida super veloce su come utilizzare Wireframe Toolkit per Keynote per creare un layout di base per le app Web. Se riesci a copiare e incollare, puoi farlo!
Cosa ottieni
Il download di Wireframe Toolkit ti offre una lista considerevole di template Keynote e Powerpoint. Come puoi vedere nello screenshot qui sotto, ti vengono date quattro diverse versioni dei modelli: Keynote '08, Keynote '09, Keynote per iPad e Powerpoint.
Ciascuna cartella contiene diversi toolkit che forniscono gli elementi dell'interfaccia necessari per la progettazione per iPhone, iPad e, naturalmente, il semplice vecchio web. Ci sono anche alcuni esempi finiti che puoi aprire per capire come funziona.
Diapositive e diapositive master
Per iniziare, trova il toolkit con cui vuoi lavorare e duplicalo nel Finder. Lavorare con un duplicato consente di rovinare tutto senza compromettere l'originale.
Aprirò il? Web? modello per il nostro progetto. Se non hai familiarità con il funzionamento di Keynote, è molto simile a Powerpoint, solo che in genere è ancora più intuitivo. Subito dovresti notare una striscia di diapositive sul lato sinistro dello schermo. Questa striscia è divisa in due aree: diapositive (in basso) e diapositive master (in alto).
I Master Slides nel toolkit contengono tutti gli elementi pre-costruiti, il che significa che sono essenzialmente ciò che stai pagando. Ciascuna delle Presentazioni master incluse ha una categoria specifica che descrive gli elementi dell'interfaccia utente all'interno di: moduli, navigazione, dati, stili di testo, ecc.
Per la maggior parte, lascerai da solo le diapositive master e non le cambierai direttamente. Invece, copierai e incollerai elementi dalle diapositive master nelle normali diapositive. Ciò lascia invariati gli elementi del modello originale, quindi puoi riutilizzarli ancora e ancora.
Naturalmente, se si desidera apportare una modifica globale che influisce su tutto, si modificherà una diapositiva master esistente o ne verrà creata una nuova. Ad esempio, se si desidera una versione blu di un pulsante riutilizzabile, è possibile duplicare il pulsante esistente nella diapositiva master e cambiarne il colore in blu.
Creare una nuova diapositiva
Per iniziare, fai clic sul sussidio didattico corrente sotto "Diapositive"? quindi premi Comando + Maiusc + N per creare una nuova diapositiva. Successivamente, utilizzeremo uno degli stili di guida 960.gs in dotazione per ottenere una larghezza generale per i nostri contenuti. Per fare ciò, trascina una diapositiva master 960 sulla diapositiva normale, che applicherà la diapositiva master come sfondo.
Aggiungi un po 'di navigazione
Iniziamo con qualcosa di cui ogni pagina web ha bisogno: la navigazione. Se controlli la diapositiva master di navigazione, troverai un bel po 'di opzioni. Trova quello che ti piace e semplicemente copia / incolla nella tua diapositiva. Bam, ora abbiamo la navigazione! Vedi com'è stato facile?
Come puoi vedere, la larghezza di navigazione è già impostata per corrispondere a quella delle guide che abbiamo scelto. Ora che hai l'elemento nella tua diapositiva, puoi personalizzarlo come preferisci usando il ricco set di strumenti di Keynote. Scambia i colori, cambia il testo, tutto dipende da te!
Usa gli strumenti di Keynote per aggiungere un contenitore
Ora, ricorda che non sei limitato agli elementi trovati nel toolkit. Keynote e Powerpoint hanno entrambi strumenti di disegno di base che possono aiutare un sacco con la tua struttura generale. Ad esempio, ho arricchito la mia pagina un po 'aggiungendo un riempimento di sfondo e disegnando una semplice scatola sotto la navigazione come contenitore per il resto del contenuto.
Ridimensionamento di oggetti
Una delle cose che apprezzo molto di questo toolkit è il modo in cui gli oggetti sono costruiti per la personalizzazione. Ad esempio, supponiamo di voler aggiungere alcuni widget al mio mockup, quindi aggiungo un calendario e un menu di fisarmonica. Il problema è che non hanno la stessa larghezza e, per coerenza visiva, vorrei che lo fossero.
Guardando il menu della fisarmonica, puoi vedere che si tratta di un oggetto complesso e istintivamente pensare che lo stretching orizzontalmente sarà un dolore. Sicuramente rovinerà tutti quegli elementi annidati giusto? Sbagliato! Tutto quello che devi fare è allungarlo come vuoi e tutto rimane proporzionato e bello.
Finire il Mockup
A questo punto dovresti abbassare il processo di base. Da qui tutto ciò che devi fare è copiare e incollare gli elementi dal toolkit secondo necessità. In pochissimo tempo, abbiamo un mockup di grande impatto che potrebbe essere facilmente utilizzato per lo sviluppo di un CMS o di una piattaforma di blogging.
In tutta onestà, la prima volta che ho aperto il toolkit, sono stato in grado di capire il processo e creare il layout sopra in circa dieci minuti! Ora che so cosa sto facendo, potrei fare qualcosa di simile in circa tre minuti. E io non sono molto un utente Keynote.
Questo è davvero uno strumento fantastico per creare wireframes e mockup veloci. Potrei sicuramente fare l'immagine sopra in Photoshop, ma mi avrebbe sicuramente richiesto molto più tempo per costruire quegli elementi da zero!
Altri esempi
La demo qui sopra raschia appena la superficie non solo di ciò che puoi fare con questo toolkit, ma anche di ciò che è incluso. Dai uno sguardo a questi prototipi di app per iPad e iPhone, interamente realizzati con Wireframe Toolkit per Keynote.
Una cosa da notare è che i pulsanti di queste versioni sono stati trasformati in collegamenti ad altre diapositive. Ciò significa che puoi effettivamente passare attraverso un prototipo di funzionamento approssimativo della navigazione visualizzando la presentazione e facendo clic sui pulsanti! Quant'è fico?
Per chi è questo?
Wireframe Toolkit per Keynote è utile a chiunque sia coinvolto nello sviluppo di applicazioni web o di qualsiasi livello. Se non sei un designer, è un ottimo modo per mostrare al tuo designer un'idea generale di ciò che stai cercando senza dover ricorrere alle tue abilità di MS Paint.
Se sei un designer, è un modo fantastico e incredibilmente veloce per pensare ai meccanismi di un layout. Potresti pensare che il toolkit ti limiti, ma in realtà è piuttosto liberatorio riuscire a sbaragliare un wireframe così velocemente prima di entrare in Photoshop o CSS e costruire gli elementi con lo stile specifico che stai cercando. Infatti, se non ti piace lo stile di uno qualsiasi degli elementi, come abbiamo detto sopra, sono facili da cambiare!
Ottimo, dove posso trovarlo?
Il Toolkit Wireframe per Keynote è disponibile in qualsiasi momento su Keynotekungfu.com per $ 12. Fidati di me, è davvero economico per la quantità di valore che otterrai.
Il sito ha anche un sacco di informazioni su cosa è incluso e come usarlo. Ci sono anche un paio di video didattici davvero fantastici contenenti consigli utili su come ottenere il massimo da Keynote per wireframing.