Handgezeichnete UI-Elemente im Skizzenstil

 (wiredjs.com)
4 Punkte von GN⁺ 2024-06-01 | 1 Kommentare | Auf WhatsApp teilen
  • Wired Elements ist eine Sammlung handgezeichneter, allgemeiner UI-Elemente, die sich gut für Wireframes, Mockups und verspielte UIs eignen
  • Jedes Element enthält Zufälligkeit, sodass selbst dieselbe Komponente bei jedem Rendering nicht völlig identisch aussieht
  • Die Demo zeigt die Funktionsweise, indem sie mit wired-element-Controls einen von rough.js gezeichneten Kreis im Skizzenstil verändert
  • Es gibt CodeSandbox-Beispiele für Vue, Svelte und React; React verwendet separate wrapper components
  • Nutzungshinweise und die APIs der einzelnen Elemente sind in der GitHub-Dokumentation zu finden; alle Elemente lassen sich im Component showcase ansehen

UI-Komponenten im Skizzenstil

  • Wired Elements ist ein Set allgemeiner UI-Elemente im handgezeichnet wirkenden Skizzenstil
  • Es eignet sich, um wie bei Wireframes oder Mockups einen unfertigen Eindruck zu vermitteln oder eine UI mit handgezeichneter Anmutung zu erstellen
  • Jedes Element wird mit ausreichend Zufälligkeit gezeichnet, sodass es bei jedem Rendering nicht wie eine völlig identische Form aussieht
  • Eine einfache Demo verändert mithilfe von wired-element-Controls einen mit rough.js gezeichneten Kreis im Skizzenstil

