Stylo – Designe deine eigene Web App

Webdesigner unter uns? Die meisten kennen sicher die Methodik sich im Vorfeld eine Vorstellung der zukünftigen Webseite zu machen und diese in einem Designer ihrer Wahl vorab zu erstellen.

Häufig sieht man dabei reine Grafikprogramme wie Photoshop oder Gimp im Einsatz, welches hierfür eigentlich nicht die optimalen Tools sind. Im Regelfall kommt das erstellte Design dann zum Webentwickler der hier selbst alles nachbauen muss mit allen Feinheiten, die der Webdesigner dort gerne eingebaut hätte.

Daher gibt es kommerzielle Tools wie Adobe Fireworks, die im Anschluss einen relativen sauberen CSS und HTML Export liefern, die eine Menge Zeit einsparen können.

Bisher gab es im Open Source Bereich keine wirklichen Alternativen zu Fireworks. Eben bin ich aber auf eine Eigenentwicklung von Alex MacCaw aufmerksam geworden, ein Angestellter bei Twitter, der in seinem Blog Stylo vorstellt.

stylo

Man sollte berücksichtigen, dass es zunächst eine erste Demo ist, die ihr hier findet, aber der erste Eindruck war recht gut von meiner Seite.

Bisher ist folgendes möglich:

  • Einfügen von Objekten, wie
    • Rechtecke
    • Ellipsen
    • Text
    • Eingabefelder
    • Buttons
  • Einstellungen von jeder Menge Eigenschaften für die Objekte
    • Schatten
    • Hintergrundverläufe
    • Rahmen
    • Farben
    • Größe der Elemente
    • Transparenz
    • Schriftarten, Texteffekte usw.
  • Undo – Funktio, Tastenkürzel werden unterstützt
  • Export der Elementeigenschaften als CSS (derzeit nur mit Rechtsklick Copy der Elemente, dann hat man die CSS-Eigenschaften in der Zwischenablage)

Das komplette Projekt ist jetzt Open Source und liegt auf Github. Die Bedienung ist sofort ersichtlich und einfach zu bedienen, von daher von mir derzeit eine Empfehlung es sich zumindest einmal anzuschauen, wenn man mal wieder ein Designentwurf einer Webseite benötigt.


  • http://www.raindog.de thom_raindog

    Also bei mir klappt der Export gar nicht, auch nicht über Copy und Paste. Schade, sehr.