Vytvořit Mockups zařízení v prohlížeči s DeviceMock

Můžete najít tuny volných zařízení mockups online, od PSD do Skica soubory. Ale co kdybyste mohl rychle stavět makety zařízení za chodu ve vašem prohlížeči?

No, díky lidem v rm-labo, můžete! Jejich bezplatný plugin jQuery, DeviceMock.js, vám umožní zabalit vektorové zařízení kolem libovolného prvku stránky, pomocí jednoduchého JavaScriptu a SVG.

Jak přesně to funguje?

Nejdřív potřebujete kopii jQuery a verze pluginu DeviceMock z GitHubu. To se dodává se souborem JS, souborem CSS a některými soubory SVG pro vytvoření skutečných zařízení.

Můžeš cílový libovolný typ prvku na stránce, od jednoduchého obrazu k celému div, nebo dokonce vložený element takový jako iframe. To znamená, že můžete vybudovat chladný mini-prohlížeč přímo na vašem webu s iframe na jinou stránku.

Tento plugin podporuje pět různých typů zařízení:

1. webový prohlížeč
2. Chytrý telefon
3. Tableta
4. plocha počítače
5. Laptop

Všechny tyto modely používají plochý design stylu protože jsou postaveny s SVG. A všichni vypadají podobně jako zařízení Apple, například smartphone je klon iPhone a stolní monitor vypadá nápadně jako iMac.

Všechny tyto vektory se snadno přidávají a fungují každý prohlížeč s podporou SVG.

Můžete dokonce změnit vlastnosti například velikost makety, motiv (bílá / černá) a orientace (na výšku).

Pokud používáte prohlížeč mockup můžete dokonce určete fiktivní adresu URL v adresním řádku. To je zábavný způsob, jak přidat ještě více přizpůsobení.

Je pravda, že tato knihovna nebude užitečná pro všechny, ale pro to řeší problém výklenku , že mnoho vývojářů UI / UX čelí při prototypování.

Chcete-li se dozvědět více, navštivte stránku Stránka GitHub nebo se podívejte na živé stránky pro aktivní demo.