Beispiele und Dokumentation

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-06-01
Hacker-News-Kommentare

  • Sieht gut aus und löst auf seltsame Weise Nostalgie aus. Ein Feedbackpunkt: Beim Umschalten einer Checkbox hätte ich erwartet, dass das Häkchen jedes Mal ein wenig anders aussieht, als wäre es erneut von Hand gezeichnet worden.
    Ein bisschen Rauschen einzubauen, wäre vielleicht ein gutes 2.0-Feature.

    • Wenn man Rauschen einbaut, sieht es bei jedem Rendering anders aus; ich bin mir nicht sicher, ob das gut ist.

  • Für diesen Zweck ist Balsamiq Wireframes am besten: https://balsamiq.com/wireframes/
    Wenn man Code schreiben muss, geht der Sinn von „schnell und grob“ verloren.

    • So etwas kann nützlich sein, um Kunden zu zeigen, dass das, was sie gerade sehen, kein fertiges Produkt ist, sondern ein funktionierender Prototyp.
      Noch passender wäre es, wenn man das Design austauschen könnte wie beim früheren „napkin look&feel“ von Swing: https://napkinlaf.sourceforge.net/
      Im Web scheint die Idee, „das Design durch Wechseln des Themes auszutauschen“, allerdings schon vor langer Zeit verschwunden zu sein.
    • Wenn man auf dem Handy Wireframes im handgezeichneten Stil erstellen will, gibt es das hier: https://www.tinyux.app
      Weil ich auf einem kleinen Touchscreen kein Drag-and-drop verwenden wollte, habe ich mich für eine nicht standardmäßige UX entschieden.
    • Ich mag https://wireframesketcher.com/ wirklich sehr.
      Keine Cloud-Abhängigkeit und eine lebenslange Lizenz für 99 $. Solche Produkte werden immer seltener.
    • Ich mag Balsamiq. Dieser Wireframe-Stil ist nützlich, weil er vermittelt: „Das ist nur eine Skizze“, und Fragen wie „Die Schrift ist etwas fragwürdig, oder?“ vermeidet.
    • Balsamiq ist wirklich schnell und einfach. Ich meine mich zu erinnern, dass es früher ein Postprocessing-Tool von Drittanbietern gab, das Balsamiq Mockups in Code umgewandelt hat; ich frage mich, ob es das noch gibt.
      Beim Nachschauen: Es hieß napkee und wurde Open Source, scheint aber seit fast 10 Jahren kaum angefasst worden zu sein.

  • Erinnert mich an Balsamiq, das vor etwa 10 Jahren populär war.

    • Ich finde Balsamiq immer noch sehr nützlich.
    • Es ist auch heute noch das erste Tool, das ich zum Erstellen von Mockups nutze. Ich finde es am stärksten, um Stakeholdern das Produktverhalten zu vermitteln.
    • Genau, das wollte ich auch sagen, aber es stand schon da.
      Wenn ich mich richtig erinnere, hat Balsamiq-Gründer Peldi damals darüber gebloggt. Ich mag es auch. Es erinnert mich vage auch an die noch frühere Popularität der Schrift Comic Sans.
    • Gab es nicht auch unter den X Window Managern etwas, das man auf dieselbe Weise skinnen konnte?
    • Nutze ich fast täglich.

  • Früher hat man skizzenhafte Mockups verwendet, damit Nutzer verstehen, dass es sich nicht um ein fertiges, funktionierendes Interface handelt. Ich frage mich, ob diese Bedeutung inzwischen verloren gegangen ist.

    • Genau dafür ist es gedacht. Es dient dazu, Mockup-Software zu erstellen.

  • Für handgezeichnet wirkende Elemente ist Excalidraw am besten: https://excalidraw.com/
    Ich war sofort begeistert von der UX und davon, wie schnell man die gewünschten Aufgaben erledigen kann, insbesondere Architekturdiagramme und Low-Fidelity-Mockups. Alle Daten werden lokal im Browser gespeichert, sodass Offline-Arbeit einfach ist.

    • tldraw.com ist ebenfalls hervorragend.

  • Frühere Diskussion: https://news.ycombinator.com/item?id=17146451 (650 Punkte, 121 Kommentare)

    • Ausgeklappt lautet sie: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - Mai 2018 (120 Kommentare)
      Ich glaube, es gab auch einen anderen Thread zu diesem oder etwas sehr Ähnlichem. Wenn ihn jemand findet, kann er zur Liste hinzugefügt werden.

  • Ich mag skizzenhafte UI-Elemente, aber skizzenhafte Textschriften mag ich nicht. Ist es stilistisch schwierig, eine normale serifenlose Schrift mit einer skizzenhaften UI zu kombinieren?

    • Mir persönlich gefiel die Schrift, aber solche „Handschrift“-Fonts landen immer in diesem Uncanny Valley von skizzenhaft, aber regelmäßig.
      Selbst wenn ein bestimmtes Glyph für sich genommen noch so skizzenhaft wirkt, sieht es jedes Mal exakt gleich aus.
    • Viele Einträge im Showcase verwenden normale Schriften; das kann als Referenz dienen: https://wiredjs.com/showcase
    • Wenn es eine Handschrift-Schrift ist, sollte sie zumindest nach rechts geneigt sein.

  • Inspiriert von diesem Projekt habe ich das VSCode-Plugin WireText gebaut, mit dem man schnell handgezeichnete Mockups erstellen kann.
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • Ich mag es wegen der Ästhetik. Es ist niedlich. Ob es nützlicher ist, um Feedback zu bekommen, ist mir nicht besonders wichtig.

    • Wenn man nur die Optik will und den JS-Teil nicht braucht, kann man PaperCSS verwenden.

  • Persönlich finde ich diesen Stil gut genug, dass ich ihn in einem echten Produkt verwenden möchte. Oder man könnte ihn in der Beta-Version eines Produkts nutzen und ihn zum offiziellen Launch ändern.
    Allerdings wäre das vermutlich sehr viel zusätzliche Arbeit.

    • Als ich gerade mit Designarbeit anfing, habe ich mit Teilen des Customer-Success-Teams Nutzertests an einem Low-Fidelity-Prototyp durchgeführt.
      Die visuelle Darstellung sollte vermitteln, dass das Gezeigte noch veränderbar ist, aber das Feedback lautete: „Der Skizzen-Look gefällt mir wirklich.“ Seitdem verlasse ich mich nicht mehr darauf, diese Darstellung als Marker für eine Phase im Designprozess zu nutzen.
    • Es gibt einen Grund, so einen Stil für Beta- oder Alpha-Builds zu verwenden. Die Art des Feedbacks, das man bekommt, ändert sich.
      Vor langer Zeit habe ich einen Artikel darüber gelesen, wie man Dinge „unfertig aussehen lässt“; ich glaube, es ging um AWT Look and Feel. Dazu gibt es auch Diagramme im xkcd-Stil: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) und https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      Wenn ein Produkt fertig aussieht, geht auch das Feedback von der Annahme aus, dass es fertig ist.
      Früher habe ich beim Arbeiten an interner JavaScript-Logik den Fehler gemacht, einen halbwegs gut aussehenden Header zu verwenden. Er war besser als das zuvor verwendete gestreckte GIF und hatte sogar einen CSS-Gradienten.
      Ich wollte überprüfen: „Stimmt die Reihenfolge der Seiten in diesem Workflow? Sind die für diese Funktion nötigen UI-Elemente auf der Seite? Fehlen Funktionen?“ Das Feedback, das zurückkam, drehte sich aber um Blau und darum, ob der Gradient von dunkel nach hell verlaufen sollte oder umgekehrt.
      Bei weiterer Suche stellte sich heraus, dass dieses Look and Feel https://napkinlaf.sourceforge.net war, was zu folgendem Blogpost führt: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...