Kontakt
Projektleiste überspringen

Alaa Abbod · ausgewählte Arbeiten

Zehn Builds, zehn Richtungen

Zehn selbst initiierte Konzept-Websites, gebaut um herauszufinden, ob eine andere Prämisse wirklich das Design ändert — oder nur das Logo. Jede ist eine vollständige, laufende Seite mit Live-Vorschau und einem Bericht darüber, wie es lief.

Zum Verzeichnis Wie sie gebaut sind

  • 10 fertige Builds
  • 10 von 10 selbst initiierte Konzepte
  • 10 von 10 mit Live-Vorschau
  • 10 von 10 respektieren reduzierte Bewegung

selbst initiierte Konzepte · scrolle die Leiste

01 von 10

  1. Die Startseite von Ember and Oak, vom Titelkopf bis zum Reservierungsformular Ember & Oak Restaurant · Portland, Oregon Ein Restaurant mit Holzfeuer, gesetzt wie ein Printmagazin: ein Titelkopf, linierte Spalten, Menüs mit Punktlinien und das kleinste JavaScript der Sammlung. CSS Grid 5,8 KB JS
  2. Die Startseite von Aurelia House, vom Hero bis zum Anfrageformular Aurelia House Boutique-Hotel · Mayfair, London Einundvierzig Zimmer hinter einem Mauergarten, in Gold auf Anthrazit gesetzt. Die symmetrischste Seite der Sammlung, und mit Absicht die langsamste. Fokus-Falle 1,1 s Reveals
  3. Die Startseite von Norra Health, vom Hero bis zum Terminformular Norra Health Hausarztpraxis · Portland, Oregon Eine Praxis, deren Versprechen Ruhe ist — also wurde Ruhe zur Vorgabe: sechsundzwanzig von Hand gezeichnete SVGs, achtzig Millisekunden Versatz, Kontrastwerte, die im Stylesheet begründet werden. 26 SVGs Kontraste im CSS
  4. Die Startseite von Arke Estates, vom Hero bis zum Beratungsformular Arke Estates Immobilien · Architektonisch Architektur, leise vermittelt. Vier Farb-Tokens, drei Schriftschnitte, keine Schatten, keine runden Ecken — und das kleinste Stylesheet der zehn. 4 Tokens 21,6 KB CSS
  5. Die Startseite des SLAB Strength Club, vom Hero bis zum Anmeldeformular SLAB Strength Club Gym · Detroit, Michigan Beton, einundvierzig Kniebeugenständer und keine Spiegel. Drei Pixel Rahmen, harte Acht-Pixel-Schatten und Reveals, die in neunzig Millisekunden ohne Kurve einrasten. 8 px Schatten 90 ms linear
  6. Die Startseite von Noctis Studio, vom Titelkopf bis zum Buchungskalender Noctis Studio Fotografie · London Eine Dunkelkammer statt einer Galerie. Reveals kommen als Verschlusswischer, die Arbeiten liegen auf einem Streifen, den man zieht, und das Licht bleibt aus gutem Grund aus. Zieh-Leiste 10 Module
  7. Die Startseite von Root and Ritual, vom Hero bis zum Newsletter-Block Root & Ritual Botanische Hautpflege · Washington Zwei Morgen über der Salish Sea, vierunddreißig Tiegel pro Charge. Bogenförmige Platten, ein Fraktalrauschen über der ganzen Seite und nichts, was ganz gerade sitzt. feTurbulence 46 SVGs
  8. Die Startseite von Signalform, vom gezeichneten Dashboard bis zur Preistabelle Signalform Entwicklerwerkzeuge · Observability Eine Marketing-Site, die das Produkt enthält statt einen Screenshot davon: ein von Hand gezeichnetes SVG-Dashboard, eine echte Befehlspalette und kein einziges Foto im Build. ⌘K-Palette Keine Fotos
  9. Die Startseite von NEONFRAME, vom glitchenden Hero bis zum Kontaktkanal NEONFRAME Digitalagentur · Berlin Ein Studio, das Echtzeit-3D verkauft, auf einer Seite ohne Canvas und ohne WebGL. Jedes Glühen, jede Fase und jede Scanline darin ist CSS. CSS-Fasen Keine Fotos
  10. Die Startseite von Brightloop, von den Hero-Instrumenten bis zum Preisblock Brightloop Kohorten-Kurse · Bildung Eine Karriereschule, deren Produkt Struktur ist — also zeigt die Seite Struktur: Fortschrittsringe, wachsende Balken und Zähler, alle von einem gemeinsamen Observer angetrieben. SVG-Ringe Ein Observer

