Prototipazione per il Web con Framer
Framer è uno strumento davvero potente che può prototipare qualsiasi cosa tu possa pensare, ma se dai un'occhiata a Framer's Gallery noterai subito qualcosa:
Di questi 54 esempi, 48 sono app, 4 per Apple Watch, 1 per iPad e 1 per Apple TV. Framer è pensato anche per la progettazione web / desktop "tradizionale"?
Assolutamente.
In IBM Design la maggior parte dei miei progetti sono realizzati per applicazioni Web desktop aziendali. La maggior parte dei designer con cui lavoro Schizzo (incluso me stesso). Questi file di schizzo vengono quindi prototipati utilizzando uno strumento simile InVision o ricreato e prototipato nel codice. Come sviluppatore front-end di un team di progettazione, ho una posizione unica in cui progetto e prototipo di codice.
Dopo aver appreso le basi di Framer, ho deciso di aggiungerlo al mio flusso di lavoro ed è stato davvero migliorato il mio processo di progettazione. La singola parte più potente è la possibilità di importare un file di schizzo statico in Framer e trasformarlo in un prototipo interattivo realistico in un tempo relativamente breve.
Con questo, non devo spendere tempo prezioso all'inizio del processo che ricrea i disegni nel codice. Posso ottenere idee di fronte a stakeholder e utenti molto più velocemente. Posso salvare la codifica per dopo quando il progetto è più solido.
Dopo aver usato Framer per alcuni mesi ecco alcune cose che ho imparato:
Pianifica e applica i tuoi prototipi
Prima di iniziare un progetto, decido alcune cose:
Cosa sto cercando di realizzare?
Se il prototipo è per il test degli utenti o un'idea concettualizzata, qual è la quantità minima di lavoro necessaria per far passare la mia idea o per ottenere informazioni dai test? Non sono solo pigro;), questo aiuta a decidere le interazioni, le animazioni e gli schermi necessari che sono necessari.
Più tempo dedichi al tuo progetto più ti affezioni. Più è attaccato, meno è probabile che tu faccia le modifiche necessarie.
Usiamo il prototipo sopra come esempio.
Stavo lavorando a un nuovo progetto e volevo esplorare che aspetto avrebbe un layout basato su carte con animazioni "mescolate" tra gli stati. Ho abbozzato l'idea di base che volevo creare e l'ho usata come punto di partenza.
Se tu guarda al prototipo finito, solo la prima carta è selezionabile in ogni passaggio. Non c'è modo di tornare indietro, nessun stato di passaggio del mouse, il contenuto nell'ultima schermata non è completo e non è quasi perfetto come pixel. Nessuno di questi era necessario per far passare la mia idea, quindi non ho trascorso del tempo a includerli. Framer può fare praticamente qualsiasi cosa, ma questo non significa che dovresti provare a fare tutto nel tuo prototipo.
Crea flussi UI usando il fantastico modulo ViewController di Andreas
Puoi usare il ViewController Il plug-in di Sketch per creare flussi di interfaccia utente direttamente in Sketch. Trasforma rapidamente i tuoi progetti in prototipi cliccabili senza dover scrivere codice.
Questo è ottimo per presentare il tuo lavoro alle parti interessate ed è davvero molto semplice da fare. Invece di camminare attraverso un file di Sketch con una dozzina di tavole da disegno o un file .pdf, puoi presentare un prototipo interattivo o condividere l'URL del tuo progetto Framer ospitato.
A seconda di ciò che sto cercando di realizzare, potrei finire per scrivere del codice per cose come effetti al passaggio del mouse, animazioni e input di testo per aggiungere un tocco di realismo e interattività. Di nuovo, come designer, decidi cosa è necessario per far passare la tua idea e attuare in modo appropriato.
Check-out Andreas'Crea flussi dell'interfaccia utente utilizzando l'articolo di Sketch and Framer per saperne di più sul plugin.
Microinteractions
Penso che ci siano alcune ragioni per cui la prototipazione mobile è molto popolare con Framer, una delle quali è che le microinterazioni sembrano molto più comuni sui dispositivi mobili. Ma non deve essere così! Penso che i designer per il web possano essere più bravi a fare in modo che il nostro lavoro abbia più movimento e Framer è davvero bravo in questo.
Questo è solo un semplice esempio di una rapida interazione che ho fatto usando un file di Sketch che un designer del mio team aveva già realizzato. Esplorare interazioni come questa richiede una questione di minuti.
Certo, ma perché non solo codice?
Come sviluppatore front-end, molti dei miei progetti finiranno con un prototipo codificato. Quindi utilizzo questo prototipo come base per scrivere il codice di front-end nel prodotto, lavorando lungo la side engineering. Quindi, perché non solo codice dall'inizio?
Come ho detto prima, velocità. Riesco a concretizzare rapidamente idee che io o altri designer abbiamo già fatto importandole da Sketch in Framer. È ottimo per la parte iniziale del processo di progettazione in cui esplori idee e implementa rapidamente i feedback. Posso muovermi abbastanza velocemente nel codice, ma Framer lo porta al livello successivo.
Un'altra ragione è la libertà. Il semplice fatto che tutto il mio codice scritto in Framer verrà buttato via è in realtà un po 'grandioso. Mi permette di provare cose che altrimenti non avrei e di essere un po 'più libero con il mio codice. Posso passare 15 minuti ad esplorare un'idea e poi a buttarla via senza alcun rimorso.
Alcuni consigli e trucchi
Tu (o il designer con cui stai lavorando) probabilmente dovrai configurare i file di Sketch in un modo leggermente diverso.
- Raggruppa i tuoi strati. I livelli che non fanno parte di un gruppo vengono ignorati
- Evita di usare spazi nei nomi dei tuoi gruppi
- I livelli nascosti in Sketch vengono comunque importati, ma la loro visibilità sarà impostata su false.
- Crea nomi semplici e unici per le tue tavole da disegno
- Un segno meno (-) alla fine della tua tavola da disegno lo escluderà dall'importazione in Framer
Appiattisci tutti i livelli in Sketch che rimarranno statici. Ciò migliorerà il tempo di caricamento del tuo progetto, che è particolarmente grande quando si crea un prototipo più pesante. Puoi farlo aggiungendo un asterisco (*) alla fine del livello in Sketch.
Vale la pena dedicare un po 'di tempo con i progettisti del tuo team per illustrare come configurare i file di schizzo per adattarli al meglio al flusso di lavoro e cosa è meglio per il team.
Quando importi un file di Sketch in Framer, vedrai qualcosa di simile a questo:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Sostituisci lo schizzo con $, e ora puoi usare $ per fare riferimento ai tuoi livelli di Sketch, salvando te stesso dalla scrittura dello schizzo parola centinaia di volte:
$ = Framer.Importer.load("imported/design@1x")Usa lo snippet 'Cursore normale' per un normale puntatore del mouse:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Importa i miei disegni su @ 2x e li ridimensiono, quindi sono più nitidi. Si noti che questo non sembra andare d'accordo con il modulo ViewController menzionato sopra.
Framer.Device.contentScale = .5Sketch e Framer utilizzano diverse tavole / dispositivi di disegno predefiniti per il Web. Sketch utilizza 1440 × 1024 mentre Framer utilizza 1440 × 900. Opto per 1440 × 900. Non pensare di essere limitato a 900 pixel per altezza, puoi facilmente creare pagine scorrevoli in Framer.
[- Questo articolo era originariamente pubblicato su Media , ripubblicato con il permesso dell'autore -]