Meine effektivsten Tools als Webdesignerin

In einem Meetup für Webdesignerinnen wurde ich vor kurzem gefragt, mit welchen Tools ich meinen Alltag als Webdesignerin strukturiere und die Zusammenarbeit mit Kund:innen organisiere. Am selben Tag wurde ich auf Claudia Gabels Blogparade „Deine liebsten Tools für strukturiertes Arbeiten!“ aufmerksam. Beides nehme ich zum Anlass, um dir heute zu zeigen, welche meine effektivsten Tools für strukturiertes Arbeiten als Webdesignerin ist.

Es gibt sieben Gruppen von Tools, mit denen ich fast täglich arbeite:

1. Technik-Tools, die direkt mit Webdesign in Verbindung stehen
2. Grafik-Tools
3. Tool für die Website-Wartung
4. Projektmanagement-Tools
5. Administrative Tools
6. Tools für Passwörter und den Austausch sensibler Daten
7. Tools für die Kommunikation

Die wichtigsten Technik-Tools für mich als Webdesignerin

Die Tools, die ich hier nenne, sind unverzichtbar, aber es sind längst nicht alle Plugins und technischen Tools, die ich verwende. Das betrifft auch den Punkt Suchmaschinenoptimierung. Hierauf tiefer einzugehen, würde den Umfang dieses Artikels sprengen. So nenne ich hier die Tools, die ich auch meinen Kund:innen empfehle.

WordPress

WordPress ist ein Open-Source Tool, das jedem und jeder kostenlos zur Verfügung steht (nicht zu verwechseln mit wordpress.com). Es handelt sich dabei um ein äußerst flexibles Content Management System, das fortlaufend von Freiwilligen weiterentwickelt wird. Mit WordPress baue ich Websites für meine Kund:innen.

Die grundlegenden Funktionen von WordPress werden durch Plugins erweitert. Mit der Wahl eines Themes legen wir das Design fest, um es ganz vereinfacht auszudrücken.

Divi Elegant Themes

Während der Trend dahin geht, WordPress Websites mit dem Gutenberg Editor aufzubauen, setzen viele und so auch ich noch auf Page Builder, die ohne Programmierkenntnisse bedient werden können. Ganz ohne Codekenntnisse geht es nun doch nicht, aber im Prinzip wäre es möglich.

Ich habe mich auf den Page Builder Divi von Elegant Themes spezialisiert, nachdem ich diverse andere Page Builder kennengelernt und mit ihnen gearbeitet habe. Divi hat viele Vorteile:

• Auch Anfänger:innen (Kund:innen) kommen nach einer Einführung in die Basisfunktionen gut mit dem Page Builder zurecht.
• Für diejenigen, die ein vorgefertigtes Design nutzen möchten, gibt es eine tolle Layout-Bibliothek.
• Bei Fragen oder für die Weiterbildung bieten der Blog und die Ressourcensammlung von Elegant Themes für jedes Problem eine Antwort.
• Auch der Support ist super und funktioniert über einen Chatbot, der zum Supportteam weiterleitet, wenn Bedarf besteht.

Meine Kund:innen erhalten von mir eine kostenlose Lifetime-Lizenz. Statt jährlich circa 99 Euro für den Page Builder zu bezahlen, habe ich mich für die einmalige Lifetime-Lizenz zum Preis von 249 Euro entschieden, mit der ich Lizenzen kostenlos an meine Kund:innen weitergeben kann.

Barrierefreiheitstools

Spätestens Ende Juni 2025 müssen viele Webseiten barrierefrei gestaltet werden. Hier gibt es verschiedene Tools, mit denen ich überprüfe, inwieweit eine Website bereits barrierefrei ist. Dazu nutze ich neben anderen vor allem die Chrome Extension Silktide Inspector Extension und den accessScan von accessiBe.

Für die schnelle Überprüfung: Silktide

