Créer des maquettes de périphériques dans le navigateur avec DeviceMock
Vous pouvez trouver des tonnes de maquettes de périphériques gratuites en ligne, allant des fichiers PSD aux fichiers Sketch. Mais si vous pouviez rapidement construire des maquettes de périphériques à la volée dans votre navigateur?
Eh bien, merci aux gens de rm-labo, vous le pouvez! Leur plugin gratuit jQuery, DeviceMock.js, vous permet de envelopper un périphérique vectoriel autour d'un élément de page, Utilisation de JavaScript et de SVG simples.
Alors, comment ça marche exactement?
Eh bien, d'abord vous avez besoin une copie de jQuery et une version du plugin DeviceMock de GitHub. Cela vient avec un fichier JS, un fichier CSS et des fichiers SVG pour créer les périphériques.
Vous pouvez cibler tout type d'élément sur la page, d'une image simple à une div entière, voire à un élément incorporé tel qu'un iframe. Cela signifie que vous pourriez même construire un mini-navigateur cool directement sur votre site avec un iframe sur une autre page.
Ce plugin supporte cinq types d'appareils différents:
- Navigateur web
- Téléphone intelligent
- Tablette
- Bureau
- Portable
Toutes ces maquettes utilisent styles de design plat car ils sont construits avec SVG. Et, ils ressemblent tous beaucoup aux appareils Apple, par exemple, le smartphone est un clone de l'iPhone et le moniteur de bureau ressemble beaucoup à un iMac..
Tous ces vecteurs sont faciles à ajouter et fonctionnent dans tous les navigateurs avec support SVG.
Vous pouvez même changer les propriétés comme la taille de la maquette, le thème (blanc / noir) et l'orientation (paysage portrait).
Si vous utilisez la maquette du navigateur, vous pouvez même spécifier une URL factice dans la barre d'adresse. C'est une façon amusante d'ajouter encore plus de personnalisation.
Accordé cette bibliothèque ne sera pas utile pour tout le monde mais ce ne résout un problème de niche que de nombreux développeurs UI / UX rencontrent lors du prototypage.
Pour en savoir plus, visitez le Page GitHub ou consultez le site live pour une démo active.
