Skip to main content

Kontakt

Was interessiert Sie?

Redesign & Referenzverwaltung2026Live

Kunde: Kigips GmbH

Kigips.

Redesign für einen Gipser- und Fassadenbetrieb aus Gossau SG, der seit 2004 besteht. Dazu gehört eine eigene Referenzverwaltung mit Login: Der Betrieb erfasst Projekte mit Text, Kategorien und Fotos selbst, und sie erscheinen sofort auf der Website mit Kategorienfilter und Lightbox.

  • Website
  • Software
Umfang
Website · Software
Jahr
2026
Leistungen & Technik
  • Redesign
  • Referenzverwaltung
  • Admin-Login
  • PostgreSQL
  • React
  • Responsive Design

Fallstudie

Was Kigips GmbH brauchte und was wir gebaut haben

Ausgangslage

Kigips führt seit 2004 Gipser-, Trockenbau-, Stuck- und Fassadenarbeiten in der Ostschweiz, in Zürich und im Thurgau aus. Im Handwerk verkaufen fertige Projekte am besten: Bauherren und Architekten wollen sehen, was ein Betrieb kann. Neue Referenzen jedes Mal über eine Agentur einpflegen zu lassen, kostet Zeit und Geld. Deshalb bleibt die Referenzseite vieler Betriebe jahrelang gleich.

Unsere Lösung

Wir haben den Auftritt hell und modern neu gestaltet, mit Fotohero, Vollbild-Menü und klarer Gliederung der Leistungen: Gipserarbeiten, Spezial-Gipsarbeiten wie Stuckaturen und Stucco Veneziano, Fassaden und Umbauten. Über den Login im Footer erreicht der Betrieb seine Referenzverwaltung. Dort legt er ein Projekt mit Titel, Ort, Text und Kategorien an, die er als Chips antippt, lädt Fotos hoch, die im Browser automatisch verkleinert werden, und bestimmt per Pfeil das Titelbild. Nach dem Speichern steht die Referenz sofort auf der Website, mit Filter nach Kategorie und Vollbild-Lightbox. Referenzen und Bilder liegen in einer Datenbank, damit bei einem Update nichts verloren geht.

Architektur

So hängt alles zusammen

Die Bausteine von Kigips GmbH und wie die Daten zwischen ihnen fliessen.

NutzerOberflächeVerwaltungServer / APIDatenbank
Verbindungen: Kigips (Login) → Referenzverwaltung (Projekt, Kategorien, Fotos); Referenzverwaltung → Express-Server (Speichern (mit Token)); Express-Server → PostgreSQL (Referenzen + Bilder); PostgreSQL (Referenzen + Bilder) → Website kigips.ch (Referenzliste + Bilder); Bauherr, Architekt → Website kigips.ch (Filter + Lightbox)

Seitenstruktur

So ist die Website aufgebaut

kigips.ch7 Bereiche
  • Startseite
  • 1Dienstleistungen
  • 1Umbauten
  • 1Referenzen
  • 1Unternehmen
  • 1Offerte
  • 1Kontakt
Vereinfachte Darstellung der Seitenstruktur. Seitenzahlen laut Live-Prüfung (Sitemap) vom 12.10.2026.

Ablauf

Wer macht was, Schritt für Schritt

  • Kunde
  • Betreiber
  • System
  1. Betreiber

    Anmelden

    Kigips klickt im Footer auf «Login» und meldet sich mit Passwort an.

  2. Betreiber

    Projekt erfassen

    Titel, Ort und zwei, drei Sätze zur Ausführung, dann die Kategorien antippen.

  3. Betreiber

    Fotos hochladen

    Fotos direkt vom Handy oder Computer hochladen; sie werden automatisch verkleinert und lassen sich sortieren.

  4. System

    Sofort veröffentlicht

    Nach dem Speichern erscheint die Referenz auf der Website, eingeordnet in ihre Kategorien.

  5. Kunde

    Projekte ansehen

    Bauherren filtern nach Kategorie, etwa Fassaden, und öffnen die Fotos in der Lightbox.

Schritt für Schritt

So läuft es im Einsatz

Echte Bildschirmaufnahmen entlang des Ablaufs.

Wie ein Interessent zu Kigips findet

