hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Créer des maquettes de périphérique dans le navigateur avec DeviceMock

Vous pouvez trouver des tonnes de maquettes d'appareils gratuites en ligne, allant des fichiers PSD aux fichiers Esquisse. Mais, et si vous pouviez créer rapidement des maquettes d'appareil à la volée dans votre navigateur?

Eh bien, merci aux gens de rm-labo, vous pouvez! Leur plugin jQuery gratuit, DeviceMock.js, vous permet d' enrouler un périphérique vectoriel autour de n'importe quel élément de page, en utilisant du JavaScript simple et des SVG.

Alors, comment cela fonctionne-t-il exactement?

Eh bien, vous devez d'abord avoir une copie de jQuery et une version du plugin DeviceMock de GitHub . Cela vient avec un fichier JS, un fichier CSS et certains fichiers SVG pour créer les périphériques réels.

Vous pouvez cibler n'importe quel type d'élément sur la page, d'une image simple à une div entière, ou même un élément incorporé tel qu'un iframe. Cela signifie que vous pouvez même créer un mini-navigateur sympa directement sur votre site avec un iframe sur une autre page.

Ce plugin prend en charge cinq types d'appareils différents :

  1. Navigateur Web
  2. Téléphone intelligent
  3. Tablette
  4. Bureau
  5. Portable

Toutes ces maquettes utilisent des styles de conception plats car ils sont construits avec des SVG. Et, ils ressemblent tous assez bien aux appareils Apple, par exemple le smartphone étant un clone de l'iPhone et le moniteur de bureau ressemblant visiblement à un iMac.

Tous ces vecteurs sont faciles à ajouter et ils fonctionnent dans tous les navigateurs avec un support SVG .

Vous pouvez même modifier des propriétés telles que la taille de la maquette, le thème (blanc / noir) et l'orientation (paysage portrait).

Si vous utilisez la maquette du navigateur, vous pouvez même spécifier une URL fictive dans la barre d'adresse. C'est une façon amusante d'ajouter encore plus de personnalisation.

Certes, cette bibliothèque ne sera pas utile pour tout le monde, mais elle résout un problème de niche auquel de nombreux développeurs UI / UX font face lors du prototypage.

Pour en savoir plus, visitez la page GitHub ou consultez le site en direct pour une démonstration active.

Concepts de développement Web Tous les concepteurs Web doivent comprendre

Concepts de développement Web Tous les concepteurs Web doivent comprendre

Il y a beaucoup à dire sur le fossé qui existe entre les concepteurs et les développeurs . Certes, il existe de nombreux hybrides concepteur / développeur qui peuvent comprendre les deux côtés de la médaille, mais ils sont rares et espacées.Les projets créatifs prospèrent grâce à une bonne communication . Cependant,

(Conseils techniques et de conception)

Conseils de M-Commerce pour concevoir une meilleure expérience de magasinage

Conseils de M-Commerce pour concevoir une meilleure expérience de magasinage

Avec les ventes au détail annuelles via les mobiles et les tablettes qui devraient atteindre 707 milliards de dollars d'ici 2018, de plus en plus de consommateurs recherchent désormais une expérience d'achat en ligne visuellement attrayante .Le mobile a cependant ses propres défis. Qu'il s'agisse de concevoir des écrans de différentes tailles ou d' offrir une interface tactile conviviale aux consommateurs, le mobile pose trop de défis aux détaillants. Concev

(Conseils techniques et de conception)