Print & Web Case Study · Terra Hotel

Terra Hotel – Ankommen wie in einer anderen Welt

Terra bedeutet „Welt“ – und genau dieses Gefühl soll das fiktive Terra Hotel in Köln-Porz auslösen: Man kommt in der Stadt an, aber fühlt sich, als würde man in ein anderes Land oder in einen ruhigen Abenteuerfilm hineingehen.

In Canva habe ich eine Broschüre in einfacher Sprache gestaltet und sie anschließend als interaktives Buch ins Web übertragen.

Print & PDF 2025 Layout in Canva
Gestaltungsziel In wenigen Momenten klar machen, worum es im Terra Hotel geht: Natur, Ruhe und das Gefühl, einmal kurz „die Welt zu wechseln“ – direkt in Köln-Porz.

Projektkontext & Rolle

Projekt
Terra Hotel – Imagebroschüre
Rolle
Konzept, Layout & Web-Übertragung
Ort
Köln-Porz – Ankommen in einer „anderen Welt“
Jahr & Tools
2024 · Layout in Canva · PDF-Export

Worum es geht

Das Terra Hotel steht für ein Gefühl: Die Welt hinter sich lassen – auch wenn man „nur“ in Köln-Porz ankommt. Der Name Terra ist bewusst gewählt: Erde, Welt, Reisen.

Die Broschüre soll dieses Gefühl sichtbar machen: ruhige Bilder, klare Struktur, einfache Sprache. Gäste sollen in wenigen Seiten verstehen: Hier kann ich ankommen, durchatmen und kurz in eine andere Welt eintauchen.

Mein Beitrag

  • Story & Positionierung rund um „Terra = Welt“ und Köln-Porz als Tor.
  • Gestaltung der Broschüre in Canva – mit Fokus auf Ruhe & Klarheit.
  • Export und Aufbereitung für Print und PDF.
  • Umsetzung als interaktives Blätter-Erlebnis im Web – ohne externe Libraries.

Lösung & Aufbau der Broschüre

Eine kleine Reise durch das Hotel

Die Broschüre ist wie ein kurzer Film: Seite für Seite begleitet sie Gäste von der Ankunft bis zur Umgebung.

  • Ankommen: Erste Stimmung, Lage und das Gefühl „Welt wechseln“.
  • Zimmer: Räume, die sich wie Szenen aus einem Abenteuerfilm anfühlen.
  • Essen: Regionale Küche, die trotzdem nach Fernweh schmeckt.
  • Entdecken: Natur, Rhein und kleine Ausflüge rund um Köln-Porz.

Pro Doppelseite: ein klares Thema, viel Bildfläche, wenig Text – damit man schnell versteht, worum es geht.

Von Canva ins Web

Um das Projekt im Portfolio erlebbar zu machen, habe ich:

  • die Canva-Broschüre als PDF exportiert und in Einzelseiten aufgeteilt,
  • diese Seiten als Bilder eingebunden,
  • eine Buchoptik mit 3D-Flipp-Effekt gestaltet,
  • und eine Navigation über Buttons, Pfeile und Pfeiltasten umgesetzt.

So fühlt sich das Terra Hotel online an wie ein echtes Buch, ohne dass Nutzer ein PDF herunterladen müssen.

Prozess in drei Schritten

1. Story & Struktur

Ausgangspunkt war die Frage: Was sollen Menschen fühlen, wenn sie das Terra Hotel entdecken?

  • Terra = Welt, Erde, Unterwegssein.
  • Köln-Porz als überraschender Startpunkt einer Reise.
  • Klare Kapitel statt überladener Informationsbroschüre.

2. Layout in Canva & Web-Übertragung

  • Gestaltung der Broschüre in Canva mit ruhiger Sans-Serif-Typografie.
  • Blaue, tief wirkende Farbwelt als Klammer – wie eine Abendstimmung.
  • Export für Druck und PDF.
  • Interaktivierung im Web mit HTML, CSS und etwas JavaScript.

Ziel: Ein Case, der sich schnell erfassen lässt – und trotzdem die Stimmung eines „anderen Ortes“ transportiert.

Typografie & Farbwelt

Die Gestaltung ist bewusst ruhig gehalten. Die meisten Entscheidungen basieren auf wenigen, klaren Styles – damit der Fokus auf den Bildern liegt.

Typografie

Terra Hotel – Sans Serif / 24 px / Bold
Body – Sans Serif / 16 px / Regular.
Kurze Sätze, einfache Sprache, wenig Fachbegriffe: Auch Menschen, die selten Broschüren lesen, sollen sich schnell zurechtfinden.

Hierarchie im Layout:

  • H1: Projekt- oder Kapitelname.
  • H2: Bereich oder Stimmung (z.B. „Ankommen“).
  • Body: ruhige, erklärende Texte mit Luft zum Atmen.

Farben

Primary
Tiefes Blau (#1b1e74) für Überschriften, Buttons und Interaktion.
Accent
Helleres Blau (#4b50c9) für Verläufe und weiche Highlights.
Surface
Helle Flächen für Inhalte, damit Bilder und Text wirken können.

Learnings

  • Weniger Inhalt ist oft klarer: Gerade bei Broschüren reicht eine gute Story – nicht jede Information muss auf die erste Seite.
  • Terra als „Welt“ ist ein starkes Bild: Der Name hilft, den Vibe zu transportieren: Ankommen, Aufbrechen, in eine andere Stimmung eintauchen.
  • Print & Web können sich ergänzen: Mit wenigen Zeilen JS lässt sich ein klassisches Print-Projekt zu einem interaktiven Portfolio-Highlight machen.