LogoPrintdesignDesignguideWebdesignWebentwicklungMotion Design
Hundehüttengaudi
Für Hundehüttengaudi habe ich Logo, Flyer, Plakat und Visitenkarte gestaltet und daraus eine handgebaute, animierte Website im selben Look entwickelt.
- Branche
- Hundebetreuung und Hundetraining
- Ort
- Münzenberg-Gambach
- Zeitraum
- Februar bis Oktober 2026
- Website
- hundehuettengaudi.de
Logo, Druck und Website im selben Look
Was gefragt war
Meike Morschel betreibt mit Hundehüttengaudi eine Tagesbetreuung und Ausbildung für Hunde in Münzenberg-Gambach im Wetteraukreis. Zum Angebot gehören Tagesbetreuung, Kurse, Einzelunterricht und die Ausbildung von ESA-Begleitern.
Gebraucht wurde ein einheitlicher Auftritt: zuerst Logo, Flyer, Plakat und Visitenkarte, danach eine Website im selben Look. Sie sollte spielerisch wirken, aber klare Linien und Struktur haben. Gefordert waren ein Onepager mit Unterseiten, von Hand gebaut, ohne schwere Frameworks und deutlich animiert.
Die Ziele
- Logo, Druckmedien und Website im selben Look
- Spielerische Gestaltung auf klarer Struktur
- Alle Angebote übersichtlich, die Kurse gesammelt auf einer Seite
- Lebendige Seite mit viel Bewegung
- Schlanke, handgebaute Technik ohne Drittdienste
Was ich gemacht habe
Logo
Wortbildmarke mit Hund im Hüttenrahmen, Pfoten und dem Zusatz Tagesbetreuung & Ausbildung als Grundlage für alle Medien.
Flyer
sechsseitiger Faltflyer mit Tagesbetreuung, ESA-Begleiter-Ausbildung, Einzelbetreuung, Fotos und Kontaktdaten.
Plakat
Plakat in DIN A3 mit den Angeboten, Fotos und Kontaktdaten.
Visitenkarte
Visitenkarte im Format 85 × 55 mm im Markendesign mit Lackveredelung.
Designguide
interaktiver Guide mit zehn Abschnitten von Logo, Farbe und Typografie bis zu UI-Bausteinen und Anwendungsbeispielen.
Markenrichtlinien
drei Dokumente mit Brandguide für Haltung, Tonalität und Bildwelt, Designguide mit Design Tokens und Komponentenbibliothek mit fertigen Bausteinen samt Code.
Webdesign
Übersetzung der Printcollage ins Web mit Pinselstrich-Bannern, Polaroids, gerissener Papierkante, organischer Form und Pfoten als Aufzählungszeichen.
Webentwicklung
handcodierte Website ohne Framework mit Onepager und drei Unterseiten, Farben, Abstände, Radien und Dauern als Design Tokens.
Motion Design
Bewegungssystem mit GSAP, ScrollTrigger und Lenis, kurze Übergänge und volle Unterstützung für reduzierte Bewegung.
Textredaktion
Texte der Kundin in die Sie-Form gebracht und neu gegliedert, kurze Überleitungen wie der Tagesablauf auf Basis ihrer Angaben formuliert.
Bildaufbereitung
Fotos der Kundin ausgewählt, zugeschnitten und als WebP aufbereitet.
Barrierefreiheit
Überschriftenfolge, Alternativtexte, sichtbarer Fokus, Sprunglink, Tastaturbedienung und Kontraste.
SEO-Grundlagen
Titel, Beschreibung und Open Graph auf allen Seiten, dazu ein Maßnahmenplan für SEO und GEO.
Dokumentation
technische Beschreibung und Übergabeprotokoll mit Prüfliste.
Was dieses Projekt ausmacht Hundehüttengaudi im Detail
Brandguide HundehüttengaudiAuszug
Regel 1
Reduzierte Bewegung heißt Stillstand
Wer in seinem System reduzierte Bewegung eingestellt hat, sieht alles sofort im Endzustand.
Regel 2
Jeder Wert ist ein Token
Farben, Abstände, Radien und Dauern sind als Design Tokens festgelegt. Jede Seite nutzt dieselben Werte.
Steckbrief HundehüttengaudiAuszug
- 420 Millisekunden
- Bewegung mit AufgabeNichts bewegt sich nur zur Zierde, jeder Übergang bleibt unter einer halben Sekunde. Einzige Ausnahme ist die Form im Hero, die ganz langsam atmet.
- 7 Kursbausteine
- Alle Kurse auf einer SeiteVom Beratungsgespräch vor dem Welpeneinzug bis zum Programm nach Feierabend habe ich alle Kurse übersichtlich auf einer Seite mit Sprungmarken zusammengeführt.
- Zeitraum
- Februar bis Oktober 2026
- Ort
- Münzenberg-Gambach
- Branche
- Hundebetreuung und Hundetraining
Spielerisch auf strengem Raster
Spielerisch sind der gemalte Pinselstrich unter den Sektionslabels, die Polaroids, die fein gerissene Papierkante und die Pfote als Aufzählungszeichen. Für Struktur sorgen das Raster, die ruhige Typografie mit genau zwei Schriften und ein leicht schiefer Buttonradius als Erkennungszeichen.
Eine Pfote, die mitwandert
Eine kleine Pfote wandert in der Navigation zum aktiven Punkt.
Ohne Drittdienste
Schriften und Skripte liegen auf der eigenen Seite. Die Seite schickt keine einzige Anfrage nach außen.
Wie es lief
Logo
Am Anfang stand das Logo mit dem Hund im Hüttenrahmen als Grundlage für alle Medien.
Flyer, Plakat und Visitenkarte
Aus den Texten und Fotos der Kundin entstanden Faltflyer, A3-Plakat und Visitenkarte.
Designguide
Ein interaktiver Designguide übertrug Farben, Schrift und Bausteine aus dem Druck ins Web.
Inhalte und Entwurf
Aus den Texten der Kundin entstanden die Seiten samt Kursseite mit sieben Bausteinen und einer Pfote als Navigation.
Übergabe und Livegang
Die Website ging auf hundehuettengaudi.de online und die Kundin bekam eine vollständige Übergabe mit Plan für SEO und GEO.
Das Projekt in Bildern
Von Hand gebaut, ohne Drittdienste
Hundehüttengaudi ist von Hand gebaut, ohne Framework und ohne Drittdienste. Unter der verspielten Oberfläche liegt eine klare Struktur, damit Google und KI-Suchsysteme Angebote, Region und Öffnungszeiten richtig lesen.
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Hundehüttengaudi",
"areaServed": [
{ "@type": "City", "name": "Münzenberg" },
{ "@type": "AdministrativeArea", "name": "Wetteraukreis" }
],
"openingHoursSpecification": {
"dayOfWeek": ["Tuesday", "Thursday"],
"opens": "07:00", "closes": "17:00"
},
"hasOfferCatalog": {
"itemListElement": [
{ "itemOffered": { "name": "Tagesbetreuung" } },
{ "itemOffered": { "name": "Einzelunterricht" } }
]
}
}Strukturierte Daten
- LocalBusiness mit Region, Öffnungszeiten und Angeboten
- Person mit Fachgebieten und Qualifikationen
- Service auf jeder Angebotsseite
- BreadcrumbList auf jeder Unterseite
SEO und GEO
- Titel, Beschreibung und genau eine H1 pro Seite
- Canonicals, sitemap.xml und robots.txt
- llms.txt für KI-Suchsysteme
- Open Graph für geteilte Links
Technik
- Handgebaut in HTML, CSS und JavaScript, ohne Framework
- Design Tokens für Farben, Abstände, Radien und Dauern
- Bewegung mit GSAP, ScrollTrigger und Lenis
- Schriften und Skripte selbst gehostet, Bilder als WebP
Barrierefreiheit und Datenschutz
- Sprunglink, sichtbarer Fokus, Bedienung per Tastatur
- Reduzierte Bewegung zeigt alles sofort im Endzustand
- Keine Drittdienste, deshalb kein Cookie-Banner nötig
- Kein Analysewerkzeug eingebunden
- 0
- Drittdienste beim Laden der Seite
- 420
- Millisekunden höchstens je Übergang
- 2
- Schriften, beide selbst gehostet
Was jetzt steht
- Logo, sechsseitiger Faltflyer, A3-Plakat und Visitenkarte im selben Look
- Ein Markensystem aus Brandguide, Designguide und Komponentenbibliothek, abgeleitet aus Logo und Druckmedien
- Eine handgebaute Website auf hundehuettengaudi.de mit Onepager und drei Unterseiten für Tagesbetreuung, ESA-Begleiter sowie Kurse und Unterricht
- Sieben Kursbausteine auf einer Seite mit Sprungmarken
- Ein Bewegungssystem mit kurzen Übergängen, das bei reduzierter Bewegung stillsteht
- Keine Drittdienste, Schriften und Skripte liegen auf der eigenen Seite
- Eine Übergabe mit Übergabeprotokoll, Prüfliste und Maßnahmenplan für SEO und GEO
Website hundehuettengaudi.de
Logo, Flyer und Website im selben Look
Bei Hundehüttengaudi kamen zuerst Logo, Flyer und Plakat, die Website habe ich daraus abgeleitet. So gehe ich auch bei dir vor, wenn Druck und Web zusammenpassen sollen.
Passende Leistungen WebdesignSEO und GEOBranding