Übersicht Webdesign Tools

Die 12 hilfreichsten Webdesign-Tools

Das Design ist eine entscheidende Komponente für den Erfolg einer Webseite, eines Shop oder eines Blogs.

Es prägt den ersten und zweiten Eindruck. Es vermittelt die Professionalität der Leistung oder der Produkte (oder eben nicht). Es sorgt für Vertrauen und Glaubwürdigkeit.

Als Hilfe bei der Gestaltung gibt es unglaublich viele Online-Tools für alle mögliche Einsatzwecke. Ganze Webseiten sammeln nur solche Tools, meine Lesezeichen quillen davon über – schwierig hier noch den Überblick zu behalten, bzw. die wirklichen „Perlen“ herauszufiltern.

Für diesen Beitrag habe ich meine Tool-Sammlung noch einmal „ausgewertet“ und entmistet. Übriggeblieben sind 12 Webdesign-Online-Tools, die ich dir vorstellen möchte, denn in meiner Arbeit helfen Sie mir. Vielleicht ja auch bald Dir…

Farben-Tools

Vielfältige Farbinformationen

ColorHexa bietet zu einem Farbwert vielfältige Informationen:
Die Zusammensetzung des Farbtons, mögliche Farbkombinationen nach bestimmten Farbharmonien, Vorschau auf Text-Hintergrund-Kombinationen, Helligkeits- und Sättigungskombinationen und die Simulation von Farbblindheiten.

Das Tool ist bei schon vorhanden Farbwerten hilfreich, um mehr über diesen Farbton zu erfahren und zu schauen, inwieweit dieser für den Einsatz im Screendesign geeignet ist.

online-colour-tool-colorhexa


ColorHexa im Einsatz am Beispiel des hahnsinn-Blautons #34bce7

ColorHexa


Spielerisch Farbkombinationen finden

color.hailpixel ist ein Werkzeug mit dem sich schnell und intuitiv Farbkombinationen erstellen lassen.

Es muss einfach nur die Maus hin- und herbewegt werden. Gefällt ein Farbton, reicht ein Klick und dieser ist gesichert und die nächste Farbe kann hinzugefügt werden.

Ein schönes Spielzeug, um sein Gefühl für harmonische Farbkombinationen zu schulen:

color.hailpixel.com

Halbe Minute „Arbeit“ und schon ist eine nette Farbkombi fertig und wartet auf ihren Einsatz in einem Screendesign.


color.hailpixel


Farbkombinationen aus Bildern

Es ist eine schon lange bewährte Methode, um schöne Farbkombinationen zu erzeugen:
Aus Bildern werden Farbtöne extrahiert.

Der Color Thief liefert diese Methode per einfachem Drag ‘n‘ Drop an. Bild reinziehen und fertig:

color thief

Instagram-Bild genommen und durch den Color Thief gejagt. Fertig ist eine nette neue Farbkombination.


Color Thief


Farbkombinationen aus Webseiten

Web Colour Data liefert von vorhandenen Webseiten einen Überblick über die eingesetzten Farbtöne. Hat man also eine Webseite, die einem gut gefällt, zeigt dieses Tool die exakten Farbwerte an:

webcolourdata

So sehen die WordPress.com-Farben aus.


Web Colour Data


Typografie-Tools

Neben den Farbtönen ist die Textgestaltung elementarer Bestandteil des Screendesigns und hauptverantwortlich für die Grundvoraussetzung einer Webseite: Die Lesbarkeit.

Textgestaltung testen

Der Typetester hilft verschiedene Schriftarten, -größen, -farben, Zeilenabstände und vieles mehr auszuprobieren und zu finden.

Vielfältige Einstellungsoptionen überzeugen bei diesem Typo-Tool und jede Veränderung wird sofort angezeigt. Besonders spannend ist, dass sich verschiedene Textgestaltungen hier nebeneinander ausprobieren und antesten lassen.

Schön ist, dass sich bei den Schriftarten auch die Google und Typekit Webfonts auswählen lassen.

typetester

Zwei beliebte Alternativen zu Arial oder Helvetica: Die „Proxima Nova“ und „Open Sans“ im Vergleich.


Typetester


Sonderzeichen kopieren

Immer wieder werden unterschiedlichste Sonderzeichen gebraucht. Statt komplizierte Tastaturkürzel einzugeben, können bei Copy Past Character diese einfach per Mausklick kopiert werden:

copypastecharacter

Copy Past Character


PX zu EM umrechnen

Bei PX to EM lassen sich Pixelwerte zu EM-Werten (oder eben REM-Werten) umrechnen. Dafür braucht es nur einen Bezugswert (standardmäßig 16 Pixel als Basisschriftgröße):

pxtoem

PX to EM


Bilder-Tools

Inzwischen gibt es jede Menge Sammlungen von frei einsetzbaren Bildern. Hier lässt sich kaum noch der Überblick wahren. Eine Seite, die dabei helfen kann, ist Stock Up, die aus 26 Foto-Webseiten über 9.000 Bilder im Fundus haben. Netterweise sind diese auch kategorisiert und lassen sich somit auch durchsuchen:

Free Stock Photos

stock-up

Viele viele bunte Bilder.


Stock Up


Platzhalter-Tools

Design und Umsetzung (sollen) stehen, Inhalte sind aber nicht nicht da – ist leider kein Einzelfall.
Für solche Fälle – als Notlösung 😉 – gibt es Platzhalterinhalte.

Nette Bildplatzhalter

Unsplash ist eine beliebte Seite für frei einsetzbare Bilder. Mit Hilfer der Seite Unsplash – Placeholders Images kann man diese als Platzhalterbilder auf der eigenen Webseite einbinden. Einfach einen Code à la https://unsplash.it/200/300 einbauen, fertig.

