Skip to content
  • Portrait
    • Referenzen
    • Testimonials
    • über uns
    • Feeds
    • AGB
  • Leistungen
    • Wie wir arbeiten
    • Für wen wir arbeiten
    • Webdesign Region
    • Fallstudien
      • Fallstudie Projekt Maler-Gipser
      • Fallstudie Projekt Treuhand
      • Fallstudie Projekt Museum
      • Fallstudie Projekt Gesundheitspraxis
      • Fallstudie Projekt Coiffeursalon
    • Checklisten
      • META Unabhaengigkeit
      • Neue Website lancieren
    • Was wir anbieten
  • Insights
    • Webdesign vom Spezialisten
    • Know-how
    • Neuigkeiten über Webseiten
    • Reels
    • Analoge Hilfsmittel
    • Speziell für Coiffeure
  • Kalkulatoren
  • FAQ
    • Datenschutzerklärung
  • Anfragen
    • Erstgespräch
    • Projektanfrage
    • Newsletteranmeldung
  • Portrait
    • Referenzen
    • Testimonials
    • über uns
    • Feeds
    • AGB
  • Leistungen
    • Wie wir arbeiten
    • Für wen wir arbeiten
    • Webdesign Region
    • Fallstudien
      • Fallstudie Projekt Maler-Gipser
      • Fallstudie Projekt Treuhand
      • Fallstudie Projekt Museum
      • Fallstudie Projekt Gesundheitspraxis
      • Fallstudie Projekt Coiffeursalon
    • Checklisten
      • META Unabhaengigkeit
      • Neue Website lancieren
    • Was wir anbieten
  • Insights
    • Webdesign vom Spezialisten
    • Know-how
    • Neuigkeiten über Webseiten
    • Reels
    • Analoge Hilfsmittel
    • Speziell für Coiffeure
  • Kalkulatoren
  • FAQ
    • Datenschutzerklärung
  • Anfragen
    • Erstgespräch
    • Projektanfrage
    • Newsletteranmeldung
  1. Systemisches Webdesign
Global animations

Systemisches Webdesign

Systemisches Webdesign baut Websites auf einem Design-System auf. Farben, Schriften, Abstände und Komponenten folgen festen Regeln. Das Ergebnis ist konsistent, wartbar und skalierbar.

Bestandteile

Ein Design-System umfasst Design Tokens (Farben, Schriften, Abstände), wiederverwendbare Komponenten (Buttons, Karten, Formulare), dokumentierte Muster für wiederkehrende Seitenbereiche und einen Content-Styleguide für Tonalität und Sprache.

Vorgehen

Analyse, Konzeption, Gestaltung, Umsetzung. Das System entsteht zuerst. Die Seiten werden anschliessend daraus zusammengesetzt.

Für wen geeignet

Für KMU, Verbände und Handwerksbetriebe mit mehreren Seiten, mehreren Sprachen oder regelmässigen Inhaltspflegen. Ab etwa zehn Seiten rechnet sich der Ansatz.

Unterschied zum klassischen Webdesign

Klassisch: Jede Seite wird einzeln entworfen. Erweiterungen erzeugen Abweichungen.

Systemisch: Bausteine werden einmal definiert und überall angewendet. Erweiterungen sind günstiger.

Wir beraten Sie gerne. Starten Sie jetzt Ihr persönliches Projekt mit uns.

Projektanfrage stellen
Global colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
  footer border
 
Template configurations
 
has-right-nav no-shopping-cart primary-font
 
Top header inner
 
has-top-header-border-color br20
 
Header inner
 
 br15 has-shadow-small  add-left-20 add-right-20  margin-10
 
Navigation inner
 
br10 has-large-border has-border-left
 
Navigation styles
 
size-15 weight-400 has-large-border-radius no-shadow
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white round-btn
 
Footer styles
 
o-form round-btn
 
Footer background image
 
 

 

Typography

Heading H1
weight-700
 
Heading H2
weight-500
 
Heading H3
weight-500
 
Body text (p, table, td)
weight-400
 
Buttons
weight-600 size-16
 
 
Advanced settings
 
Custom CSS

.my-class {

background:#f0f0f0;

}

/* MATRIX-GLOBAL-SETTINGS-START */

:root {

--content-width: 1170px;

--special-pages-content-width: 900px;

}

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link,

#cc-inner input.cc-checkout-btn,

#cc-inner a.cc-shop-addtocard {

padding: 6px 30px !important;

}

.j-module.j-imageSubtitle img,

.j-module.j-textWithImage img,

.j-module.j-gallery img {

border-radius: 25px;

}

/* MATRIX-GLOBAL-SETTINGS-END */


Note:
All changes made here will be applied to your entire website.

Standorte im Überblick


  • Rapperswil
  • Hinwil
  • Wetzikon
  • Uster
  • Effretikon
  • Winterthur

Website, die Anfragen bringt, zum Fixpreis

Inhalte von YouTube werden aufgrund deiner Cookie-Einstellungen nicht angezeigt. Akzeptiere die funktionellen Cookies im Cookie-Banner, um den Cookie-Richtlinien von YouTube zuzustimmen und den Inhalt anzusehen.

Webdesign-ZO

Markus Bischof

Im Grund 10

CH-8484 Theilingen ZH

Mobile: +41 79 871 22 78

Office: +41 52 394 33 79

 

Öffnungszeiten: Mo-Fr von 09:00 Uhr bis 19:00 Uhr

(+41) 79 871 22 78
E-Mail
Edit Top Header section here

Beispiele aus Insights

Was kostet eine eigene Website wirklich!

KMU Website - Sieben Funktionen, die heute Standard sind

Warum sich Do-it-yourself meistens kaum lohnt

Wir posten auch auf der Adressdatenbank von:

Wir posten auch auf der Adressdatenbank WAiSCH

draggable-logo
Logo Webdesign-ZO

Impressum | AGB | Widerrufsbelehrung | Datenschutz | Cookie-Richtlinie
(C) 2026 / Webdesign-ZO
Abmelden | Bearbeiten
  • Nach oben scrollen