Gutes Webdesign
Form, Farbe, Typografie, Raster
User Experience Design
Simplicity
Responsive Web Design
Vortrag von Niklas...
Gutes Webdesign?
kein Königsweg
Empfehlungen zur besseren Funktion
best practice
design patterns
Don’t make me think!
oberstes Ziel: Klarheit
Elemente sollten selbsterklärend sein
„Auswahl gedankenlos treffen können“
Kr...
Krug, Steve: Don’t make me think! Web Usability – das intuitive Web. Bonn: mitp-Verlag, 2002. 15.
1. Grundsatz
Die Rezeption der Websites ist eher unstrukturiert.
Überfliegen („scanning“), statt Lesen der Seiten
„F-Muste...
2. Grundsatz
Wir treffen keine optimale Wahl.
Entscheidungsfindung ist eine Mischung aus befriedigenden
(„satisfying“) und...
3. Grundsatz
Die Funktionsweise ist uninteressant, das Durchkommen ist
entscheidend.
Bedienungsanleitungen werden nicht ge...
Webdesign: Form
Verhältnismäßigkeiten abstimmen
Farbe, Größe und Abstände bestimmen die Bedeutung
„Intimsphäre“ beachten
Hüskes, Ralf/
Herczeg, Jürgen (1993):
„Benutzer-Benchmarks.
Über die Versuche, Mensch
und Computer zusammen-
zubringen“. I...
Webdesign: Farbe
Farbkodierung
Farbleitsystem
Farbpalette ermittelbar aus
Farbtheorie
Realien
„Hausfarbe“ – Corporate Desi...
Webdesign: Typografie 1/3
Lesbarkeit als oberste Prämisse
Geräteauflösung entscheidet
Serifenlose bisher in kleinen Größen...
Webdesign: Typografie 2/3
individuelle Schriftarten per Webfont
Lizenzgebühren einkalkulieren
andernfalls Systemschriften ...
Webdesign: Typografie 3/3
Kontrast zwischen Schrift und Grund: 5:1 – 10:1
Schriftgrößen
Fließtext: > 12 pt ≈ 4,3 mm ≈ 2,8 ...
Webdesign: Raster
Aufteilung des Formats
horizontal (Spaltensatz)
vertikal
Methode zur Strukturierung
grafisch
inhaltlich
...
Kopfzeile
Untermenü
Hauptmenü
Inhalt
Klickpfad
Marginalien
Suche
Servicemenü
Fußzeile
User Experience (UX)
Design als ganzheitlicher Prozess
„User first“
Einheit aus
Nutzwert (Look)
Nutzererlebnis (Joy of Use...
Simplicity
Reduktion auf das absolut Nötigste.
„Gutes Design ist so wenig Design wie möglich.“ (Dieter Rams)
SHE: Shrink, ...
„Mobile first“
Elektronische Medien sind „elastische“ Medien.
ein Informationsangebot – verschiedene (mobile) Ausgabemedie...
Fazit
Webdesign
Verhältnismäßigkeiten prüfen
„Weißraum“
ggf. moderne Schemas einsetzen
User Experience Design
Simplicity
„...
Vielen Dank
Niklas Kanthak
Diplom-Designer
niklas.kanthak@online.de
http://www.xing.com/profile/Niklas_Kanthak
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Gutes Webdesign - Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Nächste SlideShare
Wird geladen in …5
×

Gutes Webdesign - Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

3.620 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.620
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
59
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Gutes Webdesign - Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

  1. 1. Gutes Webdesign Form, Farbe, Typografie, Raster User Experience Design Simplicity Responsive Web Design Vortrag von Niklas Kanthak 14.3.2016 VHS Düsseldorf Semester 16/1 Veranstaltung M356230
  2. 2. Gutes Webdesign? kein Königsweg Empfehlungen zur besseren Funktion best practice design patterns
  3. 3. 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.
  4. 4. Krug, Steve: Don’t make me think! Web Usability – das intuitive Web. Bonn: mitp-Verlag, 2002. 15.
  5. 5. 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
  6. 6. 2. Grundsatz Wir treffen keine optimale Wahl. Entscheidungsfindung ist eine Mischung aus befriedigenden („satisfying“) und genügenden („sufficing“) Optionen Wahl der „ersten annehmbaren Option“
  7. 7. 3. Grundsatz Die Funktionsweise ist uninteressant, das Durchkommen ist entscheidend. Bedienungsanleitungen werden nicht gelesen. Wenn wir etwas finden, das funktioniert, bleiben wir dabei.
  8. 8. Webdesign: Form Verhältnismäßigkeiten abstimmen Farbe, Größe und Abstände bestimmen die Bedeutung „Intimsphäre“ beachten
  9. 9. 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.
  10. 10. Webdesign: Farbe Farbkodierung Farbleitsystem Farbpalette ermittelbar aus Farbtheorie Realien „Hausfarbe“ – Corporate Design
  11. 11. Webdesign: Typografie 1/3 Lesbarkeit als oberste Prämisse Geräteauflösung entscheidet Serifenlose bisher in kleinen Größen besser lesbar
  12. 12. Webdesign: Typografie 2/3 individuelle Schriftarten per Webfont Lizenzgebühren einkalkulieren andernfalls Systemschriften wählen für Serifen: Times New Roman, Georgia Serifenlose: Arial, Verdana, Tahoma, Trebuchet, Calibri
  13. 13. Webdesign: Typografie 3/3 Kontrast zwischen Schrift und Grund: 5:1 – 10:1 Schriftgrößen Fließtext: > 12 pt ≈ 4,3 mm ≈ 2,8 mm Versalhöhe Verhältnis Überschrift zu Fließtext: 2:1 Abstände Zeilenabstand: 150% der Schriftgröße Absatz zu Absatz: 75% des Zeilenabstands weniger als 75 Zeichen pro Zeile variable Schriftgröße mit relativer Einheit „em“ (CSS)
  14. 14. Webdesign: Raster Aufteilung des Formats horizontal (Spaltensatz) vertikal Methode zur Strukturierung grafisch inhaltlich erzeugt Orientierung und Benutzbarkeit
  15. 15. Kopfzeile Untermenü Hauptmenü Inhalt Klickpfad Marginalien Suche Servicemenü Fußzeile
  16. 16. User Experience (UX) Design als ganzheitlicher Prozess „User first“ Einheit aus Nutzwert (Look) Nutzererlebnis (Joy of Use, Feel) Usability (einfache, intuitive Bedienbarkeit)
  17. 17. Simplicity Reduktion auf das absolut Nötigste. „Gutes Design ist so wenig Design wie möglich.“ (Dieter Rams) SHE: Shrink, Hide, Embody (John Maeda)
  18. 18. „Mobile first“ Elektronische Medien sind „elastische“ Medien. ein Informationsangebot – verschiedene (mobile) Ausgabemedien mögliche Lösungen: spezielle Mobile Website anbieten oder Responsive Web Design: „media queries“ (CSS3) reagieren auf Geräteeigenschaften Layouts testen (Opera Mini, Opera Mobile Emulator)
  19. 19. Fazit Webdesign Verhältnismäßigkeiten prüfen „Weißraum“ ggf. moderne Schemas einsetzen User Experience Design Simplicity „Mobile first“: Mobile Site / Responsive Web Design ggf. Gesten von Mobilgeräten unterstützen Testing
  20. 20. Vielen Dank Niklas Kanthak Diplom-Designer niklas.kanthak@online.de http://www.xing.com/profile/Niklas_Kanthak

×