+ All Categories
Home > Design > Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive...

Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive...

Date post: 12-Jun-2015
Category:
Upload: karionis
View: 2,775 times
Download: 5 times
Share this document with a friend
Description:
Webseiten sollen schnell, übersichtlich, klar strukturiert und verständlich aufgebaut sein. In ansprechender Form sollen Inhalte interessant vermittelt werden – und dies in den verschiedensten Nutzungssituationen (mobil, stationär) und über verschiedenste Gerätetypen (PC, Tablet, Smartphone) hinweg. Neben allgemeinen Empfehlungen zur bildschirmgerechten Gestaltung erhalten Sie in diesem Vortrag praktische Lösungsansätze für gelungenes Webdesign für Mobilgeräte.
101
Gutes Webdesign Form, Farbe, Typografie, Raster User Experience Design Simplicity Responsive Web Design Vortrag von Niklas Kanthak 2.3.2015 VHS Düsseldorf Semester 15/1 Veranstaltung K356230
Transcript
Page 1: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Gutes Webdesign

Form, Farbe, Typografie, Raster User Experience

Design

Simplicity Responsive

Web Design

Vortrag von Niklas Kanthak 2.3.2015

VHS Düsseldorf Semester 15/1 Veranstaltung K356230

Page 2: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Gutes Webdesign?

kein Königsweg

Empfehlungen zur besseren Funktion

best practice

design

patterns

Presenter
Presentation Notes
Design – also auch Webdesign – unterliegt stark modischen Einflüssen. Es ist daher nicht zweckmäßig, einen endgültigen Vorschriftenkatalog erstellen zu wollen. best practice = Vorgehensweisen, die sich bewährt haben design patterns = Anwendungsmuster, die sie sich herausgebildet haben
Page 3: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Don’t make me think!

oberstes Ziel: Klarheit

Elemente sollten selbsterklärend sein

„Auswahl gedankenlos treffen

können“

Krug, Steve: Don’t

make

me

think! Web Usability

das intuitive Web.

Bonn: mitp-Verlag, 2002.

Page 4: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Krug, Steve: Don’t

make

me

think! Web Usability

das intuitive Web.

Bonn: mitp-Verlag, 2002. 15.

Presenter
Presentation Notes
Je nach Gestaltung werden interaktive Elemente schneller erkannt. Insbesondere eine grafisch simulierte Dreidimensionalität (konvexe Oberfläche) scheint dies zu begünstigen, da die Elemente aus der Fläche hervorzutreten scheinen. Dies ist jedoch auch stark abhängig vom grafischen Umfeld.
Page 5: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Auf der Homepage des Papeterie-Herstellers „goldbuch“ werden scheinbar verschiedene Auswahlmöglichkeiten angeboten, die jedoch wieder Erwarten nicht anwählbar sind – weder das „goldbuch“-, noch das „Rebecca Bonbon“-Logo der die „goldbuch“-Animation unterhalb der Leiste sind klickbar. Zudem wird die horizontale Leiste wird erst bei genauerer Betrachtung als Navigationsleiste erkannt.
Page 6: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 7: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

1. Grundsatz

Die Rezeption der Websites ist eher unstrukturiert.

Überfliegen („scanning“), statt Lesen der Seiten

„F-Muster“

beim Leseverhalten: z. B. Google

Fokussierung nur auf einen kleinen Bereich

Grundsätze aus: Krug, Steve: Don’t

make

me

think! Web Usability

das intuitive Web.

Bonn: mitp-Verlag, 2002. 21 –

29.Did-it, Enquiro, and Eyetools

Uncover Google’s Golden Triangle: http://www.prweb.com/releases/2005/03/prweb213516.htm

Page 8: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Krug, Steve: Don’t

make

me

think! Web Usability

das intuitive Web.

Bonn: mitp-Verlag, 2002. 21.

