Anzeige
Anzeige
Tool-Tipp
Artikel merken

Webdesign: Moderne Illustrationen für deine 404-Seite

Die Gestaltung guter Fehlerseiten für den HTTP-Fehler 404 ist eine Kunst ganz eigener Art. Wir haben zwei Sammlungen mit modernen Illustrationen gefunden, die perfekt für das Design einer 404-Seite geeignet sind.

4 Min. Lesezeit
Anzeige
Anzeige
Grafiken für die 404-Seite. (Quelle: Kapwing)

Der HTTP-Code 404 bezeichnet die häufigste Fehlermeldung des Internets. Ein Vertipper in der URL und schon kommt es zu dieser Meldung im Browser eurer Seitenbesucher. Der zeigt letztlich an, dass eine Seite, die aufgerufen werden sollte, nicht vorhanden ist.

Der dröge Standard: 404 – Seite nicht gefunden

Apache-Standardmeldung: Das verdienen eure Besucher nicht. (Screenshot: t3n)

Anzeige
Anzeige

Webserver liefern beim Auftreten eines 404 Standard-Seiten aus, die jedoch reichlich nichtssagend sind und dem Besucher vor allem nicht weiterhelfen. Es gehört daher zum guten Ton des Webdesign, sich gestalterisch auch mit der 404-Seite zu befassen.

Das ist im ureigensten Interesse eines jeden Seitenbetreibers, denn der Besucher wird sich in aller Regel keines Fehlers bewusst sein und die Meldung als Grund verwenden, die Seite auf dem schnellsten Weg zu verlassen. Verhindern lässt sich diese Fluchtreaktion mit einer ordentlich gestalteten 404-Seite, die den Besucher abholt und wieder auf den richtigen Weg führt.

Anzeige
Anzeige

Eigene 404-Seiten sind einfach angelegt

Rein technisch ist das nicht schwer. Bei unter dem Apache-Webserver laufenden Websites reicht es, eine Datei namens 404.php anzulegen. Die macht ihr dem Server dann konkret in der jeweiligen Htaccess-Datei mit dem Eintrag ErrorDocument 404 /404.php bekannt.

Anzeige
Anzeige

Bei Websites unter WordPress legt ihr die 404.php einfach in das Hauptverzeichnis des aktiven Themes. Eine Änderung der Htaccess ist nicht erforderlich.

Grundlagen der inhaltlichen Gestaltung

Abseits des optischen Designs solltet ihr bei der Gestaltung von 404-Seiten darauf achten, dass sie die Navigation der Website ansonsten aufgreifen und so als integraler Teil des Angebots begriffen werden. So kommt ein Besucher gar nicht erst auf die Idee, er wäre auf einer einsamen Insel gestrandet.

Anzeige
Anzeige

Pixar schickt eine Figur aus seinen legendären Animationsfilmen ins Nirvana. (Screenshot: pixar.com)

Zusätzlich solltet ihr an dieser Stelle eine Suchfunktion und, wenn möglich, sogar einen Hinweis auf die Fehlerursache, etwa einen Vertipper, geben. So kann der Besucher einordnen, warum er auf die Seite gelangt ist.

Da ihr zumeist nicht klar erkennen können werdet, wohin der Besucher eigentlich wollte, solltet ihr ihm einen Zugang zu einer Sitemap anbieten, die die verschiedenen Bereiche der Website erschließt. Für den Fall, dass der Fehler letztlich auf eurer Seite liegt, empfiehlt es sich, dem Besucher eine einfache Kontaktmöglichkeit zu nennen, an die er den von ihm festgestellten Fehler melden kann.

Die Optik der 404-Seite

Habt ihr den inhaltlichen Part ordentlich abgearbeitet, stellt sich die Frage nach der optischen Gestaltung der Fehlerseite. Hier ist es in den letzten 15 Jahren zu regelrechten Überbildungswettbewerben unter Seitenbetreibern gekommen. Wer hat die kreativste oder lustigste 404-Seite?

Anzeige
Anzeige

Das kann man positiv oder negativ sehen. Immerhin ist ein 404 kein witziges Ereignis, sondern eine seriöse Angelegenheit. Es schadet aber jedenfalls nicht, sich grafisch am Thema zu orientieren, also die Tatsache, dass etwas nicht gefunden werden konnte, auch designerisch zu reflektieren.

Für diesen Aspekt haben wir zwei frische Sammlungen mit Illustrationen für euch gefunden, die sich gut in moderne Designs integrieren lassen. Der Einsatz von Illustrationen, vor allem mit Menschen in Alltagsszenen, befindet sich ohnehin auf dem Vormarsch. Gut möglich also, dass die folgenden Dienste perfekt in euer Projekt passen.

404 Illustrations von Kapwing

404 Illustrations. (Screenshot: t3n)

20 Illustrationen für die 404-Seite hat das Grafik-Startup Kapwing im Angebot. Die thematisch sehr gut passenden Grafiken können als PNG in der Auflösung 1.600 x 1.600 Pixeln umstandslos aus dem Google Drive Kapwings heruntergeladen werden.

Anzeige
Anzeige

Lost in Space. (Screenshot: t3n)

Sie zeigen einen in der Schwerelosigkeit treibenden Astronauten, einen Vogel Strauß, der den Kopf in den Sand steckt, einen Touristen, der trotz Karte den Weg nicht findet, einen Hund, der eine Seite gefressen haben könnte und einiges mehr. Weitere Illustrationen sind bereits versprochen.

Nach Aussage der Betreiber sind die 404-Grafiken frei verwendbar. Ein Lizenzdokument haben sie allerdings nicht beigestellt.

404 Illustrations von Craftwork

Auszug aus Craftworks 404-Portfolio. (Screenshot: t3n)

Mit derzeit 23 Illustrationen für die 404-Seite gehen die Grafik-Profis von Craftwork an den Start. Auch sie versprechen, das Angebot fortlaufend zu erweitern. Die Machart der Illustrationen ist dabei deutlich abstrakter als jene der Kapwing-Zeichnungen. Sie nehmen dabei recht teils recht deutliche Bezüge auf den Fehlercode selbst.

Anzeige
Anzeige

Sehr deutliche 404-Referenz. (Grafik: Craftwork)

Das kann man machen, wird aber unbedarften Seitenbesuchern allein nicht weiterhelfen. Hier gilt es besonders, die Tipps rund um die inhaltliche Gestaltung der 404-Seite zu beachten.

Auch Craftworks’ Grafiken sind kostenlos nutzbar. In ihrem Lizenzdokument stellen sie ausdrücklich klar, dass auch die kommerzielle Nutzung zugelassen ist. Die Abwicklung des Sammeldownloads aller Illustrationen erfolgt über den Onlineshop Gumroad.

Hier gebt ihr einen Betrag von 0 US-Dollar sowie eine E-Mail-Adresse ein und erhaltet unmittelbaren Zugriff auf das rund neun Megabyte große Downloadarchiv im Zip-Format. Alle Grafiken stehen als hochauflösende PNG und SVG, sowie als Dateien für Figma und Sketch zur Verfügung.

Anzeige
Anzeige

Passend dazu: Webdesign-Trend: Diese 15 Dienste bieten dir moderne Character-Illustrationen, ohne dass du selbst zeichnen musst

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige