Portfolio-Konzept

BLITZ Elektrotechnik

Design-Guide zum Konzept „Wenn Strom fließen muss” — eine dunkle One-Page-Landingpage für einen Elektrobetrieb, mit selbstgeschriebener Blitz-Canvas-Animation im Hero und einem Autoplay-Scroll-Modus für Präsentationen.

Branche: Elektrotechnik Typ: One-Page Landingpage Register: Brand Jahr: 2026
Live Seite ansehen →

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Projekt & Anforderungen

Was das Konzept leisten muss, für wen es gebaut ist und welche Haltung dahintersteckt.

Projektziel

Eine Konzeptseite, die beweist: eine Elektro-Website kann laut, dunkel und selbstbewusst sein, ohne die Seriosität eines Meisterbetriebs zu verlieren.

Zielgruppe

Privat- und Gewerbekunden in Berlin mit akutem oder planbarem Elektrobedarf, die innerhalb von Sekunden entscheiden, ob sie anrufen oder weiterklicken.

Design-Philosophie

Fast Schwarz als Bühne, ein einziges gesättigtes Gelb als Blitz. Keine dritte Farbe, die nur Abwechslung simuliert.

Design-Gedanken zum Konzept

Warum kein Vertrauensblau: Fast jeder Handwerker-Baukasten greift zu Blau, weil es „seriös” wirkt. Aber Blau erzählt nichts über Strom. Fast Schwarz plus ein einziges gesattigtes Gelb transportiert das Thema selbst, ohne ein einziges Wort Text.

Warum eine selbstgeschriebene Blitz-Animation: Kein Lottie-File von einer Stock-Seite, sondern ein eigener Midpoint-Displacement-Algorithmus, der bei jedem Seitenaufruf neue, unregelmäßige Blitzbahnen zeichnet. Das macht den Hero zu etwas, das kein Baukasten-Template einfach kopieren kann.

Warum ein Autoplay-Scroll-Modus: Für Messestand oder Pitch-Situation reicht ein Klick, und die Seite präsentiert sich selbst. Sobald jemand die Maus bewegt oder selbst scrollt, übernimmt sofort wieder der Mensch, nicht die Automatik.

Farbgebung

Ein Basiston (fast Schwarz), ein einziger Akzent (gesättigtes Gelb). Keine dritte Farbe im System.

Bildwelt

Aktuell reine Farbflächen und selbstgezeichnete SVG-Icons statt Fotos. Echte Referenzfotos sind als Bild-Briefs vorbereitet, aber noch nicht eingebunden.

Typografie

Barlow Condensed für riesige Uppercase-Headlines, Inter für Fließtext — beide zum Selfhosting vorbereitet, kein Google-Fonts-CDN.

Interaktionskonzept

Handgeschriebene Blitz-Canvas im Hero, gestaffelte Kachel-Reveals im 0,5-Sekunden-Takt, Autoplay-Scroll-Modus für Präsentationen.

Farbpalette

Ein Basiston, ein Akzent, zwei Textabstufungen — ein System, keine beliebige Sammlung.

Signalgelb
#FFE500 · rgb(255,229,0)
Alleiniger Akzent: CTAs, Blitz-Canvas, Hover-States, Kachel-Oberkante
Tiefschwarz
#080808 · rgb(8,8,8)
Haupthintergrund der gesamten Seite
Sektionsschwarz
#0D0D0D · rgb(13,13,13)
Alternierender Sektionshintergrund, kaum wahrnehmbarer Bruch
Gedämpftes Weiß
rgba(255,255,255,.52) auf #080808
Fließtext, sekundäre Inhalte
Flüchtiges Weiß
rgba(255,255,255,.22) auf #080808
Meta-Labels, Footer-Zeilen, dekorative Linien

Monochrome Bühne

Tiefschwarz wirkt technisch statt kitschig — keine Handwerks-Klischee-Braun-Töne, sondern eine neutrale Bühne für den Akzent.

Der minimale Helligkeitsunterschied zwischen den Sektionen strukturiert die Seite, ohne eine zweite Farbe einzuführen.

Signalgelb

Dieselbe Farbfamilie wie Warnschilder und Hochspannungs-Kennzeichnung — hier als Premium-Akzent genutzt statt als Deko-Farbe.

Textabstufungen

Gedämpftes Weiß für Fließtext schafft Hierarchie durch Helligkeit statt durch eine zusätzliche Farbe.

Flüchtiges Weiß markiert Nebensächliches, ohne aus dem System auszubrechen.

Typografie

Barlow Condensed für Wucht, Inter für Lesbarkeit — beide zum Selfhosting vorbereitet, keine Google-Fonts-CDN-Requests.

Headline / Display · Barlow Condensed 900
Wenn Strom fließen muss.
Fließtext / Body · Inter 400–600

Ihr zuverlässiger Partner für Elektroinstallation, Reparatur und Notdienst im Großraum Berlin. Schnell. Sauber. Zuverlässig.

Meta / Etikett · Mono
Elektrotechnik · Notdienst 24/7 · Seit 2006
Typografie-Richtlinien
Headline900, Großbuchstaben, clamp bis ~10rem, Line-Height .92 für maximale Wucht.
Meta-Label10–12px, Letter-Spacing bis .25em, Mono/Uppercase, oft mit Mittelpunkt-Trenner.
Body14–16px, Zeilenhöhe 1.78–1.85, gedämpftes statt reines Weiß.
Farbe im TextGelb nur für Wortfragmente in Headlines, Zahlen und Hover-States, nie für ganze Absätze.
Notdienst 24/7

UI-Komponenten

Wiederverwendbare Bausteine aus der Live-Seite — drei davon sind unten tatsächlich interaktiv.

Blitz-Canvas — interaktiv
Eigener Midpoint-Displacement-Algorithmus, kein Stock-Effekt. Button auslösen für einen neuen Einschlag.
Kachel-Kaskade — interaktiv
Kacheln erscheinen einzeln im 0,5-Sekunden-Takt statt alle auf einmal.
Neuinstallation01
Notdienst 24/702
Photovoltaik03
Autoplay-Scroll — interaktiv
Klick versteckt den Button, nach 3 Sekunden würde der Auto-Scroll starten. Bricht auf der Live-Seite sofort ab, sobald jemand selbst scrollt.
Buttons & CTAs
Primär auf Gelb, Akzent auf Schwarz, Outline für sekundäre Aktionen.
Kontakt-Elemente
Telefonnummer als größtes Element, Adresse/Zeiten als ruhiger Zweitblock.
030 / 123 456 78

Mo–Fr 7–18 Uhr

Notdienst 24/7

Musterstraße 14

Berlin

info@blitz-elektro.de