Crie modelos de dispositivos no navegador com o DeviceMock
Você pode encontrar milhares de modelos de dispositivos gratuitos on-line, variando de PSDs a arquivos de esboço. Mas, e se você pudesse rapidamente criar modelos de dispositivo on-the-fly no seu navegador?
Bem, graças ao pessoal da rm-labo, você pode! Seu plugin jQuery livre, DeviceMock.js, permite que você Enrole um dispositivo de vetor em torno de qualquer elemento de página, usando JavaScript e SVGs simples.
Então, exatamente como isso funciona?
Bem, primeiro você precisa uma cópia do jQuery e uma versão do plugin DeviceMock do GitHub. Isso vem com um arquivo JS, um arquivo CSS e alguns arquivos SVG para criar os dispositivos reais.
Você pode segmentar qualquer tipo de elemento na página, de uma imagem simples a um div inteiro ou até mesmo um elemento incorporado, como um iframe. Isso significa que você pode até construir um mini-navegador legal bem no seu site com um iframe para outra página.
Este plugin suporta cinco tipos de dispositivos diferentes:
- Navegador da web
- Smartphone
- Comprimido
- Área de Trabalho
- Computador portátil
Todos esses modelos usam estilos de design plano desde que eles são construídos com SVGs. E, todos eles parecem bastante semelhantes aos dispositivos da Apple, por exemplo, o smartphone é um clone do iPhone e o monitor de desktop parece visivelmente um iMac..
Todos esses vetores são fáceis de adicionar e funcionam em cada navegador com suporte a SVG.
Você também pode alterar propriedades como o tamanho da maquete, tema (branco / preto) e orientação (paisagem de retrato).
Se você usar o maquete do navegador, você pode até especifique um URL fictício na barra de endereço. Esta é uma maneira divertida de adicionar ainda mais personalização.
Concedido esta biblioteca não será útil para todos, mas resolve um problema de nicho que muitos desenvolvedores de UI / UX enfrentam quando criam protótipos.
Para saber mais, visite o site Página do GitHub ou confira o site ao vivo para uma demonstração ativa.
