Was macht Design Scout?
Websites, die aus dem Gedächtnis entworfen werden, sind der Durchschnitt aller Websites: zentrierter Hero-Bereich, Farbverlaufs-Blob, drei Feature-Karten, eine Schrift, die niemand gewählt hat. Gute Designer vermeiden dies, indem sie sich echte Arbeiten ansehen, bevor sie etwas zeichnen. Diese Fähigkeit macht das zum Standard: erst schauen, dann zielgerichtet entscheiden, dann bauen.
Der Ablauf besteht aus fünf Schritten. Überspringe die Recherche nicht, um Zeit zu sparen. Die Recherche ist es, die Zeit spart, weil sie Runden von „das sieht generisch aus, versuch es nochmal“ ersetzt.
- Briefing: das Geschäft kennenlernen
- Recherche: echte Referenzen sammeln
- Brief: Referenzen in Entscheidungen umwandeln
- Checkpoint: Benutzer gibt die Richtung frei
- Bauen und gegen den Brief prüfen
1. Briefing
Du brauchst drei Dinge vor jeder Recherche. Frage nach dem, was fehlt, in einer Nachricht:
- Nische: um welche Art von Website es sich handelt (Zahnarztpraxis, B2B-SaaS für Rechnungsstellung, Streetwear-Store)
- Name: der Geschäfts- oder Produktname
- Über: was es tut oder verkauft, für wen, was es anders macht
Wenn der Benutzer diese bereits genannt hat, frage nicht erneut.
Biete in derselben Nachricht diese optionalen Fragen an und mache deutlich, dass sie übersprungen werden können. Jede schärft die Recherche erheblich, aber keine sollte dich blockieren:
- Wer ist die Zielgruppe, und welche eine Aktion soll die Seite bei ihnen auslösen?
- Drei Wörter dafür, wie sie sich anfühlen soll (ruhig, laut, hochwertig, verspielt, technisch …)
- Gibt es Seiten, die sie lieben oder hassen, in jeder Branche?
- Vorhandene Brand-Assets: Logo, Farben, Schriften, Fotos?
- Welche Seiten oder Abschnitte werden benötigt, und in welchem Stack soll gebaut werden?
Für alles Übersprungene wähle einen sinnvollen Standard und nenne ihn im Brief als Annahme, damit der Benutzer ihn korrigieren kann.
2. Recherche
Lies jetzt references/sources.md. Es listet jede Quelle auf, wofür sie gut ist, wie man sie durchsucht und welche das einfache Abrufen blockieren.
Plane die Suchanfragen zuerst. Schreibe 4 bis 6 Suchphrasen auf, bevor du etwas öffnest: die Nische selbst („Zahnarztpraxis Website“), der Seitentyp („Buchungs-Landingpage“), die Stimmungswörter („ruhig redaktionell“) und eine angrenzende Nische, deren Designkultur stärker ist als die der eigenen (ein Zahnarzt kann von Hautpflegemarken lernen; ein Buchhaltungstool von Linear-artigen Dev-Tools). Die angrenzende Abfrage ist wichtig: Wenn du nur innerhalb der Nische suchst, reproduzierst du die Klischees der Nische.
Decke vier Linsen ab, nicht achtzehn Seiten. Die Quellendatei gruppiert die Seiten nach Linsen. Verwende mindestens eine Quelle aus jeder, mehr, wenn die erste dünn ist:
| Linse | Frage, die sie beantwortet |
|---|---|
| Live-Websites | Wie legen echte, veröffentlichte Seiten in diesem Bereich eine Seite aus? |
| UI-Muster | Wie lösen gute Produkte diesen spezifischen Abschnitt (Preise, Navigation, Buchungsformular)? |
| Visuelle Stimmung | Wie könnte es sich anfühlen: Bildsprache, Textur, Farbe, Art Direction? |
| Typografie & Farbe | Welche konkreten Schriften und Palette? |
Sieh dir auch 2 oder 3 direkte Konkurrenten des Unternehmens an (einfache Websuche). Nicht um sie zu imitieren, sondern um zu erfahren, was Besucher in dieser Nische erwarten, und um zu sehen, was alle tun, damit sich das Design davon abheben kann.
Gehe zur echten Website. Galerie-Thumbnails sind klein und oft veraltet. Wenn ein Galerieeintrag vielversprechend aussieht, öffne die Live-Website, auf die er verweist, und sieh sie dir an. Mache einen Screenshot, falls du ein Browser-Tool hast; das Lesen des HTML allein zeigt dir die Struktur, aber nicht, wie sie sich anfühlt.
Notiere jeden Treffer, während du vorgehst. Strebe 6 bis 10 über die Linsen hinweg an. Für jeden:
- Name und URL (die echte URL, die du tatsächlich geöffnet hast)
- Was konkret funktioniert: sei konkret („übergroße Serifen-Überschrift, linksbündig neben einem schmalen Produktfoto“, nicht „sauber und modern“)
- Die eine Sache, die du davon übernehmen solltest
- Was zurückgelassen werden sollte
Vage Notizen erzeugen vage Designs. Wenn du nicht sagen kannst, was konkret gut an einer Referenz ist, lass sie fallen.
Ehrlichkeitsregel. Zitiere nur Referenzen, die du in dieser Sitzung tatsächlich geladen hast. Erfinde niemals eine Website, eine URL oder eine Beschreibung einer Seite, die du nicht gesehen hast: Eine erfundene Referenz ist schlimmer als keine, weil der Benutzer ihr vertrauen wird. Wenn eine Quelle blockiert, hinter einer Anmeldung oder leer ist, sage das und verwende eine andere. Wenn du überhaupt keinen Webzugriff hast, teile dem Benutzer klar mit, dass der Rechercheschritt nicht ausgeführt werden kann, und frage, ob er Links oder Screenshots einfügen oder mit diesem Vorbehalt aus dem allgemeinen Wissen fortfahren möchte.
Passe den Umfang an die Aufgabe an. Eine vollständige Website erhält den vollen Durchlauf. Für einen einzelnen Abschnitt oder eine „schnelle“ Anfrage mache einen kurzen Durchlauf: 2 Abfragen, 3 oder 4 Referenzen, ein Brief von ein paar Zeilen. Gehe nicht auf null.
3. Brief
Wandle die Referenzen in Entscheidungen um. Verwende die Vorlage in references/brief-template.md und speichere sie als design-brief.md im Projekt, damit die Richtung die Konversation überlebt und spätere Arbeit dagegen geprüft werden kann.
Der Brief muss Verbindlichkeit haben. Jeder Punkt ist eine spezifische Wahl mit einem Grund, der auf eine Referenz oder das Geschäft zurückgeführt wird:
- Konzept in einem Satz: die Idee, die diese Website zu der dieses Unternehmens und keines anderen macht
- Layout: Abschnitt für Abschnitt, mit der strukturellen Idee für jeden
- Typografie: benannte Schriften, wo jede verwendet wird und wo man sie bekommt (überprüfe die Lizenz; bevorzuge Schriften, die kostenlos für die kommerzielle Nutzung sind, wie Google Fonts oder Fontshare, es sei denn, der Benutzer hat eine Lizenz)
- Farbe: Hex-Werte mit Rollen (Hintergrund, Text, Akzent usw.), auf lesbaren Kontrast geprüft
- Signaturelement: die eine Sache, an die sich ein Besucher erinnern und die er jemand anderem beschreiben würde
- Bildsprache und Bewegung: welche Art und wie zurückhaltend
- Wird nicht gemacht: die Nischen-Klischees und generischen Muster, die dieses Design bewusst vermeidet
Übernimm Prinzipien, nicht Eigentum. Nimm die Idee (ein asymmetrisches Raster, eine Schriftkombination, eine Art, Abschnitte zu rhythmisieren) und niemals das Logo, die Bilder, Illustrationen, Texte oder eine pixelgenaue Kopie des Layouts der Referenz. Mische Ideen aus mehreren Referenzen, sodass das Ergebnis niemandes Kopie ist.
4. Checkpoint
Zeige dem Benutzer die Richtung, bevor du baust: die Konzeptzeile, die 3 oder 4 stärksten Referenzen mit Links, Palette, Schriften, Abschnittsskizze, Signaturelement. Halte es kurz genug, um es in einer Minute zu lesen.
Wenn die Referenzen in zwei deutlich unterschiedliche Richtungen gingen, biete beide als A und B mit einer Empfehlung an, anstatt sie zu etwas Langweiligem zu mitteln.
Warte auf ein Ja oder auf Änderungen. Eine ganze Website auf einer nicht freigegebenen Richtung zu bauen, ist der teure Fehler, den dieser Schritt verhindern soll. Die eine Ausnahme: Wenn der Benutzer von vornherein gesagt hat, bau einfach ohne Rückfrage, dann fahre fort und zeige den Brief zusammen mit dem Ergebnis.
5. Bauen und prüfen
Baue nach dem Brief im Stack des Benutzers. Wenn eine andere Fähigkeit für die Frontend- oder Designimplementierung verfügbar ist, verwende sie für den Bau und behandle den Brief als deren Eingabe.
Beim Bauen:
- Schreibe echte Texte für dieses Unternehmen, in seiner Stimme. Kein Lorem Ipsum und keine Füllmittel wie „Optimieren Sie Ihren Workflow“.
- Erfinde niemals Testimonials, Kundenlogos, Statistiken, Auszeichnungen oder Bewertungen. Wenn ein Abschnitt sie benötigt, setze einen klar gekennzeichneten Platzhalter und teile dem Benutzer mit, was er liefern soll.
- Gestalte mobil mit Absicht, nicht als gequetschten Desktop.
- Halte den Textkontrast lesbar und Interaktionselemente per Tastatur erreichbar.
Wenn der Bau abgeschlossen ist, lies references/slop-check.md und führe es gegen das Ergebnis aus. Sieh es dir dann an: Öffne die Seite, mache Screenshots in Desktop- und Telefonbreite, wenn möglich, und vergleiche sie mit dem Brief und den Referenzen. Frage bei jedem Abschnitt: Würde dieser in den Galerien, die du gerade durchsucht hast, bestehen? Behebe, was zu kurz kommt, bevor du es präsentierst.
Präsentiere das Ergebnis mit einer kurzen Notiz: was gebaut wurde, welche Referenzen welche Entscheidungen beeinflusst haben, welche Platzhalter der Benutzer ausfüllen muss und was du nicht verifizieren konntest.