Erste Hilfe Web Design – Wie vermeide ich die schlimmsten Fehler?

Was sind die häufigsten Fehler im Web Design und wie kannst du sie vermeiden, damit deine Projekte konzeptionell und gestalterisch noch besser werden? Um eine inhaltlich wie grafisch ansprechende Website professionell gestalten zu lassen, fehlt manchmal die Zeit oder das Budget. Also machst du es selbst, vielleicht etwas unzufrieden mit dem Ergebnis oder unsicher, was man noch verbessern könnte, um sich mehr abzuheben. Wenn du das kennst, dann ist dieser Vortrag genau richtig für dich.

Mit zahlreichen Beispielen lernst du die zehn schlimmsten Fehler im Web Design kennen und die dazu passenden Erste-Hilfe-Maßnahmen gleich dazu. So verbesserst du deine Designs und holst mehr für dich und deine Kunden heraus.

Transcript

1. Erste Hilfe Web Design Zehn tödliche Krankheiten und wie man sie heilt
5. 86/60 Oliver Schöndorfer glyphe
6. glyphe Schlechtes Design hat
 immer gute Gründe
7. glyphe ?
8. Kann ich mich zurechtfinden? glyphe Worum geht es? Ist die Atmosphäre ansprechend? II. I. III.
9. II. I. III. glyphe II. Struktur & Navigation I. Inhalte III. Design Kann ich mich zurechtfinden? Worum geht es? Ist die Atmosphäre ansprechend?
10. glyphe 10
11. Inhalte
12. glyphe – Sie sind der wichtigste Teil – Nicht nur Text, auch Bilder, Videos, Audio-Files, etc. – Gute Qualität, gut strukturiert und gut geschrieben – Sollten SEO bedenken Die Inhalte sind das Herz einer Website
13. Ziellosigkeit 1
14. glyphe gartenbaukino.at Ticket-Kauf immer möglich an vielen Stellen
15. glyphe gartenbaukino.at Ticket-Kauf immer möglich an vielen Stellen
16. glyphe gartenbaukino.at Ticket-Kauf immer möglich an vielen Stellen
17. glyphe steman.at
18. glyphe steman.at Wiederkehrende User im Fokus
19. glyphe sensomotorische-koerpertherapie.at Besucher anleiten 
 ein Formular auszufüllen, um einen Termin zu vereinbaren
20. glyphe – Was soll mit der Website erreicht werden? – Wie soll man sich mit den Kunden oder der Zielgruppe verbinden? – Wie könnte die Website im Tagesgeschä unterstützen? Lege Ziele für die Website fest
21. User-Bedürfnisse ignorieren 2
22. glyphe polizei.gv.at
23. glyphe polizei.gv.at Wo ist die nächste Polizeiwache?
24. glyphe streamtimeapp.tv
25. glyphe streamtimeapp.tv Mögliche Fragen dort beantworten, wo sie entstehen
26. glyphe – Worum geht es? – Wozu brauche ich das? Wobei hil es mir? – Was macht es besonders? (USP?) – Welche Optionen gibt es? Was soll ich machen? Beantworte Fragen der User
27. Fehlende Story Line 3
28. glyphe miyo.garden
29. glyphe miyo.garden
30. glyphe miyo.garden
31. glyphe miyo.garden
32. glyphe miyo.garden
33. glyphe miyo.garden
34. glyphe miyo.garden Vage Headlines, zu viel Text Bilder bezugslos zum Inhalt vorwiegend Dekoration Undeutliche Darstellung
 der Funktionsweise Undeutliche Zuordnung
 der Inhalte Keine Kaufaufforderung
 bis zum Ende der Seite Gute Feature-Aufbereitung
