Grundlæggende Webdesign

Præsentationer af emnet: "Grundlæggende Webdesign"— Præsentationens transcript:

1 Grundlæggende Webdesign
– visuel kommunikation Bjarne Sandstrøm IT-højskolen

2 Plan for i dag Præsentation af opgave 3 Et kig på www.kf175.com
Form og betydning Gestaltpsykologien Strukturalistisk betydningstilskrivning diskrete fænomener kontinuer betydningsopbygning gennem og tolkning af kontraster

3 Form og betydning Betydning knyttet til form og farve
som spontan, naturlig reaktion gestaltlovene farveoplevelse som kulturelt opbygget konvention historiske stilarter mode

4 Gestaltpsykologien Brud med forestillingen om en atomistisk perception. Den atomistiske forestilling bygger på, at mennesket samler isolerede sanseindtryk, som bevidstheden stykker sammen som brikkerne i en mosaik. Gestaltpsykologien hævder, at før vi erkender de enkelte dele oplever vi helheder og former (gestalter) i en direkte (før-refleksiv) perception, som er mere end summen af enheder og går forud for disse.

5 Gestaltpsykologien Gestaltlovene karakteriserer de grundlæggende mønstre eller lovmæssigheder, som styrer vores visuelle perception af dele og helheder Eksempler på en præ-refleksiv oplevelsesform peger frem mod en filosofisk retning som fænomenologien

6 Gestaltlovene (1): Nærhed
Tætstående elementer opfattes som et hele

7 Gestaltlovene (2): Lighed
Elementer, der ligner hinanden, opfattes som et hele

8 Gestaltlovene (3): Kontinuitet
Præference for kontinuerte, ubrudte omrids med den simpleste struktur

9 Gestaltlovene (4): Lukkethed
Præference for komplette, lukkede figurer

10 Gestaltlovene (5): Figur-grund
Den mindste af to overlappende figurer opfattes som figuren, mens den største opfattes som baggrund

11 Gestaltlovene (6): Symmetri
Loven om symmetri Den samlede gestalt sejrer over enkeltdelene

12 Variationsforløb Orientering Størrelse Placering Valeur Tekstur Form

13 Betydningstilskrivning til ’naturlige’ fænomener
Strukturalismen Betydningstilskrivning til ’naturlige’ fænomener

14 Et eksempel: FORM De geometriske grundformer
Platons metafysiske tolkning af geometrien Vitruvius’ arkitektoniske tolkning af sammenhængen mellem templet og den menneskelige krop Leonardo da Vincis tegning

15 Et eksempel: FARVE Fysiologisk farveoplevelse
Psykologisk farveoplevelse varme og kolde farver synæstesi farve og lyd Konventionel farvesymbolik Modefarver

16 Naturfarver mellem farve komplementærfarver spektret som kontinuum

17 Strukturel betydningstilskrivning
rød = blod = fare mellem farve Farvekontrast = forskellige tilstande grøn = kontrast = ingen fare mørke farver = ingen forandring lys farve = forandring Lyskontrast = forandring

18 Designprincipper – fra formbeskrivelse til livstydning
Heinrich Wölfflins karakteristik af forskellen mellem renaissancens og barokken kunst: RENAISSANCE Lineær, tingenes grænse betones Flade Lukkede former Mangfoldighed Absolut klarhed BAROK Malerisk, tilsyneladende uendelighed Dybde Åbne former Enhed Relativ klarhed I 1912 brugte Heinrich Wölfflin (i „Sitzungberichten der Berliner Akademie der Wissenschaften") nedenstående fem grundbegreber til karakteristik af forskellen på renaissancens og barokkens kunst: – fra formbeskrivelse til livstydning

19 Perspektiver i Wölfflins
Fra den barokke formverden som et dynamisk sammenhængende dele til gestaltpsykologi Fra metodisk billedpolarisering til strukturel semantisk semiotik

20 Semantik og semiotik Betydning opstår ved et spil af ligheder og kontraster mellem forskellige form-komponenter inden for helhedens rammer eller ved et spil af ligheder og kontraster mellem den aktuelle løsning og de forventninger, brugeren kommer med

21 En forskel, der gør en forskel
Valerie Casey’s dikotomier (- enhed balance symmetri regularitet minimalisme diskretion forudsigelighed statik neutralitet fragmentering ustabilitet asymmetri irregularitet overflod overdrivelse spontaneitet dynamik accentuering

22 En forskel, der gør en forskel (2)
akkuratesse flade harmoni orden gentagelse enkelthed - digitalt cyberrealisme forstyrrelse dybde konflikter tilfældighed episodicitet kompleksitet - 'analogt’ realisme

23 Elementer i grafisk design
den grafiske disponering af fladen spændinger og harmonier den kromatiske dimension baggrund billedelementer stoflighed eventuelle dynamiske elementer animationer interaktive elementer

24 Størrelseskontrast Formkontrast Styrkekontrast Farvekontrast
Fra Kim Pedersen og Pernille Hansen: Design til skærmen, 1997

25 Og husk altid BÅDE - OG Visual ambiguity, like verbal ambiguity, obscures not only compositional intent, but also meaning... visual forms should not be purposefully unclear; they should harmonize or contrast, attract or repel, relate or clash. Donis A. Dondis, A Primer of Visual Literacy In combining contrasting values, care must be exercised that the uniform effect of the whole remains unaffected. If the contrasts are violent... one element can be so dominant that the balance between it and the contrasting value is upset, or never comes into being. Emil Ruder, Typography