Du willst eine neue Website und suchst erstmal nach Inspiration? Dann geht es dir wie den meisten Menschen, die bei Google schöne Webseiten eintippen. Man will nicht gleich beauftragen, man will sehen: Was ist heute eigentlich möglich? Was gefällt mir? Und vor allem: Was davon passt zu mir?
Ich bin Rafael, Webdesigner aus Dresden, und ich baue seit über zehn Jahren Websites für Mittelständler, Handwerker, Praxen und Agenturen. Nebenbei sammle ich seit Jahren schöne Webseiten aus Deutschland, Österreich und der Schweiz. Über 300 sind es inzwischen geworden.
Diesen Artikel gibt es schon seit 2019. Damals hieß er noch „Die 128 schönsten deutschen Webseiten“. Irgendwann habe ich daraus eine riesige Galerie mit über 320 Seiten gemacht, mit Filtern nach Branche und Stil, aber fast ohne Text. Mehr ist besser, dachte ich. War es nicht.
Denn 320 Screenshots ohne Erklärung sind am Ende nur eine Pinterest-Wand. Du scrollst durch, es ist hübsch, und hängen bleibt: nichts. Beim großen Check im November 2026 habe ich jede einzelne Seite neu aufgerufen. Acht waren tot oder zeigten etwas völlig anderes: Eine leitet heute nur noch auf ein Instagram-Profil weiter, eine andere auf einen Shopping-Blog. 16 Firmen heißen inzwischen anders, und viele sehen nach einem Relaunch komplett anders aus. Masse altert eben schlecht.
Deshalb jetzt der harte Schnitt: 50 Seiten statt 320. Jede mit einem Screenshot, einer ehrlichen Einschätzung und einem konkreten Tipp, was du dir davon abschauen kannst. Keine Galerie zum Durchwischen, sondern 50 kleine Lektionen in gutem Webdesign.
Das Wichtigste in Kürze:
- 50 statt 320: schöne Webseiten, handverlesen von mir als Webdesigner, vor allem aus Deutschland, Österreich und der Schweiz – keine davon bezahlt, keine davon eine Referenz von mir.
- Frisch geprüft: Jede Seite habe ich im November 2026 neu aufgerufen und selbst fotografiert.
- Acht Gruppen: von Handwerk, Kanzleien und Gesundheit über Hotels, Shops und Software bis zu Agenturen und Kultur.
- Zu jeder Seite ein Tipp: was sie besonders macht und was du dir für deine eigene Website abschauen kannst.
- Schön heißt auch schnell: Ladezeit und eine Handy-Ansicht, die wirklich funktioniert, gehören für mich zum guten Webdesign dazu.
Wie ich die 50 ausgewählt habe
Erstmal die wichtigste Wahrheit vorweg: Schönheit ist subjektiv. Das hier ist meine Auswahl als Webdesigner, kein objektives Ranking. Die Nummern sind keine Rangfolge, Platz 1 ist also nicht „besser“ als Platz 50. Und ganz wichtig: Kein einziges Beispiel ist bezahlt, und keins ist eine Referenz von mir.
Jede dieser Seiten habe ich im November 2026 frisch aufgerufen und selbst fotografiert. Die Screenshots zeigen also den aktuellen Stand, nicht irgendein Hochglanz-Mockup von vor drei Jahren.
Bevor ich dir die Seiten zeige, solltest du wissen, wonach ich beim Design überhaupt schaue. Für mich macht eine schöne Website nicht ein einzelner cooler Effekt aus, sondern das Zusammenspiel aus ein paar Dingen:
- Typografie: Die Schrift trägt heute die halbe Gestaltung. Eine mutige, gut gesetzte Schrift wirkt oft stärker als jedes Bild.
- Bildsprache: Echte Fotos, eigene Illustrationen, 3D – Hauptsache, es sieht nicht nach dem immer gleichen Stockbild aus.
- Weißraum: Also das bewusste Nichts drumherum. Nichts wirkt so schnell billig wie eine vollgestopfte Seite.
- Farbe: Eine klare Farbwelt statt zehn Farben kreuz und quer.
- Eine eigene Idee: Irgendetwas, das nur diese eine Marke so macht.
- Der Drei-Sekunden-Test: Verstehst du beim ersten Blick, worum es geht? Wenn nicht, hilft auch die schönste Animation nichts.
Was du hier bewusst nicht findest, sind diese preisgekrönten Awwwards-Kunstprojekte, die nur auf einem riesigen Bildschirm funktionieren und ansonsten vor allem sich selbst feiern. Meine 50 sind echte Firmen-, Projekt- und Portfolio-Seiten. Sie müssen Inhalte vermitteln, Kunden gewinnen und – ganz entscheidend – auch auf dem Handy funktionieren. Denn die meisten deiner Besucher sehen deine Seite nicht am Schreibtisch, sondern auf dem Smartphone.
Bewusst bunt gemischt ist die Liste auch bei den Branchen. Und ich habe darauf geachtet, dass nicht nur Designer die Seiten schön finden, sondern ganz normale Besucher – also deine Kunden. Deshalb stehen Handwerk, Kanzleien und Gesundheit vorne und die Agenturen weiter hinten. Gerade die Seiten aus angeblich „langweiligen“ Branchen finde ich spannend: Die zeigen nämlich, was geht, wenn man sich traut.
Und mein wichtigster Rat, schon bevor du loslegst: Kopiere Prinzipien, nicht Layouts. Schau dir drei, vier Beispiele genau an und notier dir, was dir daran gefällt – die Schrift? Die Farbe? Die Bilder? Der Aufbau? Mit so einer Liste kann jeder Webdesigner zehnmal mehr anfangen als mit einem schwammigen „irgendwie modern und clean“.
Handwerk, Bau & Industrie
Mal ehrlich: Bei Handwerk und Industrie findest du im Netz oft die schlimmsten Websites. Dabei ist die Sache eigentlich simpel. Deine Kunden wollen sehen, wer da zu ihnen kommt und was die Leute wirklich draufhaben. Also: echte Gesichter, die Werkstatt, die Arbeit, die Region – Handfestes eben. Niemand braucht hier Stockfoto-Handschläge oder aufgeblasene Floskeln. Schön heißt in dieser Branche: ehrlich, bodenständig und trotzdem hochwertig. Genau dieser Spagat ist die Kunst beim Webdesign für Handwerker. Und die folgenden Webdesign-Beispiele zeigen dir, dass auch Trockenbau, Druck oder Gartenbau richtig gut aussehen können.
1 Andreas Fretz, Gärtnermeister: Name aus echten Blättern
Der Gärtnermeister aus dem Raum Karlsruhe hat den vielleicht schönsten ersten Eindruck der ganzen Gruppe. Das Wort „FRETZ“ liegt mittig auf Weiß – aus echten grünen Blättern gelegt, mit Marienkäfer und Schmetterling. Das ist Logo und Hero-Bild in einem, und genau deshalb bleibt es sofort hängen. Du verstehst in einer Sekunde: Hier kennt sich jemand mit lebendigem Grün aus. Dazu Vorher/Nachher-Fotos echter Projekte und 101 Google-Bewertungen. Nur mit den Keyword-Aufzählungen übertreibt es die Seite etwas.
Abschauen: Form deinen Firmennamen aus dem Material, mit dem du täglich arbeitest – das merkt sich jeder Besucher.
2 RCDruck: Gestaltet wie eine Drucksache
Diese Druckerei aus Albstadt macht etwas Cleveres: Die Website sieht selbst aus wie ein Drucksachen-Entwurf. Dünne Eckmarken wie Passermarken rahmen die Bilder, dazu eine rote Duoton-Fläche mit dem Team und Schwarzweißfotos einer alten Heidelberger Maschine. Du spürst Handwerk, Stolz und Nähe – plötzlich wird aus einem anonymen Zulieferer ein sympathischer Laden mit Gesicht. Kräftiges Rot als einziger Akzent hält das Ganze zusammen. Schade nur, dass oben auch mal eine News statt des eigentlichen Angebots grüßt.
Abschauen: Nimm ein Gestaltungsmittel aus deinem Handwerk – hier die Schnittmarken – als Seitenmotiv; es erzählt dein Fach ganz ohne Worte.
3 aktivhaus: Alles in einem Blau
Modulbau aus Holz klingt erstmal technisch und trocken. aktivhaus aus Stuttgart dreht das um, indem es fast alles in ein einziges Kobaltblau taucht: Architekturfotos, Diagramme, Textflächen. Dadurch wirkt die ganze Seite wie aus einem Guss, obwohl die Bildquellen völlig unterschiedlich sind. Das riesige Luftbild der Modulhäuser mit Solardächern am Anfang zieht dich sofort rein. Ich finde, dieser konsequente Monochrom-Look gibt einem nüchternen Thema Eleganz und Ruhe – ohne dass es kühl wirkt.
Abschauen: Färb deine Fotos in einer Markenfarbe ein, dann wirken auch gemischte Bildquellen wie eine Einheit.
4 &MICA: Grüner Kreis als Blickfang
Das Architekturbüro aus Köln und Berlin empfängt dich mit einem vollflächigen Bild eines weißen Hochhauses am Wasser. Mitten drin liegt ein großer grüner Kreis wie ein Aufkleber auf dem Foto – und genau dorthin wandert dein Blick sofort. Clever: Der Kreis führt zum aktuellen Sonderthema, ganz ohne aufdringliches Banner. Das fette „&“ zieht sich als Motiv durch die ganze Seite. Nur beim Scrollen überlagern sich Abschnittstitel und Fließtext manchmal, das wirkt kurz unordentlich.
Abschauen: Eine einzige farbig abgesetzte Marke im Bild lenkt den Blick aufs aktuelle Thema – kein Banner nötig.
5 Bauservice Koskowski: Handwerk mit Humor
Ein kleiner Trockenbau- und Malerbetrieb bei Magdeburg – und trotzdem eine der sympathischsten Seiten hier. Statt der üblichen langweiligen Leistungsliste baut Koskowski ein Mosaik aus dunkelblauen Textkacheln und kleinen Stillleben-Fotos. Und mittendrin sitzt – ich schwöre – ein Kätzchen in einer Tapetenrolle. Das bringt dich zum Schmunzeln und zeigt sofort Persönlichkeit. Genau das fehlt den meisten Handwerkerseiten. Die gesperrte Mono-Schrift ist leider teils arg klein, der Footer kaum lesbar.
Abschauen: Auch ein kleiner Betrieb gewinnt mit einem festen Farbsystem und ein, zwei witzigen Bildern mehr Charakter als mit Standardfotos.
6 Dinesen: Ruhe pur
Der Hersteller von Dielenböden verkauft Holz fast ausschließlich über große, ruhige Raumfotos – keine Produktkacheln, kaum Text. Und das funktioniert! Du blätterst durch warme Holztöne in natürlichem Licht, viel Weißraum, versetzte Bildformate, dazu mal ein Projektname wie „noma 2.0“. Das Ganze atmet und macht richtig Lust auf echtes Holz im eigenen Zuhause. Schade nur: Auf dem Handy läuft die große Headline rechts aus dem Bild und wird abgeschnitten.
Abschauen: Wenn dein Produkt Atmosphäre verkauft, reichen wenige große Fotos und sehr wenig Text.
7 Busch-Jaeger: Technik mit Du-Ansprache
Lichtschalter und Smart Home – klingt nach Industrie-Katalog. Busch-Jaeger macht daraus etwas Warmes: Menschen im Zuhause, weiche Verläufe von Türkis bis Grün und eine geschwungene Welle, die Headlines wie „Wir wissen, wie du klickst.“ über das Foto trägt. Allein diese Welle prägt als Formelement die ganze Seite und nimmt der Technik das Sterile. Dazu spricht dich die Seite direkt mit „du“ an. So wird aus einem technischen Produkt etwas Zugängliches. Nur: Die Seite ist ganz schön lang.
Abschauen: Auch technische Produkte werden über Menschen und eine warme Du-Sprache nahbar.
8 AFT Keramikbedarf: Gold statt Terrakotta
Beim Thema Keramik erwartest du Terrakotta-Töne, oder? Dieser Fachhandel aus Österreich setzt stattdessen auf ein warmes Senf-Gold, Anthrazit und schräg abgeschnittene Flächen – das wirkt sofort eigenständig. Das Beste ist aber das dunkle Porträt der Inhaberin vor ihren Glasurmustern im Lager. Dieses eine Bild schafft im Fachhandel sofort Vertrauen: Da steht ein echter Mensch – und dahinter über 30 Jahre Fachhandel. Du weißt gleich, bei wem du landest. Der Cookie-Banner mit drei dicken Buttons frisst auf dem Handy aber fast die halbe Seite.
Abschauen: Ein Porträt der Inhaberin an ihrem Arbeitsplatz schafft im Fachhandel sofort Vertrauen.
Kanzleien, Beratung & Finanzen
Kennst du das Klischee? Blau-grau, dazu ein Handschlag-Stockfoto und viel heiße Luft. Dabei wollen die Besucher hier eigentlich nur eins: Vertrauen fassen. Es geht um Geld, Recht, Existenzen – da will niemand eine Show sehen, sondern wissen, bei wem er landet. Schön heißt in dieser Branche deshalb: ruhig, aufgeräumt, menschlich. Du sollst sofort verstehen, wofür die Kanzlei oder Bank steht, ohne dich durch Floskeln zu wühlen. Zu viel Hipster-Spielerei schreckt diese Zielgruppe eher ab. Die Kunst ist also, seriös zu bleiben und trotzdem nicht langweilig – beim Webdesign für Steuerberater genauso wie bei einer Bank. Diese fünf schaffen genau das. Noch mehr Ideen speziell für Kanzleien zeigen dir die 15 schönsten Anwaltswebseiten.
9 UmweltBank: Der schönste Header
Der Award für den schönsten Header geht – wie schon damals – an die UmweltBank aus Nürnberg. Hier siehst du eine tolle Kombination aus grafischen Elementen, Headline und emotionalem Bild, dazu finde ich den Font (Intelo) wirklich schön. Aber die Seite kann mehr als nur gut aussehen: Statt leerer Versprechen zeigt sie die Wirkung deines Geldes als Foto-Kacheln mit großen Zahlen – Wald, Windrad, Solarfeld. Fröhliche Gesichter und ein ruhiges Grün geben dir das gute Gefühl, mit deinem Geld etwas Sinnvolles zu tun.
Abschauen: Mach den Nutzen sichtbar mit konkreten Zahlen auf passenden Fotos, statt ihn nur zu behaupten.
10 Küster & Partner: Start nur aus Logo
Die Steuerberatungskanzlei aus Stuttgart traut sich was: Der erste Bildschirm ist fast schwarz und zeigt nur das weiße Logo aus Dreiecken, die Navigation steht als große Textliste unten links – wie bei einer Kunstgalerie. Das wirkt ruhig, selbstbewusst und edel. Danach wechselt die Seite von dunkel zu hell, große Serif-Aussagen und ein natürliches Teamfoto holen dich wieder ab. Ich mag diese klare Hierarchie sehr. Einziger Haken: Der Start verrät nicht, was die Kanzlei eigentlich macht.
Abschauen: Eine seriöse Branche darf mit einem Start nur aus Logo und Navigation auskommen – solange der Rest klar bleibt.
11 Onecept: Versicherung freundlich gemacht
Private Krankenversicherung für Beamte – trockener geht's kaum. Onecept aus Bonn macht das Thema richtig freundlich: helles Eisblau, ein lächelnder Berater und handgezeichnete türkise Kreise rund um schwere Kürzel wie „PKV“ und „DU“. Dieser eine Kniff nimmt den Fachbegriffen sofort den Schrecken. Und weil der Makler selbst mit Namen, Foto und Google-Sternen im ersten Bildschirm steht, hast du gleich einen Menschen vor Augen statt einer anonymen Firma. Das Hauptfoto wirkt allerdings etwas nach Stockmaterial.
Abschauen: Zeig als Einzelperson dein Gesicht, deinen Namen und deine Bewertung im ersten Bildschirm – das schafft sofort einen Ansprechpartner.
12 Martin Walker: Herz und Hirn als Bild
Starke Farben, harte Kontraste, eine laute Typografie – damit wertet diese Unternehmensberatung ihren Auftritt auf. Der eigentliche Clou: Der Claim „Mit Herz und Hirn“ wird wörtlich zum Bild. Ein altes anatomisches Herz und ein Gehirn, in Blau gedruckt, sind das einzige Bildmaterial – mehr braucht es nicht. Dazu nur drei Farben: Himmelblau, Schwarz, Weiß. Das ist mutig und bleibt hängen. Nur der lange Fließtext komplett in kleinen Versalien auf Schwarz strengt beim Lesen ganz schön an.
Abschauen: Eine Idee wörtlich als Bild zeigen und sich auf wenige Farben beschränken – das trägt eine ganze Seite.
13 Brunner: Alles in einem Rotpink
Payroll Interim Management – ich musste das auch zweimal lesen. Umso überraschender, wie warm diese Einzelberaterin aus Österreich auftritt. Der gesamte Fließtext ist in einem kräftigen Rotpink gesetzt, dazu eine schöne Serifenschrift und viel Weißraum. Was die Seite aber wirklich nahbar macht, ist die Sprache: „Auf du und du“, „Ich rase als Feuerwehr in Ihre Personalverrechnung“. So wird aus einem staubtrockenen Thema plötzlich ein Mensch. Das Rotpink auf Grau ist allerdings etwas kontrastschwach.
Abschauen: Wer eine trockene Dienstleistung anbietet, schafft mit starker Typo, nur einer Akzentfarbe und persönlicher Sprache echtes Vertrauen.
Gesundheit, Pflege & Wohlbefinden
Hier wird's sensibel. Die Besucher sind oft besorgt, älter oder stehen unter Druck – jemand sucht eine Apotheke, eine Praxis, Hilfe. Da ist das Letzte, was du willst, eine Website, die beeindrucken will. Schön heißt in dieser Branche: Wärme, Ruhe, gut lesbar. Echte Räume, echte Gesichter. Es geht darum, Ängste zu nehmen, nicht Effekte abzufeuern. Große Schrift, klare Wege, ein freundlicher erster Satz – beim Webdesign für Ärzte ist das oft schon alles. Und trotzdem entstehen gerade hier richtig schöne Webseiten, wie die folgenden Beispiele zeigen. Von der Traditionsapotheke bis zur Maniküre für Männer ist alles dabei.
14 Apotheke Laa: Schön, dass Sie da sind
Diese Familienapotheke in Österreich, seit 1846 am Ort, fühlt sich an wie der freundliche Laden um die Ecke. Du wirst mit „Schön, dass Sie da sind.“ begrüßt, siehst echte Fotos vom hellen Verkaufsraum und das Inhaber-Duo im weißen Kittel. Das schafft Nähe und Vertrauen, obwohl es um Medizin geht. Besonders clever: Ein Live-Status wie „Derzeit geschlossen“ steht dauerhaft oben und beantwortet die häufigste Frage sofort. Über dem Startbild ist allerdings arg viel Leerraum, und das Menü ist auch am Desktop nur ein Hamburger.
Abschauen: Beantworte die häufigste Besucherfrage – offen oder geschlossen? – schon in der Kopfzeile, statt sie im Menü zu verstecken.
15 Kinderwunsch-Zentrum an der Oper: Wärme statt Klinik
Ein hochsensibles Thema – und diese Münchner Praxisklinik behandelt es mit viel Gefühl. Zarte Lifestyle-Fotos von Paaren und einer Mutter mit Kind, dazu kursive Serif-Zitate in warmem Beerenrot und eine cremefarbene Karte, die sanft über dem Hero-Foto liegt. Das gibt einem klinischen Thema eine persönliche Handschrift. Als Paar fühlst du dich hier ernst genommen und gut aufgehoben statt in einer kühlen Arztpraxis. Der feststehende „Ersttermin planen“-Button zeigt dir immer den nächsten Schritt. Die Navigation ist allerdings sehr klein geraten.
Abschauen: Bei sensiblen Themen gilt: ein menschliches Foto, ein Satz, ein klarer Weg zum ersten Schritt – immer griffbereit.
16 Apotheke zur Triumphpforte: Gemalte Heilpflanze
Diese Traditionsapotheke aus Innsbruck (seit 1890) setzt auf etwas Seltenes: handgemalte, leicht körnige Illustrationen statt Stockfotos. Ein großer roter Sonnenhut mit herabfallenden Blütenblättern vor moosgrünem Grund – das wirkt warm, ruhig und ein bisschen altmodisch im besten Sinne. Dazu bleibt eine cremefarbene Infospalte mit Öffnungszeiten, Telefon und Adresse direkt im ersten Bildschirm stehen. Schön, weil Gefühl und Praktisches sich hier nicht ausschließen. Die hellen Fließtexte auf Creme sind stellenweise etwas klein.
Abschauen: Praktisches wie Öffnungszeiten und Telefon gehört in den ersten Bildschirm – und eine Illustration kann Vertrauen und Wärme tragen.
17 Kinderpalliativ Netzwerk Nordrhein: Einfühlsame Strichzeichnung
Interessante Grafiken und schöne Informationen nähern sich hier einem der ernstesten Themen überhaupt auf einer ästhetischen Ebene. Statt bedrückender Krankenhausbilder setzt das Netzwerk auf eine einfühlsame Strichzeichnung: zwei Menschen, die sich Stirn an Stirn berühren, dazu Türkis, Petrol und Beige. Diese ruhige Bildsprache erzeugt Nähe, ohne zu erdrücken – und genau das braucht es bei einem so schweren Thema. Du fühlst dich an die Hand genommen statt überfordert. Der Hero-Text im türkisen Feld ist mir allerdings einen Tick zu klein geraten.
Abschauen: Bei sensiblen Themen kann eine Illustration mit ruhiger Farbwelt Nähe erzeugen, ohne zu bedrücken.
18 Nico Schinowski: Typo mit Attitüde
Beim Personal Trainer aus Karlsruhe knallt's: Der Vorname „NICO“ läuft als riesige, kursive Schrift quer durchs Foto von Coach Nico mit Kampfseil und Gewichtsweste. Dazu ein frech-leuchtendes Neongelb und ein Ton, der kein Blatt vor den Mund nimmt („Bei Coach Nico biste richtig“). Das passt perfekt – ein Coach, der locker spricht, wirkt mit lockerer Schrift einfach glaubwürdig. Du weißt sofort, worauf du dich einlässt. Die kursiven Versalien ermüden im langen Fließtext allerdings etwas.
Abschauen: Ton und Typo dürfen zur Persönlichkeit passen – das wirkt glaubwürdiger als jede glattpolierte Vorlage.
19 Hammer & Nagel: Werkstatt für Männerhände
Das Design von Hammer & Nagel – Maniküre und Kosmetik nur für Männer – bedient sich beim Storytelling und wird durch dunkle Fotografien unterstützt. Dadurch wird die Zielgruppe direkt angesprochen und eine gewisse „männliche“ Ästhetik erzeugt: Schwarz, Sepia, Kupfer, grobes Korn, Tattoo-Hände. Richtig stark finde ich die durchgehende Werkstatt-Metapher, die sogar in den Trennelementen weiterlebt – ein Lineal mit Zentimeterskala läuft quer über die Seite. So entsteht eine ganz eigene Welt. Die kupferfarbene Schrift auf Taupe ist nur teils etwas kontrastarm.
Abschauen: Eine durchgehende Metapher bis in die Trennelemente und Texte hinein schafft eine eigene Welt.
Hotels, Gastronomie & Events
In dieser Branche wird ein Gefühl verkauft, lange bevor jemand bucht: Sehnsucht, Atmosphäre, Genuss. Du musst beim Besucher ein „Da will ich hin!“ auslösen – und das geht fast nur über große, stimmungsvolle Fotos. Die sind hier das A und O. Aber Achtung: Bei aller Schwärmerei darf das Buchen nicht kompliziert werden. Wirklich schöne Webseiten lassen dich erst träumen und dann mit zwei Klicks anfragen. Genau diesen Zweiklang aus Emotion und einfacher Handlung treffen die folgenden beiden Beispiele wunderbar – einmal im Luxus-Bergurlaub, einmal in der alten Scheune.
20 Hotel Saltus: Bergvideo zum Durchatmen
Diese Seite lässt dich sofort durchatmen. Das Luxushotel in Südtirol auf 1.100 Metern empfängt dich mit einem Vollbild ohne großen Text, nur „SALTUS“ in schmaler Schrift – mal das schwebende Video einer sonnigen Bergwiese, mal Holzmaserung. Du bekommst schon beim Scrollen Urlaubsgefühl und die Lust, selbst dort oben zu stehen. Dazu Interieur-Fotos mit Holz und Lehmwänden in einem lockeren Collage-Layout. Die Buttons „Anfragen / Gutschein / Buchen“ liegen ruhig daneben, stören das Bild nicht. Der Fließtext ist mir nur etwas zu hell und klein.
Abschauen: Lass die Landschaft im ersten Bildschirm allein wirken und halte die Buttons ruhig daneben.
21 Domäne Schickelsheim: Foto statt Headline
Mutig: Diese Eventlocation in Niedersachsen verzichtet am Desktop komplett auf eine Headline. Ein Vollbild-Foto zeigt die alte Scheune mit Holzbalken, violett beleuchteten Wänden und voll besetzten Stuhlreihen – und das sagt alles. Du siehst sofort: Hier ist echtes Leben, hier wird gefeiert. Landhaus-Charme und Profi-Fakten (4 Hektar, 500 Personen innen) wirken zusammen warm und verlässlich. Clever auch, dass das Anfrageformular mit Datum und Personenzahl direkt unter dem Foto steht. So bleibt's trotz Träumerei praktisch.
Abschauen: Für Locations: Zeig im ersten Bild einen echten, vollen Anlass und setze die Anfrage direkt darunter.
Marken, Shops & Lebensmittel
Ein Produkt im Netz zu verkaufen ist knifflig – du kannst es ja nicht anfassen. Deshalb muss die Website es greifbar machen: Herkunft, Material, Appetit, Persönlichkeit. Gute Produkt- und Herkunftsfotos sind Pflicht, aber der wahre Unterschied zum 08/15-Shop ist eine eigene Bildsprache. Eine Handschrift, die nur zu dieser Marke passt. Ob Brot, Bioleder oder Papeterie – wenn du spürst, dass hinter dem Shop echte Menschen mit einer Haltung stehen, kaufst du lieber. Die folgenden sechs Marken zeigen dir sehr unterschiedliche Wege, genau dieses Gefühl zu erzeugen. Von bodenständig bis knallbunt ist alles dabei.
22 THANN Leder: Herkunft als Geschichte
Diese Lederwerkstatt aus Regensburg war schon in meiner alten Liste, damals wegen der Typografie. Die ist immer noch spannend: große Serif-Überschriften neben gesperrten Versalien, dazu asymmetrische Abschnitte, in denen Fotos über den Rand ragen. Was mich aber wirklich überzeugt: Die Seite erzählt die ganze Lieferkette Schritt für Schritt – Weide, Gerbung – mit ruhigen dokumentarischen Fotos, statt gleich Produkte reinzudrücken. Das wirkt ehrlich und bodenständig. Du siehst, woher das Leder kommt, und glaubst es sofort. Der weiße Claim im Startbild geht auf heller Wiese leider fast unter.
Abschauen: Beruht dein Angebot auf einer glaubwürdigen Herkunft, zeig diesen Weg in der Reihenfolge, in der er passiert.
23 Die Brotpuristen: Team mit Brot in der Hand
Was macht diese Bäckerei aus der Pfalz als Erstes? Kein Hochglanz-Produktbild, sondern ein breites Teamfoto: rund 20 Menschen in dunkelblauen Shirts, jeder hält einen aufgerissenen Brotlaib in die Kamera. Das wirkt sofort greifbarer und sympathischer als jedes Stockbild. Du spürst den Stolz und den Zusammenhalt – und bekommst nebenbei Appetit. Dazu ein schlichter, heller Aufbau und selbstbewusste Worte: „Brot, richtig gutes Brot“. Mehr braucht es manchmal nicht. Einziger Dämpfer ist die Cookie-Abfrage.
Abschauen: Ein gemeinsames Teamfoto mit dem Produkt in der Hand wirkt greifbarer als jedes Stockbild.
24 Hund von Eden: Frecher Comic-Shop
Die fette Typografie und die Collage aus Ladenfotos machen diesen Hundeladen aus Sankt Peter-Ording im Web zu etwas ganz Besonderem. Die Bildwelt wirkt eher wie aus einer Geschichte als wie ein Online-Shop für Tierzubehör: riesige pinke Wörter „SPREAD LOVE like doghair“, Comic-Illustrationen aus Pfoten und Knochen. Richtig charmant finde ich, dass Öffnungszeiten und Standort als große, freche Farbkacheln mitten auf der Startseite stehen – statt im Footer zu verstauben. Das hat Persönlichkeit und macht einfach gute Laune.
Abschauen: Wer lokal verkauft, gibt Öffnungszeiten und Standort Raum und Persönlichkeit, statt sie zu verstecken.
25 Kiezbett: Schlafzimmer-Gefühl
Diese Seite hatte ich schon in meiner alten Liste, damals wegen des Layouts, das aus dem Raster ausbrach. Heute ist der Aufbau eher klassisch, dafür schön übersichtlich. Das Beste an Kiezbett aus Berlin ist aber das Gefühl: helles Kiefernholz, weiches Leinen, warmes Licht im Altbau. Die Seite fühlt sich an wie ein ruhiges Schlafzimmer, in das du am liebsten sofort reinschlüpfen würdest. Clever: echte Wohnfotos statt steriler Studiobilder, dazu echte Kundenstimmen. Das Startbild zeigt allerdings nur einen Ausschnitt vom Bett, und die Headline ist etwas klein.
Abschauen: Stell bei Produkten, die man anfassen will, ein Wohnfoto neben das freigestellte – das zeigt, wie es im echten Leben aussieht.
26 Planted: Film statt Produktbild
Fleischersatz hat ein Zweifel-Problem: Schmeckt das überhaupt? Planted aus der Schweiz geht dieses Problem richtig clever an. Statt Produktbildern startet die Seite mit einem Filmclip, Schauspielern und dem Satz „Approved by meat lovers“. Nicht das Produkt steht vorn, sondern die Überzeugungsgeschichte – der Zweifel wird direkt angesprochen. Dazu ein kräftiges Aubergine-Violett und verspielte, leicht schräge Formen, die handgemacht wirken. Das hat Charakter. Das riesige Cookie-Fenster legt sich zu Beginn aber über fast den halben Handy-Bildschirm und dunkelt alles ab.
Abschauen: Wer ein ungewohntes Produkt verkauft, spricht den Zweifel direkt im ersten Bild an, statt nur Eigenschaften aufzuzählen.
27 Anna Beddig Design: Eigene Zeichnung als Tapete
Bei dieser Illustratorin aus Hannover wird die eigene Kunst zur Deko der ganzen Seite. Handgemalte Aquarell- und Pinselstriche in Pastell, dazu ein kräftiges Indigoblau als Gegenpol und Produktfotos auf einfarbigen Pastellflächen. Dadurch bekommt der Shop sofort die Handschrift der Designerin – du merkst, hier verkauft jemand sein eigenes Können, kein beliebiges Sortiment. Das wirkt persönlich und luftig zugleich. Ein bisschen schade: Das Produktkarussell lädt teils leer, und Cookie-Abfrage plus Chat-Button stören den schönen Eindruck etwas.
Abschauen: Die eigene Zeichnung kann zur Tapete der ganzen Seite werden – dann braucht ein Shop kaum weitere Dekoration.
Software, Bildung & Wissenschaft
Bildung und Software haben ein gemeinsames Problem: Es geht oft um etwas Abstraktes oder Erklärungsbedürftiges. Kurse, Programme, Forschung. Da kann eine Website schnell belehrend oder kompliziert werden. Schön heißt hier für mich: klar und einladend. Man kommt an, versteht in wenigen Sekunden, was man bekommt, und weiß auch, wie man anfängt. Die schönsten Websites dieser Gruppe nehmen dir die Hemmschwelle. Sie erklären nicht von oben herab, sie reichen dir die Hand. Genau dieses Gefühl macht den Unterschied zwischen einer Seite, die man wegklickt, und einer, bei der man wirklich klickt.
28 Zeichenfabrik: Einladung statt Belehrung
Die Zeichenfabrik hatte ich schon früher in der Liste, damals vor allem wegen Raster und gestrichelter Linie. Heute gefällt sie mir aus einem anderen Grund: Sie lädt dich ein, statt dich zu belehren. Fette Headlines mit handgezogener rostroter Unterstreichung, dazu echte Arbeitsfotos und echte Kurswerke auf den Karten. Das macht sofort Lust, selbst zum Stift zu greifen. Kein Stock-Gefühl, sondern echte Kunstschule.
Abschauen: Zeig in der Kursübersicht sofort Preis, Termin und ein Bild vom Ergebnis, dann entscheidet der Besucher ohne Umweg.
29 Careum: Ruhiger Einstieg mit Karten
Careum ist eine Schweizer Bildungsstiftung im Gesundheitswesen, und genau so fühlt sich die Seite an: nahbar und seriös zugleich. Über ein breites Foto einer Gruppe, die gemeinsam auf Laptops schaut, legen sich weiße Teaser-Karten, die du durchschalten kannst. So landen mehrere Themen im ersten Bildschirm, ohne dass es voll wirkt. Die echten Fotos von Lernenden und Dozierenden nehmen die Distanz raus. Man hat nicht das Gefühl, eine Institution anzuschauen, sondern Menschen. Das beruhigt und zieht rein.
Abschauen: Weiße Karten über einem Foto bündeln mehrere Angebote im ersten Bildschirm, ohne ihn zu überladen.
30 awork: Software mit Persönlichkeit
Projektmanagement-Software klingt nach dem trockensten Thema überhaupt. awork aus Hamburg beweist das Gegenteil. Weiche Pastellverläufe in Lila und Rosa, große runde Karten und mittendrin ein kleiner 3D-Roboter, der aus der Produktkarte herausschaut und im Verlauf der Seite sogar seinen Blick ändert. Dieses Maskottchen gibt einem nüchternen Tool auf einmal ein Gesicht und sorgt dafür, dass man schmunzelt. Genau das bleibt hängen. Einziger Haken: Cookie-Abfrage und ein Hilfe-Button schweben über dem Inhalt, und die Seite ist verdammt lang.
Abschauen: Ein Maskottchen mit Mimik gibt einem trockenen Software-Produkt sofort Persönlichkeit.
31 Clever Elements: Fette Serife, echtes Gesicht
Clever Elements hatte ich schon mal drin, damals wegen der illustrativen Elemente und der guten Figur auf dem Smartphone. Heute fällt mir etwas anderes auf: Diese riesige, enge Serifen-Headline „Die Newsletter Software für dein Wachstum“ ist für eine Software-Seite richtig ungewöhnlich. Das wirkt selbstbewusst. Und das Gründer-Video mit Cap im Studio macht die Sache persönlich, man kauft nicht bei einem anonymen Logo, sondern bei einem Menschen. Nur der schwebende Sprachumschalter und der Chat-Button verdecken leider ein bisschen die Inhalte.
Abschauen: Ein Gründergesicht im Video direkt unter dem Hero macht Software persönlich.
32 DBU: Farbe als Orientierung
Die DBU ist eine private Wirtschaftshochschule in Berlin, und ihr Problem ist typisch: viele Angebote, schnell unübersichtlich. Die Lösung hier ist clever. Jeder Abschluss, Bachelor, Master, MBA und Lehrgänge, hat eine eigene Farbe und ein eigenes Piktogramm aus runden Blöcken. So liest du ein komplexes Portfolio auf einen Blick. Dazu der starke Slogan „Bleib relevant“ und große, freundliche Radien überall. Einziger Wermutstropfen: Die Silbentrennung mitten in der Headline („Unsiche-ren“) wirkt auf dem Handy etwas unruhig.
Abschauen: Farbkodierung plus ein eigenes Zeichen pro Angebot macht auch ein komplexes Portfolio sofort lesbar.
33 Ableton: Echte Menschen, echte Arbeit
Ableton aus Berlin macht Musiksoftware, und die Seite trifft genau den Nerv ihrer Zielgruppe. Überlappende, versetzte Bildflächen brechen das Raster auf, ohne dass es chaotisch wird. Das Beste sind aber die Fotos: echte Produzentinnen und Produzenten an ihren echten Arbeitsplätzen, keine glatten Stockbilder. Das ist überzeugender als jedes Hochglanzfoto, weil man sich selbst darin wiedererkennt. Man denkt sofort: Das will ich auch können. Dazu das limettengelbe Feld mit den hellblauen Streifen, frisch und sofort wiedererkennbar.
Abschauen: Echte Menschen bei echter Arbeit wirken glaubwürdiger als jedes perfekte Produktfoto.
Agenturen, Studios & Portfolios
Agenturen und Studios dürfen sich austoben, denn ihre Website ist ihre wichtigste Arbeitsprobe. Hier zeigen sie, was sie draufhaben, und das merkt man. Viele dieser Seiten sind aber ehrlich gesagt eher für andere Designer gemacht als für normale Kunden. Das ist völlig okay, solange man weiß, dass man das nicht eins zu eins auf die eigene Firma überträgt. Ein winziger Font oder ein Navigationskonzept, das man erst mal entschlüsseln muss, funktioniert bei einer Kreativagentur. Bei deinem Handwerksbetrieb würde es die Leute nur verwirren. Trotzdem lohnt der Blick auf diese Website-Beispiele, denn die Ideen dahinter kann man oft runterbrechen und auch dezent nutzen.
34 Rat für Ruhm und Ehre: Ein Bild, ein Satz
Diese Seite hatte ich früher wegen der SVG-Animation und dem fehlenden Raster drin. Die Animation zieht immer noch: eine vollflächige Illustration in kräftigem Ultramarinblau, Hochhäuser und Vögel, und mittendrin in weißer Serifenschrift „Wo Vorhersagen enden, beginnen Geschichten“. Das sagt dir sofort, wofür der Rat steht, bevor du auch nur einen Menüpunkt gelesen hast. Die sandfarbene Fläche unten ist wie gerissenes Papier geformt und geht weich in die helle Seite über. Ruhig, selbstsicher, erzählerisch. Genau das, was ein Netzwerk für Geschichten verspricht.
Abschauen: Ein starkes Einzelbild mit einem kurzen Satz erzählt sofort, wofür du stehst.
35 TERRITORY: Ein Claim, der sich verwandelt
Früher habe ich bei TERRITORY den Slider gelobt. Heute ist es der Mut zum einen großen Wort. Der ganze erste Bildschirm leuchtet blau, und zwei riesige, dreidimensional extrudierte Wörter „Love Results“ stehen da wie gemeißelt. Der Clou: Beim Scrollen verwandelt sich die Blockschrift in eine papierne Schreibschrift. Die Seite spielt mit ihrem eigenen Claim, und das prägt sich stärker ein als jedes Bündel von Botschaften. Ein ehrlicher Kritikpunkt: Der feste „Contact us“-Button klebt auf dem Handy unten und überdeckt dort leider Text.
Abschauen: Ein einziger Claim, der groß und in wechselnden Formen auftaucht, bleibt besser hängen als viele Botschaften.
36 AN®: Pure Typografie mit grünem Punkt
AN ist ein Berliner Designstudio, und die Seite ist fast nur Typografie. Ein riesiges schwarzes „AN“ auf Weiß, dazu in dünner Versalienschrift der Satz, wofür man steht. Der einzige Farbtupfer: ein frisches Grün, das als 3D-Kugel mitten im Satz ein Wort ersetzt und in den Leistungskarten wiederkommt. Dieses eine wiederkehrende Element gibt einer sonst komplett schwarz-weißen Seite Wiedererkennung. Sehr elegant, sehr ruhig. Ganz ehrlich aber: Das ist Design für Designer. Die schwebende Navigation überlappt auf dem Handy Inhalte, und die Titel sind fast alle englisch.
Abschauen: Ein einziges wiederkehrendes Element in Akzentfarbe gibt einer schwarz-weißen Seite Wiedererkennung.
37 Anakin: Projekte in Formen
Anakin nennt sich selbst ein preisgekröntes Studio, und das Awwwards-Band „Site of the Day“ sitzt gleich links im Bild. Zu Recht, finde ich. Hier liegen Bildkarten wie Papierlagen übereinander, mit weichem Schatten, und die Projekte stecken nicht in langweiligen Kacheln, sondern in Formen: Raute, Kreis, Dreieck. Ein gelbes X zieht sich als Leitmotiv durch. Das wirkt leicht und spielerisch, fast wie durch eine Mappe blättern. Aber: Der Fließtext steht in winziger Kursivschrift und ist am Desktop kaum lesbar. Schön für die Augen, schwer fürs Lesen.
Abschauen: Ein wiederkehrendes Formmotiv plus eine Akzentfarbe gibt einer zurückhaltenden Seite sofort Charakter.
38 Des Wahnsinns fette Beute: Laut und unbrav
Den witzigen Namen fand ich schon immer klasse, und die Homepage ist immer noch ein Hingucker. Riesige, versetzte Grotesk-Buchstaben, „Next Level“ als Outline in Kursiv, darunter „Family Business“ in fettem Grau. Fotos stecken in schräg geschnittenen Formen mit pinker Kontur, Textbänder laufen diagonal über die Fläche. Das ist bewusst unbrav und laut, und für eine Marken- und Digitalagentur passt das perfekt. Der Haken: Ein großes Pop-up und ein Cookie-Banner verdecken schnell die zentralen Inhalte, und die viele Bewegung kann ablenken.
Abschauen: Eine übergroße Headline mit Kontrast zwischen Outline und Vollschrift macht eine Marke sofort einprägsam.
39 CAMAO: Fragen statt Leistungslisten
CAMAO aus Darmstadt hatte ich früher wegen der ausgefallenen Gestaltung drin, auch wenn die nicht jedermanns Geschmack war. Heute überzeugt mich der Ansatz noch mehr. Statt dir eine Leistungsliste um die Ohren zu hauen, stellt die Seite Fragen aus deiner Sicht: „Du willst die Sichtbarkeit deines Unternehmens steigern?“ Das holt dich genau da ab, wo du stehst. Dazu eine schillernde Glasblase in Magenta und Türkis, die durch die ganze Seite wandert. Und: Die Preise stehen offen auf der Startseite. Das schafft Vertrauen.
Abschauen: Stell Fragen aus Kundensicht und nenn deine Preise offen, statt nur Leistungen aufzuzählen.
40 Atelier Florian Markl: Das Menü ist die Seite
Dieses Berliner Atelier macht etwas Mutiges: Der ganze Bildschirm ist ein Mosaik aus Farbflächen ohne ein einziges Bild. Rot für Projekte, Gelb für Kontakt, Cyan, Violett, Schwarz. Jede Fläche ist ein Menüpunkt, die Farben geben die Orientierung. Das ist radikal reduziert und sieht fantastisch aus, wie ein Mondrian-Gemälde zum Anklicken. Ganz ehrlich muss ich aber sagen: Für einen Neubesucher steht auf der Startseite nirgends, was eigentlich angeboten wird. Das ist pures Design für Designer und würde für eine normale Firma nicht taugen. Zum Bewundern aber top.
Abschauen: Wer Farbe als Struktur einsetzt, kann Navigation und Gestaltung in einem Element vereinen.
41 Do you want our UX?: Spielerischer Entscheidungsbaum
Das Team von „Do you want our UX“ hatte ich schon früher gelobt, cleane und farbenfrohe Gestaltung, die den Nutzer gut führt. Das gilt immer noch. Ein violett-blauer Verlauf, ein weißer Linienwürfel mit der Frage auf den Flächen, und dann als Erzählstruktur ein Entscheidungsbaum mit „Ja“- und „Nein“-Pfeilen. Dazu ein Team mit Fünf-Punkte-Skalen für Stärken und Schwächen und Sprüchen wie „Sicher? Schau was wir richtig gut können“. Dieses durchgängige Motiv merkt man sich länger als Schlagworte. Nur: Die Seite ist mit rund 19.000 Pixeln sehr lang.
Abschauen: Ein spielerisches Motiv, das die Frage der Seite im Bild stellt, bleibt länger im Kopf als Schlagworte.
42 Jens Lehmann: Fünf Rollen zum Durchklicken
Das alternative Navigationskonzept dieser Seite fand ich damals selbsterklärend und clever, man wählt eine Rolle des ehemaligen Torhüters und geht dann in die Tiefe. Die Idee ist nach wie vor charmant: fünf dunkle Silhouetten, viel Leerraum, eine Person, die man als Auswahl statt als lange Lebenslauf-Seite erzählt. Hier muss ich aber ehrlich sein, und das tut ein bisschen weh: Die Technik ist in die Jahre gekommen. Die Slider-Mechanik wirkt angestaubt, die Schrift ist winzig, und auf dem Handy bleibt nur das Intro stehen. Die Seite wirkt dort fast leer.
Abschauen: Eine Person mit mehreren Rollen lässt sich als Auswahl aus Silhouetten erzählen statt als langer Lebenslauf.
43 Britta Senn: Ein Kreis als Begleiter
Britta Senn ist Medienpädagogin aus Leipzig, und ihre Seite ist angenehm unaufgeregt. Warmes Hellgrau, das Wort „medienpädagogin“ riesig in Lachs-Orange, und darüber ein Kreis, halb weiß, halb lila, der beim Scrollen die Farbe wechselt und dich als Orientierung durch die Seite begleitet. Das ist ein kleines, schönes Detail, das man selten so ruhig gelöst sieht. Besonders clever finde ich die Zweisprachigkeit: Der englische Text steht als kleiner Paralleltext rechts daneben, ganz ohne nervigen Sprachumschalter. Nur kann der Kreis auf dem Handy mal den Text überlagern.
Abschauen: Löse Zweisprachigkeit unaufdringlich mit kleinem Paralleltext statt mit einem Sprachumschalter.
44 Jens Windolf: Porträt im Zweifarbdruck
Jens Windolf ist Grafikdesigner aus Hamburg, und sein Einstieg ist ungewohnt persönlich. Ein vollflächiges Porträt im grob gerasterten Zweifarbdruck, Dunkelbraun und Creme, ein lächelnder Mann mit Mütze vor Blättern. Dann kippt die Seite in ein vollflächiges Neon-Gelb mit der Kernaussage, dass es in der visuellen Kommunikation wie im Kino um Geschichten geht. Diese ungewöhnliche Bildbehandlung macht Selbstdarstellung unverwechselbar, man vergisst das Gesicht nicht so schnell. Nur die lila Cookie-Box nervt: Sie verdeckt auf dem Handy ein Drittel des Bildschirms und bleibt über allem stehen.
Abschauen: Eine ungewöhnliche Bildbehandlung fürs eigene Porträt macht Selbstdarstellung unverwechselbar.
Kultur, Museen & Magazine
Museen und Kultur leisten sich oft das außergewöhnlichste, experimentellste Webdesign überhaupt, sozusagen Design für Designer. Für normale Besucher wirkt das manchmal seltsam oder sogar anstrengend. Aber für die kulturaffine Zielgruppe, die genau solche Seiten besucht, passt das perfekt. Hier geht es nicht um glatte Konversion, sondern um Haltung, um Plakat-Look und um Mut. Eine Kulturseite darf ein Statement sein. Sie darf polarisieren und sie darf dich fordern. Genau das erwartet das Publikum, und deshalb finde ich diese Gruppe am spannendsten, auch wenn man sich wenig davon für die eigene Firmenseite abschauen sollte.
45 Klassik Stiftung Weimar: Zwei Zahlen statt Begrüßung
Die Klassik Stiftung Weimar vereint Museen, Schlösser, Parks und UNESCO-Welterbe, also jede Menge Inhalt. Statt dich mit einem langen Willkommenstext zu empfangen, begrüßen dich hier zwei große Zahlen: „31 Museen & Orte“ und „12 UNESCO-Welterbestätten“. Das ist selbstbewusst und erklärt in einer Sekunde die ganze Dimension. Auf dem Handy wird es richtig lebendig: Der Hero ist eine kräftige Kreisgrafik im Bauhaus-Stil in Blau, Gelb und Orange. Schön finde ich auch, dass Leichte Sprache und Gebärdensprache prominent im Kopf sitzen. Barrierefreiheit wird hier ernst genommen.
Abschauen: Zwei überzeugende Zahlen und eine klare Typo ersetzen auf einer Kulturseite den üblichen Willkommenstext.
46 Architekturzentrum Wien: Die Seite als Plakat
Das Az W ist Österreichs Architekturmuseum, und die Startseite verhält sich wie das Plakat der aktuellen Ausstellung. Ein großes Banner mit Fotocollage und Ausstellungstitel, in Farben wie Gelb, Rosa und Dunkelviolett, die mit dem Programm wechseln. Die Seite bleibt also immer lebendig. Darunter ein mehrspaltiges Kartenraster wie eine Zeitung. Das fühlt sich aktuell und kuratiert an, nie wie Konserve. Ehrlich gesagt ist der Veranstaltungskalender aber sehr dicht, und die Startseite läuft ganz schön lang und eng.
Abschauen: Gestalte die Startseite wie ein Plakat der aktuellen Ausstellung, dann bleibt sie immer lebendig.
47 Baukultur NRW: Eine Signalfarbe, die alles trägt
Diese gemeinnützige Anlaufstelle für Baukultur aus Gelsenkirchen macht eine mutige Sache: Die komplette Seite leuchtet in kräftigem Orange-Rot. Alle Titel sitzen als weiße Schrift auf schwarzen Balken, wie Etiketten. Das Ergebnis ist sofort erkennbar und wirkt wie aus einem Guss. Du weißt beim ersten Blick, auf welcher Seite du bist, und das bleibt hängen. Eine einzige Signalfarbe als Hintergrund plus Schwarz-Weiß-Etiketten, das reicht für eine starke Identität. Der ehrliche Kritikpunkt: Die Startseite ist sehr dicht, viele gleich starke Kacheln auf einmal, dazu eine Cookie-Abfrage beim Laden.
Abschauen: Eine einzige Signalfarbe als Hintergrund plus Schwarz-Weiß-Etiketten macht eine inhaltsreiche Seite sofort erkennbar.
48 Parade der Darstellenden Künste: Protest auf den ersten Blick
Hier geht es um einen Demo-Aufruf, und die Seite sieht auch genau so aus. Vollflächiges Knallrot, riesige blaue Buchstaben, so schräg gestreckt, dass man sie kaum noch lesen kann. Und trotzdem, oder gerade deshalb, spürst du sofort: Hier wird protestiert. Nur zwei Farben plus Weiß, der Fließtext komplett in Rot, einzelne Absätze liegen leicht schräg wie ein Banner. Das ist ein reiner Plakat-Look und als Haltung völlig stimmig. Fürs Lesen ist es allerdings anstrengend: Lange Textblöcke in Rot auf Weiß mit schrägen Absätzen strengen die Augen an.
Abschauen: Zwei Farben und eine radikal große Schrift reichen für eine unverwechselbare Seite, wenn die Botschaft klar ist.
49 Beige: Ein Raster voller Farbe
Beige ist ein Berliner Onlinemagazin zu Mode und Lifestyle, und die Startseite ist ein einziges lückenloses Farbkachel-Raster. Jede Meldung hat ihre eigene Hintergrundfarbe, Terrakotta, Sand, Senfgelb, Olivgrün, und die acht bunten Punkte oben sind quasi die Farbpalette. In fast jeder Kachel liegt ein freigestelltes Foto auf der Farbfläche. Dieses Farbsystem macht aus einer simplen Artikelliste sofort ein eigenes Markenbild, man erkennt Beige wieder, egal welcher Artikel. Das wirkt frisch und stilsicher. Kleiner Haken: Auf der Startseite gibt es kaum Fließtext, und die Meta-Kursive ist sehr klein.
Abschauen: Ein Farbsystem mit wenigen warmen Tönen macht aus einer Artikelliste sofort ein eigenes Markenbild.
50 Eine Brücke aus Papier: Zweisprachig im Titel
Dieses Münchner Projekt verbindet ukrainische und deutsche Autorinnen und Autoren, und das zeigt die Seite schon im ersten Bild. Ein vollflächiger Verlauf von Pink über Violett zu Hellblau, gefaltete Papierbahnen wie ein Fächer, und darauf halbtransparent der Titel in beiden Sprachen, deutsch und ukrainisch. Das ist ein schöner, poetischer Einstieg, der sofort erzählt, worum es geht: eine Brücke zwischen zwei Ländern. Dass die Zweisprachigkeit gleich im Titel steht, finde ich genau richtig. Ein ehrlicher Punkt: Die blaue Schrift über dem Verlauf hat im Hero wenig Kontrast.
Abschauen: Zeig Zweisprachigkeit gleich im Titel, wenn dein Thema zwei Länder verbindet.
Du willst, dass deine Website irgendwann in so einer Liste landet, statt nur darin zu stöbern? Wir bauen Seiten, die Design und Ladezeit zusammenbringen – mehr dazu unter Website erstellen lassen.
Was du dir für deine eigene Website abschauen kannst
Du hast dich jetzt durch 50 schöne Webseiten gescrollt – und ich hoffe, dein Kopf ist voll mit Ideen. Aber Vorsicht: Der größte Fehler wäre, jetzt ein Layout eins zu eins zu kopieren. Denn was bei einer Werkstatt für Männerhände grandios wirkt, sieht bei deiner Steuerkanzlei schnell aus wie mit Kanonen auf Spatzen geschossen. Die Kunst ist, die Prinzipien dahinter zu erkennen, nicht die Pixel.
Wenn ich die Beispiele quer durch alle Branchen anschaue, tauchen ein paar Design-Muster immer wieder auf. Genau die kannst du mitnehmen, egal ob du eine Praxis, einen Shop oder eine Agentur hast:
- Verstecke das Praktische nicht. Öffnungszeiten, Telefon und Standort gehören bei lokalen Anbietern nach oben, nicht in den Footer. Hund von Eden und die Apotheke zur Triumphpforte machen genau das – und machen es sogar schön.
- Eine Idee reicht. Die stärksten Seiten haben eine einzige klare Gestaltungsidee: ein Lineal als roter Faden, zwei Zahlen statt Begrüßung, eine Signalfarbe für die ganze Seite. Lieber eine Idee konsequent durchziehen als zehn halbgare.
- Echte Fotos schlagen Stockbilder. Ob Brotpuristen-Team oder Ableton-Produzenten – echte Menschen bei echter Arbeit wirken fast immer glaubwürdiger als glattes Stockmaterial.
- Illustration schafft Wärme. Gerade bei sensiblen oder trockenen Themen kann eine Zeichnung Nähe erzeugen, wo Fotos kalt oder bedrückend wirken würden.
- Typografie ist die halbe Miete. Viele dieser Seiten kommen mit wenig Farbe aus, setzen aber auf eine markante Schrift. Eine gute Headline-Schrift hebt dich mehr vom Einheitsbrei ab als jedes verspielte Add-On.
Und dann ist da noch die Sache, die man bei all der Optik gern vergisst: Eine schöne Seite, die acht Sekunden lädt, ist keine schöne Seite. Ladezeit, saubere Technik und eine Handy-Ansicht, die wirklich funktioniert, sind kein nettes Extra – sie sind die Basis. Die meisten deiner Besucher landen nämlich auf dem Smartphone bei dir, nicht am großen Monitor. Fast alle Beispiele hier sind deshalb bewusst so gewählt, dass sie auch auf dem Handy etwas taugen.
Häufige Fragen zu schönen Webseiten
Was macht eine Website schön und gelungen?
Schönheit ist natürlich ein Stück weit Geschmackssache – aber „gelungen“ ist messbarer, als du denkst. Wirklich gute Webseiten haben meist drei Dinge: eine klare Gestaltungsidee, saubere Typografie und genug Weißraum, damit das Auge zur Ruhe kommt. Dazu kommt das Wichtigste überhaupt: Man versteht in drei Sekunden, worum es geht und was man als Nächstes tun soll. Eine Seite, die hübsch aussieht, aber ewig lädt oder auf dem Handy zerbröselt, ist eben nicht gelungen. Die 50 Beispiele oben zeigen dir ganz unterschiedliche Wege zum selben Ziel: Klarheit mit Persönlichkeit.
Welche Elemente gehören auf eine gute Startseite?
Ganz oben – im sogenannten „Above the Fold“, also dem Bereich ohne Scrollen – sollte sofort klar sein, wer du bist und was du anbietest. Dazu gehören eine aussagekräftige Headline, ein klarer Call-to-Action (also der Button, der sagt, was der Besucher tun soll) und bei lokalen Anbietern am besten gleich die wichtigsten Infos wie Öffnungszeiten oder Standort. Darunter folgen in verdaulichen Häppchen deine Leistungen, Vertrauenselemente wie Referenzen oder Bewertungen und echte Bilder. Entscheidend ist eine gute Nutzerführung: Der Besucher soll nie überlegen müssen, wo er klickt. Überladen wirkt dagegen schnell abschreckend – weniger ist hier wirklich mehr.
Wie wichtig ist die mobile Ansicht wirklich?
Ehrlich? Wichtiger als alles andere. Der Großteil deiner Besucher schaut sich deine Seite auf dem Smartphone an, nicht am Desktop. Wenn deine Seite dort nicht sauber funktioniert – zu kleine Schrift, Buttons, die man nicht trifft, Bilder, die über den Rand laufen – dann ist sie faktisch kaputt, egal wie toll sie auf deinem großen Bildschirm aussieht. Deshalb gilt heute „Mobile First“: Man denkt die Handy-Ansicht zuerst und baut von dort aus hoch. Fast alle Seiten in diesem Artikel habe ich genau danach ausgewählt. Reine Awwwards-Kunstprojekte, die nur auf dem Riesenmonitor funktionieren, sind bewusst nicht dabei.
Wo finde ich Inspiration für schöne Webseiten?
Dieser Artikel ist schon mal ein ganz guter Startpunkt – gerade weil er echte Firmen-, Praxis- und Projektseiten aus Deutschland, Österreich und der Schweiz zeigt, nicht nur US-Baukasten-Beispiele. Darüber hinaus gibt es Plattformen wie Awwwards, CSS Design Awards, Dribbble oder Behance, auf denen Designerinnen und Designer ihre Arbeiten zeigen. Dort ist allerdings viel Experimentelles dabei, das in der Praxis gar nicht funktionieren würde. Mein Rat: Sammel bewusst Seiten, die dir gefallen, und notier bei jeder, was genau dir gefällt. Diese kleine Sammlung ist Gold wert, wenn es ans eigene Projekt geht – für dich und für jeden Webdesigner, der dir hilft.
Homepage-Baukasten oder Webdesigner – was ist besser?
Das hängt ganz von deinem Ziel ab, und ich sag das ganz offen, obwohl ich selbst Webdesigner bin. Ein Baukasten wie Wix oder Squarespace ist super, wenn du schnell, günstig und erstmal einfach online sein willst – etwa für ein kleines Projekt oder einen Test. Die Grenzen merkst du, sobald es individueller, technisch anspruchsvoller oder strategischer werden soll: eigene Idee, saubere Performance, echtes Branding, gute Auffindbarkeit bei Google. Genau da spielt ein Webdesigner seine Stärke aus. Viele der schönsten Beispiele oben sind eben nicht aus der Schublade, sondern mit einem klaren Konzept gebaut. Überleg dir also ehrlich, wie wichtig dir deine Website für dein Geschäft ist – danach fällt die Entscheidung meist von allein.
Ich finde interaktive Webseiten immer noch am besten von allen.
ich mag so einfache und simple gestaltete Webseiten
Sehr interessant und informativ gestaltet. Super.
Lieber Herr Luge,
Ihre Übersicht der 128 schönsten Webseiten hat mich sehr inspiriert. Eine tolle Zusammenstellung, die neue Ideen gibt! Auch finde ich es klasse, dass Sie obwohl Sie Webdesigner sind, über den Tellerrand hinausblicken und Seiten anderer Agenturen herausstellen! Vielen Dank für die vielen Impulse! Allerdings muss ich gestehen, dass ich meinen vorherigen Geschmack nun überdenke und die Kreation meiner Webseite nicht einfacher wird ;-)
Was ist mit der Seit von Alle Farben dem deutschen DJ/Producer.
Der Minimalismus der Seite kombiniert mit dem Parallax Effekt ist für sich auch einzigartig in Deutschland.
https://www.alle-farben.com/
Das stimmt. Mittlerweile wegen Standardisierung und Einfluss durch WordPress-Themen sehen die meisten Websites sehr ähnlich aus. Daher mein Like geht an kochhaus.de. In der dargestellten in diesem Artikel Aufstellung bietet diese Website eigenen Style und minimale Originalität (im Vergleich zu anderen).