Webdesign | Tools & Ressourcen

Development-Tools

Entwicklungswerkzeuge für Webseiten.

Development-Tutorials

Codrops

Codepen

HTML

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

Die Seite für CSS-Präfixe:

Should i prefix

Extrahiert CSS-Code aus HTML-Code:

Extract CSS

CSS3-Generatoren

CSS3 Generator

CSS Button Generator

Gradient Editor

CSS-Animationen/-Effekte

Use Animations

Animista

CSS Effects Snippets

Easing Functions Cheat Sheet

Responsive Webdesign

This Is Responsive – Patterns and Resources

Media Queries – Responsive Gallery

Responsive Navigation

CSS-Grid

cssgr.id

CSS Grid Generator

Griddy

Gridley

Grid & Frameworks

Bootstrap

Foundation

Pure CSS

Grid Calculator

Responsive Gridsystem

Get UI Kit

JavaScript lernen

JavaScript in 14 minutes

Minifier/Compressor

HTML Minifier

Minifier

JavaScript/CSS/HTML Compressor

JavaScript Compressor

Code Compressor

CSS Compressor

Gzip-Kompression testen

Pagespeed/Performance

Pingdom

Pagespeed Insights

Webpagetest

Pagespeed

Weitere hilfreiche Development-Tools:

caniuse.com

Webdesign Cheat Sheets

browsershots.org

webbkoll.dataskydd.net/en

Farben-Tools

Alles was Farben betrifft.

Farbpaletten entwerfen:

ColorHexa

Colormind

Colordot

Adobe Color Create

Colors interactor

Colourcode

ColorMe

Coolors.co

Color Thief

Accessibility / Barrierefreiheit

Farben auf Barrierefreiheit checken:

Contrast Ratio

Barrierefreiheit – Test

WAVE Web Accessibility Evaluation Tool

Color.review

Accessible color palette builder

Randoma11y

Color Safe

Contrast Checker

Vorgefertigte Farben & Farbpaletten entdecken:

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:

shade

Blend

CSS Colour Gradients

CSS Gradient

Farbverläufe entdecken

Grabient

Weitere hilfreiche Farb-Tools:

Farbwerte aus CSS-Dateien extrahieren:

CSS Prism

Typo-Tools

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:

¿©hara¢ter(s)!

CopyPasteCharacter

Weitere hilfreiche Typo-Tools:

CSS Font Stack

Font Squirrel

Wordmark.it

WhatTheFont

PXtoEM

Bilder- & Foto-Tools

Pools & Werkzeuge für die Bildbearbeitung.

„Freie“ Bilderquellen:

Übersicht über Anbieter lizenzfreier Fotos:

Unsplash

Stock Up

Pixabay

StockSnap.io/

Pexels

Visualhunt

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:

Cool Backgrounds

remove.bg

Illustration- & Icon-Tools

Grafikressourcen.

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

Font Awesome

Streamline Icons

Avatare/UI Faces

UI Faces

Personas Avatar Generator

Get Avataaars

Generated Photos

SVG

SVG Sprit

Get Waves

Blobmaker

Logos

Download Vector Logos of famous Brands

Showcases & Galerien

Gute Beispiele.

Websites

Siteinspire

Awwwards

httpster.net/

CSS Winner

The Best Designs

Designmunk

UIJar

Minimal Gallery

The Gallery

Pages.xyz

SiteSee

Interfaces.pro/

Mediaqueri.es/

Typo

Typewolf

Typ.io/

Landing-Pages

Land Book

Lapa Ninja

One-Pager

OnePageLove

Portfolios

BestFolios

E-Commerce

ecomm.design/

Wireframes

WireframeShowcase

E-Mails

Email Gallery

HTMl Email Designs

Really Goode Mails

User Interfaces (UI)

www.uisources

pttrns

collectUI

UIMovement

Little Big Details

Inspiration-Seiten & -Tools

Eindrücke von anderen Projekten erhalten.

Inspirations-Portale

Behance

Dribbble

Pinterest

Niice

TheInspirationGrid

Brandings

Branding Journal

Logobook

Code

Codepen

Design- & Styleguide-Tools

Pattern Lab

Style Tiles

Website Style Guide Resources

Stylifyme

Frontify

Texturen- & Patterns-Tools

Subtlepatterns

The Pattern Library

TextureKing

Seamless Pattern Maker

Hero Patterns

SEO-Tools

Google SERP Simulator

Keywordtool

W-Fragen Tool

Ubersuggest

Text-Tools

Texte schreiben

BlaBlaMeter

Online Rechtschreibprüfung/

Onlinekorrektor

Wie sagt man noch?

Textanalyse

Platzhalter

Meet the Ipsums

Blindtextgenerator

Zeichen

Get Emoji

Emojipedia

CopyPasteCharacter

Copychar

HTML Sonderzeichen

Templates- & Ressourcen-Tools

Vorlagen im Netz

Template-„Portale“

Themeforest

Creativemarket

Pixeden

Graphicpear

inkd

„Freebies“-/Design-Ressourcen

Freebiesbug

UIspace

Pixeden – Free Graphics

Medialoot – Free Design Resources

Pixelbuddh Freebies

Freepik

Pixelify

Graphic Burger

PSD / Grafiken

PSD Repo

Free Design Resources

Mockups

Lstore Graphics

Mr. Mockup.com – Freebies

Mockup Hunt

Mockups Design

PlaceIt

Mockup Zone

Mockup Photos

Original Mockups

Website-Templates

HTML5 Up

One Page Love – Templates

Powerpoint

Glide – Free PowerPoint Template

Software-Tools

Bildbearbeitung

Grafik- & Bildbearbeitung im Browser

Canva

Fotor

Pixlr

Hilfreiche Software

Shortcuts Design

smallPDF

Passwort Generator

Mail to Link

Paper Sizes

Dateien konvertieren

Cloud Convert

Free file Convert

Online Convert

PDF Resizer

Video-Tools

Pexels Videos

Coverr

Videezy

Videvo

Vidsplay

Mixkit

Rechtliche Tools

Datenschutz Generator

Analyze | Webbkoll

Artikel-Themen

Business-Entwicklung

Designwissen

Web-Entwicklung

Inspiration

Ressourcen

Checkliste

Webdesign-Tools

designletter

Webdesign Buch

Gute Beispiele

Galerie der schönsten deutschen Webseiten

Weiterbildung

Online-Kurs

Das erfolgreiche Webdesign-Business

Webdesign Survival Kit