Werkzeuge lösen keine Entwurfsprobleme, aber sie machen Arbeit schneller und Ergebnisse prüfbar. Dieser Bereich sortiert sie nach Aufgabe und benennt jeweils, wo kostenlose Angebote genügen und wo Geld sinnvoll investiert ist.
Entwurf und Prototyp
Für Layoutentwürfe, Komponentenbibliotheken und klickbare Prototypen haben sich browserbasierte Werkzeuge durchgesetzt, die Zusammenarbeit im Team eingebaut haben. Für Einzelpersonen reichen die kostenlosen Stufen fast immer.
Was ein brauchbarer Entwurf abdecken sollte, unabhängig vom Werkzeug: mindestens zwei Breiten, besser drei; alle Zustände interaktiver Elemente, also Ruhe, Überfahren, Fokus, Aktiv, Deaktiviert; Fehler- und Leerzustände von Formularen und Listen; und realistische Textlängen statt Blindtext gleicher Länge.
Der häufigste Fehler ist ein Entwurf, der nur den Idealfall zeigt: gefüllte Liste, kurzer Titel, passendes Bild. In der Praxis sind Titel zu lang, Listen leer und Bilder im falschen Format. Details in Design-Tools.
Bildbearbeitung und Optimierung
Zwei getrennte Aufgaben, die häufig verwechselt werden.
Bearbeitung heißt zuschneiden, gerade richten, aufhellen, Ausschnitt wählen. Dafür genügen kostenlose Programme oder browserbasierte Werkzeuge vollständig.
Optimierung für das Web heißt: auf die tatsächlich benötigte Pixelbreite verkleinern, in ein modernes Format überführen, komprimieren, mehrere Größen für verschiedene Bildschirme bereitstellen. Diese Schritte sind der Grund, warum Seiten schnell oder langsam sind, und sie werden am häufigsten übersprungen.
Ein praktischer Richtwert: Ein Bild, das im Layout maximal 800 Pixel breit dargestellt wird, braucht keine 4000 Pixel. Für die doppelte Auflösung genügen 1600. Der Unterschied zwischen 4000 und 1600 Pixel Breite ist bei gleicher Qualität ein Faktor von etwa fünf in der Dateigröße. Siehe Bildbearbeitung und Bilder optimieren.
Bilder, Schriften, Icons
Bildquellen. Die Reihenfolge nach Risiko: eigene Fotos, dann Bildagenturen mit Rechnung und Lizenznachweis, dann freie Quellen. Bei freien Quellen ist die Lizenz je Bild zu prüfen, nicht je Plattform, und die Nachweise gehören dokumentiert. Ein Ordner mit Datei, Quelle, Lizenz und Datum reicht. Siehe Stockfotos und Lizenzen.
Schriften. Freie Schriftbibliotheken decken den Bedarf für die meisten Projekte. Wichtig ist, sie lokal auszuliefern statt von einem fremden Server, weil sonst bei jedem Aufruf Daten an Dritte übertragen werden. Das ist gleichzeitig ein Datenschutz- und ein Performance-Thema. Siehe Schriften finden und Google Fonts lokal.
Icons. Ein einziges Set für die gesamte Seite, als Vektor eingebettet, in der Strichstärke der Schrift. Zwei gemischte Icon-Stile sind der schnellste Weg zu einem unruhigen Erscheinungsbild. Siehe Icons und Illustrationen.
Prüfen und messen
Vier Werkzeugkategorien deckt man vor jedem Livegang ab:
| Aufgabe | Was geprüft wird | Kostenlos ausreichend |
|---|---|---|
| Barrierefreiheit | Alternativtexte, Beschriftungen, Kontrast, Struktur | ja |
| Ladezeit | Felddaten und Labortest, mobil | ja |
| Kontrast | Text, Schaltflächen, Text auf Bildern | ja |
| Darstellung | echte Geräte, mehrere Breiten | ja |
| Sichtbarkeit | Indexierung, Fehler, Suchanfragen | ja |
| Rankings und Wettbewerb | Positionen über Zeit, Konkurrenz | begrenzt |
Nur die letzte Zeile ist der Bereich, in dem kostenpflichtige Werkzeuge deutlich mehr liefern, und sie ist für kleine Projekte am wenigsten wichtig. Übersicht in Test-Tools und SEO-Tools.
Was man nicht braucht
Barrierefreiheits-Overlays. Skripte, die per Schaltfläche Kontraste und Schriftgrößen umstellen, beheben die Ursachen nicht und behindern Hilfsmittel teils zusätzlich.
Werkzeuge, die eine Aufgabe erfüllen, die man nicht hat. Ein Werkzeug für A/B-Tests bei zweihundert Besuchern im Monat liefert keine belastbaren Ergebnisse.
Mehrere Werkzeuge für dieselbe Aufgabe. Zwei Analysewerkzeuge parallel bedeuten doppelte Ladezeit, doppelten Datenschutzaufwand und widersprüchliche Zahlen.