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

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.

6f9d2ee92d3cf8fd7f505c82ee184e43?s=128

Oliver Schöndorfer

April 07, 2018
Tweet

Transcript

  1. Erste Hilfe Web Design Zehn tödliche Krankheiten und wie man

    sie heilt
  2. None
  3. None
  4. None
  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
  73. None
  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
  106. None
  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