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?
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. 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
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
17. Weißraum
• Weißraum schafft Abstand zwischen Elementen
• Herstellung visueller Hierarchie
Aufgabe: Elemente in den Vordergrund rücken und
Blick des Users leiten
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
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
35. Farben
Farbschemata erstellen
• Farben aus dem Farbkreis wählen und
Nuancen der Farben definieren
• Bilder als Vorlage nutzen
• Farbtools zur Hilfe nehmen
39. Typografie
• Nie mehr als zwei Schriftarten
• Typografische Hierarchie nutzen um
eine visuelle Hierarchie herzustellen
• Visuelle Hierarchie = Schriftstärke + Größe + Farbe
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. 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. 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. 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. 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. 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. 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. 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