WEBDESIGN

Bewertung: 
0
Bisher keine Bewertung

Farbe im Screendesign

I. Farbe im Screendesign

  • dient als Orientierungshilfe und um Informationen zu strukturieren (z.B. die Menüführung)
  • dient zur Kennzeichnung oder zur Hervorhebung
  • nicht zu bunt, nicht zu wenig.. lieber ein bestimmtes Farbschema
  • Augenfreundlich gestalten (zu starke Kontraste meiden)
  • gleiche Inhalte farblich gleich gestalten
  • gute Lesbarkeit braucht einen Hell-Dunkel-Kontrast (lieber dunkle Schrift auf hellem Grund)
  • Inhaltsbezug und Zielgruppe berücksichtigen (keine warmen Farben für einen Skiort, keine kalten für ein Urlaub am Mittelmeer)
  • Farbmenge (eher gezielt und zurückhaltend einsetzen)
  • Wiedererkennbarkeit eines Erscheinungsbildes durch Farben des Corporate Design
  • Navigation und Benutzerführung durch systematischen Farbeinsatz

II. Kontraste am Bildschirm

  • Komplementärkontraste flimmern am Monitor stärker als auf Papier
  • bei schwarzer Schrift auf weißem Grund kommt es zum Überstrahlen der Schrift (Haarlinien werden "verschluckt")
  • um dies zu vermeiden lieber ein ganz leichtes kaum wahrnehmbares Grau als Hintergrundfarbe nehmen, das ist für das Auge angenehmer zu lesen und es ermüdet nicht so schnell

III. Fragestellungen in puncto Farbe beim Design

Farbpsychologie, Farbsymbolik, Farbwirkung
Welche Bedeutung hat jene Farbe? Welche Farbe eignet sich für jene Zielgruppe? Welche Farbe passt thematisch zu jenem Thema der Website? Welche Wirkung hat die Farbtemperatur?

Farbkontraste, Farbschemata, Farbrad, Farbeigenschaften
Welche Farbkontraste gibt es? Welche eignen sich für das Screendesign und wofür genau (z.B. Lesbarkeit von Texten)? Welche sollten vermieden werden und warum (z.B. Komplementärfarben flimmern)? Welche Farbharmonien passen, wie können Farbschemata entwickelt werden (z.B.Triade, Monochromatisch)? Welche Eigenschaften von Farben (Farbton, Helligkeit, Sättigung) können angepasst und kombiniert werden? Wie sollten Farben dosiert werden (Quantität)? Wie kann Raumwirkung erzielt werden?

Aufgabe von Farbe im Screendesign
Wie lassen sich Elemente farblich hervorheben? Wie kann ein Wiedererkennungseffekt erzielt werden? Wie wird durchgängige Benutzerführung erreicht (z.B. alle Links in einer Farbe, Farbkonzept für Navigation)? 

Farbfehlsichtigkeit
Wird bei dem Thema leicht übersehen, ca. 8% der Männer und ca. 0,5% der Frauen haben Farbsehstörungen, die bei der Farbgestaltung berücksichtigt werden sollten. Siehe Artikel "Augenerkrankungen und barrierefreies Webdesign" bei drweb.
Wie kann Barrierefreiheit durch Farbgebung erreicht werden (z.B. entsprechende Farbkombinationen vermeiden, ausreichend Kontrast)?


IV. RGB

  • Bildschirme sind selbstleuchtend
  • einzelne Bildpunkte bestehen aus 3 Phosphorzellen, je eine für Rot, Grün und Blau (dazu angemerkt, die Info war auf Farbbildröhre bezogen.. sollte es also bei LCD oder TFT anders sein, bitte ich um Korrektur)
  • diese 3 Punkte verschmelzen in der Wahrnehmung zu einer Farbe
  • eine Mischung aus allen 3 Farben in höchster Intensität ergibt weiß
  • im RGB-Modus lassen sich mehr Farben darstellen als im CMYK-Modus

 

V. Websichere Farben

  •  alle Systeme (Mac, Windows,etc.) können diese 256 Web Save Colours gleich darstellen
  •  deshalb wurde eine Web-Palette mit 216 Farben entwickelt, die auf allen Plattformen gleich darstellbar sein sollen
  •  20 Farben sind vom Betriebssystem für Fensterrahmen, Hintergründe etc. belegt
  •  für R, G und B stehen jeweils 6 Werte zur Verfügung (6*6*6=216)
  •  diese sind jeweils 0, 51, 102, 153, 204 und 255
  • bestehen im Hexadezimalsystem ausschließlich aus den Kombinationen von CC, FF, 00, 33, 66 und 99
  • in der Praxis haben die websicheren Farben faktisch keine Bedeutung mehr

 

