54
Webkommunikation

Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

  • Upload
    neumth

  • View
    1.242

  • Download
    1

Embed Size (px)

DESCRIPTION

Präsentation aus der Vorlesung Webkommunikation zu den Themen Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Citation preview

Page 1: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Webkommunikation

Page 2: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie
Page 3: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Identity◦ Corporate Branding◦ Corporate Behaviour◦ Corporate Culture◦ Corporate Design◦ Corporate Communication◦ Corporate Language

Indizes, Icons & Symbole Ikonographie Farben Wording Themenstruktur von Webauftritten

Agenda

Page 4: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Identity

Page 5: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Identity

Page 6: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Branding

Page 7: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Unternehmensleitbild | Vision Selbstbild Fremdbild Ganzheitliches Auftreten und Handeln Gefühl der Vertrautheit soll erzeugt werden Aktive Bearbeitung ist wichtig

◦ Wissen wer man ist und das auch kommunizieren Ziel: starke Assoziationen der Kunden

Corporate Branding

Page 8: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Zusammenspiel◦ Kreativität◦ Werbedruck◦ Strategie

Corporate Branding Strategien für KMU

Page 9: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

KONDITIONIERUNGSTECHNIK ◦ Bedürfnisse wecken und stillen ◦ Bsp: Zwischenmahlzeit, Frühstückchen

PARABELTECHNIK◦ Leistungsfähigkeit überspitzt darstellen (Pattex Lastwagen)

IDENTIFIKATIONSTECHNIK◦ Der Kunde ist der Held (Wenn ich kaufe, dann…..)

INTEGRATIONSTECHNIK◦ Kunden integrieren (Tupperware)

FEINDBILDTECHNIK◦ Gefahr ist stets vorhanden Produkt ist der Retter

Gefrierbrand Toppits Gefrierbeutel

Corporate Branding Strategien für KMU

Page 10: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Glaubwürdigkeit Erscheinungsbild und Handlungen

abstimmen Bewusstsein der Kunden Ethische Erwartung steigt mit

Unternehmenserfolg Umwelt! Konsumenten werden sensibel

Bsp.: MC Donalds ◦ Verantwortung übernehmen◦ Imagegewinn

Corporate Behaviour

Page 11: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Allgemein die Organisationskommunikation eines Unternehmens

Verschiedene Ansätze (Bruhn, Lies, Zerfaß) PR und Marketing auf gleicher Ebene? Zielgruppen: Mitarbeiter, Stakeholder,

Anrainer, Kunden, Arbeitsuchende, etc. Konsistente Strategie abgeleitet von Vision

sehr wichtig

Corporate Communication

Page 12: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Dt. Unternehmenskultur Werte & Normen Prägt Handeln & Verhalten

Corporate Culture

Page 13: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Culture

Page 14: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Culture Beispiele INTERSPORT

◦ sportliche Aktivitäten◦ Veranstaltungen

Fronius◦ Energy Points◦ Kommunikation

3M◦ Innovationen◦ Neue Ideen

Page 15: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Culture Vorteile Hohe Mitarbeitermotivation Höhere Produktivität Effizienteres Arbeiten Loyalität

Page 16: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Definiert das Erscheinungsbild◦ Kommunikationsdesign◦ Industriedesign◦ Architektur◦ Werbung◦ Visuelles Erscheinungsbild in jeder Form

Corporate Design

Page 17: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Grundelemente◦ Signet bzw. Wortbildmarke◦ Corporate Graphic Design◦ Corporate Typography◦ Corporate Picture◦ Corporate Color◦ Corporate Industrial Design◦ Corporate Architecture◦ Corporate Fashion◦ Materialien◦ Gestaltungsrichtlinien

Corporate Design

Page 18: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Daraus entsteht Markenwert (Brand Equity) Nicht nur materiell sondern auch

wahrgenommener Wert Maßgeblich für Erfolg ausschlaggebend

Corporate Design

Page 19: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

B2C Sektor Messgrößen zur Evaluierung

Brand Equity

Page 20: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Brand Equity

Page 21: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Erfassung aller Gestaltungselemente Externe Kommunikation Laufende Weiterentwicklung Beispiel Fronius CD

CD Manual

Page 22: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Corporate Wording Einheitliche Sprachkultur Philosophie Schreibkultur Unternehmenssprache Phrasen

Corporate Language

Page 23: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Icons, Indizes, Symbole & Ikonographie

