WEBSEITEN GESTALTUNG. Darauf sollten Sie achten. Christiane Michelsen Inh. layoutscout.com Designbüro

Größe: px

Ab Seite anzeigen:

Download "WEBSEITEN GESTALTUNG. Darauf sollten Sie achten. Christiane Michelsen Inh. layoutscout.com Designbüro"

Kajetan Hase
vor 8 Jahren
Abrufe

1 WEBSEITEN GESTALTUNG Darauf sollten Sie achten

2 Über mich Christiane Michelsen Inhaberin von layoutscout.com Designbüro layoutscout.com Designbüro verbindet Kommunikationsstrategien mit hoher visueller Designqualität

3 Inhaltsverzeichnis Planung und Strategie Inhalte strukturieren Navigationsdesign Screendesign Gestaltungsraster Farbe Bildsprache Typografie

4 Erst gedacht, dann gemacht! Planung und Strategie

5 Planung und Strategie Wen will ich erreichen? Potenzielle Neukunden Bestandskunden Vertriebspartner Potenzielle Bewerber Journalisten...

7 Planung und Strategie Was will ich erreichen? Bekanntheitsgrad steigern Image verbessern Adressen gewinnen Anfragen generieren Produkte online verkaufen Beratungskosten einsparen Vertriebspartner steuern Pressearbeit intensivieren Personal akquirieren Kundenservice verbessern Servicekosten einsparen

generieren Produkte online verkaufen Beratungskosten einsparen

8 Planung und Strategie Ideenfindung

9 Inhaltsverzeichnis Planung und Strategie Inhalte strukturieren Navigationsdesign Screendesign Gestaltungsraster Farbe Bildsprache Typografie

10 Ordnung ist das halbe Leben. Inhalte strukturieren

11 Inhalte strukturieren Inhalte sinnvoll organisieren logische Kategorien bilden hierarchische Struktur finden Nutzer orientiert denken Balance halten zwischen Tiefe und Breite Ihrer Informationsarchitektur

12 Inhalte strukturieren Bleiben Sie ausgewogen StrukturQuelle: Lynch, Horton (1997e)

13 Inhalte strukturieren Organigramm erstellen Quelle: Oliver Merklinghaus (2006)

14 Inhalte strukturieren Erwartungen erfüllen Quelle: Oliver Merklinghaus (2006)

15 Inhaltsverzeichnis Planung und Strategie Inhalte strukturieren Navigationsdesign Screendesign Gestaltungsraster Farbe Bildsprache Typografie

16 Navigation ist die halbe Miete Navigationsdesign

17 Navigationsdesign Strukturen sichtbar machen Klar, einfach und konsistent Woher komme ich Wo bin ich / Was kann ich hier tun Wohin kann ich gehen Verwendung der richtigen Begriffe

18 Navigationsdesign Navigationskonzepte Quelle: Oliver Merklinghaus (2006)

19 Navigationsdesign Einfach aber nicht langweilig

20 Navigationsdesign Die Startseite als Eingangstür Häufiger Aufruf der Startseite Sagen Sie worum es geht Nicht Begrüßung sondern Orientierung Verlinken von wichtigen Informationen, neuen Meldungen, aktuellen Aktionen

geht Nicht Begrüßung sondern Orientierung Verlinken

21 Navigationsdesign Beispiel Startseite

22 Inhaltsverzeichnis Planung und Strategie Inhalte strukturieren Navigationsdesign Screendesign Gestaltungsraster Farbe Bildsprache Typografie

23 Nach der Arbeit folgt das Vergnügen Screendesign

24 Screendesign Gutes Design Bildet das individuelle Profil Ihrer Firma ab und schärft es Strukturiert die Inhalte Weckt Emotionen: Vertrauen, Neugier, Unterstützt die Orientierung

25 Screendesign Gestaltungsraster Definiert die Platzierung der Designelemente Einheitliche Gestaltung der verschiedenen Inhaltselemente

26 Screendesign Beispiel grobes Layoutraster Quelle: Oliver Merklinghaus (2006)

27 Screendesign Beispiel Umsetzung Layout Quelle: Oliver Merklinghaus (2006)

28 Screendesign Informationen schnell erfassen Quelle: Martijn van Welie (2008)

29 Screendesign Farbe kommuniziert Das Farbklima unterstreicht Ihre Aussage Corporate Design fortführen Farbakzente betonen bedeutende Inhalte Strukturiert Seitenelemente

30 Screendesign Farben wirken Quelle: Oliver Merklinghaus (2006)

31 Screendesign

32 Screendesign Bildsprache und deren Wirkung weckt Emotionen und schafft Atmosphäre Unterstützt die Wiedererkennung Achten Sie auf eine einheitliche Bildsprache

