webdesign gestaltungsgrundlagen für nicht-designer, normales und entwickler
TRANSCRIPT
Design ist der Plan, Elemente soanzuordnen, dass man eine bestimmte
Aufgabe durchführen kann.
Charles Eames (Designer und Architekt)
Prinzipien des modernen Webdesigns
Entwicklung des Webdesigns
• NutzerrücktmehrinMittelpunkt(UserExperience)
• VeränderungenvonNutzungsverhalten
• KonzeptionnimmtgrößereRolleein
Prinzipien des modernen Webdesigns
Gute Webdesign:
• bestehtaussemantischemCode
• wirdschnellgeladen
• istästhetisch
• istaufverschiedenstenBildschirmenauflösungenundEndgerätengutbedienbar
• hateinenWiedererkennungswert
Einfachheit
• Einfachheit=benutzerfreundlichesDesign
• jedesElementhateineBedeutungimDesign
• klarevisuelleHierarchienundEinheit
Fazit:wennalleElementeAufmerksamkeiterregenistschlussendlichnichtsbetont
Weißraum
• WeißraumschafftAbstandzwischenElementen
• HerstellungvisuellerHierarchie
Aufgabe:ElementeindenVordergrundrückenundBlickdesUsersleiten
Ausrichtung und Raster
• RasterhilftElementezustrukturierenundzugliedern
• HilfestellungbeiderPlatzierungvonElementen
• gibtUsergutesGefühlvonOrientierungundWiedererkennung
• hilftInhalteineineHierarchiezubringenundÜberblickzuverschaffen
Farben
Bedeutung von Farben
• FarbgebungbeeinflusstdieAtomsphäreeinerWebsite
• VerbindungmitUnternehmenundMarke
• Wichtig:AnzahlvonverwendetenFarbenaufwenigeFarbenbegrenzenwerden
Farben
Komplementäres Farbschema
• enthältFarbendieimFarbkreisgegenübersind
• hoherKontrastzwischendenFarben
Farben
Monochromes Farbschema
• enthältnureineGrundfarbeundbeliebigeMengeAbstufungen
• AbstufungenvonSättigungundHelligkeit
Farben
Farbschemata erstellen
• FarbenausdemFarbkreiswählenundNuancenderFarbendefinieren
• BilderalsVorlagenutzen
• FarbtoolszurHilfenehmen
Typografie
• NiemehralszweiSchriftarten
• TypografischeHierarchienutzenumeinevisuelleHierarchieherzustellen
• VisuelleHierarchie=Schriftstärke+Größe+Farbe
Typografie
Schriftgröße
• Fließtext:14-16px
• HauptüberschriftenH1:180%-200%desFließtextes
• SekundäreÜberschriften:130%–150%desFließtextes
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.
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ß
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.
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.
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
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
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.
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 90Anschläge