Webdesign

25 nützliche Tools für Webdesigner

8. Juli 2010
von

Webdesign und -entwicklung ist ein zeitintensives Metier. Neben dem eigentlichen Gestalten und Entwickeln, Absprachen mit Kunden und Kooperationspartnern, fressen Testläufe, Fehlersuche und Informationsrecherche die Zeit. Wie schön, dass die Community mit vielen kleinen Helferlein auf diesen Zeitdruck reagiert. Hier ist eine Sammlung nützlicher Tools und Referenzen, die das Leben als Webdesigner leichter machen.

Quick Links: Tools nach Themengruppen

CSS, Styleguides, Referenzlisten

csstender

Wenn Sie Ihre Websites schon heute mit CSS-3-Eigenschaften wie border-radius, canvas oder opacity gestalten möchten – und zwar so, dass Ihr Layout auch in nicht-CSS-3-konformen Browsern korrekt angezeigt wird, ist ecsstender (sprich extender) von Aaron Gustafson eine mögliche Lösung. Das Besondere an dem Tool ist der saubere CSS-Code, der ohne die üblichen Browser-Hacks und Stylesheet-Weichen auskommt.

Gustafsons Ziel ist es, modernes Webdesign mit CSS 3 zu fördern und den Einsatz von CSS3 von der Unterstützung der Browser-Hersteller unabhängig zu machen Allerdings: Das, was sonst von Hacks und Conditional Comments erledigt wird, ist nun die Aufgabe von JS-Extensions, was offenbar die Ladezeiten zu beinträchtigen scheint. Zum Experimentieren mit neuen Gestaltungsmitteln ist ecsstender aber allemal geeignet.

Download / Demo

Primer CSS
Klein und handlich: Primer CSS (was so viel heißt wie CSS-Grundierung) arbeitet online und hat nur eine Funktion: Per Copy & Paste können Sie von einer HTML-Seite das Markup beziehungsweise das Grundgerüst der Seite extrahieren und daraus automatisch ein separates Stylesheet mit IDs und Klassen erstellen. Das funktioniert ganz hervorragend, wenn Sie zuerst die Struktur in HTML anlegen und dann die Formen und Farben im Stylesheet zuweisen.

Screenshot

Style Guides für Anwenderschittstellen
Wenn Sie Unterstützung beim Verfassen eines Style Guide für Anwenderschnittstellen benötigen, werden Sie auf dieser Seite fündig: User Interface Style Guides bietet Hilfe und Orientierung durch zahlreiche Beispiel-Style-Guides großer Internetauftritte von Firmen, Nachrichtenagenturen und Rundfunkanbietern wie zum Beispiel der BBC Style Guide. Auch interessant: Erläuterungen zu Anwenderschnittstellen-Richtlinien und Style Guides für Web-Autoren (Editorial Style Guide) beziehungsweise das Erstellen von Texten fürs Web.

Screenshot
Unicode Codepoint Chart
Eine sehr übersichtliche Online-Referenz für Symbole und Sonderzeichen bietet Unicode Codepoint Chart. Die alphabetisch geordnete Liste bietet Zeichen für internationale Sprachen von Arabic über Basic Latin bis zu Tai Lee sowie Zeichensätze für Mathematische Operatoren, Pfeile und vieles mehr. Ein Klick auf das gewünschte Symbol oder Zeichen öffnet eine Seite mit Detailinformationen nebst einer Browser-Test-Seite und den Codierungen und Zeichensätzen (HTML Entitites, UTF-8, UTF-16, UTF-32, ISO-8859-8 und andere).

ASCII Table
Noch umfassender, als das vorhergehende Tool und vor allem interaktiv gestaltet kommt die Online-Referenz ASCII Table daher. Ein unverzichtbares Nachschlagewerk für jeden Webdesigner.

ASCII Table

Tastaturkürzel und Befehle für Linux
Aus den knapp 3.000 verfügbaren Befehlen für die Administration von Linux haben Stan und Peter Klimas unter Linux Newbie Guide eine systematisch geordnete Auswahl der gebräuchlisten Shortcuts und Befehle erstellt.
Linux Newbie Guide

