slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Inhalt Format Gestaltungsraster Farben Farbkontraste Hintergrund Schrift Schriftattribute PowerPoint Presentation
Download Presentation
Inhalt Format Gestaltungsraster Farben Farbkontraste Hintergrund Schrift Schriftattribute

Loading in 2 Seconds...

play fullscreen
1 / 18

Inhalt Format Gestaltungsraster Farben Farbkontraste Hintergrund Schrift Schriftattribute - PowerPoint PPT Presentation


  • 87 Views
  • Uploaded on

Inhalt Format Gestaltungsraster Farben Farbkontraste Hintergrund Schrift Schriftattribute Navigation Navigationselemente Zusammenfassung. Screen-Design > Inhalt. Nutzfläche. Format. Hauptproblem: Variable Größe des Browserfensters.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Inhalt Format Gestaltungsraster Farben Farbkontraste Hintergrund Schrift Schriftattribute' - denise-ellis


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
Inhalt
  • Format
  • Gestaltungsraster
  • Farben
  • Farbkontraste
  • Hintergrund
  • Schrift
  • Schriftattribute
  • Navigation
  • Navigationselemente
  • Zusammenfassung

Screen-Design > Inhalt

format

Nutzfläche

Format
  • Hauptproblem: Variable Größe des Browserfensters.
  • „Standard-Monitor“: 1024 x 768 Pixel, abzüglich Browserränder verbleiben etwa 1000 x 600 Pixel Nutzfläche.

Screen-Design > Format

format1
Format
  • Wichtige Seitenelemente wie Buttons sollten bevorzugt links / oben platziert werden – sie sind dann immer sichtbar.
  • Wenn Bildlaufleisten (Scrollbalken) unvermeidbar sind, dann vertikal und nicht horizontal.

Horizontale und vertikale Bildlaufleiste

Screen-Design > Format

gestaltungsraster
Gestaltungsraster
  • Screen-Design beginnt mit der Planung des Seitenlayouts. Ein Gestaltungsraster gestattet
  • eine klare und verständliche Seitenstruktur.

Hauptnavigation (unveränderlich)

  • Bild

Unter-navigation (variabel)

Unter-navigation (variabel)

Text

Screen-Design > Gestaltungsraster

gestaltungsraster1
Gestaltungsraster
  • Liegt das Seitenlayout fest muss es konsequent auf allen Seiten umgesetzt werden. Der Nutzer findet sich auf der gesamten Site schnell und intuitiv zurück.

Screen-Design > Gestaltungsraster

farben
Farben
  • ... rufen Assoziationen und Emotionen hervor!

Sonne

Wärme

Helligkeit

Gold

Freundlichkeit

LiebeEnergie

Feuer

Gefahr

Blut

Zorn

Natur

Wachstum

Frische

Ruhe

Hoffnung

Gift

Reinheit

Klarheit

Ordnung

Vollkommenheit

Himmel

Meer

Unendlichkeit

Kühle

Passivität

Neutralität

Nüchternheit

Theorie

Sachlichkeit

Langeweile

Screen-Design > Farben

ungeeignete farbkontraste
Ungeeignete Farbkontraste

Kontrast zu gering

Text

  • Ein zu geringer Kontrast verschlechtert die Lesbarkeit.
  • Ein zu hoher Kontrast strengt das Auge stark an.
  • Bei komplementären Farben kann es zum „Flimmereffekt“ kommen. Das Auge wird durch den Kontrast überlastet.

Kontrast zu hoch

Text

Komplementär-Kontrast

Text

Screen-Design > Farben > Farbkontrast

geeignete farbkontraste
Geeignete Farbkontraste

Bunt-Unbunt-Kontrast

Text

  • Bunt-Unbunt-Kontrast Kombination einer Buntfarbe (rot, gelb, grün) mit einer unbunten Farbe (grau, braun)
  • Kalt-Warm-KontrastKombination einer „kalten“ (blau, lila) und „warmen“ (gelb, rot, orange) Farbe
  • Intensitäts-KontrastKombination einer „reinen“ und einer „trüben“ Farbe.

Kalt-Warm-Kontrast

Text

Intensitäts-Kontrast

Text

Screen-Design > Farben > Farbkontrast

ungeeignete hintergr nde
Ungeeignete Hintergründe

Kopfweh ist absehbar!

Hier steht der Text,

und den muss man

lesen können.

  • Grelle, leuchtende Farben
  • Unruhige Motive wie z.B. Fotos
  • Hintergründe mit „Wallpaper“-Effekt

Können Sie alles lesen?

Hier steht der Text,

und den muss man

lesen können.

„Tapeten“ sind Out!

Hier steht der Text,

und den muss man

lesen können.

Screen-Design > Hintergrund

geeignete hintergr nde
Geeignete Hintergründe

Optimale Lesbarkeit

Hier steht der Text,

und den muss man

lesen können.

  • Helle, aber dezente Farben z.B. Pastellfarben
  • Mehrfarbige Motive, die aber nicht „unruhig“ sein dürfen
  • Dunkle Hintergründe eignen sich nur für geringe Textmengen.

Wolkenbild nach Weich-zeichnung

Hier steht der Text,

und den muss man

lesen können.

