UI-Elemente im handgezeichneten Skizzenstil

 (wiredjs.com)
4 Punkte von GN⁺ 2024-06-01 | 1 Kommentare | Auf WhatsApp teilen

Wired Elements

Überblick

  • Wired Elements ist eine Bibliothek, die UI-Elemente im Stil handgezeichneter Skizzen bereitstellt.
  • Sie kann für Wireframes, Mockups oder einen spielerischen handgezeichneten Stil verwendet werden.
  • Die Elemente werden mit einer leichten Zufälligkeit gezeichnet, sodass keine zwei Renderings identisch sind.

Demo

  • Einfache Demo: Es wird ein Beispiel bereitgestellt, das einen mit rough.js gezeichneten Skizzenkreis in ein wired-element-Control umwandelt.

Live-Demos

  • wired-elements in der Sandbox in Echtzeit ausprobieren:
    • Vanilla JS: wired-elements kann mit reinem JavaScript verwendet werden.
    • Vue: wired-elements kann im Vue-Framework verwendet werden.
    • Svelte: wired-elements kann im Svelte-Framework verwendet werden.
    • React: wired-elements kann mit einer React-Wrapper-Komponente verwendet werden.

Dokumentation

  • Verwendung: Wie man wired-elements verwendet, ist auf der GitHub-Seite zu finden.
  • API-Dokumentation: Die API einzelner Elemente ist auf der Dokumentationsseite zu finden.

Komponenten

  • Showcase aller wired-Komponenten.

Credits

  • wired-elements wurde mit RoughJS und Lit erstellt.

Projekt unterstützen

  • Die Entwicklung des Projekts kann über Open Collective oder GitHub unterstützt werden.

Lizenz

  • MIT-Lizenz (c) Preet Shihn.

Meinung von GN⁺

  • Design-Flexibilität: Der handgezeichnete Stil kann für Projekte nützlich sein, die ein unverwechselbares Design möchten.
  • Framework-Kompatibilität: Die Kompatibilität mit verschiedenen Frameworks erweitert die Auswahlmöglichkeiten für Nutzer.
  • Zufälligkeit: Durch das Zufallselement entsteht jedes Mal ein anderes Ergebnis, was für Frische sorgt.
  • Lernkurve: Für Einsteiger kann es etwas Zeit kosten, eine neue Bibliothek zu erlernen.
  • Alternativen: Andere Bibliotheken mit ähnlichen Funktionen sind etwa Paper.js und Konva.js.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-06-01
Hacker-News-Kommentar
  • Pencil and paper: Kann ohne Code einen handgezeichneten Skizzen-Look erzeugen.
  • Balsamiq Wireframes: Wird als nützliches Tool für schnelle und einfache Mockups empfohlen.
  • Code schreiben: Passt nicht zum Zweck, schnell und einfach Mockups zu erstellen.
  • Design-Feedback: Es wäre schön, wenn beim Umschalten einer Checkbox jedes Mal der Eindruck entstünde, sie sei von Hand neu gezeichnet worden.
  • WireText: Inspiriert von einem VSCode-Plugin, mit dem sich schnell Mockups im handgezeichneten Stil erstellen lassen.
  • Skizzenhafte UI-Elemente: UI-Elemente im Skizzenstil sind gut, aber Skizzen-Schriftarten eher nicht. Eine normale serifenlose Schrift und eine skizzenhafte UI passen stilistisch nicht zusammen.
  • Balsamiq-Erinnerung: Erinnert an Balsamiq, das vor etwa zehn Jahren populär war.
  • Warum Skizzen-Mockups verwendet werden: Sie wurden eingesetzt, damit Nutzer verstehen, dass es sich nicht um eine fertige Oberfläche handelt.
  • Einsatz in realen Produkten: Man würde diesen Stil gern in echten Produkten oder Beta-Versionen verwenden, aber der zusätzliche Aufwand scheint zu groß zu sein.
  • DoodleCSS-Empfehlung: DoodleCSS dürfte ebenfalls gefallen.
  • rough.js: Ein großartiges Tool, das auch in excalidraw verwendet wird.