15 hilfreiche Tools für Web Designer und Web Entwickler

Design

Jeder Web Designer und Web Entwickler benötigt Tools für seine Arbeit. Diese Tools unterstützen Euch bei der Erstellung einer guten individuellen Webseite. Die Suche nach guten Tools kann im Bereich des Web-Designs und der Web-Entwicklung sehr mühsam sein. Es kann viel Zeit kosten die richtigen Tools im Web zu finden. Ich habe ein paar sehr wichtige Tools gesammelt, die ich Euch unten aufgelistet habe. Über einen Klick auf ein Bild, gelangen Sie zu dem entsprechenden Tool.

Wenn Sie ein Tool, was nicht in der Liste zu finden ist, empfehlen können, können Sie es gerne in einem Kommentar erwähnen.

 

BuiltWith Technology Profiler

Google Chrome Erweiterung

BuiltWith Technology Profiler

 

Mit dem BuiltWith Technology Profiler könnt Ihr Euch mit einem Mausklick die Technologien anzeigen lassen, auf denen die Webseite aufgebaut ist.

 

Window Resizer

Google Chrome Erweiterung

windowresizer

 

Über das Window Resizer Icon im Google Chrome Browser könnt Ihr verschiedene Geräte und Desktop Bildschirmgrößen simulieren.

 

ColorPick Eyedropper

Google Chrome Erweiterung

ErweiterungColorPick Eyedropper

 

Mit einer Pipette lassen sich auf einer Webseite verwendete Farben pixelgenau ermitteln.

 

Subtle Patterns

Photoshop Plug-In

Subtle Patterns

 

Schnell und einfach in einer großen Pattern Bibliothek stöbern und mit einem Mausklick den Hintergrund einfügen.

 

infogr.am

Online Tool

infogram

 

In 3 Schritten moderne Charts erstellen und im gewünschten Format downloaden. In der Basic Version stehen über 30 Chart Typen zur Verfügung. Die kostenpflichtigen Pakete bieten weitere tolle Features, die sich aber wahrscheinlich nur lohnen, wenn man sehr häufig Charts erstellen muss.

 

typegenius

Online Tool

Type Genius

 

Findet die perfekte Font Kombination für Euer Projekt. Einfach eine Font auswählen und es wird Euch mindestens eine passende Kombination (Headline und Fließtext) angezeigt.

 

pixel2vector

Photoshop Plug-In

pixel2vector - Photoshop Plugin - Tool

 

Wie der Name des Photoshop Plug-In schon sagt, werden gerasterte Formen in Vektor Formen umgewandelt. Somit erspart Ihr euch das mühsame Nachbauen der gerasterten Form.

 

WhatFont

Google Chrome Erweiterung

whatfont - google chrome erweiterung

 

Ihr habt eine schöne Font auf einer Webseite gesehen, die euch gefällt? Kennt den Namen aber nicht? Kein Problem: Mit Hilfe von WhatFont könnt Ihr mit einem Klick auf die Font den Namen, Font Größe, Zeilenhöhe und Farbcode ausfindig machen.

 

CSSViewer

Google Chrome Erweiterung

cssviewer

 

Einfach mit der Maus über die Elemente der Seite navigieren und Ihr erhaltet alle Informationen zum Style des Elementes.

 

Google PageSpeed Insights

Online Tool

PageSpeed Insights

 

PageSpeed Insights analysiert den Inhalt einer Webseite und erstellt dann Vorschläge zur Verbesserung der Geschwindigkeit dieser Seite.

 

Lorem ipsum Text Generator

Online Tool

loremipsum

 

Der Text Generator generiert Texte nach gewünschter Buchstaben-, Wort-, oder Absatzanzahl. Generiere einfach soviel Lorem Ipsum Text wie du brauchst, kopiere und diesen füge ihn in Dein Layout als vorübergehenden Platzhalter in Dein Projekt ein.

 

Extensis Web Font Plug-In

Photoshop Plug-In

Web Font Plug

 

Mit dem Photoshop Web Font Plug-In können Sie Ihre Webseiten mit den Schriften entwickeln, mit denen Sie später auch „live” gehen werden.

 

GuideGuide

Photoshop Plug-In

GuideGuide

 

Mit GuideGuide schnell und einfach ein individuelles Grid erstellen. Die Hilfslinien lassen sich über Schaltflächen platzieren und ausrichten.

 

Creative Market

Photoshop Plug-In

Creative Market

 

Findet die perfekten Design-Helfer ohne Eure Arbeitsplattform zu verlassen.

 

Dragdis

Online Tool / Google Chrome Erweiterung

Dragdis

 

Sammelt und sortiert Elemente (Bilder, Texte, Videos, URLs, uvm.) von Webseiten die Euch gefallen, einfach per drag&drop. Ihr könnt Ordern mit Freunden teilen und gemeinsam darauf zugreifen.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »


Weitere Artikel von Alexander
Design
Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Landingpages Online Marketing
Conversion Rate mit Videos auf Landingpages erhöhen? Aber klar! Hier sind... Mehr lesen »

Design Landingpages Online Marketing
Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
AdWords

5 Tipps zur Verbesserung der CTR

Update 04/2016   Die CTR (Click-Through-Rate, also die Klickrate) spielt eine große Rolle in... Mehr lesen »
^