uxzentrisch entdeckt: Neue Tools lassen uns CSS und HTML visuell bearbeiten

Neue Tools wie dabblet.com helfen uns, abstrakte CSS- und HTML-Code-Elemente zu verstehen. Sie visualisieren Farben, Grafiken, codierte Schriftzeichen und Geschwindigkeiten. Andere Tools erlauben uns das Bearbeiten von CSS- und HTML-Werten mit Schiebereglern und speziellen Auswahlfeldern.

Das ist toll, denn viele der tollen, neuen CSS3- und HTML5-«Befehle« sind so einfacher zu verstehen und zu manipulieren. Und jeder, der einmal in seinem Konzept Millisekunden-Zeiten für Animationen definieren musste, wird sich über eine Vorschau wie im Video freuen.

Diese Tools sind mir bisher positiv aufgefallen:

  • Dabblet.com treibt die Vorschau-Funktionen bisher am weitesten.
  • Livecoding.io erlaubt das Bearbeiten von Zahlen und Farben (Alt-Taste drücken und Zahl anklicken)
  • khanacademy.org hat ein ähnliches Feature … und integriert zudem das Code-Bearbeiten mitten in die Schulung

Ich bin gespannt, welchen Einfluss diese neuen Online-Code-Editoren auf das Interfacedesign kommender Software hat und würde mich freuen, wenn die Macher von Axure sich dabblet einmal sehr genau anschauen würden.

Kennt ihr weitere Beispiele, bei denen solche Vorschau-Elemente verwendet werden? – Twitters Hovercard bietet sich leider nicht mehr an, da sie gerade abgeschaltet werden …

(Danke an Benny für die Inspiration)