Über diese Vorlage
Lies Axion About als Spezifikation zum Thema Über-uns-Seite: Die Werte standen fest, bevor die Seite gebaut wurde. „Through research, creative thinking and iteration we help growing brands realize their digital full potential“ ist die Zeile, auf die das Layout gebaut ist. Die ganze Seite baut auf weiß #EDEDEE darunter, tiefes rot #3E3133 für die Schrift und helles orange #F26522 für die Akzente auf. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung beschränkt sich auf cubic-bezier(0.25,0.1,0.25,1). Am nützlichsten ist es, wenn beim Eintrag Über-uns-Seite für KI & SaaS ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Gemacht für Agenturen, die Projekte aus dem Bereich SaaS pitchen und ein 640x468 Rahmen schon in der ersten Antwort an den Kunden brauchen.
- Agenturen, die Über-uns-Seite-Designs für ein KI- oder SaaS-Produkt anbieten und Schrift von 12px bis 18px und Abstände in 12px-Schritten schon im Angebot nennen wollen, damit die Kalkulation nach dem Kickoff noch trägt.
- Gemacht für Product Manager, die ein Über-uns-Seite-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
Was enthalten ist
- Größen im Briefing fixiert. Die Liste bleibt kurz (Schrift von 12px bis 18px, Abstände in 12px-Schritten und Easing cubic-bezier(0.25,0.1,0.25,1)), deshalb lässt sich das ganze System von Hand prüfen. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
- Badge über dem Falz. Die Ankündigung ist eine Pille in #F26522 über der Headline, kleiner gesetzt als der Begleittext, damit sie als Label und nicht als zweiter Titel gelesen wird. Das Badge trägt #F26522, während die Headline auf der Textfarbe bleibt.
- Der Aufbau passt in einen Screen. Alles über dem Falz verdient seinen Platz. Das Briefing nennt den Text, den Rahmen von 640x468 und die Schriftgrößen und lässt nichts Dekoratives daneben konkurrieren. Die Seite ist eine Komposition bei 640x468, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Feste Stufen statt einer Skala. Die Abstände sind genauso zitiert (Schrift von 12px bis 18px, Abstände in 12px-Schritten und Easing cubic-bezier(0.25,0.1,0.25,1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Eine Dauer für die Bedienelemente
Die Zeiten sind kurz und einheitlich: Übergänge laufen 0 auf cubic-bezier(0.25,0.1,0.25,1), deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Nichts wartet auf eine Scroll-Position, deshalb reagiert die Seite, sobald du sie berührst.
Bewegung, die nicht stört
Das Briefing lässt Animation weg und überlässt die Seite dem 640x468-Layout, nur Hover- und Druckzustände ändern sich. Bewegung ist hier Rückmeldung und nicht Dekoration.
Wie Axion About den ersten Blick ordnet
Lies den ersten Screen in einem Zug, und das Angebot ist bereits klar. das Ankündigungs-Badge und die Kennzahlen-Zeile kommen der Reihe nach, und Schrift von 12px bis 18px und Abstände in 12px-Schritten halten den Abstand statt dekorativer Trennlinien. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Warum das Briefing für SaaS trägt
Verglichen mit einem Template-Hero liegt der Unterschied im Weggelassenen. Es gibt kein Kartenraster, kein Karussell und keinen zweiten Call-to-Action: nur das Ankündigungs-Badge und die Kennzahlen-Zeile, und Schrift von 12px bis 18px und Abstände in 12px-Schritten geben die Maße vor. Axion About nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Was du in Axion About zuerst änderst
Wiederverwendbar ist die Komposition, das Thema gehört dir. Tausche die Headline, behalte die Schriftgrößen-Skala (Schrift von 12px bis 18px) und prüfe den Akzent #F26522 erneut über deinen eigenen Medien. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold. Substitution ist billiger als Komposition, und darum geht es.
Häufige Fragen
Ist der Prompt zu Axion About eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 4.393 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.
Wie ist dieser Eintrag zu Axion About aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 4.393 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Axion About 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.