Presenter
Presentation Notes
Trotz der Angebote zur schnelleren Erfassung (z. B. Spaltensatz, farbige Hinterlegung, …) der Seite erfolgt die Wahrnehmung nicht wie vermutet einer logischen Reihenfolge (z. B. Leserichtung von links nach rechts und von oben nach unten), sondern eher ungerichtet und sprunghaft. Dies widerlegt jedoch nicht den Einsatz solcher Ordnungsprinzipien.
Page 9: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
In einer Studie zur visuellen Wahrnehmung der Suchergebnisseite der Suchmaschine Google wurden als Überlagerung die Bereiche je nach Blickhäufigkeit farbig gekennzeichnet (rot: höchste bis grau: geringste Blickhäufigkeit). Im Bereich des „goldenen Dreiecks“ (auch als „F“-Form gedeutet) wurden die Elemente am häufigsten betrachtet. Die wichtigen Elemente sollte also möglichst im linken oberen Bereich des Formats platziert werden. Unterhalb des Bildschirmrandes („fold“ – hier als horizontale rote Linie eingezeichnet) fällt die Wahrnehmung sehr stark ab, da diese erst durch Scrollen sichtbar werden. http://www.prweb.com/releases/2005/03/prweb213516.htm
Page 10: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

2. Grundsatz

Wir treffen keine optimale Wahl.

Entscheidungsfindung ist eine Mischung aus befriedigenden („satisfying“) und genügenden („sufficing“) Optionen

Wahl der „ersten annehmbaren Option“

Page 11: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

3. Grundsatz

Die Funktionsweise ist uninteressant, das Durchkommen ist entscheidend.

Bedienungsanleitungen werden nicht gelesen.

Wenn wir etwas finden, das funktioniert, bleiben wir dabei.

Page 12: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Webdesign: Form

Verhältnismäßigkeiten abstimmen

Farbe, Größe und Abstände bestimmen die Bedeutung

„Intimsphäre“

beachten

Presenter
Presentation Notes
Gestalttheorie von Max Wertheimer: „Die Gestaltpsychologie beschäftigt sich vor allem mit der Entstehung von Ordnung im psychischen Geschehen – in der Wahrnehmung ebenso wie im Denken, Fühlen und Verhalten. Menschen werden dabei grundlegend als offene Systeme im aktiven Umgang mit ihrer Umwelt gesehen, die ihre Wahrnehmungen in bestimmten Mustern organisieren (siehe auch Deutungsmuster).“ (aus: Wikipedia) „Päkchenbildung“ „Intimsphäre“ = Schutzzone
Page 13: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Hüskes, Ralf/

Herczeg, Jürgen (1993): „Benutzer-Benchmarks. Über die Versuche, Mensch und Computer zusammen-

zubringen“. In: c’t

Heft 9, 1993, 62 –

66.

Presenter
Presentation Notes
Auszug der Gestalttheorie von Max Wertheimer.
Page 14: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Die rot unterlegten Überschriften („Angebot der Woche“, …) erlauben eine recht gute Übersicht der Inhalte. Wider Erwarten sind diese selbst jedoch nicht klickbar. Erfreulicherweise sind aber nicht nur die Schalter „Alle Angebote“, sondern auch die zugehörigen Fotos verlinkt.
Page 15: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Ein Beispiel für die Missachtung des Mindestabstands der Elemente: Der Text im Zentrum läuft rechts zu nah an den Text in der Marginalspalte heran. Aufgrund der mangelnden Trennung könnten sich die Texte bei flüchtigem Lesen vermischen. Im Detail findet sich ein mangelnder linker Abstand zum Rand des farbigen Grunds in der Bildüberschrift „Bedienkomfort“ in der Marginalspalte. Weiterhin reißt der Blocksatz des Textes aufgrund der fehlenden Silbentrennung große Lücken und beeinträchtig damit die Lesbarkeit beachtlich. Blocksatz sollte aus diesem Grund als Ausrichtungsart vermieden werden.
Page 16: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Eine Überarbeitung des Layout gleicht alle Abstände an.
Page 17: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Webdesign: Farbe

Farbkodierung

Farbleitsystem

Farbpalette ermittelbar ausFarbtheorieRealien

