Your SlideShare is downloading. ×
Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,695
views

Published on

Webseiten sollen schnell, übersichtlich, klar strukturiert und verständlich aufgebaut sein. In ansprechender Form sollen Inhalte interessant vermittelt werden – und dies in den verschiedensten …

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.

Published in: Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,695
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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
  • 2. Gutes Webdesign? kein Königsweg Empfehlungen zur besseren Funktion best practice design patterns
  • 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. Krug, Steve: Don’t make me think! Web Usability – das intuitive Web. Bonn: mitp-Verlag, 2002. 15.
  • 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. Krug, Steve: Don’t make me think! Web Usability – das intuitive Web. Bonn: mitp-Verlag, 2002. 21.
  • 7. 2. Grundsatz Wir treffen keine optimale Wahl. Entscheidungsfindung ist eine Mischung aus befriedigenden („satisfying“) und genügenden („sufficing“) Optionen Wahl der „ersten annehmbaren Option“
  • 8. 3. Grundsatz Die Funktionsweise ist uninteressant, das Durchkommen ist entscheidend. Bedienungsanleitungen werden nicht gelesen. Wenn wir etwas finden, das funktioniert, bleiben wir dabei.
  • 9. Webdesign: Form Verhältnismäßigkeiten abstimmen Farbe, Größe und Abstände bestimmen die Bedeutung „Intimsphäre“ beachten
  • 10. 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.
  • 11. Webdesign: Farbe Farbkodierung Farbleitsystem Farbpalette ermittelbar aus Farbtheorie Realien „Hausfarbe“ – Corporate Design
  • 12. Webdesign: Typografie 1/3 Lesbarkeit als oberste Prämisse Geräteauflösung entscheidet Serifenlose bisher in kleinen Größen besser lesbar
  • 13. iPhone 4: 326 dpi verbesserte Darstellungsqualität der Displays iPhone 3GS: 163 dpi
  • 14. Webdesign: Typografie 2/3 individuelle Schriftarten per Webfont Darstellungsqualität der Webfonts zweifelhaft Lizenzgebühren einkalkulieren ansonsten Systemschriften wählen für Serifen: Times New Roman, Georgia Serifenlose: Arial, Verdana, Tahoma, Trebuchet, Calibri
  • 15. 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)
  • 16. Webdesign: Raster Aufteilung des Formats horizontal (Spaltensatz) vertikal Methode zur Strukturierung grafisch inhaltlich erzeugt Orientierung und Benutzbarkeit
  • 17. Kopfzeile Untermenü Hauptmenü Inhalt Klickpfad Marginalien Suche Servicemenü Fußzeile
  • 18. Spalte 1 2 3 4 5 6
  • 19. Spalte 1 2 43 5
  • 20. User Experience (UX) Design als ganzheitlicher Prozess „User first“ Einheit aus Nutzwert (Look) Nutzererlebnis (Joy of Use, Feel) Usability (einfache, intuitive Bedienbarkeit)
  • 21. Simplicity Reduktion auf das absolut Nötigste. „Gutes Design ist so wenig Design wie möglich.“ (Dieter Rams) SHE: Shrink, Hide, Embody (John Maeda)
  • 22. „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)
  • 23. 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 (!)
  • 24. Vielen Dank Niklas Kanthak Diplom-Designer niklas.kanthak@online.de http://www.xing.com/profile/Niklas_Kanthak