de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Erstellen Sie Device Mockups im Browser mit DeviceMock

Sie können tonnenweise kostenlose Gerätemodelle online finden, von PSDs bis hin zu Sketch-Dateien. Aber was, wenn Sie schnell Geräte-Modelle in Ihrem Browser erstellen könnten?

Nun, dank der Leute von rm-labo können Sie! Mit ihrem kostenlosen jQuery-Plugin, DeviceMock.js, können Sie ein Vektorgerät um jedes Seitenelement wickeln, indem Sie einfaches JavaScript und SVGs verwenden.

Also, wie genau funktioniert das?

Nun, zuerst benötigen Sie eine Kopie von jQuery und eine Version des DeviceMock-Plugins von GitHub . Dies wird mit einer JS-Datei, einer CSS-Datei und einigen SVG-Dateien geliefert, um die tatsächlichen Geräte zu erstellen.

Sie können einen beliebigen Elementtyp auf der Seite auswählen, von einem einfachen Bild bis zu einem gesamten div oder sogar einem eingebetteten Element wie einem iframe. Dies bedeutet, dass Sie sogar einen coolen Mini-Browser direkt auf Ihrer Website mit einem iframe auf einer anderen Seite erstellen können .

Dieses Plugin unterstützt fünf verschiedene Gerätetypen :

  1. Webbrowser
  2. Smartphone
  3. Tablette
  4. Desktop
  5. Laptop

Alle diese Modelle verwenden flache Designstile, da sie mit SVGs erstellt werden. Und alle sehen Apple-Geräten sehr ähnlich, zum Beispiel das Smartphone als Klon des iPhones und der Desktop-Monitor, der auffällig wie ein iMac aussieht.

Alle diese Vektoren sind einfach hinzuzufügen und sie funktionieren in jedem Browser mit SVG-Unterstützung .

Sie können sogar Eigenschaften wie Modellgröße, Motiv (weiß / schwarz) und Ausrichtung (Hochformat) ändern .

Wenn Sie das Browser-Modell verwenden, können Sie in der Adressleiste sogar eine Dummy-URL angeben . Dies ist eine unterhaltsame Möglichkeit, noch mehr Anpassungen hinzuzufügen.

Zugegeben, diese Bibliothek wird nicht für jeden nützlich sein, aber sie löst ein Nischenproblem, mit dem viele UI / UX-Entwickler beim Prototyping konfrontiert werden.

Um mehr zu erfahren, besuchen Sie die GitHub-Seite oder besuchen Sie die Live-Site für eine aktive Demo.

Zehn Mehrzweck-WordPress-Themes für vielseitige Designer

Zehn Mehrzweck-WordPress-Themes für vielseitige Designer

Wenn Sie sich nicht auf eine bestimmte Art von Website-Design konzentrieren, ist es sinnvoll, in ein Mehrzweck-WordPress-Theme zu investieren . Mehrzweckthemen geben Ihnen die Flexibilität, die Sie benötigen, um auf jede Aufgabe vorbereitet zu sein.Die vielseitigen WordPress-Themes, die hier vorgestellt werden, enthalten alles, was notwendig ist, um auf einen beliebigen Webseitentyp oder ein Thema einzugehen .

(Tech- und Design-Tipps)

Automatisieren: N-Kind-Selektoren mit Family.scss Mixins

Automatisieren: N-Kind-Selektoren mit Family.scss Mixins

Sass ist der beste Weg, um modernes CSS zu verwalten und Mixin-Bibliotheken können während des Entwicklungszyklus noch mehr Zeit sparen.Diese Mixins funktionieren wie automatisierte Codes oder Funktionen, die Sie in Ihren Haupt-Sass-Dateien aufrufen. Einige Mixins sind allgemeiner, während andere sehr spezifisch sind, wie die Family.sc

(Tech- und Design-Tipps)