Die Website soll Lösungswelten schaffen für alle Segmente der Zielgruppen

• Bestandskunden und Neukontakte
• Bewerber / Mitarbeiter
• IR
• Partner / Lieferanten

Die relevanten Zielgruppen finden ihre Themen aus den beiden Bereichen:

Lösungsbereiche (Produktseiten) und Applikation (z.B. Lötstelleninspektion, THT-Inspektion, LED-Inspektion, Röntgeninspektion, Smart Factory ...)

Das Viscom Logo wird in Online Medien grundsätzlich links angeordnet.

Das Logo sollte, wenn möglich, immer im Vektorgrafik-Format svg eingesetzt werden (Ressource-Download hinzufügen), alternativ kann ein PNG verwendet werden. Der Einsatz des Logos als JPG-Format ist nicht geeignet.

Die Abbildungsgröße sollte responsiv, abhängig von der abbildenden Device-Größe, eingesetzt werden, also auf verschiedenen Devices in angepasster Größe abgebildet werden. Die Abbildungsgröße ist dem Medium und Umfeld entsprechend frei wählbar. Eine Mindestbreite von 220px sollte nicht unterschritten werden.

Zum korrekten Einsatz des Logos hinsichtlich Farbigkeit, Schutzzonen und alle weiteren Infos beachten Sie bitte das Kapitel
Design Basics: 01. Logo

PT Sans

Als Font wird für alle Viscom Websites die PT Sans eingesetzt. Diese ist kostenlos z. B. via Google Fonts zu erhalten unter https://fonts.google.com/specimen/PT+Sans#standard-styles

Einsatz:

Es werden auch in Überschriften die Regular-Schnitte verwendet.

Die Bold-Schnitte werden für Texteinleitungen, Auszeichnungen, Linktexte eingesetzt. Außerdem für  Headlines / Sublines mit Schriftgrößen kleiner als 20 px.

Die Italic-Schnitte werden nur in Ausnahmefällen eingesetzt.

Schriftgrößen 

Die einzusetzenden Schriftgrößen und Zeilenabstände werden je nach Einsatzzweck idealerweise in rem umgesetzt. 1 rem basiert dabei auf 16 px.

Folgende Basisgrößen sind umzusetzen und nach Möglichkeit immer einzuhalten:

Die Linkfarbe für Textlinks ist das Viscom-Blau. Textlinks werden unterstrichen. Textlinks in Navigation und Footer sind nicht unterstrichen, als Hover-Effekt wird hier die Unterstreichung oder ein blauer Hintergrund eingeblendet. 

Die Linkfarbe ist immer das Viscom-Blau. Buttons in der Viscom Website werden als Ghost-Buttons mit einer blauen Outline (Stärke 2 px) und blauer Schrift (18 px) und/oder Icons eingesetzt. Für den Hover-Effekt wird der Button mit dem Viscom-Blau als Hintergrund angezeigt, darauf die Schrift und / oder das Icon in Weiß. Klickbare Icons oder Icons in einem Button sind ebenfalls immer im Viscom-Blau. 

Alternativ gibt es Buttons in Viscom-Rot. Dieser Button wird zur Benutzerführung nur einmalig auf einer Seite oder zumindest einmalig im Viewport als Next-best-click verwendet. Er ist besonders wichtigen Links und Inhalten vorbehalten. 

Für die Icons werden die frei verfügbaren Material Design Icons verwendet.

Diese Open Source Icons sind hier erreichbar:
https://material.io/resources/icons/?icon=lock&style=baseline

Eingesetzt werden können die verfügbaren Icons der Stile:

• Filled
• Outline
• Rounded

Nicht zu verwenden sind die Stile:

• Two-tone
• Sharp

Diese Icons können je nach Einsatzzweck/Medium als Font oder svg-Grafik eingesetzt werden.

Nicht verfügbare Icons sind im identischen Stil, den Vorgaben für Icons von Material Design entsprechend, zu erstellen.  

Der Einstieg in die Landing page der Unternehmens-Website beeindruckt mit großformatigen Bildern und kurzen Aussagen zu maximal 3 Themenbereichen. Die Textbox (hier: Forward-looking Technologies) ist klickbar und führt zur Themenseite.

Das verwendete innovative Slidermodul zeigt am unteren Bildrand die enthaltenen Themenbereiche bzw. deren Kernaussagen an. Diese sind ebenfalls klickbar und führen zum nächsten Banner. Ergänzend zeigt hier ein Fortschrittsbalken die verbleibende Zeit an, bevor das nächste Thema erscheint. 

Menüleiste Responsiv-Auflösung: 1200px Breite

