Opprett Device Mockups i nettleser med DeviceMock
Du kan finne mange gratis online mockups på nettet, alt fra PSD til Sketch-filer. Men hva om du raskt kunne bygge enhetsmockups på flyet i nettleseren din?
Vel, takk til folkene på rm-labo, kan du! Deres gratis jQuery-plugin, DeviceMock.js, lar deg vikle en vektor enhet rundt et hvilket som helst sideelement, ved hjelp av enkle JavaScript og SVGer.
Så, hvordan fungerer dette akkurat?
Vel, først trenger du en kopi av jQuery og en versjon av DeviceMock-plugin fra GitHub . Dette kommer med en JS-fil, CSS-fil, og noen SVG-filer for å lage de faktiske enhetene.
Du kan målrette mot hvilken som helst type element på siden, fra et enkelt bilde til en hel div, eller til og med et innebygd element, for eksempel en iframe. Dette betyr at du kan til og med bygge en kul mini-nettleser rett på nettstedet ditt med en iframe til en annen side.
Dette pluginet støtter fem forskjellige enhetstyper :
- nettleser
- smart~~POS=TRUNC
- Tablett
- Desktop
- Laptop
Alle disse mockups bruker flat design stiler siden de er bygd med SVGs. Og alle ser ganske ut som Apple-enheter, for eksempel at smarttelefonen er en klone på iPhone, og skrivebordsbeskjermen ser iøynefallende ut som en iMac.
Alle disse vektorene er enkle å legge til, og de fungerer i hver nettleser med SVG-støtte .
Du kan til og med endre egenskaper som mockup størrelse, tema (hvit / svart) og orientering (stående landskap).
Hvis du bruker nettleserens mockup, kan du til og med spesifisere en dummy-URL i adressefeltet. Dette er en morsom måte å legge til enda mer tilpasning.
Gitt dette biblioteket vil ikke være nyttig for alle, men det løser et nisjeproblem som mange UI / UX-utviklere møter når prototyping.Hvis du vil vite mer, kan du gå til GitHub-siden eller sjekke ut live-nettstedet for en aktiv demo.
15 Nyttige webtypografiverktøy, biblioteker og rammer
Å håndtere typografi på nettet har vært ekte quirky. Hver nettleser har sin egen algoritme for å gjengi fonter som kan føre til uventede uoverensstemmelser. Det er bare noen få CSS-egenskaper du kan bruke til å ha litt kontroll over skrifttyper, for eksempel font kerning, skriftutjevning, oppretting av DropCaps osv. Dessut
Planlegg en tur til hvilken som helst by med Facebooks byguides
Avid reisende kunne snart stole på Facebook for å hjelpe dem med å planlegge sine turer, ettersom det ser ut til at den sosiale nettverkstjenesten for tiden ruller ut en funksjon som heter "City Guides" til massene.Hvis du er en av de første som har klart å få tilgang til funksjonen, kan du finne byguider-funksjonen via Facebook-appens "Mer" -meny. Gjen