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

für Nicht-Designer, Normalosund Entwickler

WebdesignGestaltungs-grundlagen

@danielawibbeke

Daniela Wibbeke@danielawibbeke

Was ist Design?

Design ist der Plan, Elemente soanzuordnen, dass man eine bestimmte

Aufgabe durchführen kann.

Charles Eames (Designer und Architekt)

Design bedeutetInformationen zu strukturieren

und zu gestalten

ModernesWebdesigns

1

Prinzipien des modernen Webdesigns

napster.com

Februar 2001


napster.com

November 2015


Entwicklung des Webdesigns

• NutzerrücktmehrinMittelpunkt(UserExperience)

• VeränderungenvonNutzungsverhalten

• KonzeptionnimmtgrößereRolleein


Gute Webdesign:

• bestehtaussemantischemCode

• wirdschnellgeladen

• istästhetisch

• istaufverschiedenstenBildschirmenauflösungenundEndgerätengutbedienbar

• hateinenWiedererkennungswert


Design

TechnikinhalTe

Basis isTkonzepTion

Gestaltungs-grundlagen

2

Einfachheit

Einfachheit

• Einfachheit=benutzerfreundlichesDesign

• jedesElementhateineBedeutungimDesign

• klarevisuelleHierarchienundEinheit

Fazit:wennalleElementeAufmerksamkeiterregenistschlussendlichnichtsbetont

Einfachheit

designerinaction.de

http://www.designerinaction.de/

Weißraum

Weißraum

• WeißraumschafftAbstandzwischenElementen

• HerstellungvisuellerHierarchie

Aufgabe:ElementeindenVordergrundrückenundBlickdesUsersleiten

Weißraum

medium.com

Weißraum

Ausrichtungund Raster

Ausrichtung und Raster

• RasterhilftElementezustrukturierenundzugliedern

• HilfestellungbeiderPlatzierungvonElementen

• gibtUsergutesGefühlvonOrientierungundWiedererkennung

• hilftInhalteineineHierarchiezubringenundÜberblickzuverschaffen


polyera.com



ableton.com



Farben

Farben

Bedeutung von Farben

• FarbgebungbeeinflusstdieAtomsphäreeinerWebsite

• VerbindungmitUnternehmenundMarke

• Wichtig:AnzahlvonverwendetenFarbenaufwenigeFarbenbegrenzenwerden

Farben

Komplementäres Farbschema

• enthältFarbendieimFarbkreisgegenübersind

• hoherKontrastzwischendenFarben

Farben

Farben

jetblue.com

Farben

Monochromes Farbschema

• enthältnureineGrundfarbeundbeliebigeMengeAbstufungen

• AbstufungenvonSättigungundHelligkeit

Farben

Sättigung

Helligkeit

Farben

fanta.de

Farben

Farbschemata erstellen

• FarbenausdemFarbkreiswählenundNuancenderFarbendefinieren

• BilderalsVorlagenutzen

• FarbtoolszurHilfenehmen

Farben

Hilfsmittel

• ColorSchemeDesigner

• AdobeColorCC(Kuler)

• GoogleMaterialDesign

Typografie

Typografie

Web Design ist zu

Oliver Reichenstein

95% Typografie

Typografie

• NiemehralszweiSchriftarten

• TypografischeHierarchienutzenumeinevisuelleHierarchieherzustellen

• VisuelleHierarchie=Schriftstärke+Größe+Farbe

Typografie

Typografie

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















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















Typografie

Überall dieselbe alte Leier. Das Layout ist fertig, der















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

Typografie

Hilfsmittel

• typegenius.com

• google.com/fonts

Danke für ’sZuhören!