Page 24: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Sprache nutzt Zeichen für Kommunikation Handbewegung, Gesichtsausdruck,...

Semiotik (griech. „Zeichen“) Analyse von ZeichenKommunikation Mensch & Tier

3 Zeichenarten: Indizes Ikons Symbole

Definition

Page 25: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Lat. „Zeigefinger“ Räumliche Nähe Richtungsweisendes Verkehrsschild,

Fußnoten,...

Index

Page 26: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Griech. „Replik / Abbildung“ Darstellung einer Sache die Realität ähnelt Abstraktes Verkehrsschild

Ikon

Page 27: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Symbol

Weitere Symbole im Bereich der Verkehrsschilder?

Griech. „Wiedererkennungszeichen“ Keine Kontiguität oder Ähnlichkeit nötig

Übereinkunft: Symbol mit best. Bedeutung Verbunden (wurde gelernt)

Eurozeichen, Flaggen,...

Page 28: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Griech. „Wiedererkennungszeichen“ Keine Kontiguität oder Ähnlichkeit nötig

Übereinkunft: Symbol mit best. Bedeutung Verbunden (wurde gelernt)

Eurozeichen, Flaggen,...

Symbol

Page 29: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Indexikalische Zeichen: „Primitivsten“ – Hier & JetztKörpersprache, Richtungsweisend

Ikonische Zeichen:abstrakter als IndizesÄhnlichkeit & Verbindung zw. Form & Bedeutung nötig

Symbole:hoch Abstraktmenschliche Kommunikationerlernen - Gebärdensprache

Unterschied - Abstraktheit

Page 30: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Index – ein Zeichen, das mit seinem Objekt räumlich / zeitl. verbunden ist:

Ikon – ein Zeichen das seinem Objekt ähnlich ist:

Symbol – Ein Zeichen dem Begriffe zugewiesen wurden, die man erlernen muss:

Zusammengefasst

Page 31: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Index – ein Zeichen, das mit seinem Objekt räumlich / zeitl. verbunden ist:

Ikon – ein Zeichen das seinem Objekt ähnlich ist:

Symbol – Ein Zeichen dem Begriffe zugewiesen wurden, die man erlernen muss:

Frage: Auch im Web zu finden?

Page 32: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Web-Link: Hier erfahren Sie mehr Fußnoten bei Seminararbeiten Zurücktaste im Browser Button „zum Seitenanfang hinaufspringen“ ...

Indizes im Web

Page 33: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Smileys / Emoticons Home-Button des Browsers Toolbar-Paint

Ikons im Web

Page 34: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

HTML / Programmiersprachen Mauspfeil (Windows)Logo PFD-Symbol, ...

Symbole im Web

Page 35: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Griech. „Bild“ und „schreiben“ Methode aus Kunstgeschichte Bestimmung & Deutung von Motiven der

bildenden Kunst

Nöth: Ikonographie ist Forschungsgebiet innerhalb der Semiotik

2 Bereiche: Ikonografie & Ikonographie

Ikonologie - Ikonographie

Page 36: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Bestandteil von graphischen Benutzeroberflächen

Hoher Wiedererkennungswert Müssen erlernt werden Einfach erkennbar & verständlich Zeitlicher Wandel

Welche Icons kennen Sie aus dem Bereich eCommerce?

Icons im Web

Page 37: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Bestandteil von graphischen Benutzeroberflächen

Hoher Wiedererkennungswert Teils erlernt Einfach erkennbar & verständlich Zeitlicher Wandel-responsive

Welche Icons kennen Sie aus dem Bereich eCommerce?

Icons im Web

Page 38: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Farben, Wording, Themenstruktur

Page 39: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

RGB (Rot, Grün, Blau)◦ 0-255 Anteile der Bildpunkte (Dichtestufen)◦ 0 = Keine Farbe, 255 = volle Farbe◦ 255, 255, 255 = Weiß

CMYK (Cyan, Magenta, Yellow, Black)◦ Mischung aus diesen Primärfarben◦ Basisfarbe Weiß◦ Einsatz: Druck◦ Vorsicht: Nicht alle angezeigten Farben sind druckfähig!

Farbmodelle

Page 40: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Farbe Positive Assoziation

Negative Assoziation

Weiß Unschuld, Reinheit Kühle

Gelb Optimismus, Wärme Geiz, Neid

Orange Lebensfreude Aufdringlichkeit

Rot Leidenschaft Gefahr

