Grafische Gestaltung von Websites. Seminar 2009

Größe: px

Ab Seite anzeigen:

Download "Grafische Gestaltung von Websites. Seminar 2009"

Dominic Albert Kalb
vor 8 Jahren
Abrufe

1 Grafische Gestaltung von Websites Seminar 2009

2 Visuelle Kommunikation ist die Übermittlung von Information in einer Weise, die über das Auge direkt oder indirekt wahrgenommen wird.

3 Gestaltungslösung ist eine Synthese aus: _Wahl des Medium (Informationsträger) _Auswahl der Gestaltungselemente (Bildsprache) _sowie deren Organisation (Komposition)

4 Professionelle Website ist das A und O Reflexion des unternehmerischen Corporate Designs Einfache Benutzerführung 3 Punkte zur Gestaltung: _Einfachheit _schlichte und übersichtliche Webseiten _Gefälligkeit _klare Linien und Formen _Erfahrung nutzen _Nutzen bekannter Begriffe

5 Fazit: Medienübergreifende Gestaltungselemente _Logo und Farbcodes, Schmuckelemente _Farben und Formen, Schrift _Informationen und Inhalte

6 Bei der Gestaltung können Farben benutzt werden, um eine zum Beispiel Tiefenwirkung zu erzeugen und Informationen für das Auge plausibel zu staffeln. Farben mit viel Eigenhelligkeit eignen sich für Auszeichnungen und Navigationselemente. Farben mit geringer Sättigung treten visuell zurück und eignen sich daher als Fondfarben.

7 Websichere Farben sind die 216 Basisfarbtöne aus der 8-Bit-Palette, die auf allen Betriebssystemen und in allen Browsern gleich aussehen sollen.

8 Zahlreiche Tests haben diese sichere Palette auf eine Zahl von 22 Tönen reduziert, die dem Gestalter wenig Auswahl lassen.

9 E-Commerce-Anwendungen verwenden überwiegend weißen oder neutral-grauen Kontext, um die Farbeigenschaften der Produkte so originalgetreu wie möglich wiederzugeben. Amateurfotografie Profifotografie

10 Das Auge ist nicht bereit, visuell anstrengende Texte anzunehmen. Es ist schon ein großer Unterschied, ob man Schriften beurteilt nach der formalen Schönheit ihres Alphabets oder nach ihrem Gebrauch. zu großer Buchstabenabstand L i f e zu ähnliche Buchstabenstruktur L I F E S T Y L E zu kleiner Zeilenabstand Es ist schon ein großer Unterschied, ob man Schriften beurteilt nach der formalen Schönheit ihres Alphabets oder nach ihrem Gebrauch. Es ist schon ein großer Unterschied, ob man Schriften beurteilt nach der formalen Schönheit ihres Alphabets oder nach ihrem Gebrauch. Es ist schon ein großer Unterschied, ob man Schriften beurteilt nach der formalen Schönheit ihres Alphabets oder nach ihrem Gebrauch. Es ist schon ein großer Unterschied, ob man Schriften beurteilt nach der formalen Schönheit ihres Alphabets oder nach ihrem Gebrauch.

11 Lesbarkeit auf dem Bildschirm ist vor allem abhängig vom Helligkeitskontrast. 80 % Helligkeit Lesbarkeit auf dem Bildschirm ist vor allem abhängig vom Helligkeitskontrast. 50 % Helligkeit Lesbarkeit auf dem Bildschirm ist vor allem abhängig vom Helligkeitskontrast. 20 % Helligkeit

12 Sammeln nach Strukturen Bildbeziehungen können hergestellt werden durch das Abbilden von ganzen Bildeinheiten und Detailaufnahmen bzw. Ausschnitten aus dem Bildganzen.

13 Sammeln nach Farben Scheinbar nicht zusammenhängendes Bildmaterial wird gesammelt und geordnet. Durch eine Signalfarbe oder auch ein Muster wird ein formaler Zusammenhang hergestellt.

14 Sammeln nach Inhalt oder Themen Durch das Sammeln und Ordnen von Bildern aus einem Themenbereich können Inhalte gebündelt und somit konzentrierter oder eindringlicher werden. Die Zufälligkeit des Einzelnen wird im größeren Zusammenhang aufgehoben.

15 Grafiken werden für Orientierungs- und Navigationshilfen genutzt. Beispiel: Auswahlleisten, Statusinformationen, Lupenwerkzeuge, Warenkörbe, Anweisungen etc. Wichtig: schnelle Ladezeit der Grafiken im Browser Verwenden hochkomprimierbarer Dateiformate z.b. GIF, JPEG, PNG

16 Anwendung bei komplexen oder beratungsintensiven Produkten: Dabei kann der Einsatz des Geräts gezeigt werden, während eine Stimme das Produkt erklärt. Ziel: Vermeidung unzähliger Mengen von Text und Bildern

17 Aufgabe von grafischer Gestaltung ist es, Informationen innerhalb einer Website so unterzubringen, dass sie sich rasch erfassen, gut lesen und einfach handhaben lassen. Deshalb bedient man sich Gestaltungsrastern.

18 Ein Raster dient dazu, einer Komposition Halt zu geben. Gestaltungselemente werden in ein Raster eingepasst. Einräumen von Regalsystemen Sortierung von Materialien Gruppierung von Funktionen

19 Etablierte Standard-Bildschirmformate sind: 640 x x x x 800 Pixel Bildschirmraster werden immer in Pixeln aufgebaut x 768 Pixel 16 x 16 Pixel = 1 Unit

20 Proportionen spielen eine wichtige Rolle, wenn es um die Verteilung der funktionalen Elemente einer Applikation geht. Textfeld Bildfeld Navigationsfeld Animationsfeld Prinzipiell eignen sich Proportionen im Verhältnis 4:3 sehr gut.

21 Spaltenbreiten lassen sich kombinieren. Das ist ein dummer Text, der nur dafür da ist, zu zeigen, wofür man Grundlinien braucht. Die Zeilen helfen, allen Textelementen auf dem Bildschirm visuellen Halt zu geben. Dann kann man nämlich überall auf dem Bildschirm Text schreiben, ohne dass das unruhig oder ungeordnet wirkt.

22 Bewegungs- und Zeitraster Aktion und Geschwindigkeit von sich bewegenden Objekten.

23 .Ziel _Trainieren der eigenen Wahrnehmung _Schaffen einer Kommunikationsgrundlage _Hilfe für die Wahl der richtigen Agentur

24 Vielen Dank für Ihre Aufmerksamkeit ;-) Seminar 2009 Grafische Gestaltung von Websites dipl.des. manuela rohde

Ähnliche Dokumente

Bilder im Gemeindebrief ansprechend platzieren

Bilder im Gemeindebrief ansprechend platzieren veröffentlicht am 20. Januar 2015 by Nelli Schwarz in Gestaltungstipps Ein Gemeindebrief besteht gewöhnlich hauptsächlich aus Texten und Bildern. Wie man