Webdesign Tools & Ressourcen

Alle wichtigen auf einer Seite

Entdecke mehr als 180 Webdesign Tools aus unterschiedlichen Bereichen
wie Development, Farbe, Typografie, Fotos, Freebies Inspirationen und viele mehr…

Das Netz ist voll von Webdesign-Tools. Unzählige Webseiten bieten zu allem möglichen Herausforderungen und Problemen Unterstützung an. Schwer da noch den Überblick zu bewahren, kommen doch gefühlt täglich neue Tools dazu. Und es gibt ständig Webdesign Blogs, die diese neuen Tools auch regelmäßig in langen Artikeln vorstellen.

Um bei diesem unüberschaubaren Angebot aber noch den Überblick zu bewahren und die Spreu vom Weizen zu trennen, habe ich diese Tool-Sammlung erstellt. Eine – sicherlich auch subjektive – Auswahl von über 180 hilfreichen Webdesign-Tools. Alle händisch geprüft und selektiert. In vielen Projekten auf Herz und Nieren getestet.

Development-Tools

Die Web-Entwicklung ist ein großes Feld. Mit Templates und Frameworks gehen viele Aufgaben schnell(er) von der Hand. Aber selbst HTML und CSS, eigentlich recht schnell zu erlernen, haben ein großes Spektrum an Aufgaben und Fähigkeiten. Die folgenden Tools erleichtern die Frontend-Webentwicklung für jeden Webentwickler und Webdesigner.

Development-Tutorials

Viele nützliche Tutorials und Code-Schnipsel, vor allem für HTML und CSS, aber auch darüber hinaus bieten:
Codrops
Codepen

 

HTML

HTML ist die Basis alles Websites! Validiere deine Websites mit:
HTML Validator

Überblick über die HTML-Elemente und deren Eigenschaften:
HTML Cheatsheet
HTML Reference

HTML-Elemente/-Code kopieren:
HTML Snippets
HTML Ipsum

Sonderzeichen in HTML codieren:
HTML Sonderzeichen

Ein Flexbox Generator:
Flexy Boxes

 

CSS

Optisch formatieren mit CSS. Validiere deinen CSS-Code:
CSS Validator

Überblick über die CSS-Elemente und Eigenschaften:
CSS Referenz
CSS Referenz
30 Sekunden CSS

Die Seite für CSS-Präfixe:
Should i prefix

Extrahiert CSS-Code aus HTML-Code:
Extract CSS

 

CSS3-Generatoren

Mit CSS3 lassen sich tolle Effekte erzeugen, diese Tools helfen dir dabei:
CSS3 Generator
CSS Button Generator
Gradient Editor

 

CSS-Animationen/-Effekte

Vorlagen und Tools, um CSS-Animationen zu erstellen:
Use Animations
CSSFX
Animista
CSS Effects Snippets
Easing Functions Cheat Sheet

Responsive Webdesign

RWD Patterns, Showcases und Responsive Navigationen:
This Is Responsive – Patterns and Resources
Media Queries – Responsive Gallery
Responsive Navigation

 

CSS-Grid

Moderne Layouts lassen sich mit CSS Grid erstellen, diese Tools helfen dir dabei:
cssgr.id
CSS Grid Generator
Griddy
Gridley

 

JavaScript

JavaScript lernen:
JavaScript in 14 minutes

Grid & Frameworks

Raster/Grids sind die Basis vieler Webdesigns:
Bootstrap
Foundation
Pure CSS
Grid Calculator
Responsive Gridsystem
Get UI Kit

 

Minifier/Compressor

Code zu minimieren, um Speicher zu sparen, geht mit folgenden Tools:
HTML Minifier
Minifier
JavaScript/CSS/HTML Compressor
JavaScript Compressor
Code Compressor
CSS Compressor

 

Pagespeed/Performance

Um die Seitengeschwindigkeit zu testen und zu Optimieren, helfen folgende Tools:
Pingdom
Pagespeed Insights
Webpagetest
Pagespeed

 

