In diesem Artikel möchte ich dir einige nützliche Tools vorstellen, mit denen du bei deiner Arbeit als Webdesigner oder Webdeveloper Zeit und Aufwand sparen kannst.
CSS Generatoren
Mit CSS lassen sich Layouts oder Effekte super aufbauen. Du musst aber nicht jede Zeile per Hand schreiben. Hier ein paar super Generatoren, mit denen du verschiedene Effekte oder Farbübergänge erstellen und den generierten CSS Code verwenden kannst.
blobs.app
Schöne Blobs, die man als Hintergrundelemente verwenden kann
shapedivider.app
Zur Abtrennung von Bereichen auf deiner Webseite
the-echoplex.net/flexyboxes
Ein sehr nützlicher Flexbox-Generator
cssgradient.io
Wie der Name schon sagt, lassen sich mit diesem Generator schöne Farbverläufe erstellen
webcode.tools/generators/css/keyframe-animation
CSS Keyframe Animation Generator
cubic-bezier.com
Sanfte cubic-bezier Abfolgen für deine CSS Animationen
animista.net
Schöne vorgefertigte CSS Animationen
Browser-Testing:
Damit deine Webseiten auch auf unterschiedlichen Browsern, Geräten und Bildschirmgrößen optimal aussehen, solltest du deine Webseite auch gut testen. Mit folgenden Tools lässt sich deine Webseite oder App auf verschiedenen Betriebssystemen, Browsern und Geräten testen.
browserstack.com
Das vermutlich bekannteste Tool zum Testen von Websites und Apps
lambdatest.com
Ein weiteres Tool, mit dem du verschiedene Browser und Geräte simulieren kannst
Bildkomprimierung:
Eine Webseite soll natürlich schnell geladen werden. Die Komprimierung von Bildern ist hierbei sehr wichtig. Mit den folgenden Tools kannst du ganz einfach deine Bilder verkleinern ohne viel Verluste zu haben.
Dummy Bilder
Erstellst du eine Webseite und hast noch keine Fotos vom Kunden bzw. vom Fotografen? Bau die Webseite doch einfach mal mit Placeholder-Bildern auf, die du später austauschen kannst.
Weitere Placeholder-Generatoren findest du hier -> Nützliche Placeholder-Image Tools – Von Katzenfotos bis Nicolas Cage
Mockups:
Mit diesen Generatoren kannst du deine Screens ganz einfach mit wenigen Klicks in verschiedene Bilder montieren, um sie in deinem Portfolio zu präsnetieren oder sie deinem Kunden zu zeigen.
Newsletter Tools:
Damit du deine Webseitenbesucher über Neuigkeiten am Laufenden halten kannst, eignen sich folgende Newsletter-Systeme sehr gut. Beide gibt es in auch als kostenlose Variante.
Password Manager:
Bei all den Tools und Webseiten sollte man seine Passwörter übersichtlich verwalten. Hier meine Top-Anwendungen für dein Passwort-Management:
Git Interface Tools
Für alle, die sich nicht mit Kommandozeilen für GIT beschäftigen wollen (Die Basics sollte man aber dennoch kennen und können). Hier zwei Programme, mit denen du dein Version-Control visuell bearbeiten kannst:
Fonts
https://www.myfonts.com/WhatTheFont/
sehen ist? Dann kannst du das Bild hier hochladen und das Tool wird dir passende Vorschläge liefern.
https://www.whatfontis.com/
Ein weiteres Tool zum Finden von Fonts aus einer Bilddatei
https://fontjoy.com/
Ein Tool, um zusammenpassende Fonts zu finden
Ich hoffe, dir gefällt die Sammlung an Tools. Wenn du noch weitere nützliche Tools kennst, dann schreib sie doch in einen Kommentar unterhalb.