99 Abkürzungen aus dem Online Business
Ein alphabetisch sortiertes Glossar mit 99 der gängigsten E-Commerce-Abkürzungen hilft Ihnen auf die Sprünge, wenn Sie mal wieder eine kryptische Nachricht von Ihrem Server-Administrator oder einem Kunden aus dem Marketing bekommen. Schlagen Sie’s nach. Unter 99 Ecommerce Acronyms finden Sie – wie der Name schon sagt – 99 Abkürzungen aus dem Online Business – von Marketing über Informationstechnik, Suchmaschinenoptimierung, Webentwicklung, -design und analyse bis hin zu Logistik.

Typografie und Layout

AltFontPrev
Ein einfaches, aber wirkungsvolles JavaScript-Bookmarklet ist AltFontPrev. Mit diesem Tool können Sie die auf jeder beliebigen Website verwendeten Schriftarten ermitteln. Sinn und Zweck: So können Sie gewährleisten, dass Ihr Layout auch dann gut aussieht, wenn bestimmte Fonts auf dem System eines Anwenders nicht installiert sind. Ohne den Quellcode zu durchforsten, sehen Sie auf einen Klick, welche Schriften im Font-Ordner der Website enthalten sind. Sie können sogar eine benutzerdefinierte Schrift festlegen.

Screenshot

Web Font Specimen
Mit Web Font Specimen können Sie sehr bequem überprüfen, wie Schriften laufen. Sie können Überschriften in verschiedenen Fonts nebeneinander darstellen lassen und den Effekt vergleichen. Zudem generiert das Online-Tool ganze Textblöcke und Punktaufzählungen, so dass Sie sehen können, wie die gewählte Schriftart sich auf das Gesamtbild der Website auswirkt.

Screenshot

Typografix
Mit Typografix können Sie Webtypografie direkt korrigieren. Das Script Auslassungen und Zitate. Außerdem fügt es automatisch  die Tags für  <script>, <pre> und <code> ein. Der en-Gedankenstrich wird zum Beispiel immer dann eingefügt, wenn Typografix einen von Leerzeichen eingeschlossenen Bindestrich findet; während zwei aufeinander folgende Bindestriche durch den em-Gedankenstrich ersetzt werden.Typografix ist mit C# geschrieben und benötigt den Windows Installer nstaller 3.1 und das .NET Framework 3.5 SP1.

Screenshot

#grid
Was im Printdesign schon seit den 1930er erfolgreich eingesetzt wird, ist im Webdesign noch relativ neu: Ein Gitternetz, mit dem sich Text und Bilder in regelmäßigen, optisch ansprechenden Abständen ausrichtgen lässt. Ein entsprechendes Hilfsmittel bietet #grid. Das Tool fügt Gitternetzlinien auf einer Webseite ein, die sich per Tastaturkürzeln verschieben sowie ein- und ausblenden lassen.

Screenshot

Online-Lineale
Nicht schön, aber praktisch: Messen muss man immer wieder, wenn man ein neues Layout anlegt. Ganz flott geht das mit einem Online-Lineal. Fünf verschiedene Lineale – für jede gängige Plattform von Mac bis Ubuntu eines.

 Five Awesome On-Screen Rulers

CSS Usage
Das Firebug-Addon CSS Usage untersucht Websites auf die verwendeten CSS-Regeln. Per Mausklick können Sie komplexe Websites durchsuchen. Öffnen Sie dazu die erste Seite, die Sie untersuchen möchten und klicken Sie auf  “Scan” auf dem FIrebug-Reiter “CSS Coverage”. Bei Seiten mit Ajax oder DHTML sollten Sie so viel möglich divs, Pop-ups und Taben öffnen und erneut auf “Scan” klicken. Wiederholen Sie das auf allen zu untersuchenden Seiten des Internetauftritts. Mit jedem erneuten Klick auf “Scan”, werden die mit der Site verbundenen CSS-Dateien zur Analyse hinzugegefügt und die Anzahl der auf der zu untersuchenden Seite angewandten CSS-Regeln angezeigt.