Weitere hilfreiche Development-Tools:

https://caniuse.com/
Webdesign Cheat Sheets
http://browsershots.org/
https://webbkoll.dataskydd.net/en

Farben-Tools

Ohne Farbe ist alles nichts. Keine Kontraste, keine Texte – alles sprichwörtlich farblos. Die passenden Farbkombinationen für das eigene Projekt zu finden, ist oft gar nicht so einfach. Die folgenden Tools helfen dir aber definitiv dabei.

Farbpaletten entwerfen:

Farbtools, die dir helfen Farbkombinationen zu entwerfen/zu gestalten:
ColorHexa
Colormind
Colordot
Adobe Color Create
Colors interactor
Colourcode
ColorMe
Coolors.co
0to255
Color Thief

 

Vorgefertigte Farben & Farbpaletten entdecken:

Wer vorgefertigte Farbkombinationen sucht, findet hier vielfältige Anregungen und Vorlagen:
Colorhunt
Adobe Color Explore
Design Seeds
Multicolr Search
Web Colour Data
Coolors.co Explore
Material Design Color Palette Generator
Material Design Colors
Colorinspire
Tilda Colors
Colordrop
Picular.co

Farbverläufe gestalten

Tools, um Farbverläufe zu gestalten:
shade
 

Farbverläufe entdecken:

Vorhandene Farbverläufe entdecken:
Grabient
 

Weitere hilfreiche Farb-Tools:

Farbwerte aus CSS-Dateien extrahieren:
 

Accessibility/Barrierefreiheit

Typo-Tools

Neben den Farben ist die Schriftzusammenstellung die größte Herausforderung für Designer. Welche Schriften sind gut lesbar, passen zum Projekt und zur gewünschten Wirkung, welche Schriften lassen sich gut mischen und wo finde ich diese Schriftarten?
So viele Fragen rund um die Typografie. Und so viele Typografie-Tools, die dir hierbei helfen:

Webfonts:

Die beiden größten Webfonts-Anbieter:
Adobe Fonts
Google Fonts

 

Download Schriftarten:

Schriftarten (kostenlos) herunterladen:
Fontsquirrel
Download Fonts
DaFont
Fonts.com

 

Typo-Inspirationen / -Galerien:

Jede Menge Inspirationen für den Einsatz und die Kombinationen von Schriften und Schriftarten:
Typewolf
Typ.io
The web is typography

Bilder-/Foto-Tools

Oft sagt ein Bild ja mehr als tausend Worte. Dafür muss das Bild aber auch gut gewählt und in das Webdesign eingebunden sein. Die folgenden Bildertools helfen bei der Suche, Auswahl und Optimierung der Bilder:

Inspiration-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Design- & Styleguide-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Texturen- / Patterns-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

SEO-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Text-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Templates- & Ressourcen-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Software-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Video-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Rechtliche-Tools

Heute soll es um die Vorstellung einiger sehr nützlicher Tools in Sachen Farbe gehen. Einige kennen vielleicht das ein oder andere Tool um Farbharmonien zu erzeugen. Das Bekannteste ist wahrscheinlich der Adobe Kuler. Aber es gibt noch mehr der überaus nützlichen Helfer im Design-Alltag. Heute stelle ich einige Online-Versionen vor.

Da das Netz sehr schnelllebig ist – wem erzähl ich das – kann es passieren, dass ein Tool nicht mehr aktuell ist. Oder vielleicht kennst Du ein Tool, dass Dich so unfassbar gut bei Deinen Webdesign-Projekten unterstützt hat, dann teile es mir doch mit. Vielleicht ist es dann schon bald hier mit dabei. Per Mail: martin@webdesign-journal.de oder auf der Kontaktseite des Webdesign-Journals.

Hole dir die Webdesign-CHECKLISTE
mit über 90 Checkpunkten für Dein nächstes Projekt &
den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560  Newsletter-Abonnenten an!

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Scroll to Top