Visuell kommunikasjon Thomas Lewe DEL A 1 SKRIFT 1.1 SKRIFTHISTORIE 1.2 TYPOGRAFI 1.2.1 Klassifisering 1.2.2 Terminologi 1.2.3 Anvendt typografi DEL B 2 LAYOUT 2.1 KOMPOSISJON 2.1.1 Komposisjonsprinsipp 2.1.2 Billedanalyse 2.2 SKISSETEKNIKK 3 DESIGN 2.3 STIL 2.4 TRYKK 2.5 WEB 4 LOVER 5 KILDER 1 SKRIFT
1.1 SKRIFTHISTORIE De fleste skriftsystemene begynte som bilder. De ble gradvis forenklet til symboler, til pictogrammer. Symbolet kan stå for et abstrakt begrep eller en tanke og blir da kalt et ideogram. [eks. anker: 1. form, 2. trygghet, pålitelighet, vennskap, tro]. Utviklingen av et selvstendig skriftspråk foregikk omtrent samtidig hos sumererne og egypterne. De hadde en høyt utviklet kultur og behov for å nedtegne lover og hendelser. Sumererne er kjent for å ha utviklet kileskriften. [Trepinne som var trekantet i enden]. Kileskriften spredte seg via assyrerne og babylonerne til semitttiske stammer i Midtøsten. ---> Egypt (hieroglyfer hugget i stein sjelden på papyrus). Hieroglyfene var i bruk fra 3 000 f. Kr. Til 400 e. Kr. - religiøse formål ---> Semittene (første av bibelens bøker: Mosebøkene) = videreføring av de egyptiske hieroglyffer: ca. 1800 f.kr. videreutviklet til tidens første alfabet: det semittiske alfabet ---> Fønikerne (handel og sjøfart øst i Middelhavet) ---> Grekerne (konsonanter - skriften risset eller hogd inn i stein eller kermikk) ---> Romerne - Capitalis rustica Trolig den tidligeste. Navnet betyr enkel og landlig. Skriften finnes på vegger, på inskripsjoner og i bøker. Selve bokstavene er relativ smale og tette, men seriffene er kraftige. På den måten var det mulig å få plass til mye tekst på begrenset plass. - Capitalis monumentalis
Monumental steinskrift, forbilde for kalligrafer og typografer. I renessansen og barokken ble det gjort forsøk å konstruere de romerske majusklene med passer og linjal, noe som bare gjorde dem stive og livløse. Det viser at streng geometri ikke gir en tilfredsstillende forklaring på hvorfor capitalis monumentalis ser så levende og flott ut. - Capitalis Quadrata Romerske majuskler skrevet på pergament med penn som førsøker å etterlikne capitalis monumentalis. Stein, pergament (preparerte dyrehuder)- sivrørs-penn (calamus) - Kurrensskriften Brukt i mer uhøytidelige anledninger der hurtighet var viktigere enn enn estetiske hensyn. Den er en raskere skrevet versjon av de romerske majusklene. I kurrensskriften finnes spirer til over- og underlengder på minusklene. currere = løpe - Uncialen (400 e. kr.) Påvirket av kurrensskriften. Den er raskere å skrive fordi den sparer en del strøk. Vinkelen på pennen er mer konstant. Skriften virker rundere enn capitalis. Enkelte bokstaver begynner å likne på våre minuskler.] unica = romersk koppermynt med rund form - Halvuncialen En videreutvikling av uncialen. Enkelte bokstaver har fått over- og underlengde. Etter romerrikets fall (fra 476 e.kr) var det gjennom kristendommen at skriften ble sikret utbredelse. Behovet for å skrive bibler og hellige skrifter økte voldsomt. Utveksling av skrifttyper ble helt vanlig. Men mangel på sentralstyring av skriftspråket førte til gradvise forandringer av bokstavene. Folkevandring = store nasjonale forandringer. Det oppstod en mengde avarter som til dels er svært vanskelige å lese. - Nasjonalskriftene (tegnet med bredpenn) - langobardisk skrift (Norditalia, 568 til 774 e.kr.) - benevetansk skrift (rundt Roma) - vestgotisk skrift (Spania) - merovingisk skrift (rundt Paris) - irsk insularskrift (irsk halvuncial)
- Karolingisk minuskel (800-1000 e.kr.) Utviklet på Karl Den Store`s hoff [768 til 814] som et felles skrift for det latinske språket. Skriften var vakker og lettlest og den er den siste rent kalligrafiske i vår skriftutvikling. Latinsk alfabet til Norge ca. 1100 e.kr. - før: runer Papir til Europa ca. 1100 e.kr. fra Asia. Skepsis hos prester - pergament fortsatt frem til ca. 12-1300 e.kr. Renessanse i Italia fra 1300 e.kr. - Gotisk skrift (fraktur, schwabacher,...) En av overgangsformer etter karolimgisk skrift. Gotisk skrift tok mindre plass og var raskere å skrive pga de kantede bokstavformene. Denne formen var tydelig preget av den gotiske arkitekturens spisse og himmestrebende former. Men at skriften på denne måten ble mer ornamental, gjør den samtidig mindre lesbar. I barokktiden ble den gotiske skriften overlesset med ornamentikk, og de kalligrafiske grunnformene er knapt synlige. - fra 1510 til langt inn i vårt århundre. - frem til 1925: alle tyske dagsaviser ble trykt med fraktur - etterhvert antikva i skjønnliteratur (spe) - tter 1. verdenskrig: Fraktur = tysk, antikva = foræderi - 1928: 57% av alle tyske bøker ble trykt med fraktur - NS-tiden: til og med jernbanestasjonens navneskilt ble forandret tilbake til frakturskrift. (Deutsches Volkes Seele trifft nur ein Wort in deutscher Schrift) - etter 1940: Tyskerne ble mer avhengig av propagandatrykk i utlandet: ingen kunne lese fraktur. Hemmlig dokument fra Hitler: Fraktur-skriften var egentlig av jødisk opprinnelse. Fra nå av: Antikva! Mens gotikken blomstret i Nord-Europa, begynte renessansen (eller humanismen) i Sør-Europa (med de greske og romerske formene for stilren kunst som inspirasjonskilden). - Humanistisk minuskel (fra 1460) ---> motvekt/reaksjon på gotisk skrift.
Ledende humanister syntes ikke at gotisk skrift var passende for klassisk litteratur. De vendte seg mot fortiden og fant at den karolingiske minuskelen harmonerte bedre. 15. århundre: - oppmarsj for borgerskap og byene - korstogene har åpnet for handel med Asia - 1250: Hansa-forbundet (Frankrike/England = kongedom) - 1343: Svartedøden fra Kina til Europa (1349 i Norge, en tredjedel til halvparten av befolkningen døde) - 1400-1500: Portugal og Spania - stor sjømakt (over hele kloden) - Universiteter - 1452-1519: Leonardo Da Vinci - Johann Gensfleisch zum Gutenberg oppfinder trykkteknikken med løse enkeltyper (1440). Kunder: kirke, universiteter - Antikva Stempelskjærere: - Nikolas Jenson, fransk [venitiansk antikva], 1476 - Aldus Manutius (boktrykker) og Francesco Griffo (stempelskjærer), 1499 - [renessanseantikva] - Aldus og Griffo var først ut med kursivskriften som trykkskrift (1501) - Claude Garamond, fransk 1480-1561 + Reformasjon, Martin Luther (1483-1546) - 1600-tallet: kobberstikk til bokillustrasjon - 1796: oppfinnelse av litografi (nye muligheter også for skrifttegnere) - William Caslon, eng, 1692-1766 - John Baskerville, eng, [førklassisistisk antikva], 1706-1775 - Firmin Didot, fransk, [nyklassisistiske antikva og typografisk målsystem, basert på punkt og 12], 1800 - Giambattista Bodoni, [mest kjente nyklassisistiske antikva], 1740-1813 trenger rikelig med uft mellom linjene.
1.2 TYPOGRAFI 1.2.1 KLASSIFISERING - Antikva (engl.roman) medieval Antikva (Renessanse-Antikva), f.eks. Garamond - liten kontrast mellom hårstrek og grunnstrek - skrå toppseriffer og myk overgang mellom bokstavstamme og seriff - runde former har skrå diametere - liten løkke på minuskel e og liten mage på minuskel a. førklassisistisk Antikva (Overgangs-Antikva), f.eks. John Baskerville - litt større forskjell mellom grunnstrek og hårstrek enn i gammelantikva - seriffene er mindre små enn i gammelantikva - små avrundinger i overgangen mellom seriff og bokstavestamme, av og til ingen - liten eller ikke noen skrå diameter i runde bokstavformer - litt varierende størrelse på løkken på minuskel e og magen på minuskel a. klassisistisk Antikva (Empire, Nyantikva), f.eks. Giambattista Bodoni - stor kontrast mellom grunnstrek og hårstrek - toppseriffene på minusklene sitter vannrett på stammen, med få unntak - overgangen mellom seriff og stamme er skarp og vinkelrett - loddrette diametere i runde bokstavformer - Grotesk (eng.: Sans Seriff)
- bokstaver i tidl. greske innskripsjoner på stein frem til 4. årh. f.kr. hadde ingen seriffer (innført av romerne) - engelskmannen William Caslon viste i 1816 en linje grotesk-versaler i en skriftprøve - kalligraf Edward Johnston (1872-1944) utviklet ny, grotesk bokstavform for London Underground, 1916 - funksjonalisme i begynnelsen av 20-årene (Bauhaus): Paul Renner tegner Futura (1928). Futura brukt i alle trykksaker til verdensutstilling i Stockholm, 1930. - Erbar (1924-27), Kabel (1927), Gill (1928), Akzident Grotesk (1896), Univers (1956), Helvetica (1957), Optima (1958) - Display / Reklameskrifter (1800-tallet) - industrielle revolusjon - nye type trykksaksbestillere - aviser, reklame, propaganda - Gotisk skrift (eng.: Black Letter) - tekstur [høygotisk bokstavform rundt Gutenberg. Bygd opp av brukne linjer. Minuskler avslutter både opp og nede med skrå rektangler]. - rundgotisk [ital. versjon av tekstur, en overgangsform mellom denne og schwabacher] - schwabacher [såkalte bastardtypene: streng høygotiske elementer kombinert med ledigere former påvirket av renessansen]. - fraktur [sirligere form av gotisk skrift, påvirket av tysk renessanse. Dominerende typeform i Tyskland helt inn i vårt århundre. I en tysk håndbok fra 1925 ble det omtalt 375 fraktursnitt]. - nyere varianter - Avis Skrifter - av tekniske grunner (stereotypi, hurtige rotasjonspresser, lettlesbarhet) - Clarendon, Century Schoolbook, Exelsior, Ionic, Ideal News, Corona - Friform
- hverken skriveskrift eller klassisk, f.eks. Souvenir (1914), Coopper (1920) - Andre - Sjablon - Skrivemaskin - Etienne (trekantede seriffer) - Fantasi skrifter 1.2.2 TERMINOLOGI - Det typografiske målsystemet: basert på et Didotpunkt (= 0,376 mm). 1 cicero = 12 pt. - Tolvtallsystem: 12 er delelig med 2, 3, 4, og 6 - kvotienten blir alltid et hel tall. - Begrep: - Versaler / Majuskler - Minuskler - Kapitæl (capitellum=liten hode), versaler med x-høyde. Ikke forminskede versaler, men egne skjærte typer. - Seriff (lat.: scribere) - Skriftgrad: - Skrifter i samme skriftgrad varierer ofte optisk i størrelse.
- Skriftsnitt: - normal (roman, book) - kursiv (italic / oblique) - halvfet (demi-bold) - fet (bold) - meget fet (extra bold) - mager (light) - condensed (narrow) - extended - Nye teknikker - nye betingelser for skriftutforming: - fotosats - Apple Macintosh (1984) - postscript - web - TV - elektronisk kursivering contra kursiv-snitt - ekspandering, kondensering, justering av bokstavmellomrom (før: ingen overlapping pga. kjegel) - ofte kunstig snitt i dataprogram (bold, understreket, kursiv,...) 1.2.3 ANVENDT TYPOGRAFI Adrian Frutiger: «Det første inntrykket leseren får av en tekst, er visuelt. Leseren registrerer tekstens ytre form - typografien - før han eller hun leser teksten. Det betyr at leseren ubevisst vil gjøre seg opp en mening om innholdet gjennom det inntrykket de får av typografien, før de begynner å lese!» Leslighet: - Typografi er budskap om et budskap. - Lesing er en vane. Gjennom trening får bokstaver / ord en tilvant form. - Leslighet kan defineres som: «... den hastighet og nøyaktighet vi oppfatter bokstaver og symboler på og setter den sammen til ord og setninger.» Egentlig er det to sider ved lesing av en typografert tekst: - Den normale lesingen, der leseren avkoder teksten og tar imot budskap eller informasjon - Den visuelle / følelsesmessige opplevelsen, som inneholder et budskap ut over det egentlige tekstinnholdet.
Hva påvirker lesligheten? - Leserbetingede faktorer: Personlighet, interesser, kunskaper, leseferdighet, konsentrasjonsevne, hvor godt ser leseren,... - Situasjonsbetingede faktorer: lysforhold, støyforhold, lesestilling,... - Budskapsbetingede forhold: lengde, vanskelighetsgrad, tema, språkføring,... - Typografisk - og teknisk betingede faktorer: signalkontrast (skrift/bakgrunn), bokstavens individuelle form, skriftform (grotesk, antikva,...), bokstavvariant (versaler, minuskler), bokstavmellomrom (kniping), ordmellomrom (spacing), linjeavstand, linjelengde, skriftgrad, justering, emnepreg (hvordan form og innhold passer sammen) Øyets bevegelser: Våre øyer beveger seg med små, uregelmessige rykk (sakkadiske bevegelser) når vi leser. De stopper ved viktige steder (fikseringspunkt) i tekstlinjen. Øyet tar imot meste parten av informasjonen i fikseringspausen, når øyet står stille. Denne pausen varierer fra noen millisekunder til opp mot ett sekund. Mellom to fikseringspunkt er det høyst 12 tegn. I selve fikseringspunktet ser vi normalt tre-fire tegn tydelig, resten er mer eller mindre uklart. Under lesingen går 90 % av tiden med til fiksering, resten bruker vi til å flytte blikket. Når vi har lest ferdig en linje, leter øyet etter starten på den neste. Tekstutformingen, linjelengden, linjeavstanden og måten linjen er justert på, har stor betydning for øyets leserythme. Bokstaver blir ord: - Ord er best leselig, når de er dannet av bokstaver med ulik form (rokkokokonsol, milliliter symbol, typografi, kilogram) - Den øverste delen av ordet gir mest informasjon (bokstavene er mest ulike øverst) - Kontor: Bokstavens ytre omriss. Kombinasjon av bokstaver med x-høyde, overlengde og underlengde) - Struktur: bokstavens indre mønster (rund, vertikal, horisontal, diagonal) - Kontur og struktur gir informasjonen vi trenger for å identifisere ordet. [vi lærer å oppfatte ordbilder, uten å måtte avkodere hver eneste bokstav]. Bokstavmellomrom: - Ikke alle skrifter har like stor behov for luft (Antikva mer, pga. sterke loddrette linjer, men spede og tynne vannrette. Bokstavene «deler seg» i to når de kommer for nær en annen bokstav. - Mindre grader trenger mer luft, størrer grader trenger mindre luft. - Lik avstand mellom bokstavene innen et ord - Optisk utligning Ordmellomrom: - Er relatert til bokstavmellomrom. Linjeavstand: - henger sammen med valgt typografi (stor x-høyde=størrer linjeavstand) og linjelengde / satsbilde - seriffer forsterker den horisontale linjen - brede skrifter forsterker den horisontale linjen i motsetning til slanke skrifter Skriftblanding: Poenget med å blande skrifter fraforskjellige familier er å få til virkninger som den vanlige familien ikke makter alene. Forskjellen på brødtekst og illustrasjonstekster skal for eksempel ikke være direkte voldsom. Det som passer i en seriøs bok, er ikke det riktige i eksperimentell design. De størrste mulighetene for spenning og kontrast for man hvis skriftene er tydelig forskjellige. - Antikvaskrifter kan blandes med de fleste grotesk- og egyptienneskrifter - Antikvaskrifter bør ikke blandes med andre antikvaskrifter eller med kursivskrifter av dem - Egyptienneskrifter kan blandes med de fleste antikvaskriftene. De kan også blandes med groteskskrifter, særlig hvis styrkegraden er forskjellig. - Egyptienneskrifter bør ikke blandes med andre egyptienneskrifter eller med grotesker av samme styrke. - Groteskskrifter kan blandes med andre groteskskrifter, hvis styrkeforskjellen / kontrasten er stor nok.
- Skriveskrifter kan blandes med de fleste andre skrifter, unntatt kursivskrifter. - Fantasiskrifter og dekorskrifter bør vanligvis ikke brukes sammen med andre skrifter fra denne gruppen. - Ulike behov: En roman, en kokebok, en ordbok eller en telefonkatalog krever ulik typografisk tilrettelegging. Små avsnitt i en brosjyre krever andre hensyn enn tekst i en hel bok. Design av omfattende tabeller eller telefonkataloger skjer best med skrifter som er laget for nettopp slike formål. Det er en forutsetning å definere: - HVA som skal bli lest - HVORFOR det skal leses - HVEM som skal lese det - NÅR det skal bli lest - HVOR det skal bli lest DEL B
2 LAYOUT 2.1 KOMPOSISJON 2.1.1 KOMPOSISJONSPRINSIPP Seks retningslinjer (sjeldent brukt seperat) for komposisjon: balanse helhet kontrast fremheving bevegelse rytme/mønster Ved å jobbe bevisst med komposisjon øker oppmerksomheten og komposisjonssansen trenes opp / forbedres. Komposisjonsprinsippene blir brukt for å organisere og sette sammen det visuelle uttrykket. 1. Balanse Balanse er av meget fundamental betydning. Den visuelle balansen kan være betinget av form, valør, tekstur, linje eller farge. Plasseringen er av største betydning: symetrisk, asymetrisk, radial. - Symetrisk plassering = trygg, forutsigbar, muligens lite spennende. Mange måter å komponere symetrisk layout på gir mulighet for spenning. Symetri blir i perseptionspsykologien regnet som en av de formfaktorene som danner helhet. Symetri forbindes med ro, høytid, monumentalitet. Symetri er ofte brukt i skjønnliteratur, tidsskrifter, brevhoder, plakater, invitasjoner og annonser. - Asymetrisk plassering = mer sammensatt og krevende balanse (se: Die neue Typografi). Med helt forskjellige elementer gjelder det å oppnå likevekt. En stor, lys flate kan danne likevekt med en mindre mørk flate. Et stort ord kan danne likevekt med med en hel tekstblokk, osv. Asymetrien må føles. - Radial balanse stråler liksom ut fra et senterpunkt, slik det viser seg i en blomst eller et hjul. 2. Helhet (og kaos)
Innenfor en viss ramme plasseres hovedmassene og enkeltdelene slik at en har kontroll over den visuelle situasjonen, slik at summen av enkeltdelene danner en tiltalende helhet (tiltalende kan har ganske mange betydninger!). - Nærhetens lov Enkeltdeler som er relativt nær hverandre, ser ut til å danne en helhet. - Likhetens lov Hvis det er lik avstand mellom enkeltdeler, vil de som likner på hverandre, danner en helhet. - Den gode formens lov Enkeltdeler som ser ut til å lage en sammenhengende form, danner en helhet. - Helhetens lov Hvis linjer og former ser ut til å danne en hel form, oppfatter vi innholdet som en helhet. - Erfaringsloven Ufullstendige mønstre, bilder, figurer eller symboler kan vi gjøre fullstendig på bakgrunn av vår erfaring. - Loven om lik bevegelse Elementer som beveger seg likt, eller som beveger seg når andre er i ro, blir oppfattet som en helhet. Avhengig av budskap og mottaker, er det grafiske uttrykket mer eller mindre underlagt motestrømninger. Design er budskapsformidling, og i tråd med tidens utvikling ellers (MTV generasjonen) blir begrepet helhet oppfattet på forskjellige måter. 3. Kontrast (Mest brukt prinsipp) - Formkontrast (f.eks. seriff - grotesk) - Størrelseskontrast (mye brukt, lite radikal) - Styrkekontrast (f. eks. skriftgrader) - Valør-/fargekontrast - Teksturkontrast
4. Fremheving Hvis alle elementer på en side er noenlunde likt fordelt og har samme styrke, hvis alle instrumentene i et orkester prøver å gjøre seg like lite bemerket - da finns det ikke noe form for fremheving. Spennende musikk må ha et dynamisk forløp. Visse avsnitt, visse avdelinger må uttales kraftigere for å skape liv, bevegelse og oppmerksomhet. I grafisk design er fremheving med hjelp av enkelhet effektivt. Less is more. 5. Mønsterdannelse Mønster dannes av usynlige hjelpelinjer, en underliggende struktur som gjør at de ulike elementene er plassert på sin forventede måte. Man finner det en ser etter på den plassen man regner med. Informasjonen blir på den måten retundant (man kan få tak i den på to måter: både på grunnlag av det en ser og det en vet). Et grid sørger for konsistent oppfattelse av den strukturelle konteksten. 6. Bevegelse og rytme Måten øyet flytter seg mellom forskjellige elementer på et format, innenfor en ramme. Plassering og forholdet mellom elementene er avgjørende for hvilken bevegelse som dannes. Spenninger, ubalanse, diagonaler, pilformer og liknende er med på å skape grafisk bevegelse. Øyet kan ledes til et ønsket punkt i bildet. Gotisk arkitektur er eksempel på at elementene understreker en oppadgående bevegelse. Bilder eller grafiske arrangementer med sterk vertikal virkning kan føre øyet ut av formatet. Men noen horisontale linjer kan motvirke denne virkningen. En komposisjon der horisontale elementer dominerer, virker rolig og fredelig og kan få tilskueren til å oppleve en form for trygghet. Ofte lager horisontale komposisjoner en venstre-til-høyre-bevegelse. Diagonale retninger og formasjoner bidrar sterkt til bevegelse innenfor en ramme. Diagonaler gir en følelse av uro og rastløshet. Motdiagonaler er gjerne det virkemidlet som skal til for å stabilisere komposisjonen. 2.1.2 OPTISK MIDTPUNKT DET GYLNE SNITT A-FORMAT Det optiske midtpunktet ligger ikke på samme sted som det matematiske midtpunktet. Det gylne snitt kan baseres på den fibonacciske tallrekken: 2:3:5:8:13:21:34 osv. (Hvert tall er summen av de to foregående). Størrelsen blir nesten alltid 0,62. 62 av 100% er en gyllen proporsjon. Dette forholdet tilsvarer mange proporsjoner i naturen og våre egne følelser for proporsjoner.
Et annet mye brukt forhold er 1:2. A-formatet er bygd opp på denne måten. Et økonomisk/praktisk format fremfor estetisk. 2.1.3 BILLEDANALYSE - Kontekst [Beskrivele av den sammenhengen bildet stå i. Befinner bildet seg i en avis, en bok, ] - Denotasjoner [Forhold som bildet direkte gjengir, og som alle kan kjenne igjen. De finns konkret i bildet og blir storsett likt oppfattet. Det er ikke spørsmål om hva den enkelte oppfatter eller tolker.] - Konnotasjoner [Tanker og forestillinger som vi knytter til bildet. Trening og erfaring i å lese bilder eller tekst har mye å si for hvilken måte vi tolker innholdet på. På konnotasjonsplanet kan senderen helt bevisst påvirke mottakeren gjennom påstander, vurderinger og stemningsskapende ord.] 17. mai dikt bruksanvisning bilder i avisen reklame - Funksjon [Hva er budskapet, og hva er målet med å kommunisere innholdet på valgt måte?] 2.2 SKISSETEKNIKK Skisser danner et diskusjonsgrunnlag mellom designer og oppdragsgiver. Tradisjonelle skisseverktøy som spritpenn erstattes mer og mer av dataskapte skisser. Det er farer knyttet til å la seg friste av å fremstille skissene direkte på datamaskinen: - Den kreative utfoldelsen er sterkt bundet til programmets egenskaper, til fonter som finns i maskinen og til mulige operativbegrensninger hos designeren. - Den spontane kreativiteten for ikke utløp. - Kunden anser skissen som et ferdig produkt og er mye mer definitiv i sin bedømmelse av skissen. - En dataskisse utelukker ofte alternative valg. - Bilder, som er klippet ut av magasiner øker ofte forventninger hos kunden (lite budsjett til egne bilder - dårligere kvalitet) - Dataskisser er enten avhengig av å bli skrevet ut i god kvalitet eller krever en datamaskin i kundemøtet. Ufleksibilitet.
Skissearbeider er avhengige av mottakerens vurderingsevne. Det er også vesentlig, om det består et samarbeidsforhold fra før, hvor kunden allerede er kjent med presentasjonsformen. I store trekk kan skissearbeid bygges opp på følgende måte: - Brainstorming Uavhengig av realiserbarhet spyttes assosiasjoner, tanker og begrep ut og samles på et ark. - Idéskisse Grove utkast som bare skal feste ned tankene og ideene i den kreative fasen, helt uten tanke på den endelige layouten og typografien. - Grovskisser Under hensyn til budsjettrammer og formatkrav, utarbeides første skisser / konsepter, som gjenspeiler konseptuelle idéløsninger. Miniskisser, som krever lite tidsforbruk. Etterhvert rette format. - Finskisser Elementer, tekster (blindtekst), symboler, logoer osv. er på plass. Skissen gjenspeiler et resultat, som er så nært sluttproduktet, som det i denne fasen kan være. Je bedre man gjennom sitt skisseverktøy får presisert, hvordan det endelige produktet skal falle ut, desto bedre diskusjonsgrunnlag en vil ha i skissepresentasjonen. 3 DESIGN 3.1 GRAFISKE STILARTER - Arts And Crafts [1800 tallet, William Morris. Håndverkerer og kunstnerer skulle ta direkte ansvar for alle sidene ved produktet sitt. Mye av den visuelle kvaliteten i kunsthåndverk-produkter har gått tapt gjennom mekaniseringen som følgde den industrielle revolusjonen.] - Første reklamebyråer [slutten av 1800 tallet] - Art Nouveau [Rundt århundreskifte. Første internasjonal designstil. I utgangspunkt et opprør mot viktoriansk stil. Stilen er vokst ut av Arts And Crafts i england og er påvirket av orientalsk kunst, rokokko, gotiske manuskript og keltiske illuminerte manuskript. Nasjonale former, forgrenet seg videre til andre stiler.] - Ekspresjonismen [Die Brücke, Tyskland 1905. E. Kirchner, E. Nolde. Van Gogh, Gauguin, Munch] - Kubismen [Før 1. Verdenskrig. P. Picasso, G. Braque. Oppfindelse av collage rundt 1912.] - Futurismen [Opptatt av det nye. Fart, det moderen livet.] - De Stijl [1917, Nederland. Med basisprisippene fra kubismen ble det brukt enkle former, rette linjer, rektangel, primærfargene, s/h. Mondrian.]
- Konstruktivismen [Russland, rett før 1. verdenskrig. Reine geometriske former. Abstrakte gjenstander og geometriske konstruksjoner av moderne industrimaterialer som glas, metall og kartong. - Dadaismen [Anti-kunst bevegelse. Protest mot verdenskrigen, forkastelse av tradisjonelle verdier. Under 1. verdenskrig. Richard Huelsenbeck, Raoul Hausmann, George Grosz, John Heartfield. Fotomontasje. - Art Deco [Dominerende stilart mellom de to verdenskrigene. Verdensutstilling i New York i 1939.] - Surrealismen [En gruppe av dadaister dannet i 1923 en ny gruppe under ledelse av André Breton. Påvirket av Sigmund Freud interesserte de seg sterkt for drømmeverden, underbevistheten og irrasjonelle forestillinger. Salvadore Dali.] - Bauhaus [1919, Walter Gropius. Kunst- og håndverkskole i Weimar. P. Klee, W. Kandinsky, J. Itten, J. Albers, H. Bauer, m.fl.] 3.2 TRYKK 3.2.1 BOK, TIDSKRIFT - Editor - gjør det skrevne ord klar for trykk - Designer - layout ( fonter, sideformat, linje-lengde, grid,...) - Ordene må være på plass, før det kan begynnes på layouten (kapitlenes rekkefølge må være klar og markert, titler og undertitler må fremstå som konsekvent og logisk) 3.2.1.1 DESIGNERENS OPPGAVE Formidle bokens funksjon og innhold Formidle attraktivitet (boken må kjøpes i butikken, før den kan leses, dvs. den må slåss med mange andre bøker i hyllen): - Hvem kommer til å kjøpe boken - Hvordan kommer boken til å bli brukt - Hvordan blir boken solgt - Hvor lenge skal bokens "liv" vare (aktualitet,...) Tenke på ideale / optimale løsninger i forhold til innhldet som skal formidles. Men også: Ta hensyn til produksjonsmetoder: - Pris - Trykkmetoder (offset, silke, rotasjon,...) - Fontutvalg - Papir - Fargebruk - Opplaget - Format/beskjæring - Innbinding Designernes oppgave er kun å uttrykke forfatteren, ikke seg selv (Stanley Morison). Men: Personlig design-stil er uunngåelig og
nødvendig for å ikke la boken bli for kjedelig. Obs: Overdesign! Originalitet - Boken er basert på tradisjon (boken som sådan, format, papir, typografi) - Når vi skal lese en bok, forventer vi originalitet i forfatterens skrivestil, men ikke i presentasjon. - Vi ønsker ikke en gang å legge merke til typografien. Husstil - Gjenkjennbar stil på en serie bøker - Spare tid og diskusjoner - "Liker det som alltid har vært slik" - Bøker i en serie selger hverandre - Marginer (hvit området rundt tekstblokker) - Former en ramme rundt tekst el. illustrasjon for å separere den fra bakgrunnen - Estetisk hvilekontrast til det travle innholdet - Plass til notater - Plass til fingrene for å holde boken - Buffer ved skade på boken (marginen skades før teksten) - Plass å gå på ved ny innbinding - Plass til illustrasjoner - Ofte upresis beskjæring på trykkeriet - Økonomisk med små marginer (paperback,...) - "Hugh Williamson`s Method of Book Design": 1,5 : 2 : 3 : 4 ( bak : hodet : ytterkante : fot) 3.2.1.2 SIDEFORMAT OG FORM Høykant (upright) - Mest vanlig og hensiktsmessig - Ved bilder av høykant-motiver (mennesker) - Mest elegant (gyldne snitt: 34:21 eller 8.1:5 Kvadrat (square) - Meget fleksibelt format: egnet for mange typer billedformat el. illustrasjoner Lavkant (landscape) - Spesiell egnet for bilder / illustrasjoner av horisontal format (tog, krokodil, prosesjoner, elver, landskap,...) - Papirvekten sliter fortere på den korte ryggen - Vanskeligere å holde - Passer ofte ikke inn i bokhylla Grid - Orienteringshjelp, struktur - Gjenkjennelse - Helhet - Fleksibel håndtering øker spenning
3.2.1.3 ILLUSTRASJONER, BILDER - Er illustrasjonene komplette - Er de egnet til reproduksjon - Bedømme viktigheten av de enkelte illustrasjoner (størrelse, plassering, dimensjoner i forhold til hverandre, kronologisk rekkefølge, fargeekthet,...) - To bilder kan settes opp på hverandre på samme side, hvis de enten er identiske eller tydelig forskjellige I bredden. Er to bilder nesten identiske i bredden, bør de plasseres på hver sin side - Hvis bildet "ser" sterkt i en bestemt retning, bør det plasseres slik at det ser innover siden. - Bilder (hvis flere på samme side) bør plasseres slik, at de med "fjern" horisont er øverst og de med "nær" horisont ligger nede (nærmest mot betrakteren) - Farge-bilder harmoniserer ofte bedre med sats-speilet enn tunge s/h -bilder - Husk sideplan ved farge-sider (8-16-32 sider) 3.2.2 AVIS Avis-skrifter - Bør være vektigere (tykkere) enn vanlige bok-skrifter, fordi kontrasten mellom bokstavens trykkefarge (mørkegrå) og avispapiret (lysegrå) er liten. - Bør ha jevn-tykke seriffer, for å ikke bli spist opp under trykkingen. - Bør ha stor x-høgde = mindre hvit mellom linjene - Bør være litt smalere i bredden = økonomi (ikke condensed) - Sans serif i brødteksten = mindre personlig, monoton - Palatino eller Garamond = for lite autoritet - 1930: Morgenthaler Linotype introduserte i «the leibility group» (Ionic no. 5, Excelsior, Paragon, Opticon, Corona, Times R.) - Andre avis-skrifter: Century Schoolbook, Plantin, Crown,... Leading (linjeavstand) - Større ved sans serif - Større ved bolde snitt - Større ved lange linjer - Større ved stor x-høgde - Kolonner / spalter - Optimal bredde: mellom 12 og 15 picas (50.8 mm og 63.5 mm). - Venstre justert med myk bindestrek (hypenate) på høyre side - bruker ikke mer plass enn blokkjustert. Gutter space (avstand mellom kolonnene) - Avstand mellom 8pt og 1 pica Subtitler - Løser opp, holder leseren interessert. - Hvit plass: 2 tredjedeler av tekstavsnitt oppe, en tredjedel nede = skriften puster. Linjer - 0.5 pt linjer ved venstrejustert tekst, ingen linjer ved blokkjustert tekst. Initialer - Ca. 2x typestørrelse
- Enten på høgden av første linje (oppreist) eller, ved plassmangel, integrert i flere tekstlinjer (2. eller 3. linje) Quote-outs (sitater) - 3-4 linjer, noen ganger også over 2 kolumner Bildetekst - Samme størrelse som artikkel-teksten, bare bold (ikke kursiv). - Gjerne sans serif, hvis artikkelen er serif. - Venstre-justert. - Creditlinje gjerne høyre-justert og mindre. Reversert tekst - Litt større, fordi tekstens svarte bakgrunn vil gro sammen i trykket. Headlines - Primær (regulær) typografi (nyhetsoverskrifter) - Sekundær (standard) typografi (faste overskrifter, spalter,...) - Formidler avisens budskap: seriøsitet, tradisjon, autoritet, modernitet,... (også layout, typografi ellers) - Serif = mer personlig preg - Plassering: venstre-justert (øye får lettere inngang i artikkel-teksten) - Ved fler-kolumn-heading: headingen bør rekke inn i siste kolonnen. - Ved resterende hvite flater: typografien må puste. - Horisontal spacing for headlines: plassen over headingen bør være dobbelt så stor som plassen under. - Større headinger krever mer space rundt enn små. - Bold heading trenger mer space enn light heading. - Leading bør være minimal. - Bruk hovedsaklig minuskler og majuskler i headingen (bedre leslig). - Ved heading over tre eller flere linjer: unngå trappe-effekt (den andre linjen bør enten være den lengste eller den korteste av tre). - Unngå «tombstone heads» (headinger fra to artikler, som leses som én. Under- og overheads - Samme skriftfamilie som headinger, gjerne mindre og lettere. 3.3 WEB 3.3.1 OPPMERKSOMHET / STROOP-EFFEKT Noen feilvurderinger som ofte oppstår i design av en web-side: 1. Animasjoner er noe dekorativt, som fiffer opp siden 2. Internet-brukere klarer kun 3 min å konsentrere seg på et tema. 3. På ens egen hjemmeside er ALT viktig alt fremheves meget. 4. Ved fremheving av viktig informasjon gjelder ikke: Mye hjelper mye. Det som stikker frem FOR mye, kan lett bli forvekslet med en banner og blir ignorert. Det vi ser og bearbeider, er avhengig av diverse faktorer: 1. Biologisk programerte vaner (refleks-lignende reaksjoner på farger og bevegelser) 2. Lærte vaner, som leseretningen (vestlig kultur). 3. Internet-spesifiske vaner som den raske scanningen / lesningen av sidene. 4. Individuelle vaner (stenging av pop-up sider, forandring av browser-innstillinger) Konsekvens: - Des enklere strukturen på en side, - des mindre informasjon som vises samtidig, - des klarere dette understrekes visuelt,
des lettere kan nett-brukerens oppmerksomhet forutses og styres / kontrolleres. Stroop-effekt Stroop-effekten = klassiker i experimentell psychologi. Kallt etter amerikansk psycholog Stroop 1935. Demonstrasjon 1 (oppvarming, ikke Stroop-effekt): Les fargene i spaltene så fort som mulig. Ta tiden. Demonstrasjon 2: Les fargene i spaltene ikke ordene. Fort. (Her vil man trenge lengre tid, antagelig vil man også si noe feil denne forstyrrelsen er Stroop-effekten). Begrunnelse: Parallel foregående psykologiske bearbeidelsesprosesser kommer i konflikt, i interferens. Å nevne fargene er den primære prosessen som krever konsentrasjon og som må styres bevisst. Den andre prosessen - lesingen er en automatisk og underbevisst ferdighet som uvilkårlig finner sted og som ikke kan undertrykkes. En liten test til: prøv å se på det følgende ordet UTEN å lese innholdet i det... Demonstrasjon 3: umulig, eller? Som man ser: lesing skjer automatisk. Når man en gang har lært å lese, kan man ikke bestemmer seg for å ikke gjøre det lenger. Dette forholdet danner utgangspunktet for Stroop-effekten. Det er ikke nødvendig at to parallele prosesser altid danner en konflikt det er mulig å kombinere begge prosessene (som f.eks. når man kjøre bil og prater med en person i bilen samtidig. Spesiellt vanskelig i dette eksempel er den motstridene betydningen i ordene: fargen og ordet er kontraversiell og stemmer ikke overens. Demonstrasjon 4 (invers Stroop-effekt): Les ordene i spaltene ikke fargene). Fort.
Vi leser ordene fortere, selv om dem fortsatt er i konflikt med den fargen de har. Vi overstyrer fargeoppfattelsen, lesingen er såpass innøvd, at vi klarer å konsentrerer oss på det skrivne ord. Oppmerksamhet er ikke altid bevisst og kontrollert. Oppmerksomhet kan analyseres i detalj: - Intensitetslov: bråk og store impulser trekker oppmersomheten. - Unntaksloven: Ting som er anderledes enn resten trekker oppmerksomheten. - Fargeloven: Farger trekker oppmerksomheten, spesielt rene, mette, varme farger. - Dissonansloven: Ting som er uvanlig og/eller motstridende, trekker oppmerksomheten. - Tilvenningsloven: Oppmerksomhetsgraden av en impuls blir svekket når den blir gjentatt. Design-regler: - Det som er viktig, skal være tydelig og synlig - Det som er viktig, bør fremheves i forhold til det som er uviktig - Ikke for mange ting bør fremheves samtidig - Ikke ingenting bør fremheves - Det bør ikke taes i bruk forskjellige teknikker for å fremheve noe, så sant det ikke er nødvendig 3.3.2 INFORMASJONSDESIGN: HVA ER PRODUKTET Definisjon av produktet - Kunnskap / salg / underholdning / respons / eksperiment / kommunikasjon /... Definisjon av målgruppe (relatert til produkt og teknologi) - Alder / kjønn / utdanning / erfaring med PC s - Brukersted (hjem, kontor, en-bruker, forsamling,...) - Omgivelse (lydnivå, lysforhold,...) - Utstyr (plattform, gjengivelseskapasitet, fremførings-tilkoblinger) Definisjon av distribusjonsveier - Offentlig medium (internett): design eksisterer som browser-interface - Privat medium (CD-rom, harddisk): ingen design-begrensninger Prosjektplanlegging - Tid (fremdrift) - Budsjett - Ressurser (kilder, referranser, råmaterial) Organisasering av informasjon: «flowchart» (tusj, papir, tegnestifter, vegg) - Opplisting av alle kategorier - Gruppering av kategorier - Strukturering av grupperinger
3.3.3 INTERAKSJONSDESIGN: HVORDAN SKAL LØSNINGEN FUNGERE Orientering - Hvor er jeg - Hva forventer meg Navigasjon - Minimalisere «reisetid» (kortest mulig bane mellom to punkt, kort access-tid) - Minimalisere «reiseavstand» (antall lag) To tilgangsnivåer: 1. Tilgang til et helt ny tema (beslektet layout, ny innhold) 2. Tilgang innenfor et tema (kun deler av layouten er skiftet ut) Brukervennlighet (ikke noe som tilrettelegges kun en gang, men som kontrolleres fortfarende) - Unngå / fjern hindringer (uklar link-layout, omstendig / tungvind interface,...) - Maksimalisere håndterlighet (logisk gruppering av navigasjonsknapper og -menuer,...) - Gi respons / tilbakemelding (f.eks. musklikk, hvorfor skjer det ingenting,...) - Vær entydig (hva kan klikkes på, highlight,...) - Vær fleksibel (shortcuts, stoppe prosessen til enhver tid, bruk tastaturens snarveier,...) Funksjonalitet - Definere interaksjonsverktøy (ikke kun for et skjermbilde men for hele området) - Organisere linker og sammenhenger (ny vindu, pop-ups, bypassing,...) - Løse organiseringsproblemer (forskj. lengder på innhold, accesstid,...) - Kontrollere media og «custom controls» (hva skal styres av browseren, hva skal styres av egne kontrollfunksjoner?) - Gjennomført fremføring (f.eks. lydtekst, brukt på side 1, forventes også senere i menuene) Typiske funksionalitetsproblemer: - Meget forskjellige tekstmengder, teksten må scrolles, bunninformasjon dukker sent opp - For korte skjemaer (ny side - dårlig link tilbake) - Hvilken knapp / menu tilhører aktuelle teksten (tydlig layout og vekting av informasjon) - «Back» knappen blir ofte feil, når man kommer til side 2 fra en helt annen side (= menu) - Forskjellige browsere håndterer fremføringen forskjellig Video / lyd: - Hvordan starte (automatisk, kun ved behov,...) - Hvordan slutte (siste frame, still bilde,...) - Hvor mye kontroll (avbryte, starte på nytt, fryse,...) - Continuitet (lyd gjennon flere sider,...) - Kontroll verktøy (klikke på videoen, menu-bar, custom tools,...) Tekst: - Hypertekst eller image mapped (kontroll, søk,...) - Side for side eller scroll? - Tekstmengde - Hyperlinks - Søk (browserfunksjon, søkvinduer,...) «Storyboard» - Bilder - Tekst
- Beskrivelse (tekst, lyd, action) 3.3.4 PRESENTASJONSDESIGN: HVORDAN SKAL LØSNINGEN SE UT - Definisjon av den visuelle stilen - Design av system for skjerm layout - Design av struktur-elementer for alle skjermbilder (bakgrunner, vinduer, mønster, forløpninger,...) - Design av kontroll-elementer ( knapper,...) - Integrasjon av mediaelementer (bilder, video,...) - Prototyper Basisfaktorer for on-screen design (påvirker produktets kvalitet, men også dets oppførsel på brukernes plattform: hastighet, nødvendig hukommelse, diskplass): - skjermoppløsning (begrenset detailinformsjon i bilder) - farge og fargepaletter (mindre fargedyphet = raskere fremføring = mindre detailer) - bilde- og videokomprimering - konvertering av bilder, video og lyd til digital format Stil - The goal is UNITY not UNIFORMITY - Ta hensyn til visuelle elementer i andre medier - Finde et felles preg på forskjellige layoutelelementer (bilder, bakgrunnsillustrasjoner,...) Layout Vestlige lesevaner: - Scanne en side fra øverst venstre til nederst høyre - Større elementer er viktigere enn mindre - Elementer som ligger lenger oppe er viktigere enn elementer lenger nede - Leter etter linker (more to come) nederst i midten / høyre Grids Interface elementer - Bakgrunn - Vinduer - Bilder - Video - Knapper / kontrollelementer - Tekst (bitmap contra hypertekst) - Bitmap = bedre visuell kontroll - Hypertekst = lett å modifisere, mindre plasskrevende, søkbar - Lyd - Animasjon Lage prototype (dummy) - Lage område for alle planlagte skjermbilder - Importere og sette sammen elementene (tekst, bilder, video,...) - Bygge opp navigasjonslinker til og fra hvert skjermbilde - Aktivisere kontrollfunksjonene Testing av designet - Intern og ekstern testing - Forskjellige plattformer - Access - Manøvrering - Helhetspreg
Sluttprodukt - Legge ut på serveren - Tilføye meta-tags (søk) - «Kjøpe» web-navn - Utvikle vedlikeholdsrutiner (oppdatering) - Reklamering i andre medier 4.0 LOVER - Åndsverksloven - Sikrer opphavsmannen enerett til kopiering og offentliggjøring av åndsverk. - Gjelder alle typer åndsverk i alle slags kunstretninger eller kreative og skapende uttrykksformer. - Tekst eller bilder kan ikke gjengis uten lov fra opphavsmannen - Gjelder til 70 år etter døden - Marketsføringsloven - Lov fra 1973 som krever at all marketsføring skjer i sunne former. Kilder: - Design og reklame, VK 2, Einar Egeland & Tom Jacoby, 1998 - Interactivity by design, Ray Kristof & Army Satran, Adobe Press, 1995 - Fyra färger och en bild, Mattias Nyman. Software Plus, 1993 - Mediedesign, Stein Holmboe Erichsen, Gan forlag 2001
- Kommdesign.de, Dr. Thomas Wirth - Adbusters, juli/august 2002