Juicer: CSS-Stylesheets und JS-Scripts packen
Ein relativ neues Tool zum Komprimieren und Packen von CSS- und JavaScript-Dateien ist Juicer. Während es für die Entwicklung von Style Sheets und Scripts jede Menge Veröffentlichungen zur Best Practise gibt, bleibt das Einbinden dieser Dateien in eine Website relativ im Dunkeln – oft zum Nachteil der Performance, wenn etwa CSS-Code auf viele einzelne Dateien aufgeteilt wird. Mit Juicer lassen sich all diese Dateien und zusätzlichen Dokumentationen komprimieren und zusammenfassen, so dass sich später auf dem Server im Idealfall jeweils eine einzige kompakte CSS- und JS-Datei befindet.

Farbwähler, Farbreferenzen

Interkulturelles Farben-Rad
Welche Bedeutung Farben in den verschiedenen Kulturkreisen dieser Erde zugeschrieben wird, können Sie auf Colours In Cultures an einer kreisrunden Infografik ablesen. Infografiken sind nämlich die Spezialität von David McCandless, der diese beachtlich komplexe Farb-Referenz für sein Buch Information is Beautiful kreiert hat.
Colours In Cultures

Farbschemata erstellen
Mit dem Color Scheme Designer können Sie auf sehr intuitive Art fein aufeinander abgestimmte Farbschemata erzeugen. Je nach Voreinstellung können Sie Ton-in-Ton-Abstufungen, komplementäre, tetradische und andere Zusammenstellungen wählen.

Color Tools für Webworker
Explizit für Webmaster und Webdesigner ist diese Kollektion von zwölf Online-Color-Tools zur Farbwahl, dem Ermitteln von websicheren RGB-Werten sowie dem Mischen und Zusammenstellen von Farben nach verschiedenen Aspekten zusammen gestellt.

Dateien konvertieren, Drucken & Testen

Videos konvertieren
Miro Video Converter ist ein einfach anzuwendendes und absolut frei verfügbares Werkzeug zum Konvertieren von Videos in MP4, WebM (vp8), Ogg Theora oder für Android, iPhone und mehr

Miro Video Converter

Modernes Dokumenten-Management mit AurigaDoc
AurigaDoc ist ein Java-XML-XSL basiertes Tool mit dem XML-Dokumente schreiben und in andere offene Formate wie HTML (Einzel- und Mehrfachseiten), DHTML, PDF, PostScript, Formatting Object(FO), RTF, Java Help and HTML Help(.chm). Achtung: AurigaDoc ist kein XML-Editor. Das Tool soll vielmehr die medienneutrale Datenhaltung fördern. Content wird grundsätz im XML-Dokument erstellt und bearbeitet und anschließend je nach Zweck in einem anderen Format ausgegeben – etwa als HTML fürs Internet oder als PDF zum Druck von Büchern, Broschüren und Magazinen oder als HTML-Help/Java Help für Online-Hilfen.

AurigaDoc

Printliminator
Im angeblich papierlosen Zeitalter wirkt das Bookmarklet  The Printliminator fast ein wenig anachronistisch. Dennoch werden lange Texte nach wie vor lieber auf Papier als am Bildschirm gelesen. Wenn Sie zu den Zeitgenossen gehören, die Dokumentationen gerne ausdrucken, wird Ihnen dieses Tool gefallen, mit dem Sie überflüssige Grafiken und Werbung mit ein paar Klicks entfernen und den interessanten Text für den Druck optimieren können.
The Printliminator

ProtoFluid – Prototyping für Web-Apps
Nicht nur für Web-Anwendungen, auch für mobile Versionen von HTML5- und CSS3-Websites eignet sich der Online-Service ProtoFluid ganz hervorragend zum Testen und Optimieren. Mit dem Tool können Sie Ihre Apps und Websites in einer Vorschau testen – so wie sie auf auf verschiedenen mobilenen Geräten angezeigt würde. Neben bestimmten Geräten wie iPhone und iPad können Sie Display-Größen manuell vorgeben, was für die vielen verschiedenen Android-basierten Geräte interessant ist. Zudem lässt sich die Orientierung des Geräts – Hochformat oder Querformat – einstellen und die Darstellung Ihrer App in dieser Ansicht testen.

HTML5 and CSS3 Web App Prototyping

Lesezeichen, Shortcuts & Websites administrieren