VI. Farbunterschiede

  • nicht bei jedem sehen die Farben auf dem Monitor gleich aus
  • das kann am Betriebssystem liegen, an der Hardware (z.B. Grafikkarte) oder auch am Monitor, da diese selten gleich kalibriert sind, wenn überhaupt

 

VII. Farbangaben in HTML

  • Farben werden im Hexadezimalsystem angegeben
  • die Angabe "color: red;" ist auch möglich, sollte jedoch vermieden werden, da nicht jeder Browser damit gleich umgeht

 

 

 

 

Weiterführende Links

Bewertung: 
3.5
Durchschnitt: 3.5 (2 Stimmen)

Farbcodierung

Erste Zusammenfassung aus der gemeinsamen Prüfungsvorbereitung im PDF.

 

AnhangGröße
PDF icon MP_U9_Farbcodierungen.pdf697.2 KB
Bewertung: 
0
Bisher keine Bewertung

Bildschirmtypografie

siehe auch WBT "Typografie am Bildschirm"

Monitorauflösung

zwischen 72 und 96 ppi Auflösung am Monitor, einzelne Pixel erkennbar, Feinheiten und Details gehen bei kleiner Schriftgröße verloren

Schriftdarstellung im Internet

  • Bei HTML-basierten Websites werden vom browser nur Schriften dargestellt, die auf dem Rechner der Users selbst vorhanden sind, die so genannten Systemschriften (Helvetica/Arial, Times/Times New Roman, Georgia, etc.)
  • Schrift als Grafik einzubetten bietet viele Nachteile und ist nicht mehr zeitgemäß
  • Aktuelle Entwicklung als Alternative: Webfonts


Kriterien für die Schriftwahl – Lesbarkeit am Monitor

  • Serifenlose Schriften bevorzugen
  • Schriften mit offenen Punzen, keine Condensend-Schnitte
  • Schrift für Fließtext sollte zwischen 10 und 12 Pixel (px) groß sein, je nach verwendeter Schriftart auch bis zu 14 px. Die Schriftgröße sollte zudem vom User über die Browsereinstellungen editierbar sein und nicht fixiert, so dass man die Schriftgröße an die eigene Monitorauflösung und Sehstärke anpassen kann
  • Schriftart für Fließtext mit feinen Linien (z.B. Klassizistische Antiqua) lässt sich schwerer darstellen


Layout

  • die Satzbreite sollte etwa 50-65 Zeichen betragen (Mit Zeichen sind nicht nur die Buchstaben, sondern auch Satzzeichen und Leerzeichen gemeint.)
  • linksbündiger Flattersatz in der Regel vorzuziehen.
  • Kein Blocksatz bei HTML-basierten Websites, da Browser bisher noch keine Trenn-Algorithmen besitzen, kommt es in der Regel bei Blocksatz zu unschönen Löchern im Text,
  • Text in überschaubaren und inhaltlich zusammengehörenden Blöcken gliedern
  • Möglichst klaren Farbkontrast von Schrift und Hintergrund, Komplementärkontrat (rot-Grün) vermeiden, da es zu Flimmern führt
  • Keine Schrift auf einem unruhigen Hintergrund (Bild, Illustration) platzieren

 

Weiterführende Links:

http://home.arcor.de/rnbbox/bildschirmtypo.pdf


 

AnhangGröße
PDF icon <p>Bildschirmtypografie 3.pdf</p>218 KB
Bewertung: 
4.666665
Durchschnitt: 4.7 (3 Stimmen)

Mobiles Webdesign

Mobile Design Essentials

In den beiden verlinkten Videos stellt Luke Wroblewski Grundlagen für Mobile Design vor. Er bringt viele Beispiele von Google, Amazon, Ebay mit. Er ist der renomierte Autor von Mobile First.
Der Vortrag ist unbedingt zu empfehlen. Er ist außerdem ein Beispiel für viele Digitale Präsentationstechniken, z.B. tolle Charts und Animationen.
Wir denken das Thema ist mit den Vorträgen ausgeschöpft.
 

Auf unserer Lernplattform entsteht eine Zusammenfassung dieser Videos unter dem Punkt "mobile design", Wir haben unter "Responsive Parallax Perspektiven" eine für mobiles Web spezialisierte Webseite. In den Videos wird erklärt wies das geht. Unter dem Punkt "Speed Pimp" sind viele Tipps wie man eine Seite schnell bekommt.

http://code.arnoldbodeschule.de/responsive-parallax-perspektiven/

 

Google Material Design

Google hat mit dem Material Design Style Guide eine sehr umfangreiche und gut ausgearbeitete Ressource bereit gestellt. Es gibt umfangreiche Beispiele und Anregungen für Animation, Farben, Ebenen, Pattern, Components - schlicht alles was für Apps und Mobile wichitg ist.

Weiterführende Links:

http://t3n.de/magazin/praxis-guide-mobile-websites-fit-furs-mobile-web-230209/
http://mediaqueri.es/