„Hausfarbe“

Corporate Design

Presenter
Presentation Notes
Farbleitsystem: Strukturierung durch Farbkodierung der inhaltlichen Bereiche Farbpalette: „Farbwelt“, „Farbklima“ Realien: Objekte, Fotos, …
Page 18: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
„So steigert Blau unsere Kreativität und fördert neue Lösungsstrategien. Rot hingegen erhöht die Vorsicht und die Aufnahmefähigkeit für Details, haben kanadische Wissenschaftler in verschiedenen Hirnleistungstests festgestellt.“ http://www.spiegel.de/netzwelt/web/0,1518,684047,00.html
Page 19: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Für Systemmeldungen haben sich die bekannten Farben aus dem Straßenverkehr etabliert, wie hier z. B. rote Hinweisfelder eines Eingabefehlers oder grüne für eine regelkonforme Eingabe. Oftmals folgen diese Farben nicht dem Farbschema der Website, sind gesättigter und zeigen somit Signalwirkung. Die Bedeutung dieser Farben ist jedoch kulturell unterschiedlich.
Page 20: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Sehr viele Hauptkategorien (obere Menüzeile: News, …) sind mit Farben kodiert. Dabei ist die Unterscheidung der Farben oftmals schwierig. Insbesondere die Zuordnung grüner Farbtöne zu „Sport“ und „Environment“ erscheint nur teilweise plausibel.
Page 21: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Hier wurde die Kategorie „TV“ in die Kategorie „Cuture“ einsortiert.
Page 22: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Hier dominieren die Farben des triadischen Farbschemas (blau, rot und gelb) aufgrund ihrer Flächenanteile und ihrer Sättigung den Gesamteindruck.
Page 23: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Im Verhältnis zur Gesamtfläche werden hier die leuchtenden Farben (hellblau, orange und rosa) sparsamer eingesetzt, da diese sich auf dem dunklen Hintergrund ohnehin stärker absetzen.
Page 24: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Ein analoges Farbschema bestehend aus gedeckten Tönen.
Page 25: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
https://kuler.adobe.com/create/color-wheel/
Page 26: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Hier hat ein Grafik-Designer die Farben der Kleidung von Personen abgenommen, die für ein Fashion-Blog fotografiert wurden.
Page 27: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Webdesign: Typografie 1/3

Lesbarkeit als oberste Prämisse

Geräteauflösung entscheidet

Serifenlose bisher

in kleinen Größen besser lesbar

Presenter
Presentation Notes
Definitionen der Begriffe sind unklar: Leserlichkeit (legibility): Unterscheidbarkeit der Buchstaben untereinander Lesbarkeit (readability): Lesefluss, z. B. bei längerer Lektüre einer Zeitung Readability kann auch das sprachliche Vermögen des Autors, also die Verständlichkeit eines Textes, beschreiben.
Page 28: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

iPhone

4: 326 dpi

verbesserte Darstellungsqualität der Displays

iPhone

3GS: 163 dpi

Presenter
Presentation Notes
Die Weiterentwicklung der Displaytechniken erhöhen die Pixeldichte (hier: Retina-Display beim iPhone) und ermöglichen feinere Details – also zukünftig auch eine saubere Darstellung von Serifenschriften in kleinen Größen.
Page 29: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Webdesign: Typografie 2/3

individuelle Schriftarten per Webfont

Darstellungsqualität der Webfonts zweifelhaft

Lizenzgebühren

einkalkulieren

ansonsten Systemschriften wählen fürSerifen: Times New Roman, GeorgiaSerifenlose: Arial, Verdana, Tahoma, Trebuchet, Calibri

