Über diese Vorlage
Bevor du beim Thema Über-uns-Seite für ein KI- oder SaaS-Produkt nachbaust, lies Build With Us: Komposition und Spezifikation stehen beide hier. Die Palette umfasst weiß #FFFFFF darunter, tiefes gelb #434437 für die Schrift und blau #337EC8 für die Akzente, die Schrift ist Inter. Es kommt als React und Tailwind CSS, damit sich der ganze Über-uns-Seite ohne Design-Übergabe in ein Projekt heben lässt. Nimm es zur Hand, wenn im Fall Über-uns-Seite die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Über-uns-Seite-Briefing und lass den Prompt ein 640x472 Rahmen festhalten.
- Inhouse-Teams, die ein Über-uns-Seite-Design erweitern und 100vh hohe Sektionen und Abstände in 48px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Über-uns-Seite-Design als Muster, das jede weitere Seite kopiert.
Was enthalten ist
- Zurückhaltende Navigation. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #337EC8 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #337EC8 ist das einzige Element in der Leiste mit Gewicht. Halte die Zeile einzeilig.
- Werte zum Nachmessen. Das Briefing legt 100vh hohe Sektionen und Abstände in 48px-Schritten fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr. Übernimm die genannten Werte mit dem Layout.
- Eine Schrift, diszipliniert eingesetzt. Die Schrift ist Inter, und das Briefing gibt ihr eine Aufgabe, statt für Abwechslung zu mischen. Gewicht, Laufweite und Größenstufen sind festgelegt, damit die Hierarchie einen Schrifttausch übersteht. Die Schrift ist mit festen Größen gepaart, und das hält die Display-Zeile und den Oberflächentext aufeinander bezogen.
- Navigation in einer Zeile. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x472, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Eine kleine interaktive Fläche
Die interaktive Ebene ist klein und vorhersehbar: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Alles andere bleibt still, der Schwerpunkt liegt also auf der Komposition. Die interaktiven Ziele sind groß genug zum Tippen, und die Zeiger-Behandlung ist über alle hinweg einheitlich.
Statisch mit Absicht
Eine Scroll-Bibliothek gibt es hier nicht: Die 640x472-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es.
Warum diese Komposition für SaaS trägt
Das Versprechen steht einmal auf der Seite, in Displaygröße. Alles Weitere im Eintrag Über-uns-Seite ordnet sich um diese Zeile: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster folgen aufeinander, und kein zweites Versprechen kämpft um den ersten Blick. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Was du in Build With Us zuerst änderst
Die meisten fangen mit der Akzentfarbe an. Fang stattdessen beim Versprechen an: Schreib die Display-Zeile um und prüf dann blau #337EC8 gegen deine eigenen Medien. Schreib Text und Medien um, bevor du irgendetwas neu einfärbst.
Wie der Eintrag Über-uns-Seite umbricht
Die Schrift ist hier geklemmt und nicht gestuft (eine Größe zwischen 32px und 48px); die Display-Zeile springt deshalb nicht zwischen Breiten. Bedienelemente bleiben groß genug zum Tippen, und der Text behält bei jeder Breite seine Lesereihenfolge.
Häufige Fragen
Ist der Prompt zu Build With Us eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 6.252 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Was kann ich mit dem Briefing zu Build With Us machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 6.252 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Kann ich Über-uns-Seite von Build With Us in einem anderen Stack nachbauen?
Build With Us wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