Menüleiste Responsiv-Auflösung: 990px Breite

In der Unternehmens-Website wird im Kopf eine schwebende Navigationsleiste eingesetzt. Sie wirft einen leichten Schatten auf die darunter liegende Ebene. Dadurch ergibt sich eine modulare und leichte Anmutung.

Die Menüleiste enthält links das Unternehmenslogo. Das Logo bleibt auch bei Skalierung des Browserfensters in proportional gleichem Abstand am rechten Rand angebunden.

Rechts neben dem Logo sind die wichtigsten Hauptthemenbereiche der Website ausgeschrieben, als Links klickbar. Die Linkfarbe ist hier wie für alle Textlinks das Viscom Blau.

Am rechten Rand der Menüleiste sind ergänzende Inhalte und Funktionen als Icons klickbar. In der Unternehmens-Website sind dies der Kunden-Login (Schloss), die Sprachauswahl (Weltkugel) und die Suche (Lupe). Hier sind verständliche und klar erkennbare Icons zu wählen.

Für kleinere Devices sollte eine reduziertere Darstellung der Menüleiste eingesetzt werden. Je nach Inhalte der Leiste (Anzahl der Menüpunkte und Icons) sollte ein Breakpoint gewählt werden, ab dem die Navigationselemente via Klick auf ein Menü-Icon (ein sog. Burgermenü) erreichbar sind.

Bei der Unternehmens-Website wurde der Breakpoint für eine vereinfachte Darstellung bei 1200px gesetzt. Spätestens bei einer Breite kleiner als 768px (Tablet-Device, Hochformat) sollte ein solcher Breakpoint für den Wechsel der Darstellung eingesetzt werden. 

Je nach Online-Einsatzzweck ist alternativ eine klassische, bis zu den Rändern gehende – nicht schwebende – Navigation im Kopf einer Seite oder Web-Anwendung möglich. Diese sollte aber ausschließlich einen weißen Hintergrund haben und das Logo ist immer positiv in den vorgegebenen Corporate Farben darauf abzubilden. 

Beim Klick auf eine Hauptrubrik mit vielen untergliederten Inhalten, wird in der Unternehmens-Website ein Mega-Dropdown-Menü angezeigt. Neben der Übersicht aller Links zum Thema gibt es im Mega-Dropdown links und rechts Zonen für werbliche Direkteinstiege in besondere Themen.

Je nach Menge der Unterthemen ist hier ein drei- oder vierspaltiger Aufbau möglich.

Hierin sind die Oberrubriken in bold, 18px Schriftgröße gesetzt, zusätzlich sind sie zur visuellen Trennung und besseren Gliederung unterstrichen. Die darunter befindlichen Links zu den einzelnen Themenbereichen sind in 16px, regular (font-weight 300) gesetzt.

Auf kleineren Devices werden die Spalten untereinander dargestellt.

Am rechten Rand der Website sind vier Buttons angeheftet, die sich beim Scrollen immer an fester Position im Viewport befinden. Diese bieten somit ständig verfügbar wichtige Funktionen wie Suche, Kontaktaufnahme, Kunden-Login und Downloads an.

Grundsätzlich ist die vertikale Einteilung (Spalten) der Inhalte innerhalb der Website flexibel. So gibt es Module für eine einspaltige, zweispaltige und dreispaltige Abbildung des Inhalts.

Für die Unternehmens-Website sind diese wie folgt definiert:

Modul Text und Box für zusätzliche Informationen

Modul Direkteinstiege

Modul Produkt-/Technologie-Slider

Slider

Modul Short Beitrag: Text / Bild

Modul Video Player

• Navigationsebene
• Header
• Main Content
• Additional Content (rechte Spalte)
• Module ( Boxen / Produktfinder / Newsletter Anmeldung / Kundenbereich … )

• Text
• Kontextueller Inhalt
• Daten, Fakten
• Infografiken
• Bildwelt: Imagebilder / Themenbilder / Inhouse Bilder / Produktbilder / Mitarbeiterbilder

• Produktfinder
• Produktseiten
• Fachartikel, Pressebereich
• Download-Bereich (Auswahl Themen, Sprachen und Medium), Kontaktformular
• An-/Abmeldung Newsletter / Newsletter Contentseite (Mailify), Ansprechpartner und Kontaktformular
• Standorte
• Karriere
• Service

• Aufbau „Übersichtsseiten“ für Systembereiche (z. B. 3D-AOI, 3D-AXI ...)
• Branchenlösungen/Anwendungsbereich („Lösungswelten“)
• Nachhaltigkeit und Social Corporate Responsibility als Unterseiten zu "Über uns"