Baustein Deutschland - Website-Design für eine Marke für modulare Laptops

Baustein ist eine fiktive Marke für modulare Laptops und einen 4,5-Liter-Desktop, die man mit einem Schraubendreher öffnet, repariert und aufrüstet. Dies ist die deutsche Ausgabe eines Konzeptprojekts: gleiche Vorlagen wie die US-Fassung, aber vollständig auf Deutsch, mit du-Ansprache, Preisen in Euro inklusive MwSt., zwei Jahren gesetzlicher Gewährleistung, QWERTZ-Tastaturen, DHL-Versand und Recycling nach ElektroG. Produkte, Preise und Bewertungen sind Beispielinhalte.

Projektdaten

• Kunde: Baustein Devices GmbH (fiktiv, Konzeptprojekt)
• Branche: Unterhaltungselektronik: modulare, reparierbare Laptops und ein Mini-Desktop
• Märkte: Deutschland, ein Markt (Sitz Berlin)
• Leistungen: Marktlokalisierung · Copywriting · Markenanpassung · E-Commerce-Webdesign für Elektronik · Barrierefreiheit (WCAG 2.2 AA) · SEO-Grundlagen
• Templates: 13 Seitentemplates, geteilt mit jeder Baustein-Edition
• Technik: Next.js (statischer Export), React und Tailwind CSS; ein Region-Paket (Texte, Daten, Alt-Texte) und ein Theme pro Markt

Das Briefing

Ein Shop, der auf Deutsch genauso selbstverständlich klingt wie auf Englisch

Der deutsche Markt liest Preise in Euro inklusive MwSt., erwartet die gesetzliche Gewährleistung, eine QWERTZ-Tastatur und eine klare Auskunft darüber, was mit einem alten Gerät passiert. Der Text ist neu geschrieben, nicht übersetzt: vom Konfigurator über den Marktplatz bis zur Inzahlungnahme mit DHL-Etikett und Recycling nach ElektroG. Die Ansprache ist du, wie die Marke selbst.

Gestaltet für Deutschland

Was sich zwischen der US-Edition und dieser wirklich ändert

• Sprache - US-Edition: Englisch, US-Rechtsraum · Deutschland: Deutsch, du-Ansprache, deutsche Fehlermeldungen und Formulartexte
• Währung - US-Edition: US-Dollar · Deutschland: Euro inkl. MwSt., Ratenzahlung mit effektivem Jahreszins (Beispiel)
• Gewährleistung - US-Edition: US-Garantiehinweise · Deutschland: 2 Jahre gesetzliche Gewährleistung plus 1 Jahr Herstellergarantie, generalüberholt 12 Monate
• Tastatur - US-Edition: US-Layout · Deutschland: Deutsch (QWERTZ, ISO)
• Versand - US-Edition: US-Versand · Deutschland: Kostenloser Versand ab 89 € (Beispiel), Versand mit DHL, Rückgabe in 30 Tagen
• Recht - US-Edition: US-Kontext · Deutschland: Impressum, Datenschutz, AGB, Cookie-Einstellungen, ElektroG-Recycling
• Inzahlungnahme - US-Edition: US-Rücknahmefluss · Deutschland: Frankiertes DHL-Etikett, Prüfung, angepasster Wert, sonst kostenlose Rücksendung
• Konfigurator - US-Edition: US-Optionen · Deutschland: Optionen aus dem deutschen Wörterbuch: Editionen, Prozessorkerne, Port-Schächte, Farben
• Style - US-Edition: Graphit, Schaltkreisgrün, Limette · Deutschland: Weiß, Schwarz und ein Signal-Orange; Space Grotesk + Inter, harte Kanten

Markenanpassung

Dasselbe Baustein, mit lokalem Akzent

Weiß, Schwarz und ein Signal-Orange (#FF5A1F) tragen die ganze Seite; das Orange markiert Auswahl, Fokus und aktive Filter, auf dunklem Grund wird es heller. Space Grotesk für Überschriften, Inter für Text, Radien fast bei null. Das strenge Raster passt zur sachlichen, informationsdichten Sprache der Marke. Der Wortlaut bleibt Baustein, die Claim-Zeile lautet Öffnen. Reparieren. Behalten.

Startseite, Konfigurator und Marktplatz

Die Startseite beginnt mit dem dunklen Hero und dem Versprechen Laptops zum Öffnen, Reparieren und Behalten. Darunter folgen die Modelle mit Preis ab, der Bereich nach Einsatzzweck, der Marktplatz und die Inzahlungnahme. Der auffälligste Ablauf ist die Explosionszeichnung: Beim Scrollen zerlegt sich der Laptop in Display, Tastatureinheit, Speicher, Mainboard, Akku, Bodenplatte und Port-Karten, jede Schicht beschriftet und mit Shop oder Anleitung verlinkt.

Recht, Barrierefreiheit und Vertrauen

• Impressum und Anbieterkennzeichnung der fiktiven Baustein Devices GmbH, Berlin (als Demo markiert).
• Datenschutzerklärung und Cookie-Einstellungen mit gleichwertiger Ablehnung.
• AGB mit Widerrufsrecht, 30 Tagen Rückgabe und Hinweis auf die gesetzliche Gewährleistung.
• ElektroG: Rücknahme und Recycling alter Geräte, Akkus gehören nicht in den Hausmüll.
• Besteht die automatisierten WCAG-2.2-AA-Prüfungen auf jeder Seite bei 360, 390, 768 und 1440 px: keine Kontrastfehler, keine unerreichbaren Bedienelemente, kein horizontales Scrollen.
• Ein Sprachumschalter auf Basis von hreflang sitzt auf dem Desktop im Header und auf dem Smartphone im Footer.

Ein System, zwölf Märkte

Jeder sichtbare Text liegt in einem Region-Paket pro Markt (Texte, Daten, Alt-Texte), jede Farbe und Schrift in einem Theme. Diese Edition brauchte weder neue Templates noch neue Komponenten: ein Region-Paket, ein Theme, lokale Daten und Rechtstexte machen sie zu einem eigenen Markenerlebnis. Für eine Hardware-Marke mit internationalen Plänen wird ein neuer Markt so zum Content-Projekt statt zum Relaunch.

Lieferumfang

• Marktprofil: Sprache, Formate, Recht und Saisonalität
• Vollständig lokalisierte Texte für 13 Templates, Header, Footer und Formulare
• Markenanpassung: Palette, Schriftpaarung und Logo-Zusatz
• 0 regionale Fotos (Pexels, Quellen in credits.json)
• Datenschutzerklärung und lokale Rechtstexte
• Barrierefreiheit (WCAG 2.2 AA, automatisiert) und QA in vier Bildschirmbreiten
• Portfoliomedien: Screenshots, ganze Seiten, Scroll-Video, OG-Bild, Brand Board