Die kostenlose Silktide Inspector Extension bietet verschiedene Anwendungen in Form einer Liste an, die man Schritt für Schritt abarbeiten kann. Dazu gehören der Accessibility Checker, Color Contrast, Alt-Text-Prüfung, Screenreader, Focus Order, Landmarks, Linküberprüfung, Hierarchie der Headings oder H-Ebenen, Impaired Vision, Color Blindness und Dyslexia. Über dieses Tool erhalte ich einen ersten Überblick, wo noch Baustellen vorhanden sind.

Geht in die Tiefe: der accessScan

Der accessScan von accessiBe bietet in der kostenlosen Version bereits viele Einsichten bezüglich der digitalen Barrierefreiheit einer Website. Man gibt die URL einer einzelnen Webseite in die Suchmaske und erhält nach einer Weile die Ergebnisse für diese eine Seite. Dabei gehen die Ergebnisse noch mehr in die Tiefe als bei Silktide.

Gleich oben erhält man das Gesamtergebnis: non-compliant oder accessible. Anhand von Symbolen und dem Score in rot oder grün erfährt man, wo die Seite verbesserungswürdig ist und inwieweit der Test bestanden wurde. Unter Requirement kann man nachlesen, an welchen Stellen und auf welche Weise der Fehler behoben werden kann. Dabei erfährt man auch, wo Änderungen im Code notwendig sind.

Neben dem Score gibt es noch die Bewertung „Neutral“. Ein „Neutral Score“ kann bedeuten, dass dieser Punkt entweder nicht vorhanden ist, wie zum Beispiel das fehlende Menü auf einer Landingpage, oder dass er irrelevant ist. Auch in der kostenlosen Version kann man sich im Anschluss einen Report an die eigene E-Mail-Adresse senden lassen.

Gut zu wissen

Grundsätzlich ist es wichtig, zu wissen, dass Tools zum Überprüfen der Barrierefreiheit nie zu 100 % sichere Ergebnisse ausgeben. Wir sind auch immer selbst gefragt, die Ergebnisse zu überprüfen und die Barrierefreiheit der jeweiligen Website laufend zu gewährleisten. Wenn du mehr dazu erfahren möchtest, schau gerne bei meinem Beitrag „Digitale Barrieren sind häufig unsichtbar“ vorbei.

Bildoptimierung: ShortPixel Image Optimizer

Bevor ich Bilder auf die Website hochlade, wandle ich sie in einem Grafiktool in die passende Größe um, um die Ladezeit der Website nicht zu verlangsamen. Man kann danach aber noch mehr tun, um die Ladezeit zu verbessern, zum Beispiel indem die Bilder komprimiert und in ein Web-taugliches Format umgewandelt werden. Für diesen Schritt habe ich mir das kostenpflichtige Plugin ShortPixel Image Optimizer zugelegt und empfehle es gerne weiter.

Das Plugin komprimiert nicht nur verschiedene Bildformate nach dem Hochladen auf die Website automatisch, sondern wandelt sie ebenfalls automatisch in das webp-Format um. Dadurch spare ich mir den aufwändigen Schritt über ein weiteres Tool vor dem Hochladen.

Ich empfehle bei Interesse, eines der Credit Packages zu wählen, die man einmalig buchen kann. Mit 30.000 Bildern für den Preis von 19,99 $ kommt man eine ganze Weile aus. Das hört sich zunächst nach einer Vielzahl von Bildern an. Pro hochgeladenem Bild erzeugt WordPress automatisch verschiedene andere Formate, zum Beispiel Vorschaubilder, so dass man irgendwann doch upgraden muss. Für meine Anwendungen reicht das Plugin zwei bis drei Jahre aus.

DSGVO: Plugin easyrechtssicher Link zur EU-DSGVO