Negative Schrift auf dunklem Hintergrund

Hier steht der Text,

und den muss man

lesen können.

Screen-Design > Hintergrund

schrift
Schrift

Windows-Systemschriften

  • Hauptproblem: HTML kann keine Schriften einbetten. Die verwendete Schrift muss im System installiert sein.
  • Für den Fließ- oder Mengentext muss eine der wenigen Systemschriften verwendet werden.
  • Wer z.B. für Buttons oder Überschriften andere Schriften verwenden will, muss diese als GIF-Grafik abspeichern.

Times New Roman

Arial

Verdana

Tahoma

Courier New

Screen-Design > Schrift

schriftattribute
Schriftattribute

Schriftgröße

  • Schriftgröße Für Mengentexte beträgt die Schriftgröße üblicherweise 11 bis 12 Punkt.
  • ZeilenlängeDie Zeichenanzahl pro Zeile sollte einschließlich Leerzeichen maximal 50 betragen. Bei längeren Zeilen verrutscht das Auge leicht beim Lesen.

Schriftbeispiel in 8 pt.

Schriftbeispiel in 10 pt.

Schriftbeispiel in 12 pt.

Schriftbeispiel in 14 pt.

Schriftbeispiel in 16 pt.

Zeilenlänge (ca. 50 Zeichen)

Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe.

Screen-Design > Schrift > Schriftattribute

schriftattribute1
Schriftattribute

Linksbündiger Flattersatz

  • SatzartAls Satzart kommt für Mengentext nur linksbündiger Flattersatz in Frage. Blocksatz wird von vielen Browsern nicht unterstützt.
  • AuszeichnungZur Auszeichnung (Hervorhebung) von Text kann dieser Fett fett (bold) oder in einer anderen Farbe gesetzt werden. Kursiv ist schlecht lesbar und unterstrichen kennzeichnet Hyperlinks.

Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe.

Auszeichnung

Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe.

Screen-Design > Schrift > Schriftattribute

schriftattribute2
Schriftattribute

Gliederung in Absätze

  • Gliederung Texte am Bildschirm sind schlecht lesbar. Sie sollten deshalb kurz gehalten in überschaubare Einheiten gegliedert werden.
  • TrennungHTML kennt keine automatische Trennung. Trennungen müssen per <br>-Tag „erzwungen“ werden.

Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben.

Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben.

Schade, dass ich es nicht zu mehr gebracht habe.

Textumbruch ohne Trennung

Da HTML nicht automatisch trennt, kann dies zu einem sehr unschönen Schriftbild führen. Abhilfe kann nur das Einfügen manueller Trennungen schaffen. Bei dynamisch erstellten Seiten geht dies nicht.

Textumbruch mit manueller Trennung

Da HTML nicht automatisch trennt, kann dies zu einem sehr unschönen Schriftbild führen. Abhilfe kann nur das Einfügen manueller Tren-nungen schaffen. Bei dynamisch erstellten Seiten geht dies nicht.

Screen-Design > Schrift > Schriftattribute

navigation

Homepage (index.html)

Home

1. Informationsebene

News

Kontakt

Termine

Aufgaben

2. Informationsebene

Schüler

Lehrer

Navigation
  • Die Navigation der Website muss im Vorfeld geplant werden. Hierzu wird ein Navigationsplan erstellt.
  • Ein Navigationsplan zeigt alle Screens als Kästchen. Jedes Kästchen ergibt bei der Umsetzung eine eigene HTML-Datei.
  • Der Navigationsplan zeigt alle Links als Pfeile.

Screen-Design > Navigation

navigationselemente
Navigationselemente

Navigationsleiste bei www.europapark.de

  • Navigation und Inhalt müssen klar voneinander getrennt werden.
  • Die Navigationselemente sollen sich auf jedem Screen an der gleichen Stelle befinden. Nur so erschließt sich dem Nutzer die Bedienung intuitiv.
  • Die Navigationselemente sollten nicht zu klein sein. Der ungeübte Nutzer hat sonst mit der Bedienung Schwierigkeiten.
  • Die Navigationselemente sollten nicht zu groß sein. Im Vordergrund stehen die Inhalte der Site und nicht deren Bedienelemente.

Screen-Design > Navigation > Navigationselemente

navigationselemente1
Navigationselemente

YelloStrom hält sich an die „magische“ 7

  • Der Mensch kann auf einen Blick maximal sieben Navigationselemente erfassen.
  • Werden mehr als sieben Links benötigt, sollten diese als Unternavigation realisiert werden.
  • Bei Textlinks müssen kurze und passende Begriffe gefunden werden.

Unternavigation

Screen-Design > Navigation > Navigationselemente

navigationselemente2
Navigationselemente

Homepage

  • Grafische Links müssen durch Verwendung geeigneter Metaphern selbsterklärend sein:Haus > zur HomepageBriefumschlag > KontaktmöglichkeitGlobus > Links ins Internet
  • Zur Unterstützung sollte beim Berühren mit der Maus (Rollover) zusätzlicher Text eingeblendet werden.
  • Grafiken (Icons) sollten stilisiert, abstrahiert und einheitlich gestaltet werden.

Kontakt

Links

Screen-Design > Navigation > Navigationselemente