33 Screendesign Grundlagen der Bildkonzeption Inhaltliche Ebene: Was ist abgebildet? Formale Ebene : Wie ist es abgebildet? Affektive Ebene: Welche Wirkung wird erzielt?

34 Screendesign Die Basis ist das Bildformat Hochformat: Symbolwirkung: Größe und Stärke. Querformat: das natürlichste Format. Entspricht dem Blickfeld des Menschen. Quadratische Form: verkörpert Neutralität und Kompaktheit. Wirkt beruhigend. Quelle: Seibert Media (2007)

35 Screendesign Der Bildausschnitt Gesamtbühne: Eine in sich geschlossene Welt. Ausschnitt: Ein Teilbereich wirkt interessant und macht neugierig. Detailansicht: Fokussiert und konzentriert auf Weniges. Quelle: Seibert Media (2007)

36 Screendesign Die Bildkomposition Linien und Flächen sind die elementaren Gestaltungselemente der Bildsprache. Linien lenken automatisch den Blick des Betrachters (Führungs- und Leitlinien). Quelle: Seibert Media (2007)

37 Screendesign Aufteilung der Bildfläche Symmetrie: ruhig, statisch und angenehme Bildwirkung. Asymmetrie: meist interessanter, da mehr Dynamik und Lebendigkeit. Quelle: Seibert Media (2007)

38 Screendesign Emotionale Wirkung mit Farbe u. Licht SW als künstlerischästhetisches Stilmittel Überbelichtung vermittelt Leichtigkeit, Reinheit, Freiheit Unterbelichtung wirkt düster, geheimnisvoll und unheimlich Monochrome Bilder Wirkung der gewählten Farbe Realistische Lichtsituation (wie z.b. bei Tageslicht) Authentizität Künstliches Licht hat meist eine futuristische Wirkung Quelle: Seibert Media (2007)

39 Screendesign Wie Bilder wirken Bilder wirken auf das Unterbewusstsein Symbolwirkungen rufen Assoziationen und Haltungen hervor Positive und negative Gefühle Wo man sich keine Gedanken über die Bildsprache macht, können Inhalte und Symbolwirkungen transportiert werden, die entgegengesetzt der beabsichtigten Bildaussagen stehen Letztendlich zählt die WIRKUNG eines Bildes auf den Betrachter

40 Screendesign Professionelle Typografie Besonders wichtig: klare Texthintergrundgestaltung Der Hintergrund ist generell einfarbig ohne Muster Information hat Vorrang vor der Gestaltung Quelle: Oliver Merklinghaus (2006)

41 Screendesign Verwendung von Schriften Serifenlose Schriftarten (Arial, Verdana) Wenige Schriftgrößen Schlüsselinformationen (fett, farbig) Unterstreichungen nur für Links

42 Screendesign Lesbarkeit steigern

43 Screendesign Ein guter Online-Text formuliert Nutzenbotschaften für die Zielgruppe Spricht die Sprache der Zielgruppe Lädt durch lesefreundliche Strukturen zum Lesen am Bildschirm ein Wirkt sich positiv auf das Suchmaschinen-Ranking aus

44 Bleiben Sie gesund Mouse Rage Syndrom

45 Neue Internet-Krankheit entdeckt "Mouse Rage Syndrom" heißt eine neu entdeckte Krankheit, die aus schlecht gestalteten Webseiten resultiert. Schlechte Usability von Websites macht Internet-Nutzer physisch krank. Das zeigt eine Studie des britischensocial Issues Research Centres (SIRC) unter Web-Nutzern. Dabei wurden die Probanden nach einer optimalen Website mit einer Abfolge von verrückten Grafiken und langsam ladenden Seiten konfrontiert. Das Ergebnis: Nur ein kleiner Teil der Testpersonen blieb ruhig, die Mehrheit jedoch reagierte mit Stresssymptomen auf den Versuch. Laut SIRC werden durch eine schlecht gestaltete Website vor allem das Herzkreislaufsystem, das Immunsystem sowie das vegetative Nervensystem negativ beeinflusst. In der Studie konstatierten die Forscher bei ihren Probanden beschleunigten Herzschlag, übermäßiges Schwitzen sowie wildes Klicken und Schlagen der Maus. Einen Namen hat die neue Krankheit auch schon: Unter "Mouse Rage Syndrom" wird sie in Medizinlexika Einzug halten

46 Vielen Dank!

Ähnliche Dokumente

Corporate Design - ein kurzer Überblick. Mit Corporate Design ist das gesamte visuelle Erscheinungsbild eines Unternehmens

Corporate Design - ein kurzer Überblick Mit Corporate Design ist das gesamte visuelle Erscheinungsbild eines Unternehmens oder einer Organisation gemeint, angefangen beim Logo über die Farbe bis hin zur