Brand & Visual Deck

GÜNTHNER
Schleif
TECHNIK

CI-Konzept, Designrichtung und Visual Guidelines für den Website-Relaunch 2025. Erstellt als Pitch-Unterlage und Arbeitsgrundlage.

Konzept: Industrial Editorial
Version 1.0 — 2025
Hamburg
01 / 10
02 / 10
Brand Positioning

Was diese Marke
sein soll.

Präzision
ist kein
Zufall.
01
Kompetenz zeigen, nicht behaupten
Die Website spricht durch technische Specs, echte Bilder aus der Werkshalle und konkrete Leistungsdaten — nicht durch leere Marketingphrasen wie "Ihr verlässlicher Partner".
02
50 Jahre als Stärke inszenieren
Seit 1974 ist kein Staubfänger — es ist der stärkste Vertrauensbeweis. Die Marke trägt dieses Datum selbstbewusst, nicht entschuldigend.
03
Lieferzeit als Hauptargument
Für B2B-Kunden unter Zeitdruck ist "max. 5 Arbeitstage" das entscheidende Argument. Es gehört über den Fold, nicht in den Footer.
04
Industrial Editorial — anders als die Konkurrenz
In einer Branche voller generischer heller WordPress-Sites schafft ein dunkles, selbstbewusstes Design sofortige Differenzierung. Wer mutig wirkt, wirkt kompetent.
03 / 10
Farbsystem

Farben, die
nach Stahl riechen.

