67 Fassungen
Gasthof Bittner – alle Entwürfe
Testseite. Jede Karte öffnet eine vollständige Fassung mit Startseite, Speisekarte, Impressum und Datenschutz.
Neustart nach deinen Vorlagen
Acht Vorlagen, jede als eigene Seite umgesetzt. c00 bis c4 haben eine Buchungsleiste, die an Booking.com schickt.
c00 · Hotel (Figma-Vorlage)Titelbild mit Buchungs-Pillen, gelber Block hinter dem Foto, Symbolkarten, dunkler Zimmerblock, Feiern-Liste, Angebotskarten, dunkler Fuß.c00/c1 · Hotel CanvasDunkle Kopfleiste, weiße Navigation, Slider mit Buchungsleiste, Abschnitte mit weißen Karten.c1/c2 · Encore (hell)Holz-Kopfleiste, hängende Logo-Karte, Schriftzug über dem Haus, Buchungsbox mit großen Ziffern, Creme und Dunkelbraun.c2/c3 · Encore (Abend)Durchsichtige Kopfleiste, Versalien-Titel mit Rahmenknopf, dunkles Band „Zimmer finden“, Creme-Abschnitte mit Zierschwung.c3/c4 · ValoraBild über den ganzen Bildschirm, riesige kursive Überschrift, Glasleiste unten, danach große Fotos und viel Luft.c4/c5 · The GrandAlles zentriert, Foto mit Logo und Rahmenknopf, brauner Block mit kleinem Foto, drei umrandete Kästen im Bild.c5/c6 · StayavaWeiße Kopfleiste mit Pille, Titelbild läuft ins Weiß aus, stark gerundete Fotokarten mit Abzeichen, schwebende Karten 01–03, nummerierte Liste, Fragen.c6/c7 · Royal CrestTiefdunkel mit Gold, Logo mittig, Titel links mit Foto rechts, Goldsymbole, Fotokarten, Symbolraster 4×2.c7/c8 · NestoraAnthrazit mit Gold: Titel in Weiß und Gold, dunkle Suchleiste mit drei Feldern, vier Karten mit Abzeichen und Goldpreis, „Warum zu uns“, Aufruf-Band.c8/c9 · AstoriaWarmes Fast-Schwarz mit Gold: schwebende Glas-Kopfleiste, Serifen-Versalien, Glaskarte als Suchleiste, 2×2 Karten mit leuchtendem Goldrand, „Warum Bittners“.c9/c10 · Luxury SuiteHeller Marmor, weiße Kopfleiste mit Pille, Bild-Slider, zwei Mini-Seitenvorschauen im Browserrahmen, versetzte Hellblau-Karte, Raum-Slider, Zahlenkarten, runder Anruf-Knopf.c10/c11 · Smart Lighting (CodePen)Tiefschwarz mit Licht-Kugel, Ringen und Funken, Serifen-Kursiv, Schreibmaschinenschrift, Laufband – unten 8 Lichtfarben zum Umschalten.c11/c12 · AuroraDunkel mit wanderndem Nordlicht, schwebende Glasinseln, Farbverlauf-Überschriften, Bento-Raster, Buchungsinsel – unten 8 Farbpaare zum Umschalten.c12/c13 · Ein Tag bei BittnersDie Seite ist der Himmel über dem Sauerland: beim Scrollen vergeht ein Tag, die Sonne aus dem Logo zieht über die Hügel, dann Mond und Sterne. Uhr läuft mit.c13/c14 · Concept HotelDesign-Hotel-Stil: riesige Syne-Schrift, Foto-Collage mit drehendem Stempel, schräges Laufband, Konzept 01–04, Karte als Kassenbon, Buchungsband.c14/c15 · Flexify (gekauftes Theme, ohne WordPress)Nach „Flexify – Renovation“: dunkler Kopf, Vollbild mit riesigem Wort, Terrakotta-Laufband, Bild-Akkordeon, Ablauf 1–2–3, Empfehlungen, Buchungskarte.c15/c16 · Northbound (9 Seiten)Mehrseitig wie eine echte Hotelseite: Start, Zimmer, Essen, Eiscafé, Feiern, Über uns, Kontakt. Nachtblau, orange Versalien, Titel 01–04, Handy-Leiste.c16/c17 · Bogen (9 Seiten)Gleiche Seiten wie c16, neues Design: heller Landgasthof in Bitburger-Farben, Fotos in Rundbogen-Fenstern, feste Seitenleiste links mit nummerierten Seiten, Serifen kursiv.c17/c18 · c16 in Weinrot & Messing (9 Seiten)Aufbau wie c16, alles andere neu: Elfenbein, Weinrot, Messing, eckige Knöpfe mit versetztem Schatten, Manrope statt Versalien.c18/c19 · Landhaus (11 Seiten)Boutique-Landhotel in Bitburger-Farben: viel Weißraum, große Fotos, Cormorant + Inter, eigene Seiten für Biergarten und Umgebung, Lücken als [bitte ergänzen] markiert.c19/c20 · Ankommen (One-Pager)Frei nach deinem Auftrag, eine Datei: Foto-gefülltes „Willkommen“, Eiswaffel zum Zusammenstellen, Biergarten öffnet sich vom Bogen, Kreis-Karte der Umgebung, Menü als Tafel, Anfrageformular.c20/c21 · Rundgang (One-Pager)Man scrollt nach unten, das Haus fährt seitlich vorbei: acht Stationen auf einem Band, unten ein Fahrplan als Navigation, Kantenetiketten, Sortenwand, riesige Telefonnummer. Handy: untereinander.c21/c22 · Fenster (fürs Handy)Wie eine App: festes Vollbild-Foto hinter allem, darüber gleiten Blätter. Durch die Fenster dazwischen wechselt das Foto zum nächsten Kapitel. Tab-Leiste, App-Kacheln, Wisch-Karussells, Eis als Kugeln.c22/c23 · Profil (fürs Handy)Wie ein Profil in einer Foto-App: Logo mit Goldring, echte Kennzahlen, Kreise öffnen Vollbild-Stories zum Antippen und Wischen, Foto-Raster mit Beiträgen, Reiter Fotos · Karte · Info.c23/c24 · Stapel (fürs Handy)Karten wie Tickets: beim Scrollen gleitet jede Karte über die vorige, die untere wird kleiner und dunkler, oben wächst der Stapel. Abrisskante mit den wichtigsten Angaben, Buchungsfenster.c24/c25 · Chat (fürs Handy)Die Seite ist ein Chat mit dem Gasthof: Fragen rechts, Antworten links, Fotoalben, Speisekarte als Anhang, Eissorten als Reaktionen, Standort- und Visitenkarte. Schnellantworten unten, Buchungsfenster.c25/c26 · Postkarten (fürs Handy)Ein Postkartenständer zum Durchwischen, die Karten drehen sich räumlich. Antippen dreht eine Karte um: hinten Text, Briefmarke und Poststempel. Anfrage als Postkarte, Buchungsfenster.c26/c27 · Das Haus zum AntippenGezeichnete Miniatur-Welt des Gasthofs (isometrisch): Haus, Eiscafé mit Markise, Biergarten, ziehende Wolken, Rauch. Schalter Tag/Abend lässt die Fenster leuchten. Goldene Punkte öffnen die Räume.c27/c28 · Ihr Besuch zum ZusammenstellenWorauf haben Sie Lust? Große Fotokacheln antippen (Haken, Funken), darunter baut sich „Ihr Tag bei Bittners“ als Zeitplan von selbst auf. Zähler-Leiste, Auswahl wird mit der Anfrage mitgeschickt.c28/c29 · Die RezeptionDie Seite ist die Empfangstheke: Schlüsselbrett aus Holz mit pendelnden Anhängern (antippen öffnet den Raum), Messing-Tischklingel zum Anrufen, Messingschild mit Zeiten, Reservierung als Meldeschein mit Stempel.c29/c30 · Die AnzeigetafelFallblatt-Anzeige wie am Bahnhof: BITTNER klappt herein, die Tafel „Wann · Wohin“ (11:00 Eiscafé, 11:30 Mittagstisch, Nacht Pension …) klappert beim Laden, jede Zeile öffnet den Bereich.c30/c31 · Der PlattenspielerDrehende Schallplatte, der Tonarm schwenkt auf. Plattenkiste mit Bittners Fotos als Cover: antippen legt die Platte auf, das Etikett zeigt das Cover, darunter die Titelliste (Speisekarte, 13 Eissorten, Biere, Trauermenüs).c31/c32 · Der WürfelEin Haus, sechs Seiten: großer 3D-Würfel mit Bittners Fotos auf allen Seiten, schwebt über seinem Schatten. Thema antippen – der Würfel dreht sich räumlich hin, darunter Fotos, Infos und Knöpfe.c32/c33 · Der Bittner-BoteDie Seite ist eine Zeitung: das Blatt fliegt herein, die untere Hälfte klappt räumlich herunter, Stempel „Druckfrisch“. Kurszettel mit echten Preisen, Kleinanzeigen, Termine, Biergarten-Wetter, Leserbriefe.c33/c34 · Der BierdeckelWirtshaustisch aus Holz, ein Bierdeckel fällt drehend darauf. Plus in der Karte macht Bleistiftstriche auf den Deckel, er rechnet die Summe aus (nur CSS). Umdrehen zeigt Adresse und Zeiten.c34/c35 · Durchs SchlüssellochSieben gezeichnete Türen mit Messingschild und Klinke. Beim Scrollen wächst das Schlüsselloch, bis das Foto den ganzen Bildschirm füllt, dann gleitet die Karte mit Infos herein.c35/c36 · Frisch gezapftHinter der Seite ein großer Bierpokal: beim Scrollen läuft der Strahl hinein, das Bier steigt, Perlen steigen auf, am Ende die Schaumkrone – „Zum Wohl!“. Inhalte gleiten als Karten vorbei.c36/c37 · Vorhang aufKleine Theaterbühne mit Leuchtschrift und roten Samtvorhängen. Eintrittskarten als Spielplan: jeder Akt schließt den Vorhang und öffnet ihn mit neuer Szene im Spotlicht, darunter das Programmheft.c37/c38 · Die KommodeNussbaum-Kommode mit Bilderrahmen und Lampe. Acht Schubladen mit Messinggriffen rutschen beim Laden zu – antippen zieht eine heraus: auf grünem Filz liegen Fotoabzüge und ein Zettel mit echten Angaben.c38/c39 · Die KreidetafelSchiefertafel im Holzrahmen, unten bunte Kreidestücke als Themen: antippen – ein Schwamm wischt, dann schreibt sich die Seite mit Kreide neu, eine Zeichnung malt sich, ein Foto hängt am Magnet.c39/c40 · Der DiaabendDunkles Wohnzimmer: Diaprojektor mit rundem Magazin, Lichtkegel mit Staub, Leinwand am Stativ. „Weiter“ dreht das Magazin, es klackt, das nächste Bild gleitet auf die Leinwand.c40/c41 · Das Pop-up-BuchBeim Scrollen schlägt sich jede Doppelseite auf und Papierschichten stellen sich räumlich auf: Himmel, Hügel, Foto, Gras, Bäumchen, Eiswaffeln, Sonnenschirme, Sterne – je nach Thema.c41/c42 · Der BriefEin Umschlag auf dem Holztisch: Siegel bricht, Klappe öffnet sich, der handgeschriebene Willkommensbrief entfaltet sich. Darunter die Beilagen: Speisekarte, Antwortkarte, Eissorten, Fotos.c42/c43 · Die KuckucksuhrWas ist wann? Uhrzeit antippen – die Zeiger drehen sich, das Türchen springt auf, der Kuckuck ruft, darunter steht, was um diese Zeit bei Bittners los ist.c43/c44 · Der FotoautomatRoter Fotoautomat mit Leuchtschrift und Vorhang. Thema drücken – sanfter Blitz, dann fährt ein Fotostreifen mit echten Bildern aus dem Schlitz und entwickelt sich, daneben die Rückseite mit Infos.c44/c45 · Maison (seriös)Ruhiges Editorial-Design wie ein Boutique-Hotel: Elfenbein, Haarlinien, nummerierte Kapitel, großes Titelfoto mit Anfrageleiste, Preislisten, Fragen, Kontakt. Ohne Spielereien.c45/c46 · Noir (seriös)Dunkel und festlich wie ein gehobenes Restaurant: goldene Haarlinien, gesperrte Versalien, gerahmte Fotos, zentrierte Menükarte, „Das Haus in Zahlen“.c46/c47 · Klar (seriös)Modern und klar wie ein zeitgemäßes Landhotel: Weiß, Akzent Tannengrün aus dem Logo, Leistungs-Raster, Speisekarte mit Registern, klare Tabellen.c47/c48 · Tradition (seriös)Klassischer Landgasthof: Creme und Tannengrün, symmetrisch, Versalien, doppelte Rahmen, Logo-Siegel, Kapitel mit römischen Ziffern, zweispaltige Speisekarte.c48/c49 · Kapitel (seriös)Wie ein hochwertiger Bildband: Inhaltsverzeichnis, jedes Kapitel beginnt mit einem Vollbild-Foto, danach ruhige Texte mit Preisen und Fotostreifen.c49/c50 · Residenz (6 Seiten, seriös)Vollständige Website zum Übernehmen in Bitburger-Farben: Start, Zimmer, Restaurant mit ganzer Karte, Eiscafé mit Eiskarte, Feiern, Kontakt – echte Navigation.c50/c51 · Stein & Wald (seriös, mit JS)Ruhiges Landhotel in Stein, Oliv und Messing, Manrope-Schrift. Wechselnde Titelfotos, Buchung zählt die Nächte, Bildergalerien im Vollbild zum Wischen, Speisekarte mit Reitern. Funktioniert auch ohne JS.c51/c52 · Neustart (nach Auftrag)Von null nach deinem Auftrag: Mobile First, Leiste unten Anrufen/Anfragen/Route, Hamburger-Menü, wischbare Galerien, Zimmer-Karten, aufklappbare Speisekarte, ganze Speisekarte aus der PDF, 4 Zimmer. Hell in Creme und Roségold, Fraunces + Figtree. Eine HTML-Datei.c52/c53 · LotusHell und ruhig wie ein Boutique-Spa in Roségold: Logo mittig, Startbild mit feinem Rahmen, Marcellus-Titelschrift, Foto im Bogen, wischbare Zimmerbilder, ganze Speisekarte mit fester Kapitel-Leiste, Kontakt als Visitenkarte.c53/
Fünf Konzepte
Fünf grundverschiedene Aufbauten aus denselben Inhalten: Bildband, Karte, Haus, Brief, Tafel.
Konzept 1 · BildbandJeder Bildschirm ein Foto und ein Satz. Kein Menü – nur Punkte und die Telefonnummer.k1-bildband/Konzept 2 · Die KarteDie Seite ist die Speisekarte, wie gedruckt. Zimmer, Saal und Eiswagen sind die letzten Gänge.k2-karte/Konzept 3 · Das HausEin Rundgang durch elf Räume, vom Vorplatz bis zur Pension oben. Der Plan bleibt links stehen.k3-haus/Konzept 4 · Der BriefOlga und Konstantin schreiben ihren Gästen. Eine Spalte, Fotos wie beigelegte Abzüge.k4-brief/Konzept 5 · Die TafelWie eine App: Wochenzeiten, große Kacheln, unten immer Anrufen · Route · Karte · Zimmer.k5-tafel/
Frühere Fassungen
Die ersten drei Fassungen und die fünf Stil-Varianten von Fassung B.
Fassung C · Neu nach RechercheAnfrageleiste, Laufband, Magazinraster, stehende Bilder, Tagesablauf, Karte zum Aufklappen, Pakete, Fragen.seite3/Fassung A · HotaleNach dem Theme Hotale Resort: großes Titelbild mit Überblendung, Karten, Symbole.seite/Fassung B · Haus am BergMagazin-Titelblatt, vier Türen, Kapitel I–IV, Wochenraster.seite2/Stil 1 · LumenAbendstimmung: tiefes Braunschwarz, warmes Bernsteinlicht, Serifen.stil-1-lumen/Stil 2 · MilchglasHelles, schwebendes Glas über dem unscharfen Hausfoto.stil-2-milchglas/Stil 3 · TonWeiche Ton-Flächen, runde Formen, warmes Apricot.stil-3-ton/Stil 4 · KlarRuhig und dezent wie apple.com, viel Luft, fette Überschriften.stil-4-klar/Stil 5 · PlakatAltes Gasthaus-Plakat: Cremepapier, dicke Konturen, Sonnenrot.stil-5-plakat/