Von der Startseite über Dienstleistungen und Referenzen bis zum Kontakt, aufgenommen auf der Live-Site. Das Offertformular ist nicht abgebildet, weil der Versand live derzeit nicht funktioniert.

  1. 01Schritt 1 / 6
    Kigips – Schritt 1: Startseite

    Startseite

    Fotohero mit den drei Kernleistungen, «Offerte anfragen» und Telefonnummer oben rechts.

  2. 02Schritt 2 / 6
    Kigips – Schritt 2: Dienstleistungen auf dem Handy

    Dienstleistungen auf dem Handy

    Gipserarbeiten, Spezialarbeiten und Fassaden aus einer Hand, jeweils mit Bild und kurzer Beschreibung.

  3. 03Schritt 3 / 6
    Kigips – Schritt 3: Referenzen mit Kategorie-Chips

    Referenzen mit Kategorie-Chips

    Ein Klick auf «Fassaden» filtert die Projekte. Die Referenzen pflegt Kigips selbst über den eigenen Verwaltungsbereich.

  4. 04Schritt 4 / 6
    Kigips – Schritt 4: Projektbilder in der Lightbox

    Projektbilder in der Lightbox

    Die Bilder öffnen sich gross mit Blättern und Zähler, ohne die Seite zu verlassen.

  5. 05Schritt 5 / 6
    Kigips – Schritt 5: Referenzen auf dem Handy

    Referenzen auf dem Handy

    Die Kategorie-Chips brechen auf dem Handy in Zeilen um und bleiben antippbar.

  6. 06Schritt 6 / 6
    Kigips – Schritt 6: Kontakt

    Kontakt

    Adresse, Telefon und Anfahrt, damit ein Bauherr ohne Umweg anrufen kann.

Zum nächsten Schritt seitlich wischen.

Funktionen

Was die Lösung kann

  • Referenzverwaltung

    Referenzen anlegen, bearbeiten und löschen: Titel, Untertitel, Text, Kategorien und Bilder. Nach dem Speichern sofort auf der Website.

  • Fotos ohne Vorbereitung

    Bilder werden im Browser auf höchstens 1600 Pixel verkleinert, lassen sich umsortieren und entfernen. Das erste Bild ist das Titelbild.

  • Kategorien als Chips

    Gipserarbeiten, Spezial-Gipserarbeiten, Trockenbau, Fassaden, Blecharbeiten und hinterlüftete Fassaden werden angetippt statt aus einer Liste gewählt.

  • Referenzseite mit Filter und Lightbox

    Besucher filtern nach Kategorie und blättern in der Vollbild-Lightbox durch die Projektfotos.

  • Geschützter Zugang

    Login mit Passwort, Sitzungen 12 Stunden gültig, Begrenzung der Anmeldeversuche.

  • Bilder in der Datenbank

    Referenzen und Bilder liegen in PostgreSQL. Ein neues Deployment löscht keine hochgeladenen Fotos.

  • Redesign mit Vollbild-Menü

    Fotohero, Header, der beim Scrollen weiss wird, und Vollbild-Menü mit seitlichem Untermenü für die Dienstleistungen.

Mobil

Auf dem Smartphone

  • Kigips – Startseite mobil
    Startseite mobil
  • Kigips – Referenzen mit Chips auf dem Handy
    Referenzen mit Chips auf dem Handy
  • Kigips – Dienstleistungen auf dem Handy
    Dienstleistungen auf dem Handy

Seitlich wischen für weitere Ansichten.

Einblicke

So sieht es aus

  • Startseite mit Fotohero
  • Referenzseite mit Kategorie-Chips

FAQ

Häufige Fragen

Warum eine eigene Referenzverwaltung für Handwerksbetriebe?

Weil der Betrieb selbst am besten weiss, wann ein Projekt fertig und fotografiert ist. Mit einer eigenen Verwaltung lädt er Bilder hoch, schreibt ein paar Sätze, wählt die Kategorie und veröffentlicht. Die Referenzseite bleibt aktuell, ohne dass jedes Mal eine Agentur beauftragt werden muss.

Was kann die Referenzverwaltung von Kigips?

Projekte mit Titel, Ort, Beschreibung, Kategorien und Bildern anlegen, bearbeiten und löschen. Bilder werden automatisch verkleinert und lassen sich umsortieren. Auf der Website erscheinen die Projekte sofort mit Kategorienfilter und Lightbox. Der Zugang ist durch ein Login geschützt.

Gehen hochgeladene Bilder bei einem Update verloren?

Nein. Referenzen und Bilder liegen in einer PostgreSQL-Datenbank und nicht im Dateisystem des Servers. Ein neues Deployment der Website lässt sie unberührt.

Lösungen

Lösungen aus diesem Projekt

Referenzen

Ähnliche Projekte

Ihr Projekt

Ein Projekt wie dieses für Ihr KMU?

Websites ab CHF 3'000 bis CHF 25'000, Web-Apps ab CHF 10'000. Eine Website liefern wir in 2 Wochen, sobald alle Unterlagen vorliegen.