Das Verzeichnis

Dieselben zehn, als Liste. Jede Zeile führt zu einer vollständigen Fallstudie; jede Fallstudie lässt den echten Build in der Seite laufen.

  1. Ember & Oak Editorialer Druck · Restaurant 2021
  2. Aurelia House Luxuriöses Erbe · Boutique-Hotel 2023
  3. Norra Health Skandinavische Ruhe · Hausarztpraxis 2020
  4. Arke Estates Radikaler Minimalismus · Immobilien 2025
  5. SLAB Strength Club Neo-Brutalismus · Gym 2022
  6. Noctis Studio Dunkles Kino · Fotografie 2024
  7. Root & Ritual Organische Botanik · Hautpflege-Shop 2020
  8. Signalform Präzises Dunkel · Entwicklerwerkzeuge 2026
  9. NEONFRAME Cyberpunk-HUD · Digitalagentur 2023
  10. Brightloop Optimistisches Hell · Bildung 2022

Wie sie gebaut sind

Zehn verschiedene visuelle Sprachen, ein Satz technischer Gewohnheiten. Das sind die Regeln, an die sich jeder Build der Sammlung hält.

  • Kein Build-Schritt

    Jede der zehn besteht aus drei Dateien, ausgeliefert wie geschrieben: index.html, styles.css, script.js. Kein Bundler, kein Transpiler, kein node_modules, und nichts zwischen dem Quelltext und dem Browser.

    • HTML
    • CSS
    • Vanilla JavaScript

  • Tokens zuerst

    Die Identität jeder Site steckt in einem einzigen :root-Block — Farbe, Schrift, Radius, Easing. Arke Estates kommt mit vier Farb-Tokens aus; NEONFRAME braucht vierunddreißig. Ändere den Block und die ganze Seite wechselt die Stimmung.

    • Custom properties
    • clamp()
    • Fluide Typografie

  • Bewegung mit Bremse

    Alle zehn hängen ihre Animation hinter prefers-reduced-motion, mehrere zusätzlich hinter pointer: fine. Bewegung ist in jedem Build eine Zugabe; nicht eine von ihnen versteckt Inhalt hinter einem Effekt, der vielleicht nie läuft.

    • matchMedia
    • IntersectionObserver
    • rAF

  • Ohne Maus erreichbar

    Jedes Overlay nimmt den Fokus, hält ihn und gibt ihn bei Escape zurück. Jedes Akkordeon tut das bewusst nicht. Zehn Formulare, jedes meldet sein Ergebnis in einer Live-Region, statt es nur anzuzeigen.

    • ARIA
    • Fokus-Management
    • Tastatur

  • Von Hand gezeichnete Interfaces

    Signalforms Dashboard, Brightloops Fortschrittsringe und NEONFRAMEs gesamte visuelle Sprache sind Inline-SVG und CSS. Diese drei liefern überhaupt kein Foto aus — jedes Pixel darin entsteht im Browser.

    • Inline SVG
    • pathLength
    • clip-path

  • Zehn Stimmen, nicht eine

    Editorialer Druck, luxuriöses Erbe, skandinavische Ruhe, radikaler Minimalismus, Neo-Brutalismus, dunkles Kino, organische Botanik, präzises Dunkel, Cyberpunk-HUD, optimistisches Hell. Keine zwei der zehn teilen sich eine Schrift oder eine Palette.

    • Art Direction
    • Schriftpaarung
    • Farbpalette

Bitte dreh dein Gerät,
Diese Seite ist hochkant gebaut.