Webdesign Tools & 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
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 seconds of code – 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
Animista
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:
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
Farbverläufe gestalten
Tools, um Farbverläufe zu gestalten:
shade
Blend
CSS Colour Gradients
CSS Gradient
Farbverläufe entdecken:
Vorhandene Farbverläufe entdecken:
Grabient
Accessibility / Barrierefreiheit
Farben auf Barrierefreiheit checken:
Contrast Ratio
WAVE Web Accessibility Evaluation Tool
Color.review
Accessible color palette builder
Randoma11y
Color Safe
Contrast Checker
Vorgefertigte Farben & Farbpaletten entdecken:
Wer vorgefertigte Farbkombinationen sucht, findet hier vielfältige Anregungen und Vorlagen:
Colorhunt
Adobe Color Explore
Design Seeds
Multicolr Search
Coolors.co Explore
Material Design Color Palette Generator
Material Design Colors
Tilda Colors
Colordrop
Picular.co
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
Besondere Typo-Zeichen:
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:
„Freie“ Bilderquellen:
Übersicht über Anbieter lizenzfreier Fotos:
Unsplash
Stock Up
Pixabay
StockSnap.io/
Pexels
Piqsels
Imagefinder
Free Nature Stock
New Old Stock
Picjumbo
ISO Republic
Negative Space
Gratisography
DesignersPics
FoodiesFeed
Mazwai
Jeshoots
Picography
Magdeleine
Littlevisuals
Splitshire
IM Free
Kostenpflichtige Bilder-/Stock-Agenturen
Anbieter lizenzpflichtiger Bilder:
Adobe Stock
Photocase
Alamy
iStock
Shutterstock
123RF
Depositphotos
Bilder komprimieren
TinyPNG
Optimizilla – Online Image Сompressor
Kraken.io – Free Online Image Optimizer
Compress JPEG
JPEGmini
Shortpixel – Image Compressor
Bilder-Platzhalter:
PlaceIMG
Fake images please?
LoremFlickr/
lorempixel
Placemat
Weitere hilfreiche Bilder-Tools:
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.
Icon-Galerien
Jede Menge Icon-Vorlagen, Inspirationen und Downloadmöglichkeiten:
FlatIcon
Icons8
IconSVG
Ikonate
GlyphSearch
The Noun Project
SVG Icons
Unicons Icons
Feather Icons
IonIcons
Icon Monstr
Filda Free Icons
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
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:
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:
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- & 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
Der beste Inhalte nützt wenig, wenn er nicht suchmaschinenoptimiert ist. Diese Tools helfen dir den Inhalt und die Website an sich SEO-friendly umzusetzen:
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
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:
Template-„Portale“
Themeforest
Creativemarket
Envato Elements
Pixeden
Graphicpear
inkd
„Freebies“-/Design-Ressourcen
Freebiesbug
UIspace
Pixeden – Free Graphics
Medialoot – Free Design Resources
Pixelbuddh Freebies
Freepik
Pixelify
Graphic Burger
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:
Hilfreiche Software
Shortcuts Design
smallPDF
Passwort Generator
Mail to Link
Paper Sizes
Da das Netz sehr schnelllebig ist – wem erzähle ich das – kann es passieren, dass ein Tool gar 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 auch mit dabei.
Am schnellsten per Mail: martin@webdesign-journal.de
Bewertungsergebnis: 4.9 / 5. | Anzahl der Bewertungen: 139