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.

squoosh.app

tinyjpg.com & tinypng.com


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.

placeholder.com

dummyimage.com

picsum.photos

placeimg.com

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.

app-mockup.com

placeit.net

magicmockups.com

smartmockups.com


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.

sendinblue.com

MailChimp


Password Manager:

Bei all den Tools und Webseiten sollte man seine Passwörter übersichtlich verwalten. Hier meine Top-Anwendungen für dein Passwort-Management:

Lastpass.com

1Password.com


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:

SourceTree

Github Desktop


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.

Kommentar schreiben