Presenter
Presentation Notes
Serifenlose = Grotesk Eine „Hausschrift“ ist ein Teil des Corporate Designs. Systemschriften auf dem Bildschirm testen: Typetester: http://www.typetester.org/ Google web fonts: http://www.google.com/webfonts/
Page 30: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Schriftarten: Adelle Thin und Bold (jeweils kursiv)
Page 31: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Schriftart Headline: FF Tisa oder Hoefler Text Fließtext: P22 Underground oder Gill Sans
Page 32: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Hier werden für die Menüs, die Überschriften und den Fließtext Webfonts eingesetzt.
Page 33: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Wird die Darstellung der Webfonts z. B. durch Scriptblocker verhindert, dann werden diese durch Standardschriften ersetzt, die eine andere Schriftgröße und Laufweite aufweisen können.
Page 34: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Webdesign: Typografie 3/3

Kontrast zwischen Schrift und Grund: 5:1 –

10:1

SchriftgrößenFließtext: > 12 pt

4,3 mm ≈

2,8 mm Versalhöhe

Verhältnis Überschrift zu Fließtext: 2:1

AbständeZeilenabstand: 150% der SchriftgrößeAbsatz zu Absatz: 75% des Zeilenabstands

weniger als 75 Zeichen pro Zeile

variable Schriftgröße mit relativer Einheit „em“

(CSS)

Presenter
Presentation Notes
1 pt = 1⁄72 Zoll = 0,3527… mm
Page 35: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Carta ist ein Autorenblog für digitale Öffentlichkeit, Politik und Ökonomie. Breite der Textspalte: 610px Headline: Schriftart: Georgia italic Schriftgröße: 26px Zeilenabstand: 30px Fließtext: Schriftart: Georgia Schriftgröße: 15px Zeilenabstand: 26px Abstand nach: 14px 88 Anschläge mit Leerzeichen
Page 36: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Die „ZEIT Online“ zeigt vergleichsweise große Schriftgrößen. Breite Textspalte: 540px Headline: Schriftart: Arial, Helvetica Schriftgröße: 30px Zeilenabstand: 32px Abstand nach: 12px Anlauf: Schriftart: Georgia, Palatino Schriftgröße: 22px Zeilenabstand: 28px Abstand nach: 19px Fließtext: Schriftart: Georgia, Palatino Schriftgröße: 16px Zeilenabstand: 24px Abstand nach: 19px 75 Anschläge mit Leerzeichen
Page 37: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Breite der Textspalte: 640px Headline: Schriftart: Lato Schriftgröße: 19px Zeilenabstand: 38px Fließtext: Schriftart: Lato Schriftgröße: 13px Zeilenabstand: 18px Abstand nach: 15px 114 Anschläge mit Leerzeichen
Page 38: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
knapper Schreibstil, die Hälfte der Wörter ist „überflüssig“ „gesundes“ Maß an Text (ca. fünf Absätze) Textaufbereitung: Hervorhebungen, Absätze, Aufzählungen, … Suchbegriffe sollten vorkommen, Text sollte trotzdem nicht überoptimiert wirken Bei längeren Artikeln ermöglicht eine kurze Zusammenfassung dem Benutzer eine bessere Beurteilung der Relevanz. Absätze und Hervorhebungen im Text unterstützen den Benutzer beim „Scanning“ des Textes. Eine große Überschrift macht das Thema des Artikels deutlich.
Page 39: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
https://blog.wikimedia.org/2014/03/27/typography-refresh/ https://www.mediawiki.org/wiki/Typography_refresh „Überschriften sollen sich besser von dem Body-Text abheben und werden daher zukünftig durch Schriftarten mit Serifen dargestellt. Sofern möglich soll es die Open-Source-Schrift Linux Libertine sein. Da diese kaum auf vielen Rechnern installiert sein dürfte, gibt sich Wikipedia notfalls aber auch mit Georgia oder Times zufrieden. Findet sich keine davon auf dem Rechner des Besuchers, muss es notgedrungen irgendeine Schriftart mit Serifen tun. Für den Body-Text bleibt die Wikipedia bei serifenlosen Schriften, wird zukünftig aber zunächst nach Arimo, Liberation Sans, Helvetica Neue, Helvetica oder Arial verlangen. Neben genaueren Vorgaben an den Browser, welche Schrift er einsetzen soll, wurden auch weitere Details der Textanzeige geändert. So wurde der Zeilendurchschuss, also der Zeilenzwischenraum, erhöht. Außerdem wird auch der Text selbst ein wenig größer dargestellt. Während der Text bisher schwarz war (#000000), wird er jetzt in einem sehr dunklen Grauton (#252525) dargestellt. Langfristig will sich das Projekt auch mit Webfonts auseinandersetzen. Derzeit wird deren Einsatz aber aufgrund der höheren Ladezeiten noch abgelehnt.“ 02.04.2014 http://t3n.de/news/wikipedia-redesign-relauncht-32-537631/
Page 40: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Webdesign: Raster

