für Nicht-Designer, Normalos
und Entwickler
Webdesign
Gestaltungs-
grundlagen
@danielawibbeke
Daniela Wibbeke
@danielawibbeke
Was ist Design?
Design ist der Plan, Elemente so
anzuordnen, dass man eine bestimmte
Aufgabe durchführen kann.
Charles Eames (Designer und...
Design bedeutet
Informationen zu strukturieren
und zu gestalten
Modernes
Webdesigns
1
Prinzipien des modernen Webdesigns
napster.com
Februar 2001
Prinzipien des modernen Webdesigns
napster.com
November 2015
Prinzipien des modernen Webdesigns
Entwicklung des Webdesigns
•	 Nutzer rückt mehr in Mittelpunkt (User Experience)
•	 Ver...
Prinzipien des modernen Webdesigns
Gute Webdesign:
•	 besteht aus semantischem Code
•	 wird schnell geladen
•	 ist ästheti...
Prinzipien des modernen Webdesigns
Design
TechnikInhalte
Basis ist
konzeption
Gestaltungs-
grundlagen
2
Einfachheit
Einfachheit
•	 Einfachheit = benutzerfreundliches Design
•	 jedes Element hat eine Bedeutung im Design
•	 klare visuelle H...
Einfachheit
designerinaction.de
http://www.designerinaction.
de/
Weißraum
Weißraum
•	 Weißraum schafft Abstand zwischen Elementen
•	 Herstellung visueller Hierarchie
Aufgabe: Elemente in den Vorde...
Weißraum
medium.com
Weißraum
Ausrichtung
und Raster
Ausrichtung und Raster
•	 Raster hilft Elemente zu strukturieren und zu gliedern
•	 Hilfestellung bei der Platzierung von ...
Ausrichtung und Raster
polyera.com
Ausrichtung und Raster
Ausrichtung und Raster
ableton.com
Ausrichtung und Raster
Ausrichtung und Raster
Farben
Farben
Bedeutung von Farben
•	 Farbgebung beeinflusst die Atomsphäre einer Website
•	 Verbindung mit Unternehmen und Marke...
Farben
Komplementäres Farbschema
•	 enthält Farben die im Farbkreis	
gegenüber sind
•	 hoher Kontrast zwischen den Farben
Farben
Farben
jetblue.com
Farben
Monochromes Farbschema
•	 enthält nur eine Grundfarbe und	
beliebige Menge Abstufungen
•	 Abstufungen von Sättigung...
Farben
Sättigung
Helligkeit
Farben
fanta.de
Farben
Farbschemata erstellen
•	 Farben aus dem Farbkreis wählen und	
Nuancen der Farben definieren
•	 Bilder als Vorlage ...
Farben
Hilfsmittel
•	 Color Scheme Designer
•	 Adobe Color CC (Kuler)
•	 Google Material Design
Typografie
Typografie
Web Design ist zu
Oliver Reichenstein
95%
Typografie
Typografie
•	 Nie mehr als zwei Schriftarten
•	 Typografische Hierarchie nutzen um	
eine visuelle Hierarchie herzustellen
...
Typografie
Typografie
Typografie
Schriftgröße
•	 Fließtext: 14 - 16px
•	 Hauptüberschriften H1: 180% - 200% des Fließtextes
•	 Sekundäre Übersch...
Typografie
Zeilenabstand
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Lay...
Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout nun
nicht ...
Typografie
zu klein
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout n...
Typografie
30%- 40%
der Schriftgröße
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. D...
Typografie
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout nun
nicht ...
Typografie
Überall dieselbe alte Leier.
Das Layout ist fertig, der Text
lässt auf sich warten. Damit
das Layout nun nicht ...
Typografie
zu lang
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nu...
Typografie
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf
sich warten. Damit das Layout nun nicht ...
Typografie
Hilfsmittel
•	 typegenius.com
•	 google.com/fonts
Danke für ’s
Zuhören!
Nächste SlideShare
Wird geladen in …5
×

Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler

1.612 Aufrufe

Veröffentlicht am

Ich gebe einen Einblick in die Gestaltungsgrundlagen des Webdesigns und erläutere die Aspekte des modernen Webdesigns.
Was muss man beim Gestalten einer Website beachten? Und wie sieht gutes, modernes Webdesign heutzutage aus?

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.612
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
51
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler

  1. 1. für Nicht-Designer, Normalos und Entwickler Webdesign Gestaltungs- grundlagen @danielawibbeke
  2. 2. Daniela Wibbeke @danielawibbeke
  3. 3. Was ist Design?
  4. 4. Design ist der Plan, Elemente so anzuordnen, dass man eine bestimmte Aufgabe durchführen kann. Charles Eames (Designer und Architekt)
  5. 5. Design bedeutet Informationen zu strukturieren und zu gestalten
  6. 6. Modernes Webdesigns 1
  7. 7. Prinzipien des modernen Webdesigns napster.com Februar 2001
  8. 8. Prinzipien des modernen Webdesigns napster.com November 2015
  9. 9. Prinzipien des modernen Webdesigns Entwicklung des Webdesigns • Nutzer rückt mehr in Mittelpunkt (User Experience) • Veränderungen von Nutzungsverhalten • Konzeption nimmt größere Rolle ein
  10. 10. Prinzipien des modernen Webdesigns Gute Webdesign: • besteht aus semantischem Code • wird schnell geladen • ist ästhetisch • ist auf verschiedensten Bildschirmenauflösungen und Endgeräten gut bedienbar • hat einen Wiedererkennungswert
  11. 11. Prinzipien des modernen Webdesigns Design TechnikInhalte Basis ist konzeption
  12. 12. Gestaltungs- grundlagen 2
  13. 13. Einfachheit
  14. 14. Einfachheit • Einfachheit = benutzerfreundliches Design • jedes Element hat eine Bedeutung im Design • klare visuelle Hierarchien und Einheit Fazit: wenn alle Elemente Aufmerksamkeit erregen ist schlussendlich nichts betont
  15. 15. Einfachheit designerinaction.de http://www.designerinaction. de/
  16. 16. Weißraum
  17. 17. Weißraum • Weißraum schafft Abstand zwischen Elementen • Herstellung visueller Hierarchie Aufgabe: Elemente in den Vordergrund rücken und Blick des Users leiten
  18. 18. Weißraum medium.com
  19. 19. Weißraum
  20. 20. Ausrichtung und Raster
  21. 21. Ausrichtung und Raster • Raster hilft Elemente zu strukturieren und zu gliedern • Hilfestellung bei der Platzierung von Elementen • gibt User gutes Gefühl von Orientierung und Wiedererkennung • hilft Inhalte in eine Hierarchie zu bringen und Überblick zu verschaffen
  22. 22. Ausrichtung und Raster polyera.com
  23. 23. Ausrichtung und Raster
  24. 24. Ausrichtung und Raster ableton.com
  25. 25. Ausrichtung und Raster
  26. 26. Ausrichtung und Raster
  27. 27. Farben
  28. 28. Farben Bedeutung von Farben • Farbgebung beeinflusst die Atomsphäre einer Website • Verbindung mit Unternehmen und Marke • Wichtig: Anzahl von verwendeten Farben auf wenige Farben begrenzen werden
  29. 29. Farben Komplementäres Farbschema • enthält Farben die im Farbkreis gegenüber sind • hoher Kontrast zwischen den Farben
  30. 30. Farben
  31. 31. Farben jetblue.com
  32. 32. Farben Monochromes Farbschema • enthält nur eine Grundfarbe und beliebige Menge Abstufungen • Abstufungen von Sättigung und Helligkeit
  33. 33. Farben Sättigung Helligkeit
  34. 34. Farben fanta.de
  35. 35. Farben Farbschemata erstellen • Farben aus dem Farbkreis wählen und Nuancen der Farben definieren • Bilder als Vorlage nutzen • Farbtools zur Hilfe nehmen
  36. 36. Farben Hilfsmittel • Color Scheme Designer • Adobe Color CC (Kuler) • Google Material Design
  37. 37. Typografie
  38. 38. Typografie Web Design ist zu Oliver Reichenstein 95% Typografie
  39. 39. Typografie • Nie mehr als zwei Schriftarten • Typografische Hierarchie nutzen um eine visuelle Hierarchie herzustellen • Visuelle Hierarchie = Schriftstärke + Größe + Farbe
  40. 40. Typografie
  41. 41. Typografie
  42. 42. Typografie Schriftgröße • Fließtext: 14 - 16px • Hauptüberschriften H1: 180% - 200% des Fließtextes • Sekundäre Überschriften: 130%–150% des Fließtextes
  43. 43. Typografie Zeilenabstand Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
  44. 44. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. zu groß
  45. 45. Typografie zu klein Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
  46. 46. Typografie 30%- 40% der Schriftgröße Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
  47. 47. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. Zeilenlänge
  48. 48. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaf- fen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. zu kurz
  49. 49. Typografie zu lang Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstan- dards sind das Regelwerk, auf dem Webseiten aufbauen.
  50. 50. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards näm- lich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Websei- ten aufbauen. 70 bis 90 Anschläge
  51. 51. Typografie Hilfsmittel • typegenius.com • google.com/fonts
  52. 52. Danke für ’s Zuhören!

×