Dieses Plugin habe ich in Form einer Agenturlizenz gebucht und es ist gekoppelt an einen Datenschutz- und Impressumgenerator. Die im Generator erzeugten Texte werden über einen API Key auf der Website eingebunden. Wenn sich Formulierungen in den Rechtstexten ändern, so werden diese vom Anbieter RA Kandelhaard und seinem Programmierteam implementiert und sie erscheinen automatisch auf der Website.

SEO: Plugin Rank Math

Um alle Seiten, Beiträge und Bilder für SEO zu optimieren, verwende ich das Plugin Rank Math, das besonders für das Schreiben von Blogartikeln hilfreich ist. Das Plugin ermöglicht die einfache Erstellung des Auszugstextes und der SERP-Texte und bietet die Überprüfung eines Blogartikels auf verschiedene SEO-Aspekte hin an. Es gibt noch viele weitere Features, die hier den Rahmen sprengen würden. Mehr zum Thema SEO erfährst du in meinem Beitrag „Dein Start mit SEO: Die 16 wichtigsten Basics“ oder unter der Blog-Kategorie SEO.

Meine beliebtesten Grafik-Tools als Webdesignerin

Es gibt zwei Grafik-Tools, auf die ich nicht verzichten möchte. Es sind Canva Pro und das Adobe Color Wheel. Daneben nutze ich noch – je nach Anwendung – die Tools Gimp und Paint.

Canva Pro

Das Grafiktool Canva lässt sich kostenlos nutzen, aber ich habe mich für die Pro-Version für 110 Euro im Jahr entschieden, da ich hier viele zusätzliche Tools und KI Apps nutzen kann und auf eine große Bibliothek von Vorlagen, Bildern und Elementen Zugriff habe.

Canva nutze ich, um Website- und Blog-Bilder für den Website Upload zu optimieren: Die Bilder schneide ich in Canva auf die passende Größe zu und lade sie im richtigen Dateiformat und mit dem optimalen Dateinamen herunter, um sie im Anschluss auf der Website hochzuladen. Es gibt verschiedene Bildbearbeitungstools in Canve, mit denen ich die Bilder in der Tonalität an die Brandingfarben der Website anpassen kann.

Website-Vorschau in Canva

Manche Kund:innen benötigen eine visuelle Vorschau auf das neue Design der einzelnen Webseiten, um für sich neue inhaltliche Ideen zu entwickeln und um abzugleichen, ob das Design für sie passend ist. Das realisiere ich mit der Website-Design-Funktion in Canva. Die Kundin oder der Kunde erhalten von mir einen Link zu diesem Design mit der Möglichkeit, das Design anzusehen und zu kommentieren.

Nutzung für Begleitmaterialien

Daneben nutze ich Canva für Präsentationen, für Social Media Posts sowie zur Erstellung von Workbooks, Leitfäden und E-Books und weiteren Marketingmaterialien.

Alle Kund:innen erhalten von mir vor dem Start ein Willkommensbuch, das wichtige Eckdaten, den Zeitrahmen und viele weitere, für die Zusammenarbeit wichtige Informationen enthält. Dieses Willkommensbuch habe ich mit Canva erstellt.

Des Weiteren erhalten die Kund:innen von mir Vorlagen, die ich mit Canva erstellt habe, zum Beispiel Grafiken, die den Aufbau einer Über-mich-Seite illustrieren.

Adobe Color Wheel

Das Tool Adobe Color Wheel dient mir in seiner kostenlosen Version als Hilfe bei der Erstellung von Farb­paletten. Toll ist hier, dass man die Farben auf Barriere­freiheit testen und in der Bibliothek speichern kann.

Farbpaletten erzeugen

Über das Color Wheel oder Farbrad ist es möglich, sich Farbpaletten zu einer ausgesuchten Farbe erstellen zu lassen. Dabei kann man unterschiedliche Farbharmonien (ähnlich, monochromatisch, Triade, komplementär und so weiter) zur Anwendung bringen und auch den Farbmodus (RBG, HSB und LAB) einstellen.

