Crea maquetas de dispositivos en el navegador con DeviceMock
Puede encontrar toneladas de maquetas gratuitas de dispositivos en línea, desde PSD hasta archivos Sketch. Pero, ¿y si pudieras rápidamente construir maquetas de dispositivos sobre la marcha en tu navegador?
Bueno, gracias a la gente de rm-labo, puedes! Su complemento gratuito de jQuery, DeviceMock.js, te permite envolver un dispositivo vectorial alrededor de cualquier elemento de la página, usando JavaScript simple y SVGs.
Entonces, ¿cómo funciona exactamente esto?
Bueno, primero necesitas una copia de jQuery y una versión del complemento DeviceMock de GitHub. Esto viene con un archivo JS, un archivo CSS y algunos archivos SVG para crear los dispositivos reales.
Usted puede apuntar a cualquier tipo de elemento en la página, desde una imagen simple a un div completo, o incluso un elemento incrustado como un iframe. Esto significa que incluso podrías construir un mini-navegador genial justo en su sitio con un iframe a otra página.
Este plugin soporta cinco tipos diferentes de dispositivos:
- navegador web
- Smartphone
- Tableta
- Escritorio
- Ordenador portátil
Todas estas maquetas usan estilos de diseño plano ya que están construidos con SVGs. Y, todos se parecen bastante a los dispositivos de Apple, por ejemplo, el teléfono inteligente es un clon del iPhone y el monitor de escritorio que se ve claramente como un iMac.
Todos estos vectores son fáciles de agregar y funcionan en todos los navegadores con soporte SVG.
Usted puede incluso cambiar propiedades como el tamaño de la maqueta, el tema (blanco / negro) y la orientación (paisaje vertical).
Si utilizas la maqueta del navegador puedes incluso especifique una URL ficticia en la barra de direcciones Esta es una forma divertida de agregar aún más personalización..
Por supuesto, esta biblioteca no será útil para todos, pero sí resuelve un problema de nicho que muchos desarrolladores de UI / UX se enfrentan cuando hacen prototipos.
Para obtener más información, visite el Página de GitHub o echa un vistazo a la sitio en vivo para una demostración activa.