Hier noch ein Artikel über adaptives und responsives Webdesign:
http://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/ 

Unterscheidung von Responsive, Adaptive, Fluid, Mobile First und Elastic
http://t3n.de/news/responsive-design-web-entwicklung-504906/

Start Mobile erklärt warum das alles so wichtig ist!
http://www.startmobile.de/

Vortragsfolien zum Thema
http://de.slideshare.net/peterrozek/handliche-designkonzepte-ux-und-mobi...

http://hackdesign.org/lessons/3

http://webdesignresponsive-px.rtrk.de/

https://www.google.com/design/spec/material-design/introduction.html

 

Bewertung: 
0
Bisher keine Bewertung

Navigationsarten

Gestaltung der Webnavigation
Eine gut strukturierte und gestaltete Navigation ist die wichtigste Vorraussetzung für die Usability einer Website. Sie führt den Nutzer zu den relevanten Bereichen und zeigt an, wo dieser sich befindet.
Hauptmenü
Ein Hauptmenü verdeutlicht, welche Inhalte eine Website anbietet und macht sie auf strukturierte Art und Weise zugänglich. Gleichzeitig wird den Nutzern ihre aktuelle Position in der Seitenstruktur vermittelt. Das Hauptmenü ist im Normalfall das wichtigste Navigations-Element. Der erste Schritt bei der Konzeption oder Überarbeitung einer Website ist die Auswahl wichtiger Inhalte und ihrer Strukturierung.
Card Sorting
...bezeichnet die Gruppierung und Benennung von Inhalten einer Website. Die Ergebnisse werden in einer Informationsstruktur zusammengefasst.
Wann: Card Sorting wird in der Konzeptions- und Analysephase angewendet. Es kann schnell und günstig ausgeführt werden.
Wer: Wenn möglich Meinungen von bereits vorhandenen Nutzern einholen. Auswertung von Umfragen durch erfahrene Experten.
Wo: Usability-Labor, beim Kunden, Online...
Tools: Analog oder mit desktop- / software-basierten, bzw. Online-Werkzeugen
Menü - Darstellungsformen
Vertikales Menü: Enthält die Hauptmenüpunkte und ggf. Untermenüpunkte untereinander aufgelistet. Untermenüpunkte können auch erst eingeblendet werden, wenn der jeweilige Bereich aktiv ist (vertikales Dropdown). Ein vertikales Menü wird von den Nutzern meist links des eigentlichen Inhalts erwartet.

Vorteil: Anzeige von mehr Menüpunkten und Ebenen als im horizontalem Menü
Nachteil: Weniger auffällig platziert
Horizontales Menü: Hauptmenü und ggf. zweite Navigationsebene befinden sich oben. Zur Darstellung dieser Form werden häufig Tabs verwendet.

Vorteil: Mehr Platz für Inhalte auf Website
Nachteil: Anzahl der Menüpunkte ist durch Breite der Seite begrenzt.
Kombiniertes Menü: Die ersten Menü-Ebenen befinden sich oben auf der Seite, weitere Menüebenen werden ggf. in einem vertikalen Menü angezeigt.
Dynamische Menüs: Sowohl bei vertikalen als auch horizontalen Menüs einsetzbar. Sie öffnet weitere Navigationsebenen bei Mouse-Over oder einem Klick.

Vorteil: Es wird weniger Platz benötigt
Nachteil: Nicht alle Ebenen sind sofort sichtbar
Globale Navigation
zusätzlich zu den Hauptinhalten werden oft wichtige Links und Funktionen, die nicht in die allgemeine Struktur der Seite passen, im Hauptmenü oder darüber angezeigt, damit sie überall auf der Seite zugänglich sind (Links zum Impressum oder Sitemap, Suchfunktion oder Sprachmenü). Ein etablierter Standart ist dabei ein Logo oben links, das den Nutzer immer zur Startseite zurückführt.

Bewertung: 
0
Bisher keine Bewertung

Navigationsbutton

1. Navigationsbutton »Text«
Der Vorteil von reinen Textbuttons ist, dass man dirtekt weiß – sofern die Bezeichnung eben eindeutig gewählt wurde – was einen bei einem Klick darauf zu erwarten hat. Klickt man auf »Impressum« bekommt man eben die Impressumsinformationen. Aber dabei stößt man unter Umständen schnell an Sprachgrenzen. Was sich über verschiedene Seiten für die jeweiligen Sprachen lösen lässt. Aber auch manche Informationen lassen sich nicht so knapp und eindeutig wie »Impressum« wiedergeben

2. Navigationsbutton »Grafik«