Lädt man ein Foto hoch, so lässt sich daraus ein Farbthema extrahieren. Darüber hinaus lassen sich auch Farbverläufe aus einem Foto extrahieren. Das ist hilfreich, wenn Kund:innen noch kein eigenes Branding haben und vorerst auf die Buchung einer Brand oder Grafik Designerin verzichten möchten.

Schön ist auch, dass man die erstellten Farbpaletten in der eigenen Adobe Bibliothek speichern und mit Namen versehen kann. Des Weiteren kann man sich von Adobes Farbpaletten-Bibliothek inspirieren lassen.

Werkzeuge: Für Farbenblinde geeignet?

Bei den Barrierefreiheitstools von Adobe kann man unter Werkzeuge zwei Optionen auswählen: „Für Farbenblinde geeignet“ und die Kontrastprüfung. „Für Farbenblinde geeignet“ zeigt an, ob es sich bei der gewählten Farbpalette um passende Farben handelt oder nicht. Dies wird in Form von Farbkonflikten dargestellt. Manche Farben unterscheiden sich für Farbenblinde nicht, wie man im Bild unten gut erkennen kann. Diese Farben sehen für Farbenblinde identisch aus, was in manchen Fällen auf der Website unerwünscht ist.

Die Kontrastprüfung

Die Kontrastprüfung zeigt auf, wann eine Schrift oder ein Icon im Verhältnis zur Hintergrundfarbe zu klein oder schlecht lesbar sind. Adobe zeigt hier den Grad des Kontrastes an und liefert eine Vorschau von normalem Text, großem Text und Grafikelementen und weist die Attribute „bestanden“ oder „nicht bestanden“ aus.

Über „Farben importieren“ lässt sich auch hier ein Foto hochladen. Über Pucks (Markierungspunkte), die man auf dem Foto hin und her bewegt, kann man Farben aussuchen und für die Kontrastprüfung heranziehen.

Tool für die Website-Wartung

Neben Webdesign biete ich Bestandskunden die Website-Wartung an. Darin sind inbegriffen die Updates von Plugins, Themes, Übersetzungen und von WordPress. Zusätzlich gibt es unter anderem einen Sicherheitscheck und einen Check der Ladezeit. Um die Arbeit zu dokumentieren, verwende ich das Plugin ManageWP, das eine übersichtliche Oberfläche hat und leicht zu bedienen ist. Man kann das Plugin kostenlos nutzen oder aber bestimmte Funktionen kostenpflichtig zu einem geringfügigen Preis hinzubuchen, wie zum Beispiel der Check, wann eine Website down ist.

Tools für das Projektmanagement

Konzeption mit Excel

Um den Kund:innen einen Überblick über die geplanten Seiten und Inhalte zu geben und gemeinsam Inhalte auszutauschen, nutze ich eine Excel-Mappe mit mehreren Tabellenblättern. Die erste Tabelle enthält die zukünftige Sitemap der Website. Diese listet alle Seiten der Website übersichtlich auf und zeigt, welche Inhaltselemente jede einzelne Seite enthält.

Alle weiteren Tabellenblätter stehen jeweils für eine Webseite. Hier gebe ich Vorschläge, welche Inhalte die jeweilige Seite darstellen könnte. Die Kund:innen können hier ihre gewünschten Texte hinterlegen, die ich im Anschluss auf der Website integriere. In weiteren Spalten können Alternativen und Bemerkungen eingefügt werden. Es gibt auch einen Absatz für die SERP-Texte.

Dies ermöglicht ein strukturiertes Arbeiten und verhilft auch meinen Kund:innen zu einem besseren Überblick über das Website-Projekt.

Asana

Mit Asana strukturiere ich nicht nur meine Woche, sondern halte ich zusätzlich meine täglichen, regelmäßigen, monatlichen und jährlichen To Dos fest. Ich habe auch mit Trello und Notion gearbeitet, aber das Projektmanagementtool Asana liegt mir mehr, was zum Teil am aufgeräumten Design liegt.