Aufteilung des Formatshorizontal (Spaltensatz)vertikal

Methode zur Strukturierunggrafischinhaltlich

erzeugt Orientierung und Benutzbarkeit

Presenter
Presentation Notes
Zitat von Günter Gerhard Lange aus seinem Vortrag von der TYPOBerlin 1996 zum Thema Raster: „… Nach Möglichkeit alles vorgegeben, das muss ein Grundriss sein auf der Fläche … Alles gleichsam für Geistesschwache vorbereitet. … Alles ist Rhythmus. Raster ist Wiederholung. Raster ist für mich militant. …“ http://typovideo.de/index.php?node_id=76&lang_id=1&filter_value=G%C3%BCnter%20Gerhard%20Lange
Page 41: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Navigation: klare, einfache und konsistente Navigation aktuellen Standort angeben Entfernung angeben: Zeit- und/oder Schrittanzahl „such-domiante“ (Suche) und �„link-dominante“ Benutzer (Navigation)
Page 42: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Kopfzeile

Untermenü

Hauptmenü

Inhalt

Klickpfad

Marginalien

Suche

Servicemenü

Fußzeile

Presenter
Presentation Notes
Die klassischen Elemente einer Website und deren übliche Platzierung im Format. Diese Konvention haben die meisten Benutzer erlernt und so können sie die Website ohne Schwierigkeiten benutzen.
Page 43: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 44: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Spalte 1 2 3 4 5 6

Presenter
Presentation Notes
Eine sechsspaltige Teilung des Formats. Für die inneren Spalten 2 – 5 wurde eine sehr schmale (eher der Lesbarkeit abträgliche) Spaltenbreite gewählt.
Page 45: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Spalte 1 2 43 5

Presenter
Presentation Notes
Bei genauer Betrachtung fällt auf, dass auch ein fünfspaltiges Layout möglich wäre, der innere Bereich also sowohl mit drei als auch mit vier Spalten gefüllt werden könnte.
Page 46: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Ein Beispiel für horizontales und vertikales Raster – mit quadratischer Grundlage.
Page 47: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Horizontales Raster.
Page 48: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Horizontales und vertikales Raster. Die Grundeinheit des Layouts ist quadratisch.
Page 49: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Hier läuft der Text über die Breite von zwei Spalten, eine weitere wird als marginale Bildspalte benutzt.
Page 50: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Hier läuft als Variante der Text über drei Spalten und die Sprungmarken („Direktion Wolf“, …) sind darüber in drei Spalten abgesetzt.
Page 51: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Das Layout der FAZ nach dem Redesign (Oktober 2011).
Page 52: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Blogs als Internet-spezfisches Format bieten eine andere Art der Navigation: Die Artikel werden in chronologischen Abschnitten dargestellt und können so über die Richtungs-Pfeile durchblättert werden.
Page 53: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Neuere Internet-Angebote (Social Media) entsprechen oftmals nicht den gelernten Konventionen und stellen die Informationseinheiten als eine Art Endlosband (infinite scroll) im Browser dar.
Page 54: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Die technische Entwicklung bringt neue Gerätetypen mit unterschiedlichen Eigenschaften auf den Markt: Smartphones, Notebooks, Netbooks, eBooks, Tabletcomputer, … Bandbreiten, Auflösungen, Darstellungsqualitäten und Interaktionsmöglichkeiten der Geräte sind sehr unterschiedlich. Post-PC-Ära mobile Anwendungsszenarien Vielfalt der Eigenschaften der Geräte und Nutzungsverhalten mobile Anwendungsszenarien ganzheitlich aus Sicht des Users betrachten Paradigmenwechsel: Finger löst Maus ab, Spracherkennung ist praktikabel Internet durch Smartphones und Tablets allgegenwärtig Ein- und Ausschalter quasi obsolet grafische Benutzeroberfläche (GUI) von Natural User Interface Design (NUI) abegelöst
Page 55: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Touch ersetzt den Klick.
Page 56: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

User Experience

(UX)

Design als ganzheitlicher Prozess

„User first“

Einheit ausNutzwert (Look)Nutzererlebnis (Joy

of Use, Feel)

Usability

(einfache, intuitive Bedienbarkeit)

Presenter
Presentation Notes
User Experience: Gesamtheit aller sinnlichen Eindrücke und deren mentale und physische Auswirkung auf den Benutzer Usability: Benutzerfreundlichkeit, Gebrauchstauglichkeit: „Die Eignung eines Produkts, die vorgegebenen Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ (Wikipedia) „Das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufrieden stellend zu erreichen.“ (ISO 9241-11, Abs. 3.1 Gebrauchstauglichkeit) stets eine Motivation zur Benutzung von Websites, z. B. Information, Beratung, Einkauf, Unterhaltung, … Bewertung der Website erfolgt nach Verlauf und Qualität der Zielerfüllung Gestaltung des Verhaltens einer Anwendung (Feel) wird wichtiger als die des Aussehens (Look) „Joy of Use“: Spaß an der Nutzung, die emotionale Komponente, fördert die Zufriedenheit Mobile Anwendungsszenarien werden ganzheitlich aus Sicht des Benutzers betrachtet.
Page 57: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 58: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Offensichtlich scheitert die Suchmaschine der Website schon an der Großschreibung, trotzdem ein Produkt mit diesem Namen tatsächlich existiert – wie die Suchmaschine schließlich selbst angibt (!). Zudem wurden die Dialoge der Suchmaschine nicht vollständig in die deutsche Sprache übersetzt.
Page 59: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 60: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Im Zuge des Redesigns der Website wurde der Direktlink auf der Homepage zum Spendenformular noch besser sichtbar gemacht (Screenshot 14.3.2010).
Page 61: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 62: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Simplicity

Reduktion auf das absolut Nötigste.

„Gutes Design ist so wenig Design wie möglich.“

(Dieter Rams)

SHE: Shrink, Hide, Embody

(John Maeda)

Presenter
Presentation Notes
Dieter Rams: Zehn Thesen für gutes Design (70er Jahre) https://www.vitsoe.com/de/ueber-vitsoe/gutes-design Maeda, John: The Laws of Simplicity. Cambridge, Massachusetts: The MIT Press, 2006. 2–9.
Page 63: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 64: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 65: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Die Website zur Erweiterung des Firefox-Browsers. Die Suche ermöglicht über das Drop-down „Alle Add-ons“ die Einschränkung der Sucherergebnisse. Diese entsprechen exakt den aufgeführten Kategorien im Menü auf der linken Seite.
Page 66: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Weitere Filteroptionen der Suche können über das Etikett „Fortgeschritten“ sichtbar gemacht werden.
Page 67: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 68: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 69: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 70: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 71: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 72: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 73: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 74: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 75: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 76: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Akkordeon
Page 77: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 78: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 79: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 80: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 81: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Die Lasche „Schnell zum Ziel“ in der rechten oberen Ecke verbirgt eine Zusammenstellung von Navigationsabkürzungen für oft angeforderte Inhalte, die ansonsten nur über mehrere Klicks in einer klassischen Navigation erreichbar wären.
Page 82: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Das geöffnete umfangreiche Sprungmenü.
Page 83: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 84: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 85: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 86: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

„Mobile first“

Elektronische Medien sind „elastische“

Medien.

ein Informationsangebot –

verschiedene (mobile) Ausgabemedien

mögliche Lösungen:spezielle Mobile Website anbieten oderResponsive

Web Design: „media queries“

(CSS3) reagieren auf

Geräteeigenschaften

Layouts testen

(Opera Mini, Opera Mobile)

Presenter
Presentation Notes
Die Einheit Pixel ist nicht genormt und je nach Darstellungsmedium nicht gleich groß. Zur Umrechnung der Einheit Punkt in Pixel: http://reeddesign.co.uk/test/points-pixels.html Eine Online-Demonstration des Opera-Browsers für Mobilgeräte: http://www.opera.com/mobile/demo/ http://www.opera.com/de/developer/opera-mini-simulator Eine Prognose: Das mobile Web überholt 2014 das statische Web. ARD/ZDF-Onlinestudie 2011: „Statt 13 Prozent (2010) gehen aktuell 20 Prozent der Onliner unterwegs ins Netz. 17 Prozent der deutschen Onliner nutzen Apps auf Smartphones oder Tablet-PCs.“ „Responsive Web Design“ ist eine Art Website-Gestaltung, die theoretisch unabhängig von Geräten ist. Aus fixierten Rastern werden flexible Raster und Layouts. Eine Übersicht: http://mediaqueri.es/ Beispiele für Responsible Web Design: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html http://m.guardian.co.uk/ Ubuntu One: https://one.ubuntu.com/ Andersson-Wise Architects: http://www.anderssonwise.com/ Menüdarstellung ändert sich je nach Auflösung (!): http://bostonglobe.com/
Page 87: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Bei sehr großen Bildschirmen (z. B. 23") verliert die Suchmaske auf der Adobe-Website ihren Kontext aufgrund ihrer rechtsbündigen Positionierung.
Page 88: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Der Schalter zur Anmeldung verliert bei großen Auflösungen den Bezug zum Formular.
Page 89: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Dieser Shop für eBooks zeigt leichte grafische Schwächen: Unklar ist die Bedeutung des blau gefärbten quadratischen Icons (rechts neben dem Buchtitel), zudem wirken die Schalter „eBook anfordern“ und „Geld-zurück-Garantie“ ungeschickt platziert. Der Text der Kurzinformation zum Buch ist ungünstig weit unten auf der Seite platziert, der zudem aufgrund des geringen Zeilenabstands und der unverhältnismäßig hohen Anzahl der Anschläge pro Zeile (131 inkl. Leerzeichen) nicht für eine bessere Lesbarkeit aufbereitet wurde.
Page 90: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
Aufgrund der schlechten Aufbereitung des Textes hinsichtlich der Lesbarkeit offenbart sich eine technische Schwäche: Vergrößert der Benutzer die Schriftgröße zur komfortableren Lektüre, so zerbricht das Layout der Seite, da sich die Elemente aufgrund ihres veränderten Platzbedarfs gegenseitig verdrängen. Der Bereich des Buchtitels landet schließlich unterhalb der linken Spalte, die hier weit nach rechts in die Seite rutscht.
Page 91: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
http://www.jwz.org/blog/2013/10/mobile-web-design-the-reign-of-morons-indeed/ https://itunes.apple.com/us/app/esquire-magazine/id433020707?mt=8
Page 92: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 93: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 94: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 95: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 96: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Page 97: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
http://www.bostonglobe.com/
Page 98: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
http://www.spiegel.de/politik/deutschland/duisburg-vor-der-bundestagswahl-die-spd-und-die-nichtwaehler-a-922175.html
Page 99: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Presenter
Presentation Notes
http://canopycanopycanopy.com/
Page 100: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Fazit

WebdesignVerhältnismäßigkeiten prüfen„Weißraum“ggf. moderne Schemas einsetzen

User Experience

DesignSimplicity„Mobile first“: Mobile Site / Responsive

Web Design

ggf. Gesten von Mobilgeräten unterstützen

Testing

(!)

Page 101: Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Vielen Dank

Niklas Kanthak Diplom-Designer

[email protected] http://www.xing.com/profile/Niklas_Kanthak


Recommended