Grün Frische, Entspannung

Gleichgültigkeit

Schwarz Würde Trauer

Farben - Bedeutung

Page 41: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Farben – Einflussfaktor Kultur

Farbe Bedeutung

Rot • Europa: Gefahr• Asien: Freude, festliche Stimmung

Gelb • Europa: Licht, Sonne, Wärme• Russland: Unglück

Weiß • Europa: Reinheit• China: Tod, Trauer

„To internationalize your website means to adapt its contents and style for the

international audience.“

Page 42: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Essentielles Element der Websitegestaltung

Corporate Identity, Corporate Design

Dienen als Orientierungshilfe

SymbolikWare verfügbar = grünWare nicht verfügbar = rotHyperlink = blau

Online Farbenwahl ≠ Offline Farbenwahl

Bsp.: CSS Zen Garden

Farben im Webdesign

Page 43: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Wording

Page 44: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Hohes Tempo

Lange Texte werden nicht gelesen

User sind ungeduldig

Content soll einfach und komprimiert dargestellt werden

Wie interagiert User?

Page 45: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Wiedererkennungswert generieren Slogans

Der Nutzer muss verstehen was dahinter steckt!

Mit Wording werden Aktionswege vorgegeben

Fehlinterpretationen haben negativen Einfluss◦ Absprungrate◦ Conversion-Rate◦ Anwendungen werden nicht genutzt

„Don‘t make me think“ – Stefan Krug

Wording – Was ist wichtig?

Page 46: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Benennungen von ElementenWebsite

Aktion Präferierte Benennung

Dokumente herunterladen

Echtzeit-Kommunikation mit Nutzern

Suchfunktion

Niederlassungen

Download (63%)Auf Festplatte speichern (10%)

Chat (49%)Life-Chat (20%)

Suche (41%)Suchen (28%)

Filial-Finder (53,7%)Shopfinder (30%)

Page 47: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Benennungen von ElementenOnline Shop

Aktion Präferierte Benennung

Neue Produkte

Preisgünstige Angebote

Am meisten verkaufte Produkte

Konfigurator

Neuheiten (39%)Neu im Shop (20%)

Schnäppchen (29,9%)Sonderangebote (21,4%)

Bestseller (28%)Top Ten (24%)

Produkte zusammenstellen (39%)Produktkonfigurator (21%)

Page 48: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Bewusst auf Wording achten

Webshop – RechercheKonkurrenzanalyse

A/B-TestingBsp: Kaufen Button◦ Zahlungspflichtig bestellen◦ Kaufen◦ Kostenpflichtig bestellen

Vorgehensweise

Vgl. Wünschmann / Schwarz / Müller (2008)Vgl. eResult (2012)

Page 49: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Nach Produktgruppen (Hosen, Kleider,…)

Nach Zielgruppen (Frauen, Männer, Kinder…)

Kategorien (Sportarten)

Themenstruktur von Webauftritten

Page 50: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Primäre Navigation◦ Oberste Ebene der Struktur◦ Bildet die Hauptkategorien ab◦ Kann/Soll von jeder Webseite erreichbar sein

Sekundäre Navigation◦ 2 Ebene der Struktur◦ Ermöglicht die Navigation innerhalb der primären

Navigation Meta Navigation

◦ Orientierungshilfen◦ Bsp.: Sitemaps, Suche, Kontakt, Home,…

Navigationsstruktur

Page 51: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

JKU Navigation

Primäre Navigation

Sekundäre Navigation

Metanavigation

Page 52: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Pfadangaben Dropdown Anker-Navigation

Mobile Darstellung◦ Responsive Webdesign

Navigationsstruktur

Page 53: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Nutzeranforderungen◦ Wo bin ich?◦ Wo war ich bereits?◦ Was gibt es hier zu sehen?◦ Wie komme ich zurück?◦ Wohin kann ich gehen?

Eine gute Navigation ist◦ intuitiv gestaltet◦ konsistent

Anforderungen an eine Navigation

Page 54: Präsentation Webkomm Corporate Identity | Farben | Wording | Themenstrukturen | Index, Ikon, Symbol & Ikonographie

Häufigste Kombination◦ Header: Primäre Navigation◦ Links: Sekundäre Navigation

Footer◦ Impressum◦ Kontakt

Sonderfall der Navigation

Wie teste ich meine Navigation?◦ www.optimalworkshop.com/chalkmark.htm

Positionierung der Navigation