Grafische Buttons mit piktogrammeartiger Darstellung sind platzsparend und – im Idealfall – international verständlich. Hier hängt jedoch vieles von der visuellen Qualität des Piktogramms und von seiner bisherigen Einführung bei Usern ab. Ein Briefumschlag ist hat zwar kaum etwas mit der realen E-Mail zu tun, ist aber mittlerweile über Jahrzehnte eingeführt und allseits anerkannt. Neue Symbole müssen eindeutiger sein um verstanden zu werden.

3. Kombination beider Darstellungsformen
Verbindung der Vorteile beider Darstellungsformen

4. Kombination von Navigationsbutton mit Audio
Noch selten in der Anwendung, aber man kennt es vom Computer-Interface. Schiebt man eine Datei in den Papierkorb – besser gesagt auf das Papierkorb-Icon – so hört man das Geräusch eines zusammengeknüllten Papierblattes. Hier findet man die Kombination von grafischer, textlicher und auditiver Information.

 

 

Ich habe auch noch etwas zusammengetragen - vielleicht ist ja etwas nützliches dabei... :-)
Viele Grüße, chicksatwork

Navigationsbutton

Navigationselemente sollten mühelos und ohne langes nachdenken durch unbekannte Sites navigieren. Dazu müssen sie auf einen Blick aufzufinden sein und zweifelsfrei als Navigationsbutton erkennbar sein.

Übliche Standards für eine Navigation:

  • Klare Trennung von Navigation und Inhalt
  • Navigationsspalte am linken oder rechten Rand
  • Navigationsspalte am Kopf der Seite


Eine gut gestaltete Navigation sollte zudem Antworten auf die
5-W-Fragen geben:

  • Wo bin ich?
  • Woher komme ich (Wie geht es wieder zurück?)
  • Wo ist das was ich suche
  • Was gibt es sonst noch?


Insgesamt gilt:

  • gute Lesbarkeit und Erkennbarkeit der Einzelelemente
  • klare und erkennbare Funktionalität
  • Mouse-Over-Effekte sollten mit ausreichend Kontrast angelegt sein
  • Farben müssen deutlichen Interaktionscharacter haben
  • Cursoränderung für versteckte Navigationstools zur Erleichterung
  • Anlegen von einheitlichen Naviagtionselementen führt zur Navigationsgewohnheit und ermöglicht mehr Konzentration auf den Inhalt
  • andere Navigationselemente wie Schieberegler, Lautstärkentasten, versteckte Navigationstools oder Spieleelemente usw. müssen so angelegt werden dass sie für ungeübte Benutzer noch anzuwenden sind

Navigationsbutton sollten durch Veränderung signalisieren, dass etwas geschehen ist oder wird. Ein guter Navigationsbutton kennt folgende Zustände, wobei er mindestens 3 haben sollte:

  • Normalzustand (a:link) = Verweise zu noch nicht besuchten Seiten
  • Rolloverzustand (a:hover) = für Elemente, während der Anwender mit der Maus darüber fährt
  • Gedrückter Zustand (a:active) = für gerade angeklickte Elemente
  • besuchte Seiten (a:visited) = für Verweise zu bereits besuchten Seiten
  • Tabulatoren-Hilfe (a:focus) = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der  Tabulatoren Taste

    Quellen: Kompendium der Mediengestaltung, Selfhtml, Prüfungsbuch Mediengestalter. Einige Textpassagen habe ich zusammengefasst, einige der Einfachheit halber übernommen. :-)

 

Bewertung: 
0
Bisher keine Bewertung

XML

XML

"eXtensible Markup Language

  • kreiert um Daten zu transportieren, jedoch NICHT um Daten darzustellen (HTML wäre dafür verantwortlich)
  • eigene Befehle können definiert werden
  • handelt sich um eine Erweiterung oder eigenständige Markup-Sprache
  • Syntax, Bedeutung und Struktur der Tags wird in einer DTD (Document Type Definition) oder einem Schema festgelegt.

Anwendungsgebiete

  • Darstellung im WEB-Browser, als Ersatz oder Ergänzung von Html
  • Verarbeitung mit EDV Programmen
  • Austauschformat zwischen Programmen und Rechnern

Vorteile

  • im Druck/ auf dem Bildschirm darstellbar
  • Plattform und Software unabhängig
  • kann einfacher und effizienter von Programmen verarbeitet werden
  • ohne Datenverlust konvertierbar in andere Datenformate
  • Auszeichnung der Struktur

Regeln

  1. nur ein root-Element
  2. Tags müssen richtig verschachtelt werden
  3. Groß- und Kleinschreibung muss beachtet werden
  4. Alle Tags müssen geschlossen werden
  5. Jedes Attribut muss einen Wert haben

Ein XML-Dokument was alle Regeln entspricht, wird als well-formed bezeichent

Ein XML-Dokument welches well-formed ist und seine Daten beschreibt wird als valid bezeichnet

Bewertung: 
4
Durchschnitt: 4 (1 Stimme)