Webdesign & Ressourcen

Entdecke mehr als 300 Webdesign Tools und Ressourcen 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 300 hilfreichen Webdesign-Tools. Alle händisch geprüft und selektiert. In vielen Projekten auf Herz und Nieren getestet.

Development-Tools – Webdesign Journal

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

Grid & Frameworks

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

 

JavaScript

JavaScript lernen:
JavaScript in 14 minutes

 

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 – Webdesign Journal

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
Color Thief

 

Accessibility / Barrierefreiheit

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:
 

 

Typo-Tools – Webdesign Journal

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

 

Typografie & Schriftarten entdecken und zusammenstellen:

Font Pairing
Archetype, Digital Typography Design Tool
FontCDN
TypeWonder
Canva Font Combinations
FontPair

Bilder- & Foto-Tools – Webdesign Journal

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:

Illustration- & Icon-Tools – Webdesign Journal

Illustration- & Icon-Tools

Kaum noch eine Website, die ohne Icons auskommt. Es gibt ein paar typische icon-Motive, aber damit es nicht wie Einheitsbrei aussieht, ist Feinarbeit notwenig. Diese Tools helfen Dir dabei. Dazu gibt es Vorlagen für Illustrationen, die das Salz in der Website-Suppe sein können.

Illustrationen-Downloads

Schöne Illustrationen als Vorlagen und Download:
Ouch – Free Vector Illustrations
unDraw Illustrations
Illustration Gallery
Free Illustrations
Fresh Folk

 

Iconfonts

Iconfonts lassen sich wie Webfonts einbinden und einsetzen:
Font Awesome
Streamline Icons

Showcases & Galerien-Tools – Webdesign Journal

Showcases & Galerien

Was wäre unsere Arbeit ohne das sich inspirieren lassen durch gute Websites oder das regelmäßige Recherchieren nach passenden Anregungen und Vorlagen. Genau hierfür gibt es Webdesign-Galerien – fast – wie Sand am Meer. Die besten Website-Showcases und Galerien davon findest du hier:

Inspirations-Tools – Webdesign Journal

Inspiration-Seiten & -Tools

Als Designer und Kreativer sind wir dankbar für Inspirationen aller Art. Dazu gehören sicherlich vor allem Webdesing-Galerien, aber auch Anregungen wie Grafik-Designs, Brandings, Logos usw. Hier eine Übersicht hilfreicher Inspirationstools:

Brandings

Branding Journal

Grafik-Design / Logo

Logobook

Code

Codepen
Design- & Styleguide-Tools – Webdesign Journal

Design- & Styleguide-Tools

Um Design-Styleguides zu gestaltung, zu definieren un zu präsentieren, gibt es einige Tools:
Pattern Lab
Style Tiles
Website Style Guide Resources
Stylifyme
Frontify

Texturen- & Pattern-Tools – Webdesign Journal

Texturen- & Patterns-Tools

Für Hintergründe immer gut zu gebrauchen. Die folgenden Tools bieten einige Texturen und Pattern zur Benutzung an:

Subtlepatterns
The Pattern Library
TextureKing
Seamless Pattern Maker
Hero Patterns

SEO-Tools – Webdesign Journal

SEO-Tools

Der beste Inhalte nützt wenig, wenn er nicht suchmaschinenoptimiert ist. Diese Tools helfen deinen Inhalt und deine Website an sich SEO-friendly umzusetzen:

Text-Tools – Webdesign Journal

Text-Tools

Daran denkt man vielleicht nicht als erstes bei Webdesign. Aber die Arbeit mit Texten gehört ja zum täglich Brot. Daher helfen dir die folgenden Text-Tools dabei, deine Texte auf korrekte Rechtschreibung zu überprüfen (bitte jetzt keine Kommentare, ich solle das Webdesign Journal diesbezüglich auch einmal checken ;). Dazu kommen Platzhaltertexte (wenn der Kunde mal wieder nicht schnell genug liefert) und Vorlagen für Sonderzeichen:

Templates & Ressourcen-Tools – Webdesign Journal

Templates- & Ressourcen-Tools

Website-Galerien hatten wir weiter oben, ebenso Texturen und Inspirationstools. Das kann doch nicht nicht alles sein? Richtig! Hier kommen die fehlenden Templates- und Ressourcen-Tools, die jede Menge Input, Vorlagen und Inspirationen liefern werden. Egal, ob du Photoshop-, Visitenkarten- oder HTML-Templates oder was auch immer suchst:

Software-Tools – Webdesign Journal

Software-Tools

Hier kommen die kleinen und manchmal auch großer Helferlein, die unsere Webdesigner-Arbeit erleichtern. Diese Software-Tools sollten auf deiner Liste nicht fehlen. Ach quatsch, du hast sie jetzt hier im Webdesign Journal:

Video-Tools – Webdesign Journal

Video-Tools

Nicht unsere erste und häufigste Tätigkeit, aber es kann immer wieder mal vorkommen auch bei Videos die Hand anlegen zu müssen. Zum Glück hast due diese Video-Tool-Liste:

Rechtliche Tools – Webdesign Journal

Rechtliche Tools

Immer zu gebrauchen:

Noch mehr Webdesign-Tools findest in dieser Sammlung:

 

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.

Bewertungsergebnis: 4.9 / 5. | Anzahl der Bewertungen: 138

Scroll to Top