Files
ndsolutionswebsite/funktionen.md
DanielS 80773cacee
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 25s
design: implement Bento-Grid and Corporate Dark Mode redesign
2026-07-06 00:55:27 +02:00

2.7 KiB
Raw Blame History

Website Funktionen & Designkonzept - N&D i-t SOLUTIONS

1. Design & Aussehen (Aesthetics)

  • Stil: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode).
  • Farben: Tiefes Anthrazit/Schwarz, reines Weiß für Typografie, dezentes Arktis-Blau als Fokusfarbe.
  • Bento-Grid: Hauptlayout basiert auf einem asymmetrischen, klar strukturierten Raster (Bento-Boxen).
  • Karten-Stil: Mattes Finish (Subtiler Border-Gradient statt starkem Glassmorphismus) für maximale Lesbarkeit.
  • Typografie: Seriöse, geometrische Sans-Serif (z. B. Inter oder Geist Sans via Google Fonts).
  • Layout: Streng responsiv mit Fokus auf fehlerfreie Desktop-Raster und saubere Mobile-Kompression.

2. Effekte & Interaktion (Wirkung)

  • Micro-Interactions: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen.
  • Grid-Hover: Angesteuerte Bento-Zellen heben sich durch eine minimale Aufhellung des Hintergrunds ab.
  • Bento-Skalierung: Inhaltselemente innerhalb einer Zelle verschieben sich bei Hover dezent (z. B. Pfeil-Icon wandert nach rechts oben).
  • Sticky Navbar: Ultradünne, fixierte Navigationsleiste mit maximaler Hintergrund-Unschärfe (Blur).

3. Struktur & Sektionen (Bento-Architektur)

Navbar (Navigation)

  • Komponenten: Logo, Direktlinks (Services, Tech-Stack, Konzept), Button "Erstgespräch buchen".

Hero- & Wert-Sektion (Großes Bento-Raster oben)

  • Zelle 1 (Groß - Hauptfokus):
    • Überschrift: "Webdesign, das konvertiert. Ohne Kompromisse."
    • Subtext: "Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. Technisch perfekt. Sichtbar bei Google."
    • CTA: Primärer Button "Projekt anfragen".
  • Zelle 2 (Mittel - Das Versprechen): Fokus auf "Keine Vorlagen" Jedes Design entsteht individuell im Code.
  • Zelle 3 (Klein - USP): "Performance-Garantie" (PageSpeed-Score Visualisierung >90).

Services & Expertise (Bento-Raster Mitte)

  • Zelle 4 (Lang - Kernleistung): Individuelles Webdesign & UI/UX-Entwicklung von Grund auf.
  • Zelle 5 (Quadratisch): SEO-Fundament (Semantischer Code, strukturierte Daten für Google).
  • Zelle 6 (Quadratisch): Wartung & Hosting (Sicherheit, DSGVO-Konformität, Updates).

Tech-Stack & Methode (Bento-Raster unten)

  • Zelle 7 (Breit): Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Sanity CMS).
  • Zelle 8 (Mittel - Da noch keine Kunden): "Unser Ansatz" Transparenter 3-Schritte-Prozess vom Erstgespräch zum Launch.

Contact (Kontakt-Zone)

  • Zelle 9 (Groß): Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
  • Komponenten: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.