Neben der Strukturierung und Planung meiner ToDos nutze ich Asana als Redaktionsplan für Social Media, den Newsletter und meine Blogartikel. Daneben verwende ich das Tool für meine Jahresplanung beziehungsweise Quartalsplanung und setze mir Quartalsziele oder -aufgaben.

In Website-Projekten mit Kund:innen halte ich in Asana für mich den Workflow der nächsten Arbeiten fest. Daneben notiere ich in Asana die wichtigsten Aufgaben der Projektphasen.

Smartphone-Notizen-App

Während ich früher mit Evernote und mit OneNote als Notizenapp gearbeitet habe, bin ich inzwischen auf ein ganz einfaches Tool umgeschwenkt: eine einfache Notizenapp, die vom Anbieter bereits auf meinem Handy implementiert worden war. Ich nutze sie, um auf die Schnelle Ideen festzuhalten, die mir zwischendurch in den Sinn kommen: seien es die nächsten Produktideen, Ideen für Social Media, den Newsletter oder Themenideen für Blogartikel.

Ideenspeicher

Jedes Thema hat eine eigene Liste, die ich zu einem späteren Zeitpunkt heranziehe, zum Beispiel wenn ich eine Idee für einen Social Media Post suche. In der App halte ich auch Ideen fest, die mir während der Konkurrenzanalyse begegnen oder beim Scrollen durch ein soziales Netzwerk. Manche Ideen kommen mir während eines Spazierganges, andere vor dem Schlafen gehen oder im Gespräch mit einer Kundin. Mit dieser einfachen Notizenapp geht mir nichts mehr verloren.

Was hat das mit Webdesign zu tun? Die Ideen benötige ich, um meine Expertise zu zeigen, Angebote vorzustellen oder Wissenswertes zum Thema Webdesign in meinen Newslettern zu vermitteln.

Administrative Tools für die Zusammenarbeit mit Kund:innen

Microsoft Office und OneDrive

Ich arbeite zum einen mit Microsoft Office Business 365, das neben dem OneDrive-Cloudspeicher und Outlook viele weitere nützliche Apps beinhaltet. In OneDrive speichere ich alle kundenrelevanten Dateien ab, die direkt mit der Website in Verbindung stehen. Sensible Daten speichere ich auf der Festplatte des Rechners.

Dropbox

Um Backups automatisiert extern, also außerhalb der Website zu speichern, verwende ich die Dropbox. Nur diese Cloudlösung lässt sich kostenlos mit dem Plugin UpdraftPlus verbinden, das die Backups der Website erzeugt.

Des Weiteren verwende ich die Dropbox für den Dateienaustausch mit Kund:innen. Bisher hat sich für mich gezeigt, dass dies auf diesem Weg einfacher als mit anderen Cloudlösungen funktioniert. Dabei geht es um das Logo, Bilder und Schriften für die Website und Videos und nicht um persönliche Informationen, die ich ausschließlich per E-Mail oder per sicherem Passwortlink austausche. Die Kund:innen laden die Medien in die jeweiligen Ordner hoch, so dass ich einen schnellen Überblick über die vorhandenen Medien erhalte.

Google Drive

Manche Kund:innen bevorzugen den Dateienaustausch über Google Drive. Auch dies ist möglich und bietet viele Vorteile. In Google Drive habe ich das Abnahmeprotokoll hinterlegt, dass ich am Ende der Zusammenarbeit gemeinsam mit meinen Kund:innen durchgehe und das Ende des Website-Projekts kennzeichnet.

Terminbuchungstool Calendly

Um das langwierige Hin- und Herschreiben mit Kund:innen bei der Terminfindung zu vermeiden, habe ich irgendwamm das Termintool Calendly als kostenloses Tool in meine Kommunikationsprozesse eingebaut. Calendly ist direkt mit meinem Kalender, mit meinem E-Mail-Client und mit Zoom verbunden, wo sich die gebuchten Termine synchronisieren. Das erspart mir sehr viel Arbeit, weil dadurch ein neuer Kundentermin direkt im Kalender geblockt wird und ich gleichzeitig eine Nachricht darüber erhalte. Ein Terminbuchungstool ist für mich unersetzlich.

