Bizi Arayın Call Us Rufen Sie uns an WhatsApp Teklif Al Get a Quote Angebot einholen Katalog Catalog Katalog

Bauteiltafel

Der Gestaltungsstandard, live dargestellt

Keine dieser Formen wurde für diese Seite erfunden. Jede stammt von der abgeschlossenen Startseite, wurde gemessen und als Vertrag in DESIGN.md festgehalten. Eine neue Fläche beginnt hier.

Grundlage
DESIGN.md §5
Umfang
Sieben Positionen
Untergrund
Verzinkt dunkel

01POZ

Schriftgrößenskala

Sieben Stufen, Untergrenze 11 px. Kein Abschnitt schreibt eine Größe außerhalb dieser Liste. Die Stufen 5–7 skalieren gemeinsam, deshalb entsteht keine Zwischengröße.

  1. --gs-fs-111 pxStempel · Kennzeichnung · Hinweis · SprachkürzelFeuerverzinkung
  2. --gs-fs-212 pxAbschnittskennzeichnung · Zähler · CopyrightFeuerverzinkung
  3. --gs-fs-314 pxMenü · Schaltfläche · Wert · FußzeilenlinkFeuerverzinkung
  4. --gs-fs-416 pxFließtext · EinleitungsabsatzFeuerverzinkung
  5. --gs-fs-519 → 24 pxKarten- und Achsenname · Slogan · BandtitelFeuerverzinkung
  6. --gs-fs-628 → 40 pxAbschnittsüberschriftFeuerverzinkung
  7. --gs-fs-740 → 76 pxSchlagzeileFeuerverzinkung

02POZ

Abstandsskala

Sechs Stufen und ein Rhythmus. Gemessen: 191 Abstandsangaben trugen 40 verschiedene Werte und nur 61 % lagen auf einem 4-px-Raster. Diese Tafel ist die erste Fläche, die die Skala nutzt.

  1. --gs-bo-14 pxEng — zwischen Kennzeichnung und Wert
  2. --gs-bo-28 pxNah — Listenelemente, innerhalb einer Schaltfläche
  3. --gs-bo-312 pxGetrennt — unter einer Kennzeichnung, zwischen Zeilengruppen
  4. --gs-bo-416 pxBlock — Innenabstand eines Bauteils
  5. --gs-bo-524 pxGruppe — zwischen Bauteilen
  6. --gs-bo-632 pxSchnitt — große Trennung innerhalb eines Abschnitts
  7. --gs-ritim40 → 72 pxRhythmus — das vertikale Atmen eines Abschnitts

Jeder Balken ist genau so breit wie seine Stufe

03POZ

Palette und Kontrast

Die Werte sind gegen den dunklen Untergrund (#1B1E20) berechnet. Auf einfarbigem Grund wird der Kontrast berechnet; über Bild oder Video wird er GEMESSEN — dort weicht die Rechnung um bis zu 40 Einheiten ab.

  1. Untergrund#1B1E20—
  2. Fläche#24282A—
  3. Text#E6E9EA13.73:1
  4. Sekundär#B9BFC29.01:1
  5. Gedämpft#8E95995.51:1
  6. Trennlinie#363B3E1.48:1
  7. Aktion#B404042.36:1

Rot kann auf diesem Grund kein Text sein

Es ergibt hier 2.36:1. Es wird nur als FLÄCHE verwendet — eine rote Schaltfläche mit weißem Text ergibt auf Weiß 7.10:1. Auch ein Fokusring kann hier nicht rot sein.

7.10:1

Die Trennlinie liegt bei 1.48:1, unter der Schwelle. Sie gilt als dekorativ: sie trägt keine Information. Dasselbe Verhältnis ist nicht befreit, wenn es die Schaltfläche SELBST zeichnet.

04POZ

Rahmen · Stempel · Messschieber

Jede Stelle, an der ein Bild erscheint, nutzt denselben Rahmen. Nicht vier getrennte Auftritte — vier Anwendungen eines Systems.

Rahmen

04Stempel

Platz des Bildes

Vertrag

Kante
1 px Linie · obere Kante eine Spur heller
Eckmarke
Rechts oben und links unten · 20 px Schenkel · 0 Radius
Stempel
Oben links angenietet · DECKENDER Grund · Tabellenziffern
Messschieber
Die Teilung ist überall gleich — der Abstand DARF KEIN Prozentwert sein

Ein Prozentwert bezieht sich auf die eigene Breite des Feldes, deshalb werden die Kerben in einem breiten Feld dreimal so dünn. Die Teilung leitet sich aus einer einzigen Breitenvariable ab.

05POZ

Aktion — Schaltfläche und Link

Höchstens EINE gefüllte rote Schaltfläche pro Seite. Die sekundäre Aktion ist ein Link, keine zweite Schaltfläche.

  • Innenabstand 0.9 / 1.6 rem · Größe 16 · 7.10:1 auf Weiß
  • Innenabstand 0.62 / 1.05 rem · Größe 14
  • Alle Projekte1 px Unterstrich · beim Hover hellt die LINIE auf, nicht die Farbe

Berührungsziel

Mindestens 24 × 24 CSS-px. Das Ziel ist nicht so groß wie der Text: auch ein 11 px großes Sprachkürzel trägt eine Fläche von 24 px. Der Kasten wächst, der Text bleibt vertikal zentriert.

DE

06POZ

Datensätze — Zeile, Leerzustand, optionales Feld

Eine dynamische Liste muss kein Kartenraster sein. Ein Titelbild ist ein Bauteil, wenn die Daten eines tragen; sonst ist es ein Loch.

  1. LeichtbaustahlkonstruktionenC-Profil-Fertigung auf der Rollformlinie und Toleranzprüfung
  2. LüftungAxialventilatoren
  3. Ein Datensatz ohne Thema — der Platz der Marke schließt sich ganz

Leerzustand

Noch keine veröffentlichten Datensätze.

Ohne Datensätze verschwinden auch die Bedienelemente: kein toter Pfeil, kein leerer Zähler, kein Filter ohne Wirkung. Ein Leerzustand ist eine andere Entscheidung als die Bedingung, die einen Abschnitt ganz entfernt.

Optionales Feld

Feld gefüllt

Der Anbieter liefert das Feld leer, CSS blendet es aus. Über JavaScript gelöst, bliebe bei abgeschalteter Bewegung ein leerer Kasten.

07POZ

Bewegung und Fokus

Bei abgeschalteter Bewegung bleibt der Inhalt stehen — der Ausgangszustand wird nie ins CSS geschrieben. Auch die Interaktion hängt an der Bewegung: der Zustand ohne JavaScript muss vollständig funktionieren.

  1. Setzen der Worte — Auftritt0.85 spower4.out
  2. Auftritt, sekundär0.7 spower4.out
  3. Auftritt, weich0.8 spower2.out
  4. Setzen — Nutzeraktion0.62 spower3.out
  5. Scrollgebundendie des Scrollensnone
  6. Zustandswechsel0.18 sease

Fokusring

Mit Tab testen — 2 px Ring, 3 px Abstand. Heller Ton auf dunklem Grund.