Tiefschwarz
#0a0a0a
Background Primary
Dunkel
#111111
Background Secondary
Anthrazit
#181818
Cards & Panels
Stahl
#222222
Elevated Surfaces
Funken-Orange
#e8630a
Primary Accent
Helles Orange
#ff7520
Hover States
Warmweiß
#f0ede8
Primary Text
Stahlblau
#2e4a6b
Specs & Tables
Orange — Einsatz
CTA
Buttons, Akzentlinien, Labels, hover-states, USP-Stripe. Nie als Hintergrund über großen Flächen.
Stahlblau — Einsatz
Ø max 450 mm
l max 1500 mm
Nur in Tabellen, Spec-Blöcken und Daten-Kontexten. Nie mit Orange kombinieren.
Warmweiß — Einsatz
HEADLINE
Fließtext und Beschreibungen
Kein reines Weiß (#fff). Warmton für Headings, 60% Opacity für Body-Text, 30% für Metainfos.
04 / 10
Typografie

Barlow Condensed
trägt die Marke.

Display / Hero
Barlow Condensed 900
Uppercase · Tight tracking
Seiten-Titeln, Hero-H1
RUND­SCHLEIFEN
Section Titles
Barlow Condensed 800
Uppercase · Normal tracking
Alle Sektions-Überschriften
Unsere Leistungen
Card Titles
Barlow Condensed 700
Uppercase · +0.04em
Service-Cards, Navlinks
Werkzeugschleifen
Labels / Tags
Barlow Condensed 600
Uppercase · +0.2em spaced
Eyebrows, Kategorien
01 — Rundschleiferei
Body Text
Barlow 300
Mixed case · Normal
Fließtext, Beschreibungen
Höchste Präzision und Zuverlässigkeit in der Bearbeitung Ihrer Aufträge gehören seit 1974 zu den Grundsätzen der Günthner Schleiftechnik GmbH in Hamburg Altona.
Größen-Hierarchie
9 rem
HERO
4.5 rem
Section Title
2 rem
Card Heading
0.75 rem
LABEL / EYEBROW
0.9 rem
Fließtext — Barlow Light für Lesbarkeit und ruhigen Gegenpart zur kondensieren Display-Schrift.
05 / 10
Fotografie

Bilder die zeigen
was Arbeit ist.

Die Fotografie ist der stärkste Hebel dieser Website. Echte Aufnahmen aus dem Betrieb sind unersetzlich — und der entscheidende Vorteil gegenüber der Konkurrenz.

⚡
Hero-Bild
Schleifscheibe im Eingriff, Funken, dramatisches Gegenlicht
images/hero.jpg
Querformat · 1920px
Hero — Dramatik, Bewegung, Licht
🔩
Werkstück
Eingespanntes Teil, Schärfe auf dem Metall
images/rundschleifen.jpg
Rundschleifen
🪛
Werkzeug
Fräser oder Bohrer close-up, Schärfe auf Schneidkante
images/werkzeugschleifen.jpg
Werkzeugschleifen
👷
Team
Meister an der Maschine oder Teamfoto in der Halle
images/team.jpg
Team / Über uns
⚙️
Sonderwerkzeuge
Stufenbohrer auf dunklem Untergrund, Clean-Shot
images/sonderwerkzeuge.jpg
Sonderwerkzeuge

✓ Mach das

Echte Maschinen, echte Hände, echte Funken — kein Stock
Hartes Seitenlicht oder Gegenlicht für Dramatik und Tiefe
Geringe Schärfentiefe — Fokus auf das Detail, nicht die Umgebung
Dunkle, metallische Hintergründe — der dunkle CI-Ton muss sich fortsetzen
Bewegung erlaubt — leichter Motion Blur zeigt Energie
Wärme über Farbkorrektur — Lichtstimmung Richtung Orange/Amber

— Lass das

Stock-Fotos oder Symbolfotografie
Helle, überbelichtete oder cleane Studiofotos
Gruppenfotos mit Krawatten und Anzügen
Weitwinkel der "alles zeigt" — wirkt amateurhaft
Kalte Blaustiche — bricht die Warmheit der Palette
Nachher-Bilder von blanken Werkzeugen ohne Kontext
06 / 10
UI-Komponenten

Jedes Element
aus einem Guss.

Navigation
  • Leistungen
  • Über uns
  • Jobs
Anfrage
Buttons
Service-Karte
01 — Rundschleiferei
Rundschleifen
CNC und konventionell · Losgröße 1 bis 300 Teile
Ø max 450 mm l max 1500 mm CNC · Studer
Details →
USP-Streifen
50+
Jahre
Erfahrung
≤5
Arbeits-
tage
HH
Hamburg
Altona
Kontaktformular (Felder)
Highlight-Zeilen
⚡ Max. 5 Arbeitstage Lieferzeit
🔧 Sonderwerkzeuge in 2–3 Tagen
📍 Hamburg Altona — Schnackenburgallee 16A
07 / 10
Seiten-Struktur

Klarer Aufbau,
klare Aussage.

Startseite
Nav
Hero — Vollbild + Overlay
USP-Streifen
Leistungen 2×2 Grid
Über uns — 2-Spaltig
FOTO
Kontakt + Formular
Design-Prinzipien
Spacing
Section-Padding: clamp(5rem, 10vw, 8rem) oben/unten.
Content-Max-Width: 1200px zentriert.
Inline-Padding: clamp(1.5rem, 5vw, 3rem).
Grid
2-Spalten für Leistungen und Über-uns.
1px-Trennlinien statt Abstände — industrieller Look.
Kein border-radius — überall scharfe Ecken.
Animationen
Scroll-Reveal: fadeUp 0.65s bei Sichtbarkeit.
Hover: Bild scale(1.04), 0.5s ease.
Keine Auto-Slider oder Karussells.
Kein border-radius, keine Schatten.
Mobile
Breakpoint: 768px — Grid stapelt sich.
Nav-Toggle: Hamburger → Full-Screen-Menü.
Hero-H1: clamp(3.5rem, 8vw, 9rem) — immer groß.
USP-Streifen: wraps, bleibt lesbar.
08 / 10
Sprache & Ton

Präzise auch
in Worten.

✓ So klingt Günthner
„Präzision seit 1974."
Kurz. Selbstbewusst. Das Datum tut die Arbeit. Kein Adjektiv nötig.
— Nicht so
„Ihr zuverlässiger Partner für alle Schleifarbeiten."
Passiv, generisch, nichtssagend. Könnte von jeder Firma sein.
✓ So klingt Günthner
„Säge stumpf? Auf zu Günthner."
Direkt, leicht selbstironisch, menschlich — dieser Ton ist Gold. Beibehalten.
— Nicht so
„Wir freuen uns auf Ihre Kontaktaufnahme."
Passiver Konjunktiv. Die Firma tut was — sie soll es auch so sagen.
✓ So klingt Günthner
„Lieferzeit: max. 5 Arbeitstage."
Konkret, messbar, vertrauensbildend. Versprechen statt Behauptung.
— Nicht so
„Wir sind bemüht, schnellstmöglich zu liefern."
"Bemüht" klingt nach Entschuldigung. Die Lieferzeit ist ein Versprechen, keine Absicht.
Direkt
nicht höflich-wischiwaschi
Konkret
nicht blumig-generisch
Sachlich
nicht emotional-werbend
Knapp
nicht ausschweifend
09 / 10
Live-Vorschau

So sieht es aus.

  • Leistungen
  • Über uns
  • Jobs
Anfrage stellen
Hamburg Altona · Seit 1974
Präzision
die hält.
Werkzeug-, Rund- und Flachschleifen für die verarbeitende Industrie. Lieferzeit max. 5 Arbeitstage.
Jetzt anfragen →
Leistungen
50+
Jahre
Erfahrung
≤ 5
Arbeitstage
Lieferzeit
4
Schleif-
verfahren
HH
Standort
Hamburg
10 / 10
Nächste Schritte

Von hier zur
fertigen Website.

Vier Schritte vom Pitch zur Live-Website auf Vercel — klare Aufgaben, klare Reihenfolge.

01
Foto-Produktion
Dreh in der Werkshalle. Hero, 4 Service-Bilder, Team-Foto. Dramatisches Licht, keine gestellten Posen. Das ist das Fundament — alles andere hängt daran.
Jasper · vor Ort
02
Bilder einbauen
Fotos optimieren (WebP, max 200 KB), in den images/-Ordner, Platzhalter im HTML ersetzen. Farbkorrektur auf warmen CI-Ton abstimmen.
Jasper · Lightroom
03
Content finalisieren
Öffnungszeiten prüfen, E-Mail-Adresse, echte Kundenreferenz für Testimonial-Block, Impressum & Datenschutz anlegen (DSGVO). Formspree-Code einsetzen.
Jasper + Freund
04
Live auf Vercel
Ordner auf Vercel deployen, Domain guenthner-schleiftechnik.de verknüpfen. Google Search Console einrichten, LocalBusiness-Schema ergänzen. Go live.
Vercel · ~30 Min
Konzept
Industrial Editorial
Für GÜNTHNER Schleiftechnik GmbH · Hamburg · 2025
Tech-Stack
HTML · CSS · JS
DEPLOYED VIA VERCEL