509 lines
21 KiB
HTML
509 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Atelier Nord — Digitale Markenauftritte mit Substanz</title>
|
|
<meta name="description" content="Moderner Onepager für hochwertige Weblösungen, klare Markenauftritte und digitale Erlebnisse mit Fokus auf Design, Strategie und Conversion." />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="nav-shell">
|
|
<a href="#top" class="brand" aria-label="Startseite">
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
|
<span class="brand-text">
|
|
<strong>Atelier Nord</strong>
|
|
<span>Strategie, Design & digitale Auftritte</span>
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="nav" aria-label="Hauptnavigation">
|
|
<a href="#leistungen">Leistungen</a>
|
|
<a href="#ueber-uns">Über uns</a>
|
|
<a href="#vorteile">Vorteile</a>
|
|
<a href="#prozess">Prozess</a>
|
|
<a href="#stimmen">Stimmen</a>
|
|
<a href="#faq">FAQ</a>
|
|
</nav>
|
|
|
|
<a href="#kontakt" class="nav-cta">Projekt anfragen</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="top">
|
|
<section class="hero section">
|
|
<div class="container">
|
|
<div class="hero-wrap">
|
|
<div class="hero-copy">
|
|
<div class="hero-kicker">Digitale Präsenz mit Haltung, Klarheit und Wirkung</div>
|
|
<h1>Webseiten, die nicht nur gut aussehen, sondern auch überzeugen.</h1>
|
|
<p class="lead">
|
|
Wir gestalten moderne Markenauftritte für Unternehmen, Dienstleister und ambitionierte Teams, die
|
|
professionell wahrgenommen werden möchten. Mit klarer Struktur, starker Typografie und präzisem Design
|
|
entsteht ein Auftritt, der Vertrauen schafft und Anfragen fördert.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<a href="#kontakt" class="button-primary">Unverbindlich anfragen</a>
|
|
<a href="#leistungen" class="button-secondary">Leistungen entdecken</a>
|
|
</div>
|
|
|
|
<div class="hero-meta">
|
|
<div class="meta-card">
|
|
<strong>+120</strong>
|
|
<span>realisierte digitale Markenauftritte</span>
|
|
</div>
|
|
<div class="meta-card">
|
|
<strong>98 %</strong>
|
|
<span>Weiterempfehlungsquote aus laufenden Projekten</span>
|
|
</div>
|
|
<div class="meta-card">
|
|
<strong>7 Tage</strong>
|
|
<span>bis zu einem ersten klaren Designkonzept</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-panel">
|
|
<div class="panel-card">
|
|
<strong>Strategie trifft Design</strong>
|
|
<p>
|
|
Jede Seite wird entlang von Positionierung, Zielgruppe und gewünschter Wirkung aufgebaut. Das Ergebnis ist
|
|
ein hochwertiger Onepager oder Webauftritt mit klarer Botschaft und sauberem Fokus.
|
|
</p>
|
|
<div class="score-line">
|
|
<div class="score-bar" aria-hidden="true">
|
|
<div class="score-fill"></div>
|
|
</div>
|
|
<span>Conversion-Fokus</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-grid">
|
|
<div class="highlight-item">
|
|
<strong>Premium-Look</strong>
|
|
<p>Reduziertes, elegantes Interface mit hochwertigen Abständen, sauberen Flächen und klaren Kontrasten.</p>
|
|
</div>
|
|
<div class="highlight-item">
|
|
<strong>Klare Inhalte</strong>
|
|
<p>Texte, die Orientierung geben, Leistungen verständlich machen und Vertrauen aufbauen.</p>
|
|
</div>
|
|
<div class="highlight-item">
|
|
<strong>Responsiv gedacht</strong>
|
|
<p>Optimierte Darstellung auf Desktop, Tablet und Smartphone ohne gestalterische Kompromisse.</p>
|
|
</div>
|
|
<div class="highlight-item">
|
|
<strong>Saubere Umsetzung</strong>
|
|
<p>Klare Struktur, semantisches HTML und konsistentes visuelles System für nachhaltige Qualität.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trust-strip">
|
|
<div class="trust-card">
|
|
<strong>Klar positioniert</strong>
|
|
<p>Wir verdichten komplexe Inhalte zu einer nachvollziehbaren, starken Markenbotschaft.</p>
|
|
</div>
|
|
<div class="trust-card">
|
|
<strong>Visuell hochwertig</strong>
|
|
<p>Ein ruhiger Premium-Look sorgt für Professionalität, Lesbarkeit und Wiedererkennbarkeit.</p>
|
|
</div>
|
|
<div class="trust-card">
|
|
<strong>Messbar sinnvoll</strong>
|
|
<p>Jede Sektion dient einem Zweck: Vertrauen aufbauen, Nutzen erklären, Kontakt erleichtern.</p>
|
|
</div>
|
|
<div class="trust-card">
|
|
<strong>Verlässlich im Prozess</strong>
|
|
<p>Transparente Schritte, klare Abstimmung und ein Ergebnis, das strategisch wie gestalterisch trägt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="leistungen" class="section-alt">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Leistungen</span>
|
|
<h2>Alles, was ein moderner digitaler Auftritt heute leisten muss.</h2>
|
|
<p class="lead">
|
|
Von der inhaltlichen Schärfung bis zur visuellen Ausarbeitung entwickeln wir Seiten, die professionell wirken,
|
|
leicht verständlich sind und Ihre Zielgruppe präzise ansprechen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid-3">
|
|
<article class="card feature-card">
|
|
<h3>Positionierung & Struktur</h3>
|
|
<p>
|
|
Wir entwickeln eine klare Seitenlogik, definieren inhaltliche Prioritäten und schaffen eine starke
|
|
Dramaturgie über den gesamten Onepager hinweg.
|
|
</p>
|
|
<p>
|
|
So entsteht eine Seite, die nicht überfordert, sondern führt.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card feature-card">
|
|
<h3>UI-Design mit Premium-Anspruch</h3>
|
|
<p>
|
|
Typografie, Weißraum, Farbklima und Flächen werden zu einem ruhigen, eleganten Gesamtbild verdichtet, das
|
|
modern wirkt und Vertrauen transportiert.
|
|
</p>
|
|
<p>
|
|
Reduziert, präzise und hochwertig.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card feature-card">
|
|
<h3>Texte mit Klarheit und Wirkung</h3>
|
|
<p>
|
|
Wir formulieren Inhalte verständlich, glaubwürdig und zielgerichtet, damit Leistungen nicht nur genannt,
|
|
sondern überzeugend vermittelt werden.
|
|
</p>
|
|
<p>
|
|
Für bessere Orientierung und stärkere Resonanz.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card feature-card">
|
|
<h3>Responsive Umsetzung</h3>
|
|
<p>
|
|
Alle Layouts werden so konzipiert, dass sie auf mobilen Endgeräten ebenso ruhig, lesbar und professionell
|
|
funktionieren wie auf großen Bildschirmen.
|
|
</p>
|
|
<p>
|
|
Ohne visuelle Brüche.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card feature-card">
|
|
<h3>Conversion-orientierte Nutzerführung</h3>
|
|
<p>
|
|
Wir setzen klare Call-to-Actions, logische Informationsfolgen und überzeugende Vertrauenselemente ein, um
|
|
den Weg zur Anfrage bewusst zu verkürzen.
|
|
</p>
|
|
<p>
|
|
Weniger Reibung, mehr Relevanz.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card feature-card">
|
|
<h3>Markentaugliches Designsystem</h3>
|
|
<p>
|
|
Farben, Abstände, Buttons, Karten und Headlines folgen einem konsistenten System. Dadurch wirkt der gesamte
|
|
Auftritt professionell, ruhig und aus einem Guss.
|
|
</p>
|
|
<p>
|
|
Langfristig anschlussfähig und skalierbar.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="ueber-uns" class="section">
|
|
<div class="container">
|
|
<div class="about-wrap">
|
|
<div class="about-main">
|
|
<span class="eyebrow">Über uns</span>
|
|
<h2>Wir gestalten digitale Auftritte mit Substanz statt bloßer Oberfläche.</h2>
|
|
<p class="lead">
|
|
Gute Webseiten entstehen nicht zufällig. Sie sind das Ergebnis aus klarer Strategie, präziser Gestaltung und
|
|
einem feinen Gespür für Zielgruppen, Markenwirkung und digitale Nutzerführung.
|
|
</p>
|
|
<div class="divider"></div>
|
|
<p>
|
|
Atelier Nord begleitet Unternehmen, Selbstständige und wachsende Teams bei der Entwicklung moderner
|
|
Webseiten, die professionell aussehen und gleichzeitig konkret funktionieren. Unser Ansatz verbindet
|
|
inhaltliche Klarheit mit einer gestalterischen Sprache, die zeitgemäß, ruhig und hochwertig wirkt.
|
|
</p>
|
|
<ul class="check-list">
|
|
<li>Klare Markenbotschaften statt austauschbarer Standardtexte</li>
|
|
<li>Präzise Designentscheidungen mit Fokus auf Vertrauen und Wertigkeit</li>
|
|
<li>Saubere Struktur für bessere Lesbarkeit und nachvollziehbare Nutzerwege</li>
|
|
<li>Ein Ergebnis, das sowohl ästhetisch als auch geschäftlich sinnvoll ist</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="about-stats">
|
|
<div class="stat-box">
|
|
<strong>10+</strong>
|
|
<p>Jahre Erfahrung in Webdesign, Markenkommunikation und digitaler Nutzerführung.</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<strong>360°</strong>
|
|
<p>Denken über Design hinaus: Inhalte, Struktur, Wirkung, Conversion und Positionierung.</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<strong>1 Ziel</strong>
|
|
<p>Eine Webseite zu schaffen, die professionell wirkt, leicht verständlich ist und echte Resonanz erzeugt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="vorteile" class="section-alt">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Warum wir</span>
|
|
<h2>Ein Onepager reicht nicht, wenn er nur schön ist. Er muss präzise wirken.</h2>
|
|
<p class="lead">
|
|
Unser Mehrwert liegt in der Kombination aus Designqualität, strategischer Klarheit und einem konsequenten Blick
|
|
auf Wirkung, Lesbarkeit und Vertrauen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<article class="advantage-card">
|
|
<h3>Reduktion mit Anspruch</h3>
|
|
<p>
|
|
Weniger visuelle Unruhe bedeutet mehr Aufmerksamkeit für das Wesentliche. Wir arbeiten mit präzisen Abständen,
|
|
ruhigen Farbflächen und einer typografischen Hierarchie, die Inhalte aufwertet, statt sie zu überdecken.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="advantage-card">
|
|
<h3>Design, das Positionierung unterstützt</h3>
|
|
<p>
|
|
Eine gute Webseite transportiert nicht nur Informationen, sondern Haltung. Deshalb wird jedes Layout entlang
|
|
Ihres Angebots, Ihrer Tonalität und Ihrer Zielgruppe entwickelt.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="advantage-card">
|
|
<h3>Vertrauen auf den ersten Blick</h3>
|
|
<p>
|
|
Hochwertige Gestaltung erhöht nicht nur die wahrgenommene Qualität, sondern reduziert auch Zweifel. Das ist
|
|
besonders relevant bei erklärungsbedürftigen Leistungen und beratungsintensiven Angeboten.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="advantage-card">
|
|
<h3>Effizienz im gesamten Projekt</h3>
|
|
<p>
|
|
Ein klarer Prozess, schnelle Abstimmung und fokussierte Entscheidungen sorgen dafür, dass Projekte zielgerichtet
|
|
vorankommen und nicht in endlosen Schleifen hängen bleiben.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="prozess" class="section">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Prozess</span>
|
|
<h2>So entsteht aus einer Idee ein moderner Auftritt mit klarer Wirkung.</h2>
|
|
<p class="lead">
|
|
Transparent, strukturiert und effizient. Jeder Schritt ist darauf ausgelegt, Komplexität zu reduzieren und die
|
|
richtigen Entscheidungen sichtbar zu machen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="process">
|
|
<article class="step">
|
|
<h3>Analyse & Zielbild</h3>
|
|
<p>
|
|
Wir klären Zielgruppe, Angebotskern, Tonalität und inhaltliche Prioritäten. Daraus entsteht ein präzises
|
|
Fundament für die spätere Gestaltung.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="step">
|
|
<h3>Struktur & Wireflow</h3>
|
|
<p>
|
|
Anschließend entwickeln wir eine klare Seitenarchitektur mit sinnvoller Reihenfolge, starken Überschriften und
|
|
nachvollziehbaren Übergängen zwischen den Inhalten.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="step">
|
|
<h3>Design & Feinschliff</h3>
|
|
<p>
|
|
Jetzt wird die Richtung visuell greifbar: Typografie, Farbwelt, Karten, Flächen und Buttons formen einen
|
|
hochwertigen, markentauglichen Gesamtauftritt.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="step">
|
|
<h3>Launch & Optimierung</h3>
|
|
<p>
|
|
Nach finaler Abstimmung wird die Seite sauber umgesetzt. Auf Wunsch begleiten wir anschließend auch die
|
|
Weiterentwicklung und inhaltliche Schärfung.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="stimmen" class="section-alt">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Kundenstimmen</span>
|
|
<h2>Was unsere Zusammenarbeit für Kundinnen und Kunden spürbar verändert hat.</h2>
|
|
<p class="lead">
|
|
Gute Gestaltung wirkt nicht nur visuell, sondern auch im Gespräch, in der Wahrnehmung und in der Qualität der
|
|
Anfragen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid-3">
|
|
<article class="testimonial">
|
|
<blockquote>
|
|
„Unsere neue Seite wirkt deutlich professioneller, klarer und hochwertiger. Besonders beeindruckt hat uns,
|
|
wie strukturiert Inhalte und Design zusammengeführt wurden. Seit dem Relaunch kommen die Anfragen gezielter
|
|
und passender herein.“
|
|
</blockquote>
|
|
<footer>
|
|
<strong>Laura M.</strong>
|
|
<span>Geschäftsführerin, Beratungsunternehmen</span>
|
|
</footer>
|
|
</article>
|
|
|
|
<article class="testimonial">
|
|
<blockquote>
|
|
„Vorher hatten wir eine Webseite, die vieles sagte, aber wenig transportierte. Jetzt ist sofort erkennbar,
|
|
wofür wir stehen. Das Design fühlt sich modern an, ohne laut zu sein, und genau das wollten wir erreichen.“
|
|
</blockquote>
|
|
<footer>
|
|
<strong>Daniel R.</strong>
|
|
<span>Gründer, Architektur- und Planungsbüro</span>
|
|
</footer>
|
|
</article>
|
|
|
|
<article class="testimonial">
|
|
<blockquote>
|
|
„Die Zusammenarbeit war klar, effizient und angenehm präzise. Wir hatten zu jedem Zeitpunkt das Gefühl,
|
|
dass Gestaltung hier nicht dekorativ verstanden wird, sondern als strategisches Werkzeug.“
|
|
</blockquote>
|
|
<footer>
|
|
<strong>Sophie M.</strong>
|
|
<span>Leitung Marketing, B2B-Dienstleister</span>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" class="section">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<span class="eyebrow">FAQ</span>
|
|
<h2>Häufige Fragen vor dem Projektstart.</h2>
|
|
<p class="lead">
|
|
Klare Antworten schaffen Sicherheit. Hier finden Sie die wichtigsten Punkte rund um Zusammenarbeit, Ablauf und
|
|
Umfang.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="faq-list">
|
|
<details class="faq-item">
|
|
<summary>Für wen eignet sich ein Onepager besonders gut?</summary>
|
|
<div class="faq-content">
|
|
Ein Onepager eignet sich besonders für Dienstleister, Agenturen, Expertenmarken, Beratungen oder neue Angebote,
|
|
die klar, fokussiert und ohne unnötige Komplexität präsentiert werden sollen. Wenn die Kernbotschaft präzise
|
|
ist, kann ein Onepager äußerst wirkungsvoll sein.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Unterstützen Sie auch bei Texten und Struktur?</summary>
|
|
<div class="faq-content">
|
|
Ja. In vielen Projekten liegt der größte Hebel nicht nur im visuellen Design, sondern in der sauberen Ordnung
|
|
der Inhalte. Wir helfen bei Struktur, Headlines, Formulierungen und der gesamten erzählerischen Führung der
|
|
Seite.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Wie lange dauert ein Projekt in der Regel?</summary>
|
|
<div class="faq-content">
|
|
Das hängt von Umfang, Freigabeschleifen und Materiallage ab. Für einen fokussierten Onepager lässt sich jedoch
|
|
meist innerhalb weniger Wochen ein hochwertiges, abgestimmtes Ergebnis realisieren.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Kann die Seite später erweitert werden?</summary>
|
|
<div class="faq-content">
|
|
Ja. Wenn Struktur und Designsystem sauber angelegt sind, lässt sich ein Onepager jederzeit zu einer größeren
|
|
Website ausbauen. Genau deshalb denken wir bereits am Anfang modular und konsistent.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Ist auch eine Zusammenarbeit mit bestehenden Markenrichtlinien möglich?</summary>
|
|
<div class="faq-content">
|
|
Selbstverständlich. Bestehende Farben, Schriftwelten, Tonalitäten oder Designvorgaben können sinnvoll
|
|
weiterentwickelt und in ein modernes, digitales System übersetzt werden, ohne die Marke zu verfremden.
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="kontakt" class="section">
|
|
<div class="container">
|
|
<div class="cta-panel">
|
|
<div class="cta-grid">
|
|
<div>
|
|
<span class="eyebrow cta-eyebrow">Kontakt</span>
|
|
<h2>Bereit für einen Auftritt, der Ihrer Qualität gerecht wird?</h2>
|
|
<p class="lead">
|
|
Wenn Ihre Webseite klarer, hochwertiger und überzeugender wirken soll, sprechen wir darüber. Gemeinsam
|
|
entwickeln wir einen digitalen Auftritt, der ästhetisch überzeugt und geschäftlich sinnvoll arbeitet.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="cta-actions">
|
|
<a href="mailto:hallo@ateliernord.de" class="button-primary">Jetzt Anfrage senden</a>
|
|
<a href="tel:+490000000000" class="button-secondary">Erstgespräch vereinbaren</a>
|
|
</div>
|
|
|
|
<div class="contact-boxes">
|
|
<div class="contact-box">
|
|
<strong>E-Mail</strong>
|
|
<span>hallo@ateliernord.de</span>
|
|
</div>
|
|
<div class="contact-box">
|
|
<strong>Telefon</strong>
|
|
<span>+49 000 0000 0000</span>
|
|
</div>
|
|
<div class="contact-box">
|
|
<strong>Standort</strong>
|
|
<span>Berlin · Remote im DACH-Raum</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-shell">
|
|
<small>© 2026 Atelier Nord. Alle Rechte vorbehalten.</small>
|
|
<nav class="footer-nav" aria-label="Footer Navigation">
|
|
<a href="#top">Start</a>
|
|
<a href="#leistungen">Leistungen</a>
|
|
<a href="#ueber-uns">Über uns</a>
|
|
<a href="#faq">FAQ</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
<a href="#">Impressum</a>
|
|
<a href="#">Datenschutz</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |