→ English Website

 

 

Styleguide Hotel Storch

Folgende Angaben erleichtern  uns alle die Arbeit im Web…

Farbschema

Farbschema

Primär
#660032

 Sekundär
#8f4669

Hell
#f1e8ea

blau
#3c8ee0

call to action
#e09900

grün
#8bab00

Fotos & Grafiken

Dateitypen
Die Anzahl der Dateien, welche wir verwenden, ist übersichtlich. Das Medium Internet und die Browser geben uns quasi den Umfang der eingesetzten Formate vor.

Bildgröße
Die Bildgröße definiert die physischen Abmessungen eines Bildes, gemessen in Breite x Höhe. Sie beschreibt den Platzbedarf in Pixeln. Hiermit arbeiten wir!

Dateigröße
Die Dateigröße definiert den Speicherplatz, den eine Datei (z. B. Dokumente, Bilder, Videos) auf einem Datenträger (Festplatte, USB-Stick) belegt.

Sie wird in Einheiten wie Bytes, Kilobytes (KB), Megabytes (MB), Gigabytes (GB) oder Terabytes (TB) gemessen. Die Größe wird durch den Inhalt, das Format und die Komprimierung der Daten bestimmt.

Wir arbeiten im „KB-Bereich“, als Fausregel gilt um so kleiner die Dateigröße um so besser! Sowohl User als auch vor allem Google mögen optimierte „schlanke“ Dataien.

 

Schriftart und Schriftgrößen

Standartschriftart
Wir verwenden „Verdana“. Diese Schrift ist zum einen frei verwendbar und zum anderen gut lesbar.

Schriftgrößen

Wann welche Überschrift?
Hier gibt es für uns tatsächlich Luft nach oben!

 

Icons

Warum Icons
Perfekte Icons sind einfach, konsistent, funktional und gut erkennbar, auch in kleinen Größen. Sie zeichnen sich durch ein einheitliches Raster, einheitliche Strichstärken (bei Outlines) und hohe Kontraste zum Hintergrund aus. Ziel ist eine intuitive Usability und eine klare Bildsprache, die zur Marke passt.

Die wichtigsten Aspekte für perfekte Icons
Konsistenz: Innerhalb eines Sets sollten alle Icons denselben Stil (z.B. flach, Outline, 3D) und eine einheitliche Linienstärke aufweisen.

Verständlichkeit (Usability): Ein gutes Icon ist selbsterklärend und bildet Funktionen, Ideen oder Produkte eindeutig ab, oft ohne erklärenden Text.

Wichtig

  • Die Icons sollten von Beginn an im Format .svg erstellt werden
  • Von jedem Icon gibt es eine „outline“ und eine „solid“-Version

Why Icons?
Perfect icons are simple, consistent, functional, and easily recognizable—even at small sizes. They are characterized by a unified grid, consistent line weights (for outlines), and high contrast against the background. The goal is intuitive usability and a clear visual language that aligns with the brand.

Here are the key aspects of perfect icons:
Consistency: Within a set, all icons should share the same style (e.g., flat, outline, 3D) and feature a uniform line weight.

Clarity (Usability): A good icon is self-explanatory and clearly depicts functions, concepts, or products—often without accompanying text.

 

Important

  • The icons should be created in the .svg file format from the very beginning.
  • For each icon, there is an „outline“ version and a „solid“ version

Vorgeschlagene Vorgehensweise

  1. Sichtung der bisherigen Icons
  2. Finden eines „styles“ für unsere neuen Icons
  3. Anfertigen von 4 Beispielen
  4. Festlegung welche Icons wir künftig benötigen

https://hotel-storch.de/pauschalangebote-uebersicht/

  • Sparschwein
  • Familie mit Auto
  • Bus
  • Doppeldeckerbus
  • Fußball
  • Tagung und Seminar
  • Messe
  • Motorrad
  • Hochzeit und feiern

https://hotel-storch.de/

  • Restaurant
  • Reservieren
  • Quiz
  • 360° Tour (ohne Kreispfeil aussen)

https://hotel-storch.de/freizeit/

  • Die könnetn wir auch alle neu erstellen, das
    ausstauschen ist aber eine aufwändige Arbeit auf der Karte.
    Entscheidung liegt bei Euch…

https://hotel-storch.de/hotel-ausstattung/

  • Da würde ich nur die wichtigsten erstellen, wie WLAN, Storne, 24-Stundenrezeption,

https://hotel-storch.de/gaeste-guide/

  • WLAN
  • Frühstück
  • Check-in/out Uhren
  • Anfahrt und parken

Diverse

  • E-Ladestation
  • Speisekarte

Für die nächste Websitenavigation in englisch:

  • Home
  • Hotel
  • Restaurant
  • Angebote
  • Freizeit
  • Roomtour
  • Konakt
  • Buchen

 

    https://hotel-storch.de/pauschalangebote-uebersicht/

    • Sparschwein
    • Familie mit Auto
    • Bus
    • Doppeldeckerbus
    • Fußball
    • Tagung und Seminar
    • Messe
    • Motorrad
    • Hochzeit und feiern

    https://hotel-storch.de/

    • Restaurant
    • Reservieren
    • Quiz
    • 360° Tour (ohne Kreispfeil aussen)

    https://hotel-storch.de/freizeit/

    • Die könnetn wir auch alle neu erstellen, das
      ausstauschen ist aber eine aufwändige Arbeit auf der Karte.
      Entscheidung liegt bei Euch…

    https://hotel-storch.de/hotel-ausstattung/

    • Da würde ich nur die wichtigsten erstellen, wie WLAN, Storne, 24-Stundenrezeption,

    https://hotel-storch.de/gaeste-guide/

    • WLAN
    • Frühstück
    • Check-in/out Uhren
    • Anfahrt und parken

    Diverse

    • E-Ladestation
    • Speisekarte

    Für die nächste Websitenavigation in englisch:

    • Home
    • Hotel
    • Restaurant
    • Angebote
    • Freizeit
    • Roomtour
    • Konakt
    • Buchen

     

      Proposed Approach

      • Review of existing icons
      • Establishing a „style“ for our new icons
      • Creation of 4 examples; subsequently,
      • review of the four examples and discussion of the next steps
      • Determining the specific topics and areas for which we require unique icon designs

      For reference, here are some examples of the icons previously used on the website

      https://hotel-storch.de/pauschalangebote-uebersicht/

      • Sparschwein
      • Familie mit Auto
      • Bus
      • Doppeldeckerbus
      • Fußball
      • Tagung und Seminar
      • Messe
      • Motorrad
      • Hochzeit und feiern

      https://hotel-storch.de/

      • Restaurant
      • Reservieren
      • Quiz
      • 360° Tour (ohne Kreispfeil aussen)

      https://hotel-storch.de/freizeit/

      • Die könnetn wir auch alle neu erstellen, das
        ausstauschen ist aber eine aufwändige Arbeit auf der Karte.
        Entscheidung liegt bei Euch…

      https://hotel-storch.de/hotel-ausstattung/

      • Da würde ich nur die wichtigsten erstellen, wie WLAN, Storne, 24-Stundenrezeption,

      https://hotel-storch.de/gaeste-guide/

      • WLAN
      • Frühstück
      • Check-in/out Uhren
      • Anfahrt und parken

      Diverse

      • E-Ladestation
      • Speisekarte

      Für die nächste Websitenavigation in englisch:

      • Home
      • Hotel
      • Restaurant
      • Angebote
      • Freizeit
      • Roomtour
      • Konakt
      • Buchen

       

        Siehe großes Foto unten…

        Originalgröße
        Abmessungen: 8000 x 4563 Pixel
        Dateigröße: 17 MB

        Hinweis: Größe und Abmessungen
        des ursprünglichen Originalfotos, WordPress hat es von alleine begrenzt.

        Originalgröße als Inhaltselement
        Abmessungen: 8000 x 4563 Pixel
        Dateigröße: 17 MB
        Die Größe Darstellung wurde hier verändert.
        Die Dateigröße und die Abmessung

        Abmessungen geändert
        Bei diesem Foto wurden „nur“ die
        Abmessungen verkleinert.
        Abmessungen: 900 x 513
        Dateigröße:  182 kb

        Abmessungen & Dateigröße verkleinert
        Bei diesem Foto wurden die
        Abmessungen verkleinert und das Foto für Web optimiert
        Abmessungen: 900 x 513 Pixel
        Dateigröße: 68 kb