Izradite Mockups uređaja u pregledniku pomoću DeviceMock

Možete pronaći tone besplatnih maketa uređaja na mreži, od PSD-ova do Sketch datoteka. Ali, što ako možete brzo izrađivati ​​makete uređaja u pokretu u pregledniku?

Pa, zahvaljujući ljudima u rm-labo-u, možete! Njihov besplatni jQuery plugin, DeviceMock.js, omogućuje vam omotajte vektorski uređaj oko bilo kojeg elementa stranice, koristeći jednostavne JavaScript i SVG-ove.

Dakle, kako točno to funkcionira?

Pa, prvo trebaš kopiju jQuery i verzija dodatka DeviceMock tvrtke GitHub. To dolazi s JS datotekom, CSS datotekom i nekim SVG datotekama za stvaranje stvarnih uređaja.

Možeš ciljajte bilo koju vrstu elementa na stranici, od jednostavne slike do cijele podjele ili čak ugrađenog elementa kao što je iframe. To znači da bi i ti mogao napravite kul mini preglednik pravo na vašoj web-lokaciji s iframeom na drugu stranicu.

Ovaj dodatak podržava pet različitih vrsta uređaja:

1. web-preglednik
2. Smartphone
3. Tableta
4. Desktop
5. Laptop

Sve te makete koriste stilovi ravnog dizajna budući da su izgrađeni s SVG-ovima. Svi oni izgledaju vrlo slično uređajima tvrtke Apple, primjerice, pametni telefon je klon iPhonea i desktop monitor koji očito izgleda kao iMac.

Sve te vektore je lako dodati i oni rade svaki preglednik s podrškom za SVG.

Možete čak i promijeniti svojstva kao što su veličina modela, tema (bijela / crna) i orijentacija (uspravni pejzaž).

Ako koristite maketu preglednika možete čak i odredite lažan URL u adresnoj traci. Ovo je zabavan način za dodavanje još više prilagodbi.

Ova knjižnica neće biti korisna svima osim njoj ne rješava problem u niši koje mnogi programeri sučelja / UX-a susreću pri izradi prototipa.

Da biste saznali više, posjetite Stranica GitHub ili provjerite live site za aktivni demo.