Tutorial di schizzo

"Blockframing" e 31 layout pronti per lo schizzo gratuiti con Auto Layout di Anima App

Sì, puoi scaricarli. Sì, gratuitamente.

Nota di Jon: c'è un file gratuito che puoi scaricare nella parte inferiore di questo post, ma se puoi risparmiare 7 minuti (secondo Media), penso che imparerai qualcosa o due! Godere!

Vero discorso

L'unica volta in cui creo wireframe "reali" è quando sto cercando di mostrare un fantastico processo girato su Dribbble ...

... e non mostro mai scatti di processo interessanti su Dribbble.

Ragazzi, non sono bravo con i wireframe!

Mi emoziono sempre e finisco per aggiungere troppi dettagli, e quello che doveva essere un wireframe veloce finisce per essere sei ore di nitpixeling ™ per un'imbottitura perfetta, margini magnifici e tipografia da manuale.

Quindi no ... Non sono molto bravo con i wireframe.

Ma quello in cui sono bravo è il blockframing.

Onestamente, questo migliora ogni ciclo.

Block ... inquadratura?

Il mio mentore di design mi ha raccontato la storia di un professore che aveva a scuola che si toglieva gli occhiali quando ne valutava i disegni. Ha detto che lo ha aiutato a capire meglio il layout e l'armonia visiva dei loro progetti.

Indovina quell'app!

La verità è che puoi raccontare una storia piuttosto avvincente con questo modello sfocato. È un modo rapido per controllare un progetto senza doverlo progettare tanto.

Identificando le più grandi regioni di colore sopra, ecco Facebook rappresentato come un frame frame:

Garantisco che il 99% di voi avrebbe potuto dirmi quale app era senza alcun suggerimento. L'altro 1% di voi ha 87 anni.

Con l'incredibile plug-in Auto Layout di Anima App, posso persino mostrarti come dovrebbero comportarsi i contenuti della pagina quando il browser viene ridimensionato ... cosa è stato risolto ... cosa è fluido ... e cosa è mobile:

Il contenitore centrale di Facebook mantiene una larghezza fissa e galleggia al centro, mentre il flusso della chat si attacca a destra.

Quando utilizzare Blockframing

Il vantaggio del blockframing è che puoi farlo in ogni fase del processo di progettazione del prodotto:

  1. Prima (progettazione iniziale)
  2. Durante (nuove funzionalità)
  3. After (Concept Reveal)

Prima della progettazione (progettazione iniziale)

Blockframing non sostituisce il wireframing convenzionale. Il wireframing non si adatta al mio flusso di lavoro. Il mio team di progettazione collabora così tanto con la lavagna con il cliente che qualcosa di più di questo è, per me, una perdita di tempo.

Blockframing non sostituisce il wireframing convenzionale.

Personalmente trovo che i wireframe dettagliati con testo fittizio, bordi a un pixel e immagini segnaposto "X" siano fonte di distrazione. E se li trovo che distraggono (come qualcuno che sa come leggerli), anche il cliente potrebbe farlo.

Usando un blockframe, descrivo intere aree di contenuto invece di essere coinvolto nei dettagli. Questo mi fornisce informazioni più che sufficienti per trasmettere un'idea o iniziare a raccontare una storia.

Di solito invierò qualcosa del genere al client tramite Slack o e-mail per esaminare rapidamente un'idea per una nuova schermata. Parliamo delle diverse aree, spostiamo le cose e iniziamo a giocare con il colore e il contrasto. È un ottimo modo per essere agili e flessibili con il design prima di immergersi in alta fedeltà e i clienti sono sempre entusiasti di far parte del processo.

Ciò consente anche di risparmiare tempo perché il cliente non si dividerà i capelli su ogni piccolo dettaglio della pagina. Nella mia esperienza, il blocco dei frame con il cliente o gli stakeholder aumenta notevolmente il tuo tasso di successo quando mostra i progetti finali perché il cliente sa già cosa sta arrivando.

Durante la progettazione (nuove funzionalità)

Diciamo che hai già spedito il prodotto e stai progettando nuove funzionalità. A questo punto, ci sono dozzine di modelli ben consolidati e lo stile visivo è molto ben definito. Potresti anche avere un quadro di progettazione completo come UX Power Tools in atto!

Trovo il frameframe particolarmente utile durante questa fase perché posso creare qualcosa che sembrerà molto più vicino al design reale. I colori che uso finiscono per essere piuttosto vicini (se non identici) a quelli del progetto finale.

Ecco un paio di app familiari che hanno impiegato solo pochi minuti per bloccare il frame:

Questo potrebbe aver richiesto solo 10 minuti, ma probabilmente potrei ancora trovare un modo per perdere 7 ore a guardare video di gatti.Non correlato: penso sempre a Cinnabon ™ quando sento la parola kanban. Uh, così delizioso.Chi è giù per 19 episodi consecutivi di Parks & Recreation ???

Potrei fare un po 'di wireframing leggero oltre ai blockframe mostrati sopra, ma per il resto sono pronto per iniziare a progettare in alta fedeltà.