35. glyphe betterspot.com
36. glyphe betterspot.com
37. glyphe betterspot.com
38. glyphe betterspot.com
39. glyphe betterspot.com
40. glyphe betterspot.com Attention Was ist es? Wobei hilft es? Interest In die Themen Datenschutz und Sicherheit Desire Features, App und einfache Anwendung zeigen Action Jetzt kaufen
41. glyphe AIDA
42. glyphe – Denk darüber nach was du erzählen möchtest – Nutze das AIDA-Modell – Ende mit einer Aufforderung, einem Call to Action Entwickle eine klare Story Line
43. Struktur & Navigation
44. glyphe – Navigation scha Orientierung (wo bin ich, wohin kann ich gehen?) – Klare Struktur ordnet das Chaos – Setze Prioritäten, das fokussiert darauf was für Website und Nutzer am wichtigsten ist Mach es Menschen einfach
45. Verwirrende Navigation 4
46. glyphe kokua.de Überladene Navigation
47. glyphe issmich.at Überladene Navigation
48. glyphe hubblecontacts.com Simple Navigation die man leicht überblicken kann
49. glyphe avia-law.at Sichtbare Navigation ist am Handy leichter zugängliche
50. glyphe – Fünf bis sieben Links maximal – Verwende kurze Wörter – Denke an Mobile – Sollte immer zugänglich und an der selben Stelle sein Schaffe eine einfache Navigation
51. Unklare Struktur 5
52. glyphe 4connect-e.com
53. glyphe 4connect-e.com
54. glyphe 4connect-e.com Unklare Trennung der Seitenbereiche
55. glyphe forit.iondigi.com
56. glyphe forit.iondigi.com
57. glyphe forit.iondigi.com Klarer Anfang eines neuen Bereichs
58. glyphe giromatch.com Viele verschiedene Elemente und fehlende Struktur
59. glyphe microsoft.com Saubere Struktur durch Gliederung mittels Überschriften
60. glyphe Mehr
61. glyphe Wie wir helfen können
62. glyphe – Unterteile die Website in deutliche Sektionen – Nutze Überschriften und Textauszeichnungen – Verwende sprechende Links Baue eine klare Seitenstruktur
63. Schlechte Usability 6
64. glyphe more-ohr-less.com Was ist ein Link? Überschrift Überschrift Link
65. glyphe forward-festival.com Unvertraute Usability Patterns an mehreren Stellen
66. glyphe autistenhilfe.at Problematisches Drop-Down-Menü
67. glyphe fotografen.at
68. glyphe fotografen.at
69. glyphe fotografen.at Unerwarteter Layoutwechsel beim Klick auf einzelne Links
70. glyphe schlosshof.at
71. glyphe schlosshof.at Unklare Inkonografie ohne ALT-Text oder Erklärung
72. glyphe – Nutze bekannte, vertraute Usability Pa erns – Gewisse Elemente sollten sich wie erwartet verhalten – Denke an Accessibility Biete die beste Usability
74. Design
75. glyphe – Du kannst nichts nicht gestalten – Es legt die Stimmung fest und zeugt von Professionalität – Manchmal ist es offensichtlich, machmal subtil – Design alleine kann nichts retten Alles ist Design
76. Überladene Seiten 7
77. glyphe amstoan.com Ohne Kommentar
78. glyphe leo-hillinger.com Überladene Seite auf der es schwer ist sich zu orientieren
79. glyphe leo-hillinger.com Überladene Seite auf der es schwer ist sich zu orientieren
80. glyphe leo-hillinger.com Unnötige Instruktionen auf jeder Seite Sehr dichtes Layout selbst auf Seiten mit wenig Inhalt
81. glyphe hubblecontacts.com Einfach erfassbarer Prozess
82. glyphe – Eine Kernaussage pro Seitenbereich – Strukturiere die Inhalte – Schaffe Hierarchie durch Abstände und Größenverhältnisse Räum dein Design auf
83. Schlechte Typografie 8
84. glyphe oolipo.com Sehr heller Text ist schwer zu lesen
85. glyphe gosepp.com Sehr heller Text ist schwer zu lesen
86. glyphe steigenberger.com Zu kleiner Text für Desktop (11 px)
87. glyphe tickets.oebb.at Sehr schlechte Lesbarkeit wegen zu kleiner Schrift und wenig Kontrast
88. glyphe wien.gv.at Unpassende Schriftart auf iOS, die den Text schwerer zu lesen macht, als auf Android  iOS Android
89. glyphe phpconference.com Dichte, unruhige Typografie die einen nicht einlädt den Text zu lesen
90. glyphe comstocksmag.com Einladender Text sauber strukturiert, leicht zu lesen
91. glyphe edenspiekermann.com Gute Typografie durch deutliche Hierarchie, große Schrift und gutem Kontrast
92. glyphe – Nutze robuste Schri arten – Schaffe deutliche Hierarchien – Achte auf guten Kontrast – Setze den Text in ausreichender Größe (mind. 16 px) – Verwende niemals Blocksatz im Web – Niemals Hab ein Herz für Typografie
93. Keine Optimierung für Mobile 9
94. glyphe giromatch.com
95. glyphe giromatch.com Nicht direkt vergleichbar auf einem Smartphone
96. glyphe gourban.at
97. glyphe gourban.at Kaum lesbare Navigation am Handy
98. glyphe gourban.at
99. glyphe gourban.at Problematische Hierarchie und zu großer Text fürs Handy
100. glyphe – Inhalte müssen auch am Handy passen und funktionieren – Gleiche Inhalte für Mobile und Desktop – Seiten sollten schnell laden, auch im Mobilfunknetz Denke Mobile first
101. Zur Untersuchung
102. Aufs Testen vergessen 10
103. glyphe tickets.oebb.at Falsche Fehlermeldungen
104. glyphe ragusa.swiss  iPhone SE  iPhone 6 Inhalt passt nicht
 auf kleinere Bildschirme
105. glyphe – Beobachte User, wie sie die Website verwenden – Auf verschiedenen Geräten und Auflösungen testen – In verschiedenen Situationen (schelle und langsame Verbindung) – Mit bestimmten Zielen (z.B. neue Kunden gewinnen) Teste deine Website
107. glyphe II. I. III. Kann ich mich zurechtfinden? Worum geht es? Ist die Atmosphäre ansprechend?
108. glyphe 1 Lege Ziele fest 2 Achte auf User-Bedürfnisse 3 Schaffe eine Story-Line 4 Baue eine einfache Navigation 5 Bau eine klare Seitenstruktur 6 Biete die beste Usability 7 Räum dein Design auf 8 Achte auf gute Typografie 9 Denke Mobile First 10 Testen, testen, testen Die Erste Hilfe Maßnahmen
109. Icons by hunotika from the Noun Project Gemeinsam heilen wir das Web! Oliver Schöndorfer glyphe www.8660.at