Tools und Ressourcen für Webdesigner Die Dir das Leben einfacher machen.
Hier findest du Tools, Software und Webseiten, die Dir das Leben als Webdesigner sehr viel einfacher machen. Angefangen bei der Auswahl deiner Farbpalette, über die Auswahl der Typo für dein Webprojekt, bis hin zur Vermaktung deiner Webseite. Mit dieser Webdesign Ressourcen Liste hast du alle wichtigen Tools im Überblick.
Web Design und Layout
Web Development
-
Webfonts und Typografie
-
Templates
-
E-Mail Newsletter
-
Browser Tools
-
Icons
-
Tools und Software
-
Blindtext und Platzhalter
SEO & Content
Webdesign Ressourcen für Deine perfekte Farbpalette.
Farben und Muster
Farbpaletten, Kombinationen und Inspiration
Adobe Color
Eines der umfangreichsten Tools um Farbkombinationen zu erstellen, Farbpaletten zusammenzustellen oder sich inspirieren zu lassen. Farben können aus einem Bild extrahiert werden. Farbkombinationen können nach Farbharmonie Regeln wie: Ähnliche Farbe, Monochromatisch, Triade, Komplementär, Zusammengestzt, Schattierung, oder Benutzerdefiniert generiert werden. Um deine Farbpalette zu speicher musst du dich bei der Creativ Coud anmelden.
WebFX Online Farbwähler
Online Tool um Farben auszuwählen und eine Farbpalette zusammenzustellen. Entweder als Komplementär Farben, Triade, Tetrade, oder Analog.
Color Hex
ColorHexa.com is a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes).
colorschemer
Online Tool mit Farbpicker um HEX, RGBA Werte herauszufinden.
coolors
Erstellt Random Fabkombinationenen. Viele Einstellmöglichkeiten. Export deiner Farbpalette ist möglich. Farben aus Bildern extrahieren ist möglich. Viele Farbpaletten als Inspiration sind anzusehen und auch zu importieren. Integration mit Photoshop und Illustrator ist möglich.
0to266
Online Tool um HEX Code – Farbabstufungen anzeigen zu lassen.
Colorlisa
Farbpaletten von Kunstwerken berühmter Künster. Eine gute Inspirationsquelle die ständig erweitert wird.
CSS Farbverläufe
UI Gradients
Farbverläufe mit HEX Wert, und als CSS Code anzeigen lassen.
CSS Gradient
Online Tool um Farbverläufe zu erstellen und als CSS Code herunterzuladen. Farbverläufe aus Bildern sind möglich.
Pattern, Muster und Raport Muster
Plain Pattern
Online Tool von Kenneth Cachia um Raport Muster zu erstellen. Upload einer SVG Datei aus der ein wiederholendes Muster erstellt wird. Download des erstellen Musters als PNG Datei.
Heropattern
Online Tool zur Mustergenerierung. Möglichkeit die Hintergrund und Vordergrund Farbe zu definieren. Ausgabe als CSS Stil oder als SVG Image.
The Pattern Library
Muster und Hintergründe zum kostenlosen Download.
Webdesign Ressourcen für wie Icons und Iconfonts.
Icons & Iconfonts
Iconbundles, Icons & Iconfonts – kostenlos oder premium
Iconfinder
Riesige Auswahl an hochwertigen Icons und Iconsets aus den unterschiedlichsten Bereichen.
The Noun Projekt
Umfangreiche und vielseitige Icons. Nach der Anmeldung ist der Download in der Basisversion der Icons in Schwarz möglich. Entweder als PNG oder SVG. In der Pro Version ist auch eine Anpassungg der Icons möglich. Eine Icon Font ist ebenfalls vorhanden.
Font Awsome
Sehr bekannte und umfangreiche Icon Font die auch als Webfont einsetzbar ist.
Font Awsome PSD Plugin
FontAwsome als PSD Plugin für Photoshop CC
Iconmonstr
Große Auswahl an Icons, Iconsets sowie einer Iconfont.
Flaticon
Eine der größten Datenbanken für Icons und Icon Sets.
weloveiconfonts
Free und OpenSource Icon Font Hosting.
IconStore
Fontello
Erstelle dir aus eigenen oder bereits vorhandenen ( wie Font Awsome oder Entypo ) Icons deine eigene Icon Font als Download.
Iconizr
Erstellt aus deinen SVG Dateien ein CSS Icon Kit.
Fonts & Typografie
Schriftanbieter, Kostenlose Schriften, Inspiration, Schriftkombinationen
Adobe Fonts
Unbegrenzte Schriftarten.
Wählen Sie frei aus Tausenden von Optionen.
Keine Extrakosten.
Alle Schriftarten sind Teil Ihres Creative Cloud-Abonnements.
Bereits lizenziert.
Sämtliche Inhalte hier sind zur privaten oder kommerziellen Nutzung freigegeben.
Fontspring
Umfangreiches Angebot an hochwertigen Schriften.
Hype for Type
Myfonts
Fonts.com
thedesignersfoundry
Fontshop
Linotype
Kostenlose Schriften
FFonts
Fontsquirrel
DaFont
Google Fonts
Fontspace
Schriften Verwaltung
FontBase
Kostenloses Programm zur Schriftenverwaltung
RightFont
FontExplorer X
Extensis Suitecase Fusion
Typografie Tools
PX to EM
Hilfreiches Tool zum Umrechnen von Pixeln in Em, Punkt oder Prozent
WhatTheFont
Finde heraus mit welcher Schrift du es zu tun hast.
CSS Font Stack
Websichere Fonts nach Betriebssystem
Typetester
Online Typografie Design Tool.
Fontjoy
Online Tool für Schriftkombinationen
Font Playground
online mit Schriften und Schriftkombinationen spielen, inspiration finden und als CSS ausgeben lassen.
fonts in use
Webdesign Ressourcen für kostenlose Bilder
Bilder & Grafiken & Illustrationen
Kostenlose Anbieter für Fotos, Grafiken und Illustrationen
Unsplash
Sehr viele hochwertige und hochauflösende Bilder. Alle Bilder sind unter der Creative Commons Lizenz CC0 und somit frei nutzbar und editierbar, egal ob kommerziell oder privat.
Pexels
Umfangreiche Bilddatenbank für Fotos und Grafiken. Alle Bilder sind unter der Creative Commons Lizenz CC0 und somit frei nutzbar und bearbeitbar, egal ob kommerziell oder privat.
Pixabay
Sehr Umfangreiche Sammlung von hochwertigen Stockfotos, Illustrationen, Vektorgrafiken und Videos. Alle Inhalte sind unter der Creative Commons Lizenz CC0 und somit frei nutzbar und bearbeitbar, egal ob kommerziell oder privat.
Stocksnap
Frei nutzbare und kostenlose Stockfotos. Alle Inhalte sind unter der Creative Commons Lizenz CC0 und somit frei nutzbar und bearbeitbar, egal ob kommerziell oder privat.
Picspree
Frei nutzbare und kostenlose Stockfotos. Alle Inhalte sind unter der Creative Commons Lizenz CC0 und somit frei nutzbar und bearbeitbar, egal ob kommerziell oder privat.
Stockvault
Frei nutzbare und kostenlose Stockfotos. Alle Inhalte sind unter der Creative Commons Lizenz CC0 und somit frei nutzbar und bearbeitbar, egal ob kommerziell oder privat.
unDraw
vecteezy
Illustrationen und Grafiken. Free und Premium.
Premium Anbieter für Fotos, Ilustrationen und Grafiken
Adobe Stock
Adobe Stock hat ein sehr hochwertiges und umfangreiches Angebot an hochwertigen Fotos, Vektorgrafiken, Illustrationen und Videos. Templates ( Bearbeitbare Vorlagen ) in den Bereichen Photoshop, Illustrator, InDesign und Motion Graphics sind ebenfalls erhältlich. Der Kauf kann über ein Credit Paket oder ein Monatsabbo erfolgen
Envato Market
Sehr große Auswahl an Professionellen Fotos, Grafiken, Illustrationen, Vektorgrafiken, Icons, 3D Szenen, Musik und Sound Dateien, Videos, Templates und Mockups. Direktkauf und Monatsabbo sind möglich.
Dreamstime
Dreamstime ist einer der größten Stockfotografie Gemeinschaften der Welt. Mit über 106 Million Stock-Fotos ist die Auswahl riesig. Dreamstime bietet Stock Fotos, Illustrationen und Grafiken, Vektorgrafiken, Redaktionelle Bilder, Videos. Sound und Audio. Aber auch eine Rubrik mit kostenlosen Bildern.
Getty Images
gettyimages bietet eine große Bandbreite an Fotos, Videos und Sounds an. Vor allem im Editorial Bereich gibt es eine umfangreiche Auswahl. Einzeldownloads oder Paketpreise sind möglich.
Shutterstock
Das Angebot von Shutterstock umfasst: Fotos, Vektorgrafiken, Illustrationen, Videos, Musik und Sound, sowie ein große Bandbreite an redaktionellen Bildern. Shutterstock bietet über Erweiterungen die Möglichkeit der Einbindung in Software Programme wie Final Cut Pro, Adobe Creativ Cloud Anwendungen, Sketch oder Microsoft Power Point.
IStock
IStock aus der Getty Images Familie bietet Stockfotos, Grafiken und Illustrationen, Vektorgrafiken, Sound & Musik oder Videos an. Der Kauf findet über Credit Pakete oder als Abbo statt.
Design, Layout, Styleguides, Bildbearbeitung
Bildbearbeitung – Online und Offline Tools zur Bearbeitung, Kompression oder Retusche von Pixel oder Vektorgrafiken
Styleguides
Stylify Me
Mit diesem Tool ist es möglich die Farbpalette, Schriften, Bildgrößen u.a. von beliebigen Webseite zu erfassen und die Farbwerte in einer Datei herunterzuladen.
Styletile
Styletile Template zum Download im Photoshop Format. Farben, Schriftkombinationen, Buttons u.ä. lassen lassen sich mit diesen Vorlagen gut zusammenstellen. Ideal um Kunden einen ersten Eindruck zu vermitteln.
Zurb Playground
Responsive Zeichenvorlagen zum Download und Ausdrucken.
Software zur Bildbearbeitung & Vektorbearbeitung
Method Draw
Kostenlos online Zeichen und Text Tool
Canva
Vectr
Vectr is a free graphics software used to create vector graphics easily and intuitively. It’s a simple yet powerful web and desktop cross-platform tool to bring your designs into reality.
Sketch
Photoshop
Illustrator
Wireframing & Prototyping
Balsamic Mockups
Marvel App
Prototyping, Wireframing, Design, Sketch integration via Plugin
Invision
App, Web Tool für Design & um interaktive Prototypen zu erstellen. Im Team arbeiten dank Cloud. Kompatibel mit Sketch, Photoshop
Origami
Online Toos
Pagelayers
Erstellt aus einer Webseite eine PSD Datei.
TinyPNG für Photoshop
Bilder Komprimieren
TinyPNG
Kostenloses Online Komprimierung Tool für PNG oder JPG Daten. Mit diesem Tool kann die Dateigröße ohne nennenswerte Qualitätsverluste verringert werden.
Imagecompressor
Dieser Online Bild Optimierer verwendet eine intelligente Kombination der besten Optimierungs- und verlustbehaftetsten Kompressionsalgorithmen um JPEG und PNG Bilder auf die minimal mögliche Größe zu verkleinern, während das erforderliche Qualitätsniveau beibehalten wird.
Platzhalter für Bilder & Blindtexte
meettheipsums
lorempixel
Fakeimg
Webentwicklung
HTML & CSS Tools
css3generator
Border Radius, Border Shadow, Gradients usw. als CSS ausgeben lasse.
css3maker
Border Radius, Border Shadow, Gradients usw. als CSS ausgeben lasse.
gradient editor
Farbverläufe ertellen und als CSS anzeigen lassen.
HTML Editoren
Aptana
Brackets
Ein kostenloser moderner, quelloffener Code-Editor, der Webdesign versteht.
Espresso
HTML & CSS Lernen
selfhtml
Grids und Bootstrap
Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Foundation
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!
getskeleton
Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often more than enough to get started.
Startbootstrap
Bootstrap Themes, Templates und Snippets
960 Grid System
gridcalculator
Raster ausrechnen lassen und als .AI, .PSD, oder PNG runterladen.
Responsivegridsystem
Raster ausrechnen lassen und HTML & CSS erhalten.
FTP Tools
FileZilla
Cyberduck
Checklisten
Webseiten Validieren, Pagespeed, usw.
W3C Markup Validation
Das Tool um HTML validieren zu lassen.
W3C CSS Validation
Das Tool um CSS validieren zu lassen.
Web Developer Addon
Speedtest
Teste die Geschwindigkeit deiner Webseite
Responsive
Viewportsizes
Liste mit Bildschirmgrößen von mobilen Geräten
Quirktools
Teste deine Webseite in verschiedenen Bildschirmgrößen.
Like this article?
Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest
Inspiration
Die neuesten Artikel:
Design Habitat versteht sich als Magazin für Designer. Wir suchen für dich immer nach den besten Inspirationsquelle.