unsplash.it
Unsplash It


Lorem Ipsum in Bildern

Lorem Ipsum kennt wohl jeder. lorempixel ist das bildliche Gegenstück. Es lassen sich Größe der Blindbilder definieren, dazu die Motivrichtung und ob farbig oder in Graustufen. So könnte ein Beispielcode aussehen: http://lorempixel.com/400/200/sports/action/

lorempixel
lorempixel


Blindtextgenerator

Neben Bildern werden auch sogenannte Blindtexte immer wieder gebraucht. Der Klassiker, den keiner mehr sehen kann und will ist „Lorem Ipsum…“, was einfach schon daher ungeeignet ist, dass es meistens recht kurze lateinische Wörter sind, die der Länge typischer deutscher Fachbegriffe, wie sie auch auf Webseite immer wieder vorkommen, nichts zu tun haben.

Der Blindtextgenerator bietet eine nette Auswahl an verschiedenen Blindtexten an. Und ist es nicht innerlich ein bisschen befreiend, wenn man dem Kunden solche Texte auf der Webseite „präsentieren“ kann:

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.

blindtextgenerator

blindtextgenerator


Blindtextgenerator


Webdesign-Tools – Die einzig wahre Sammlung

Das waren elf hilfreiche Webdesign-Tools, die nicht nur Webdesigner und Webentwicklern hilfreiche Dienste leisten können.

Aber Moment, elf Tools? In der Überschrift steht was von zwölf…

Richtig aufgepasst!
Das waren zwar schon eine Menge Tools, aber natürlich noch nicht alle Webdesign-Tools!

Für diejenigen, die den Hals an Online-Werkzeugen nicht voll genug bekommen können oder jetzt so angefixt sind, dass sie noch mehr Input wollen oder die noch mehr Unterstützung gebrauchen können, habe ich noch was, das zwölfte Tool!

Diesen Beitrag habe ich zum Anlass genommen, die – Achtung: subjektiv – besten Tools (die oberen elf plus viele weitere) in einer Gesamtübersicht zu sammeln und leicht bedienbar zentral zur Verfügung zu stellen:

Webdesign Tools

Hier findest du kompakt, (fast) alles was ein Webdesigner in seiner täglichen Arbeit an Gestaltungs-Tools benötigt.

Webdesign Tools »

Falls du noch Anregungen oder weitere hilfreiche Tools kennst, die ich hier nicht erwähnt habe, bzw. in der Sammlung fehlen, dann lass es uns in den Kommentaren wissen.


Dieser Artikel ist ein Beitrag zu Blogparade Deine Top-Online-Tools #toolparade von Dani Schenker bei zielbar.de.

Weitere spannende Beiträge zur Blogparade sind:
20 Tools für die effektive Content Produktion, Promotion & Erfolgsmessung
Online Tools für erfolgreiche Content-Marketer und Freelancer

Autor:
Martin Hahn ist der Gründer von hahnsinn – Büro für Design & Webentwicklung mit Sitz in Leipzig und Frankfurt a.M. Er ist Fachbuchautor, Dozent, Blogger und betreibt das Webdesign Journal, einen Fachblog rund um Webdesign-Themen.

9 Kommentare Schreibe einen Kommentar

  1. Pingback: Aufruf zur Blogparade: Deine Top-Online-Tools #toolparade

  2. Lieber Martin,

    ich wollte eigentlich nur schauen, wer da auf meinen Beitrag verwiesen hat, als ich auf deine Seite stieß, aber jetzt muss ich feststellen, dass ein „nur einmal schauen“ deiner Tool-Zusammenstellung nicht gerecht wird. Wow! So viele geniale Tools auf einen Fleck – vielen Dank!

    Es stimmt, ich brauche diese nicht so oft, aber da ich meine Fühler immer wieder Richtung Webdesign ausstrecke und ich mit dem Gedanken spiele mich hier weiterzubilden, werde ich deinen Beitrag auf alle Fälle bookmarken.

    Liebe Grüße aus Wien,
    Ivana

    Antworten

    • Hallo Ivana,
      danke für Deinen Kommentar. Freut mich, wenn Dir das ein oder andere Tool helfen wird…

      Viele Grüße
      Martin

  3. Hallo Martin,
    ganz herzlichen Dank für diese ungewöhnliche Toolsammlung, die sich von den „üblichen Verdächtigen“ deutlich abhebt. Ich habe heute kurz vor Toresschluss selbst einen Beitrag zur Toolparade veröffentlicht und wühle mich gerade durch die verlinkten Beiträge. Fantastisch, was es alles zu entdecken gibt, selbst wenn man glaubt, einen guten Überblick zu haben!
    Beste Grüße
    Birgit

    Antworten

    • Hallo Birgit,
      besten Dank und Gruß zurück
      Martin

  4. Ich muss mir wohl angewöhnen, Artikel erst bis zum Ende zu lesen, dann hätte ich mir das Notizen machen zu deinen Tooltipps erspart! 😉

    Wir machen eigentlich eher Text-Content, aber deine Tool-Übersicht finde ich sehr hilfreich, danke!

    Antworten

    • Hallo Patrick,
      ja, zu Ende lesen kann sich manchmal lohnen…

  5. Hallo,

    danke für die hilfreiche Toolsammlung. Einige Tools kannte ich schon, wie zum Beispiel den Blindtextgenerator. Um Farbharmonien zu generieren kannte ich nur den Adobe Kuler, jedoch sind diese Farbtools, wie Color Hexa, gute Alternativen.

    Liebe Grüße

    Eileen

    Antworten

    • Hallo Eileen,
      freut mich, dass du noch ein paar interessante Tools finden konntest.
      Gruss
      Martin

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.