Quix
Wäre es nicht schön, eine Befehlszeile im Browser zu haben, mit der sie Zugriff auf Tastaturkürzel und Befehle für Ihre Routineaufgaben als Webmaster, Administrator oder Blogger haben und so Ihren Arbeitsablauf schneller und komfortabler gestalten? Genau das bietet Ihnen Quix. Das Tool ist ein sehr pfiffiges und erweiterbares Bookmarklet, mit dem Sie nicht nur Lesezeichen aufrufen, sondern tägliche Routineaufgaben schneller erledigen können, wie zum Beispiel HTML-5-Validierung, das Kürzen und Versenden von Links und vieles mehr. Eine Übersicht der verfügbaren Befehle finden Sie hier.

Screenshot

WP-Toolbar bookmarklet
Ähnlich praktisch allerdings rein auf WordPress zugeschnitten ist das WP-Toolbar bookmarklet. Einmal installiert, blendet ein Klick aufs Bookmarklet eine zusätzliche Symbolleiste im Browser-Fenster ein, über die Sie das WordPress-Backend aufrufen, direkt zu den Kommentaren, zur Benutzerverwaltung und anderen Bereichen im Backend springen können. Direkter Zugriff auf einen bestimmten Post ist zwar nicht möglich, dennoch spart das Booklet einige Klicks bei der täglichen Arbeit. Über ein zusätzliches GreaseMonkey script wird die Symbolleiste automatisch geladen, wenn Sie eine bestimmte Website aufrufen.

Screenshot

Gpanion
Schnellen Zugriff auf beliebte Google-Apps bietet Gpanion. Wenn Sie langwieriges Klicken und Suchen nervt, installieren Sie dieses Tool, mit dem Sie eine Art Dashboard installieren können, dessen grafische Oberfläche Ihnen guten Überblick und direkten Zugriff auf Ihre Lieblings-Apps bietet.

Linkifikation
Linkification verwandelt Textlinks in echte anklickbare Hyperlinks. Das Add-on für Firefox ist zwar frei verfügbar, aber eine Spende wird vom Entwickler gerne gesehen.

Die Liste erhebt keinen Anspruch auf Vollständigkeit. Wir freuen uns auf Links zu weiteren neuen und nützliche Tools in den Kommentaren.

(tm)

12 Kommentare zu „25 nützliche Tools für Webdesigner
  1. G.Walter am 9. Juli 2010 um 09:37

    Interessante Sammlung. Wers braucht.

  2. […] 25 nützliche Tools für Webdesigner […]

  3. Alex am 9. Juli 2010 um 22:38

    Schöne Sammlung mit teilweise bekannten, und unbekannten (aber nützlichen) Tools! Danke für’s Teilen :)

  4. Rolf Moczarski am 10. Juli 2010 um 17:15

    Tolle Sammlung, einige Tools waren mir bekannt andere werden jetzt mal angetestet.

    Thanks for sharing :-)

  5. […] http://www.drweb.de findet ihr eine erstklassige Linksammlung mit insgesamt 25 nützlichen Tools für […]

  6. Jessica Halum am 16. Juli 2010 um 14:28

    Danke für die guten Tipps – habe mal das Webfont Specimen ausprobiert und muss sagen, dass es mir ganz nützlich erscheint.

    Grüße,
    Jessica

  7. Linkhub – Woche 27-2010 - pehbehbeh am 18. Juli 2010 um 15:54

    […] 25 nützliche Tools für Webdesigner […]

  8. adocom am 20. Juli 2010 um 14:07

    Schöne Auflistung.

    Auf FreeDesizn.co.cc findet ihr 40 Tools fürs Webdesign. Sie reichen von Websites für mehr Inspiration über Design Tools und Coding Tools bis hin zu Diensten fürs Testen und Managen der Seite. Gefunden auf t3n.

    adocom

  9. […] 25 nützliche Tools für Webdesigner: Wie der Name schon sagt: Das Dr. Web Magazin hat 25 Tools für Webdesigner zusammengesucht. Es gibt nette Helferlein zu entdecken. […]

  10. […] 25 nützliche Tools für Webdesigner bei Dr. Web […]

  11. Alex am 28. Juni 2013 um 14:58

    An dieser Stelle weise ich gerne auf unseren Responsive Design Viewer hin: http://www.active-value.de/responsive-design-viewer/ – mit diesem lässt sich eine Website sehr einfach auf mobilen Endgeräten anschauen!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!