Crea prototipi di dispositivi nel browser con DeviceMock
Puoi trovare tantissimi prototipi di dispositivi gratuiti online, dai file PSD ai file di Sketch. Ma, se potessi velocemente crea prototipi di dispositivi al volo nel tuo browser?
Bene, grazie alla gente di rm-labo, puoi! Il loro plug-in gratuito jQuery, DeviceMock.js, ti consente avvolgere un dispositivo vettoriale attorno a qualsiasi elemento della pagina, utilizzando semplici JavaScript e SVG.
Quindi, esattamente come funziona?
Bene, prima di tutto una copia di jQuery e una versione del plugin DeviceMock di GitHub. Questo viene fornito con un file JS, un file CSS e alcuni file SVG per creare i dispositivi reali.
Puoi scegli come bersaglio qualsiasi tipo di elemento sulla pagina, da un'immagine semplice a un intero div, o persino un elemento incorporato come un iframe. Questo significa che potresti persino crea un fantastico mini-browser direttamente nel tuo sito con un iframe in un'altra pagina.
Questo plugin supporta cinque diversi tipi di dispositivi:
- programma di navigazione in rete
- smartphone
- Tavoletta
- Desktop
- Il computer portatile
Tutti questi modelli utilizzano stili di design piatto dal momento che sono costruiti con SVG. Inoltre, sembrano tutti molto simili ai dispositivi Apple, ad esempio lo smartphone è un clone dell'iPhone e il monitor del desktop sembra in modo evidente come un iMac.
Tutti questi vettori sono facili da aggiungere e funzionano ogni browser con supporto SVG.
Puoi persino cambiare proprietà come la dimensione del mockup, il tema (bianco / nero) e l'orientamento (verticale verticale).
Se usi il mockup del browser puoi persino specificare un URL fittizio nella barra degli indirizzi. Questo è un modo divertente per aggiungere ancora più personalizzazioni.
Concesso questa libreria non sarà utile per tutti tranne che risolve un problema di nicchia che molti sviluppatori UI / UX affrontano durante la prototipazione.
Per saperne di più, visita il Pagina GitHub o controllare il sito dal vivo per una demo attiva.