Ancora una volta, a questo punto del processo (mid-design), ho già progettato un sacco di schermi e ho un sacco di modelli di progettazione in atto, quindi questo è un sacco di preparazione per iniziare. E è probabile che finirò per usare questi contenitori nel vero design invece di buttare via le cose come faccio [spesso] quando faccio wireframe.

After the Design (Concept Reveal)

Nella mia agenzia, abbiamo sempre adattato le nostre tecniche di presentazione dei clienti in modo da mostrare il nostro lavoro nel miglior modo possibile. Dopo migliaia di presentazioni, recensioni di progetti e rivelazioni di concetti con amministratori delegati, investitori e responsabili di prodotto, siamo diventati abbastanza bravi a raccontare la storia giusta nel modo giusto, al momento giusto.

Una volta terminato un disegno, creiamo un frame-frame direttamente sopra di esso in modo da poter rivelare lentamente diverse sezioni del disegno. Nella nostra esperienza, mostrare tutto il design in una sola volta è SUPER SOVRAPPOSTO per il cliente e inizieranno a porre tutti i tipi di domande per le quali non sei pronto.

Bloccando l'interfaccia utente, stiamo essenzialmente scoprendo un piatto alla volta, come se organizzassimo una cena di epoca vittoriana per i nostri amici borghesi:

A casa mia ci sarebbero Twinkies e Hot Dog sotto quelle cupole d'argento. Di classe, vero?

Ecco come presenteremo YouTube:

Full frame! Non stiamo ancora dimostrando alta fedeltà. Stiamo appena iniziando la nostra storia.

Dopo aver fatto un breve riepilogo delle aree della pagina, inizieremo a rivelare l'interfaccia utente, sezione per sezione:

Lentamente, iniziamo a rivelare sezioni. Qui metteremmo in pausa e spiegheremo la navigazione globale.

Mostriamo solo una sezione alla volta. Questo ci aiuta a indirizzare l'attenzione del cliente sull'unico posto in cui vogliamo che si concentri:

Qui facciamo una pausa per affrontare l'area video e i controlli di riproduzione. Potremmo rimanere qui per 15 minuti solo parlando di come funziona tutto ... e va bene così! Shoutout a Pablo Stanley e alla sua fantastica serie

Continuiamo a muoverci. Ora passiamo ai dettagli del video. In questo esempio particolare, la pagina è piuttosto breve. In uno scenario reale, probabilmente avremmo una pagina più lunga per mostrare la sezione dei commenti.

I tuoi video stanno andando davvero bene, Pablo! Congratulazioni! Guarda tutti quegli abbonati

Infine, raggiungiamo i "Video correlati" e la sezione. In una conversazione con un cliente, probabilmente parleremo di come viene popolato questo elenco e di come video suggeriti come questi aiuteranno a condurre gli utenti in un BLACKHOLE DI VIDEO YOUTUBE PER LE PROSSIME CINQUE ORE.

Non che mi sia mai successo ...

Guardo molti video di cibo di BuzzFeed, e quel ragazzo Tiny Tim Bradbury fa dei video esilaranti.

Solo dopo che avremo finito di rivelare ogni sezione mostreremo l'intera interfaccia:

Tada! Propone al team di progettazione su YouTube. Stai bene!

Il cliente è stato innescato e i suoi occhi istintivamente compartimenteranno ogni regione della pagina. Ora hanno una perfetta comprensione di ciò a cui ciascuna area della pagina è destinata e le conversazioni da qui in avanti saranno molto più produttive. I clienti porranno domande migliori, forniranno un feedback migliore e presenteranno il design (da soli) agli stakeholder esterni in modo molto più intelligente di prima.

Uff, allora dov'è la roba gratis?

Va bene, va bene.

Il layout automatico è uno strumento fantastico e la loro nuova funzione di "stack" emula i comportamenti del flexbox CSS all'interno di Sketch.

È una droga. *

* Per i non americani, "droga" significa davvero bello.
Dope significa anche eroina ... ma non in questo caso. Il layout automatico non è eroina.

Ho creato una serie di layout di app standard per Web e dispositivi mobili e ho anche bloccato una serie di app popolari in modo da poter vedere come ricreare il loro comportamento dei contenuti.

Puoi ottenere tutti i 30+ layout FUH FREE proprio laggiù. Ti costerà zero dollari a meno che tu non voglia finanziare un burrito di Chipotle ¯ \ _ (ツ) _ / ¯

(Correlato: sapevi che c'era un emoji burrito? È incredibilmente dettagliato.)

Va bene, ma per davvero questa volta, ecco il file:

Sbirciata!

Un'ultima cosa…

Infine, ho recentemente aggiornato UX Power Tools per funzionare con Auto Layout, quindi ora è ancora più veloce da usare! Penso che lo scaverai. Se sei interessato, puoi leggere di più qui.

Quando non scrivo, sto lavorando su strumenti di progettazione di Sketch come UX Power Tools per renderti un designer migliore, più efficiente. Tutti i migliori designer e team di Sketch lo stanno usando e penso che potrebbe piacerti anche a te. Dai un'occhiata su Marvel!

Segui UX Power Tools su Twitter
Seguimi su Twitter