Ultimative Link und Ressourcen Sammlung für Webdesigner und Webentwickler

Die besten Ressourcen, Tools und Helfer für Webdesigner und Webentwickler

Startseite » Ressourcen für Designer » Ultimative Link und Ressourcen Sammlung für Webdesigner und Webentwickler

Web Design und Layout

Web Development

SEO & Content

Gib hier deine Überschrift ein

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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.

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

Schriftenverwaltung

FontExplorer X

Schriftenverwaltung

Extensis Suitecase Fusion

Schriftenverwaltung

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

Schriften, Inspiration

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

Illustrationen als SVG Datei.

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

Online Fotobearbeitung

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

Wireframing Tool

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

Prototypen erstellen.

Online Toos

Pagelayers

Erstellt aus einer Webseite eine PSD Datei.

TinyPNG für Photoshop

Bildkomprimierung

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

Blidtextgenerator

lorempixel

Platzhalter für Bilder

Fakeimg

Platzhalter für Bilder

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, Editor für Mac.

HTML & CSS Lernen

selfhtml

HTML, CSS, Editor für Mac.

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

Hilfreiches 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?

Inspiration

Die neuesten Artikel:

Design Habitat versteht sich als Magazin für Designer. Wir suchen für dich immer nach den besten Inspirationsquelle.

Quirktools

Teste deine Webseite in verschiedenen Bildschirmgrößen.

Bleibe immer auf dem Laufenden

Erhalte unseren kostenlosen Newsletter

Über Design Habitat

Design Inspiration

Ressourcen

Artikel

© 2020 All rights reserved

Webdesign von new morning