10 praktische Online-Tools für Webdesigner

Feb 5, 2013 in Weblinks | 2 Kommentare

Es gibt mittlerweile jede Menge Programme und Tools die dem Webdesigner das Leben leichter machen sollen. Dabei muss es nicht immer Photoshop oder Dreamweaver sein! Ob Layout-Grundgerüst, einzelne Interface-Elemente oder Webfonts vieles lässt sich viel effizienter mit einem Online-Tool bewerkstelligen.

YAML Builder

1. YAML Builder

YAML (Yet Another Multicolumn Layout) stellt mit seinem CSS Framework ein browserübergreifendes Grundgerüst zur Verfügung. Die Integration des Frameworks mit jQuery vereifacht die Entwicklung dynamischer Websites. Es existieren Basis-Layouts für zahlreiche Content Management Systeme wie WordPress, Joomla, TYPO3 und Drupal. YAML Builder bietet ein Online-Tool zur Erstellung YAML-basierter CSS-Layouts. Die Elemente werden per Drag&Drop ins Layout eingebunden. Ein WYSIWYG-Editor zeigt alle Anpassungen direkt im Browser an. Das ferige Layout lässt sich als HTML/CSS Code exportieren.

Mittlerweile wurde YAML Builder zu Thinkin’ Tags weiterentwickelt, das aktuell in einer Public Alpha Version verfügbar ist. Neben YAML werden auch die Frameworks 960.gs und Blueprint unterstützt.

http://builder.yaml.de
www.thinkintags.com

Jetstrap Interface Builder

2. Bootstrap Interface Builder

Twitter Bootstrap ist ein modular aufgebautes CSS UI Framework für Webanwendungen. Mit dem kostenlosen Online-Tool Bootstrap Interface Builder kann man sein eigenes Bootstrap-Layout in wenigen Minuten zusammenklicken. Der WYSIWYG-Editor lässt sich auch ohne HTML-Kenntnisse intuitiv bedienen.

http://jetstrap.com

3. Themes für Twitter Bootstrap erstellen

Sehr nützlich ist auch Paintstrap mit dem man sehr einfach eigene Farb-Themes für Twitter Bootstrap erstellen kann. Zuerst importiert man eine Farbpalette aus Adobe Kuler oder Colourlovers. Danach kann man die Farben ggf anpassen. Die Ergebnisse sieht man sofort in einer Vorschau. Die fertigen CSS Dateien kann man anschließend als ZIP-Archiv herunterladen.

http://paintstrap.com

4. ThemeRoller für jQuery UI CSS Framework

Die sehr beliebte JavaScript Library bring auch ein CSS Framework mit sich. Mit dem ThemeRoller lässt sich ein eigenes CSS Theme direkt im Browser gestalten. Das Interface ist gut gegliedert und erfordert keine HTML-Kentnisse. Alle Änderungen werden sofort in der Theme-Vorschau aktualisiert.

http://jqueryui.com/themeroller

5. 960 Grid System Builder

960 Grid System ist ein flexibles und weit verbreitetes Framework für Weblayouts. Damit lassen sich harmonische Layouts für die gängige 1024×768 px Auflösung erstellen. Mit dem Grid Builder kann man die Parameter für Spaltenanzahl sowie Spaltenbreite und Zwischenabstände definieren. Das Ergebnis kann man anschließend als CSS Datei für die fixe oder fuilde Layouts herunterladen.

http://grids.heroku.com

6. Buttons, Icons, Ribbon und Formulare erstellen

UI LiveTools bietet vier kostenlose Tools um eigene Buttons, Formulare, CSS-Ribbon sowie Pixelicons zu erstellen. Die Tools haben eine Sofort-Preview und lassen sich kinderleicht bedienen. Die Ergebnisse kann man als HTML & CSS3 bzw PNG Grafik exportieren.

http://livetools.uiparade.com

7. Colorzilla CSS Gradient Generator

Ein sehr nützliches Tool um CSS3 Farbverläufe zu erstellen. Neben vielen Vorlagen und umfangreichen Einstellungsmöglichkeit gibt es auch die Option CSS Gradients aus einer Bilddatei zu extrahieren. Das generierte Code funktioniert in allen CSS3 fähigen Browsern wie Firefox, Safari, Opera und IE9. Für ältere IE Versionen gibt es eine Fallback-Option.

www.colorzilla.com/gradient-editor

8. Font-Face Generator

Webfonts muss man nicht unbeding bei einem externen Anbieter hosten. Mit Fontface Generator kann man eine Desktop-Schrift zu einer Webfont umwandeln um diese auf dem eigenen Webserver in die Webseite einzubinden. Auf der Fontsquirrel Website findet man auch eine gute Übersicht freier Webschriften.

www.fontsquirrel.com/fontface/generator

9. Typetester

Mit dem Online-Tool Typetester kann man bis zu drei Schriftarten gleichzeitig miteinander vergleichen. Neben üblichen Einstellungen für Schriftgröße, Farbe, Zeilenhöhe, Letter-Spacing etc hat man auch eine gute Auswahl an unterschiedlichen Systemschriften für Mac und Windows aber auch Möglichkeit eigene lokale Schriften zu testen.

www.typetester.org

10. MyCSSMenu

Das Tool bietet eine Auswahl an browserübergreifenden Navigationsmenüs, die man mit einem Online-WYSIWYG-Editor beliebig anpassen kann. Auch wenn die Standardvorlagen etwas altbacken aussehen, lässt die Vielzahl von möglichen Einstellungen und Zusatzfunktionen wie Animationseffekte keine Wünsche offen.

www.mycssmenu.com

 

2 Kommentare zu 10 praktische Online-Tools für Webdesigner

  1. Dirk Jesse am 7. Februar 2013

    Vielen Dank für die Nennung des YAML Builders. Da dieser jedoch schon ein paar Jahre auf dem Buckel hat und auch nur die Version 3.x des YAML Frameworks unterstützt, möchte ich auf dessen Nachfolger hinweisen.

    Thinkin’ Tags (http://www.thinkintags.ocm) ist aktuell in einer Public Alpha Version verfügbar und unterstützt neben YAML die Frameworks 960.gs und Blueprint und ist ein vollständig browserbasierter Editor für HTML und CSS. Die erstellten Projekte können als ZIP-Files exportiert werden.

    Antworten
    • Boris Kozelev am 8. Februar 2013

      Danke für den Hinweis! Ich habe den Eintrag nun aktualisiert :)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *