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.
ColorHexa im Einsatz am Beispiel des hahnsinn-Blautons #34bce7
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:
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:
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:
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.
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:
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):
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
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.
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/
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
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:
Hier findest du kompakt, (fast) alles was ein Webdesigner in seiner täglichen Arbeit an Gestaltungs-Tools benötigt.
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
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
Hallo Ivana,
danke für Deinen Kommentar. Freut mich, wenn Dir das ein oder andere Tool helfen wird…
Viele Grüße
Martin
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
Hallo Birgit,
besten Dank und Gruß zurück
Martin
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!
Hallo Patrick,
ja, zu Ende lesen kann sich manchmal lohnen…
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
Hallo Eileen,
freut mich, dass du noch ein paar interessante Tools finden konntest.
Gruss
Martin
Hallo zusammen,
vielen Dank für die Auflistung – da werde ich mich bei bedarf mal umsehen! Eine Frage noch: kennt jemand ein gutes Tool zum Abbilden von Living Styleguides? Ich bauer derzeit immer individuelle html Datein – Langfristig wäre aber eine intuitivere Abbildung ganz nett :)
Danke und Gruß,
Chris