Tools für Passwörter und den Austausch sensibler Daten

Passwortmanager LastPass

Es gibt diverse Passworttools, die sich auch für den Austausch sensibler Daten oder neuer Benutzerzugänge mit Kund:innen eignen. Für meine eigenen Zugänge, zum Beispiel zu Websites, die ich betreue, nutze ich den Passwortmanager LastPass, mit dem ich sehr gute Erfahrungen gemacht habe.

Der sichere Passwortlink

Eine Zeitlang habe ich versucht, Passwörter und andere Zugänge mit meinem Passwortmanager LastPass auszutauschen. Dies hat oft nicht so funktioniert, wie ich es mir vorgestellt habe, und es hat viel Zeit gekostet, die Vorgehensweise den Kund:innen zu erklären. Daher bin ich irgendwann auf den sicheren Passwortlink umgestiegen, um sensible Daten auszutauschen.

Bei diesem Link gibt man die sensiblen Daten in einen Texteditor ein. Es wird ein Einmal-Link erzeugt, den man seinen Kund:innen per E-Mail zusenden kann. Sobald der/die Kund:in den Link geöffnet hat, müssen die Inhalte gespeichert werden. Nach einer gewissen Zeit oder wenn man ein zweites Mal versucht, den selbstzerstörenden Link aufzurufen, werden die Inhalte automatisch gelöscht.

Tools für die Kommunikation

E-Mail-Kommunikation

Die Kommunikation mit meinen Kund:innen erfolgt in der Regel per E-Mail und per Zoom. Tools wie Slack, WhatsApp oder Telegram nutze ich bei Website-Projekten nicht, da ich alle Informationen an einem Platz benötige und gerne in Kundenordnern ablege. So arbeite ich effizient, ohne mich zu verzetteln.

Zoom Calls

Zoom verwende ich für das Vorgespräch und alle weiteren Projektgespräche. Hier kann ich direkt am Bildschirm den Fortschritt des Projektes zeigen. Zum Ende der Zusammenarbeit erhalten meine Kund:innen eine Einführung in den Page Builder und wichtige Funktionen der Website, die ich in Zoom aufzeichne und im Nachgang als Video zur Verfügung stelle. Die neue KI-Funktion erlaubt automatisierte Zusammenfassungen, was in manchen Fällen sehr praktisch ist.

Fazit

Bei Tools, die ich für Webdesign-Projekte einsetze, kommt es mir darauf an, dass sie effizient arbeiten, leicht zu bedienen, übersichtlich und kundenfreundlich sind. Was nützt mir das coole Projektmanagementtool, das momentan überall gehypt wird, wenn meine Kund:innen nicht damit zurechtkommen? Daher lege ich Wert auf Einfachheit und Verlässlichkeit. Daneben müssen die Tools alle Prozesse effizient und vollumfänglich unterstützen.

Im Moment fasse ich bereits weitere Tools für den Webdesign-Prozess ins Auge, die die Zusammenarbeit noch effizienter gestalten und manche Prozesse noch besser abbilden sollen. Wenn du Fragen zu einem der Tools hast oder mehr zum Thema Webdesign erfahren möchtest, komm gerne auf mich zu.

Wissenswertes

• Zu diesem Beitrag wurde ich inspiriert durch die Blogparade „Meine liebsten Tools für strukturiertes Arbeiten“ von Claudia Gabel von StrukturZEIT.
• Das erste Bild stammt von Tima Miroshnichenko (Pexels 02.05.2025).
• Bei allen Tools, die ich erwähne, handelt es sich um unbezahlte Werbung für Tools, mit denen ich arbeite und die ich weiterempfehle.