Style and Experience (.pdf)

Style and Experience 

Gruppe 4: René, Maria, Larsen og Sophie 

Projekt til aflevering d. 30/5 2008 

1. Indledning.................................................................................................................................2 

2. Research og analyse af den givne stil....................................................................................3 

2.1 Swiss style karakteristika,.....................................................................................................3 

2.2 Om Swiss Style .....................................................................................................................3 

3. Udforskende research og analyse..........................................................................................5 

3.1 Idékatalog...........................................................................................................................5 

3.2 Swiss Style Web-site............................................................................................................7 

3.3 Målgruppe...........................................................................................................................9 

3.4 Udformning af websitet:...................................................................................................11 

3.4.1 Modernisme................................................................................................................11 

3.4.2 Designprincipperne...................................................................................................12 

3.4.3 PLUS værdierne...........................................................................................................14 

4 Project brief..............................................................................................................................16 

4.1 Kommerciel målsætning..................................................................................................16 

4.2 Teknisk målsætning...........................................................................................................16 

4.3 Sidens indhold ...................................................................................................................18 

4.3.1 Sitemap.......................................................................................................................18 

4.3.2 Storyboard ..................................................................................................................19 

4.4 Budget...............................................................................................................................25 

5 Evaluering af gruppeproces...................................................................................................26 

6 Koder vi er stolte af..................................................................................................................27 

6.1.............................................................................................................................................27 

6.2.............................................................................................................................................28 

7 Konklusion.................................................................................................................................30 

8 Litteraturliste.............................................................................................................................31 

Side 1/31




1. Indledning 

Terrariet vissenbjerg har behov for at få en ny hjemmeside. De har ønsket at få et site, som lægger 

vægt på oplevelse og viden. Dyrene skal være i fokus. Det overordnede mål med sitet er at få folk 

til at se terrariet som det rette valg af oplevelse til fx en familieudflugt. De sigter efter at ramme en 

bred målgruppe, og vi har af den årsag valgt at lave et website i den enkle modernistiske stil med 

udgangspunkt i målgruppen børnefamilier. 

Vi vil anvende PLUS-værdierne i skabelsen af et oplevelsesdesign som inkluderer den 

modernistiske stilart: Swiss Style. Til specifikation af hjemmesidens udseende og funktioner vil vi 

desuden lave et project brief. Udover selve hjemmesiden vil et idékatalog til forbedringer af selve 

besøget i terrariet blive udarbejdet. 

Da vores grupper i ”Style and Experience”-projektet er sammensat på baggrund af vore læringsstile, 

vil vi reflektere over vores gruppearbejde bl.a. på baggrund af disse. 

Til sidst i rapporten vil vi konkludere hvor vidt og hvordan vi har udviklet et koncept gennem Style 

and experience, som vil kunne skabe større interesse hos forældre og deres børn. 

Side 2/31




2. Research og analyse af den givne stil. 

2.1 Swiss style karakteristika, 

Vi har valgt at beskæftige os med den del af modernismen omtalt som Bauhause & "Swiss Style". 

Omfattende kunstnere som Jan Tsychichold, Laszlo Moholy-Nagy, Armin Hoffman, Fridolin 

Müller og Joseph Müller-Brockmann blandt andre. 

Kendetegnende ved denne/deres stil, som kan ses herunder, er: 

• Enkelthed 

• Vertikale & Horisontale linjer 

• Meget luft 

• Opdeling af rum i harmoniske dele 

• Kontrast 

• klare margener 

• Grundformerne, cirklen, firkanten og trekanten 

• Asymetri 

• Sans-serif 

• Reduktion af form til det enkelte (basic geometry) 1 

• "Less Is More" citat; Ludwig Mies van der Rohe 

2.2 Om Swiss Style 

Swiss Style er en design stil som opstod i Schweiz i 1950'erne. Pga. dens stærke bånd til de 

typografiske elementer er den senere blevet kendt som "The International Typografic Style". Stilen 

er bl.a. kendetegnet ved at der er gjort stor brug af en slags matematisk net for at holde designet rent 

og struktureret. Samt fonttyper af sans-serif typen (skrift typer uden fødder), klare marginer og 

sort/hvid fotos. Det overordnede indtryk er simpelt og rationelt, stramt struktureret, objektivt og 

harmonisk, tydeligt og seriøst/alvorligt. 2 

Stilen blev forfinet i Svejts af to design skoler, en i Basel ledet af Armin Hoffmann og Emil Ruder 

og en i Zurich under ledelse af Joseph Müller-Brockmann. De havde alle studeret på den Schweiz 

skole for design hvor der blev undervist Bauhaus principperne og Jan Tschicholds "New 

Typography". 

1 Aynsley, Jeremy. A Century of Graphic Design. pp. 60-69 

2 The History of Visual Communication - The Modernists 

Side 3/31




Laszlo Moholy-Nagy 

K VII, 1922, oil on canvas, 115.3 x 135.9 cm, Tate 

Gallery, London 3 

Jan Tschichold 

Poster fra udstillingen "Konstructivisten", 1937 4 

Jan Tschichold, Poster fra "Der 

Berufsphotograph" 1938. 5 

3 ArtLex on the Bauhaus. 

4 Merrill C. Berman Collection. 

5 Introduction (Prints and Photographs: An Illustrated Guide). 

Side 4/31




3. Udforskende research og analyse 

3.1 Idékatalog 

Terrariet har et lavt budget, og har ikke mulighed for at flytte lokaler lige foreløbig. Vi vil derfor 

med tanke på det begrænsede budget give forslag, som forholdsvis vil være billige for terrariet, og 

øge de besøgendes interesse for stedet. Hovedsageligt kunne vi godt tænke os at følesansen fik mere 

plads, da terrariet sælger en oplevelse til folk, og vi mener at de kan udnytte den plads de har bedre. 

Ofte er det lokale som besøger stedet, og for at omsætte bedre må de og appellere bedre til den 

målgruppe som vil vælge at besøge dem: Folk som ønsker hyggelige og personlige oplevelser. 

Føleboksen 

For at stimulere sanseoplevelsen ved et besøg i terrariet foreslår vi at man udnytter følesansen. 

Dette kan gøres ved at sætte en række af kasser op med forskellige ting som stammer fra de arter af 

dyr som findes i terrariet. Dette kunne bl.a. være slangeskind og skildpaddeskjolde. Kasserne skal 

være i træ og have et hul foran, hvor man kan stikke hånden ind. Indholdet i kassen kan ikke ses, så 

børnene og barnlige sjæle vil få en gætteleg ud af føle på det. Dog skal der være et låg på som kan 

åbnes, så man kan se hvad det er man har rørt ved og finde ud af om man gættede rigtigt. 

Kæledyrszoo 

Der skal være mere mulighed for at kunne røre dyr. I øjeblikket befinder der sig marsvin udenfor. 

Desværre er de næsten ikke til at nå og røre. Området udenfor kunne blive brugt bedre ved at ændre 

indhegningerne. Det ville være en ekstra spændende oplevelse hvis mindre skildpadder også var i 

små indhegninger, hvor deres naturlige miljø efter bedst mulige midler rekonstrueres. 

Indhegningerne skal være forholdsvis lave, så der er mulighed for at røre dyrene og komme ind til 

dem, uden at de kan komme ud. Der skal være opsyn af en dyrepasser, så der ikke forekommer 

nogen ulykker. Det vil virke godt for de besøgende, hvis dyrepasseren er til stede både for opsynets 

skyld, men også for at fortælle lidt om dyrene og deres adfærd. 

Fødselsdag i terrariet 

For at øge personliggørelsen yderligere, bør terrariet reklamere med at man kan få lov at holde 

børnefødselsdage oppe i det ekstra lokale de har til rådighed. Til fødselsdagsfesten kunne der være 

mulighed for at vælge mellem forskellige temaer. Temaerne kunne bl.a. være tudser, øgler, slanger 

Side 5/31




eller edderkopper. Lokalet pyntes med dug, små plastik dyr, flag og balloner. Terrariet kunne 

samarbejde med en bager til at lave kagemand, som passer til det valgte tema. 

Til begivenheden kunne terrariet lave aktiviteter som passer til temaet, deriblandt historiefortælling 

om en af dyrene. Aldersgrupperne for fødselsdagarrangementet vil være børn i alderen: 4-12 år. 

Prisen for arrangementet vil være på ca. 1500 kr. for 20 deltagende børn og 2 voksne samt en lille 

fødselsdagsgave til barnet. 

Postkort 

Terrariet har i forvejen en printer, som de printer plakater ud på og de kunne med fordel også bruge 

den til at lave speciallavede postkort til folk. I perioder vil man på terrariet kunne få taget sit billede 

mens man fx holder eller rører ved en slange. Til ens postkort kan man vælge mellem nogle sjove 

sætninger/hilser som man gerne vil have sat på sine kort, og bruge dem til at sende rundt til 

familien. 

Postkortene kunne koste ca. 150 kr. for et sæt på 10, eventuelt med yderligere mængderabat ved 

køb af flere. 

Legeplads: 

Terrariet har et flot område bagved, som de bør reklamere mere med. De kunne bygge en legeplads 

som hører til terrariet i et krybdyrstema. Et forslag til udseende ville være at lave en vippe formet 

som krokodille, nogle gynger hvor selve sædet er formet som skildpaddeskjolde, klatrestativ som er 

bundet sammen af tove, så det danner et edderkoppespind og nogle små vipper med fjedre under 

som ligner frøer. Legepladsen er noget mere krævende for budgettet, men der er sandsynligvis 

muligheder for at få tilskud fra fonde, og det vil være en god investering for at lokke 

børnefamilierne til. Til legepladsen ville det være godt med nogle bænke, hvor familien kan nyde 

madpakken og den gode udsigt. 

Side 6/31




3.2 Swiss Style Web-site 

Et godt eksempel til at vise modernistisk Swiss Style design på en hjemmeside er www.kartell.it 

Kartell er et italiensk møbelmærke, som laver møbler i plastik og indimellem stål. 6 

På forsiden ser man hurtigt mange af de stiltræk, som karakteriserer modernistisk design. 

Der er en tydelig kontrast mellem overskriften ”Kartell” og baggrunden, da de har brugt sort på 

baggrunden og signalfarven rød til overskriften(1). Kartell’s hjemmeside holder sig i farverne sort, 

hvid og rød, hvilket giver nogle rigtige gode kontraster. 

Hele den midterste del, har de efterladt helt blank(2) (sort), hvilket giver rigtig meget luft på sitet. I 

bunden af sitet, ser man klare røde linjer, som deler linkene op (3). 

6 Kartell Habitat Division. 

Side 7/31




Når man trykker sig videre, kommer man ind på hovedsiden. 

I bunden ses igen, hvordan vertikale og horisontale linjer deler de forskellige menuer op i lige store 

harmoniske felter(4). 

Gentagelseselementet ses også tydeligt, da meget af siden er statisk, på nær midtersektionen, der 

skiftes ud(5), når man trykker på menu-knapperne i bunden af sitet. 

Side 8/31




Med hensyn til grundformer, er næsten alt opdelt i firkanter. Enten i kvadrater eller i rektangler, 

hvilket gør siden dejligt overskuelig at klikke sig rundt på. 

Kartell’s møbler er ofte holdt i signalfarver, hvilket også giver en god kontrast når man ser på 

billederne af møblerne. 

3.3 Målgruppe 

Vores målgruppe er den aktive børnefamilie. Vi sigter efter dem hvis kerneværdier er fælles 

samvær og aktiviteter med mulighed for fordybelse. De skal gå op i at give deres børn et godt 

fundament ved at læse godnat historier og aktivt deltage i deres børns kreative udfoldelse. Den 

aktive børnefamilie bruger ikke mange penge på kultur som teater og biograf, til gengæld er det 

Side 9/31




heller ikke fjernsynet og det indendørs der i overvældende grad trækker, men gerne andre fælles 

oplevelser. 7 

Den modernistiske stil passer sammen med børnefamilien, da den med sin enkelhed både kan 

henvende sig til voksne og børn. Stilen skaber overblik og sætter fokus på det relevante. 

7 Boligtorvet - Aktiv børnefamilie. 

Side 10/31




3.4 Udformning af websitet: 

Hjemmesiden er lavet i en enkel stil med rene linjer hvor funktionalitet og overskuelig er formålet. 

Informationerne skal være i fokus, så der bliver lagt vægt på kendskab til og interesse for dyrene i 

terrariet. 

3.4.1 Modernisme 

Websiden er baseret på den grafiske modernisme, swiss style dette kommer til udtryk ved at vi har 

brugt kvadratet, som udgangspunkt for opsætningen. De forskellige afsnit på siden er opdelt efter 

streger, som giver ro og overblik over sitet. Den samme inddeling gælder for links. 

Sort er valgt som baggrundsfarve for at skabe elegance og klarhed over sitet. Sort er 

kontrastgivende i forhold til de få elementer sitet indeholder samt den hvide tekst. Denne kontrast er 

med til at fastholde fokus og understøtte frøen og bladrankens funktion. 

Frøen og bladranken afviger lidt fra modernismen med de bløde former, og holder sig ikke til de 

almindelige geometriske former. De har stadig bibeholdt farvekriterierne om klare og rolige farver, 

og er også med til at give kontrast. De bryder med den stramme ramme som hjemmesiden ellers er 

bygget op efter, for at give effekten af liv og stemning så sanserne pirres. Frø og bladranke kommer 

til at træde mere i kraft netop pga. hjemmesidens enkle udformningen, og budskabet kommer til at 

stå klart og tydeligt. 

Frøen, med blikket vendt ind mod siden, giver oplevelsen af at der foregår noget, og skaber 

nysgerrighed efter at læse teksten ved siden af. Bladranken minder i sit udtryk om regnskoven og 

bliver brugt til en animation hvor små dyr kravler op af den. Dette skaber en effekt af oplevelse og 

giver (forhåbentligt) lysten til at udforske. 

Typografien er den groteske skrifttype (helvetica). Kendetegnet for den groteske skrifttype er at der 

ingen kontrast mellem hår- og grundstreger og ingen seriffer er 8 . 

Der er givet god luft omkring alle elementerne og med en linjeafstand på 16 pt., har selve teksten 

også god luft mellem hver linje. Menuen er integreret i designet og er også skabt og opdelt efter 

samme modernistiske princip som resten af sitet. 

8 Grafisk skrift. Erhvervsskolernes forlag, Odense 

Side 11/31




3.4.2 Designprincipperne 

For at overholde de grundlæggende design principper skal man tage højde for følgende 9 : 

• Alignment 

• Nærhed 

• Gentagelse 

• Kontrast 

Alignment 

Der er kun brugt en for form vertikal alignment (left-alignment), for at gøre det let læseligt. 

Samtidig er der sørget for at teksten ikke står klistret ud til kanten, så den virker forstyrrende. Selve 

linjen med linkene er også venstrestillet og flugter med tekstfeltet længst til venstre. Der også taget 

højde for den horisontale alignment, så tekststykker der står ved siden af hinanden flugter den 

øverste grundlinje. Det samme gælder for opsætningen af linkene, som alle ligger på samme linje 

for at give ro og overskuelighed over siden. 

Nærhed 

Nærhed kan ses på sidens opdeling af felter. Brødtekst og overskrift har fået en samhørighed ved 

ikke at have for stor afstand mellem hinanden. Billederne der linker til galleriet er ligeledes samlet i 

deres eget felt, og ligger tæt på hinanden så man kan se de har noget tilfælles. Links til undersiderne 

er af samme grund samlet på en linje, så der kan ses at de har en funktion sammen. På den måde 

bliver siden organiseret, og man har lettere ved at danne overblik. 

Gentagelse 

Gentagelsen er bevaret på sitet, da kun tekst og billeder inde i midten ændrer sig, når man går til 

undersiderne, og man stadig vil føle at man befinder sig på den samme side. 

Kontrast 

Der er skabt forskellige slags kontraster mellem elementerne, så graden af vigtighed vægtes 

forskelligt. Elementerne må nemlig ikke "slås" om at få lige meget opmærksomhed, da det vil blive 

9 Williams, R., & Tollett, J. The non-designer's Web book: an easy guide to creating, designing, and posting your own 

Web site. pp. 114-127. 

Side 12/31




uoverskueligt for den besøgende på sitet. Det mest dominerede på siden er frøen som skaber det 

grundlæggende indtryk af nysgerrig og liv. Derefter kommer billederne inde på selve sitet samt 

bladranken, som underbygger det samme som frøen. Derefter vil man lægge mærke til overskrifter 

og billederne med galleri link. Til sidst vil man se brødtekst og links. Overskrifter er gjort en del 

større end brødteksten. Kontrasten skal nemlig være lidt "voldsom for at have en ordentlig 

virkning.” 

Side 13/31




3.4.3 PLUS værdierne 

Playability 

Frøens ”Vidste du…” lægger op til den leg som vi forsøger at trække brugerne med i på vores site. 

Den undervisende leg. Denne sektion er i især velegnet for forældrene at læse op for deres børn. 

Oplysninger vil være forundrende, og bl.a. fortælle om hvor farlige dyrene er. Dette vil både vække 

voksnes og børns nysgerrighed. Det samme kommer frem ved brugen af sitets leksikon over dyrene, 

hvor brugeren selv kan vælge mellem at se billeder, høre lyden fra dyret eller se en video med det 

pågældende dyr. Vores gallerifunktion genererer også playability idet man selv vælger det tema af 

dyr man gerne vil se om. Galleriet kører af sig selv, men brugeren kan samtidig sidde og styre det 

ved at klikke frem og tilbage mellem billederne. Vi kunne godt tænke os i længden at udvide 

galleriet med musik eller lyde, der yderligere ville skabe en stemning af et samlet sanseindtryk. 

Likeability 

Likeability vil lægge i den overskuelige måde siden er sat op på, hvor man ikke skal "scrolle" i 

teksten for at læse det næste del, men ved et tryk på pilen i bunden blot kan klikke videre til det 

næste tekstfelt. Hjemmesiden skaber desuden variation ved udover den almindelige læsning også at 

have små stykker af information i "Vidste du..." sektionen. Frøen som kravler ud fra kanten virker 

helt levende, og giver også siden et løft. 

De små gallerieksempler yderst til venstre fungerer, som appetitvækkere man kan klikke på og blive 

ført hen til galleriet. Dette fungerer som en god adspredelse fra læsningen. Vi ville gerne have 

udvidet kontaksiden med en kalenderfunktion, som synkroniserede med terrariets egen kalender, så 

undervisere kunne se, hvornår der var tid. 

Usabillity 

Vi lægger stor vægt på usability. Linkmenuen er tilgængelig på alle siderne, og linkene har logiske 

navne, så brugeren ikke er i tvivl om hvad indholdet på siderne vil være. Linkene er lavet som enkel 

tekst for at der ikke kan herske nogen tvivl om hvad det er. Derudover er sitet lavet sådan at man 

ikke skal "scrolle" på siden for at læse det næste. Der er lavet pile under tekstfelterne, så man blot 

kan klikke frem og tilbage på siden. Således føler den besøgende ikke at man forlader siden og gør 

Side 14/31




det samtidig til en lettere oplevelse for brugeren at læse det, da man ikke kan holde til at læse 

længere tekststykker ad gangen. 10 

Linkene vil skifte farve hvis man går ind på dem, så man altid er klar over hvilken side man 

befinder sig på. Vi har udover linkmenuen også billedlink ude i siden, så man kan blive ført direkte 

hen på en gallerivisning. Gallerivisningen vil poppe op i forgrunden, hvor brugeren enten kan lade 

det lave et slideshow automatisk eller selv styre det, og lukke for vinduet når de ikke ønsker at se 

mere. Når gallerivisningen lukkes vil man stadig befinde sig på den samme side som da man 

aktiverede galleriet, og brugeren skal derfor ikke hen og lede efter det de ellers var i gang med før 

de lukkede galleriet op. 

Sociability 

På siden er der ikke stor mulighed for at socialisere sig. Det nærmeste vi kommer sociability, er 

mailfunktionen hvor man kan kontakte Terrariet. Vi har lavet siden, så det skulle være muligt at 

lade sociability’en udfolde sig på den anden side af skærmen, mellem forældre og børn. 

Vi har lagt størst vægt på PLUS-værdierne likeability og usabillity, da brugergruppen vil lægge 

vægt på det gode indhold og tydelig information. De vil gerne have et enkelt overblik, fordi man 

som forældre har meget at se til når man skal have både jobbet og familien til at fungere. Det vil 

derfor være vigtigt for dem at de hurtigt og klart kan danne overblik, og finde ud af om det er noget 

de kunne være interesseret i sammen med deres børn, så de kan bruge mere tid på at nyde fritiden 

sammen med børnene. 

10 Freidlein, Ashley.(2001). Web Project Managemet – Delivering Successful Commercial Web Sites. 

Side 15/31




4 Project brief 

Efter et møde med de IT-ansvarlige fra Terrariet i Vissenbjerg, har vi, ud fra de svar og 

informationer vi har fået, kunnet opstille et forslag til en løsning på et site som vi mener, kommer 

klientens ønsker i møde. 

4.1 Kommerciel målsætning 

Den kommercielle målsætning med siden er først og fremmest at tiltrække flere kunder. Vi ved fra 

møde med klienten at de to grupper der primært kommer i terrariet er skoleklasser og børnefamilier. 

Da et skoleklassebesøg oftest er en, på forhånd, planlagt del af undervisningen og en klasse sjældent 

vil komme gentagne gange, har vi valgt at fokusere på børnefamilien. 

Sitet skal for børnefamiler være noget som forælder og barn vil besøge sammen. Barnet, som er 

visuelt orienteret og ofte ikke kan læse, vil fokusere på billederne, mens forælderen kan læse højt. 

Dette vil gøre barnet videbegærlig og interesseret i de forskellige dyr. Siden er altså ment som en 

forsmag på hvad forældre og børn i samvær kan opleve på terrariet, samt en uddannende side som 

viser at terrariet er et seriøst sted med plads til fordybelse og samvær, frem for underholdning for 

underholdningens skyld. I disse tider hvor ord som kvalitetstid og fælles oplevelser forældre og 

børn imellem er ofte brugt, mener vi at målgruppen er valgt med rette. 11 

Terrariet har udtrykt ønske om nogle tiltag der vil lette samarbejdet med skolerne, så tid og penge 

spares. Derfor har vi yderligere valgt at gøre undervisningsmateriale tilgængeligt på siden (lavet 

som et pdf-eksempel). 

4.2 Teknisk målsætning 

Bl.a. fordi Terrariet ikke som sådan råder over et teknisk team og ikke har de store, dyre 

programpakker og løsninger til rådighed, har vi valgt at sitet skal laves i xhtml. Det giver 

medarbejderne mulighed for selv at gå ind hurtigt og ændre nogle ting eller tekst, uden at bruge for 

meget tid, så siden løbende kan være opdateret. 

Vi har valgt at lave siden i et 900x600 format så den kan ses af alle også så brugere med bærbare 

computere ikke bliver nødt til at scrolle for at få det hele med. Desuden vil vi forsøge at gøre siden 

11 24.dk. 

Børn&Unge - fagblad for pædagoger og klubfolk organiseret i BUPL. 

Guldguiden-ver2.pdf (application/pdf Objekt). 

Side 16/31




så let som muligt, da der skal være fokus på indholdet og ikke alle mulige features uden noget 

egentligt formål. 

Browser valg 

Ud fra statistikker på w3schools.com 12 , kan vi konstatere at de oftest benyttede browsere er Internet 

Explorer (IE), som bliver benyttet af godt 50% af internetbrugerne, og Firefox med knap 40 %: 

Grundet disse tal vil vi optimere vores site til først og fremmest at virke med IE og Firefox. 

Krav til computer 

Da der vil være Flash elementer og PDF dokumenter på vores site vil det kræve at Adobe reader (er 

kun et krav hvis man vil se lærermateriale) og Flash Player 9 er installeret. 

Dette kræver som minimum 

for PC: Intel Pentium II 450MHz, 128MB RAM . 

For Macintosh; PowerPC G3 500MHz, 128MB RAM eller 

Intel Core Duo 1.33Ghz, 128MB RAM 13 

12 Browser Statistics. 

13 Adobe - Adobe Flash Player : System Requirements. 

Side 17/31




4.3 Sidens indhold 

4.3.1 Sitemap 

Når man kommer ind på Vissenbjerg Terrariets hjemmeside, virker det umiddelbart uoverskueligt. 

Især fordi man skal scrolle ned for at se links til alle undersiderne. Endvidere linkes der 2 gange til 

de samme sider, både som billeder inde på midten af siden og som tekstlinks i venstre side. Der 

også opstå forvirring, da sidderne der er linket til ikke altid findes (endnu). Når man kommer ind på 

undersider til undersiderne, fx de enkelte dyr under ”Dyrene i terrariet” er der heller ikke linket 

tilbage til hovedsiderne, hvilket må siges at være uheldigt. 

Vi har bestræbt os på at gøre navigationen så enkel som muligt (som ses i vores sitemap forneden 

(Figur 1). Det er altid muligt at komme på de 7 ”øverste” undersider samt forsiden, lige meget hvor 

på siden man befinder sig. 

Figur1 

Side 18/31




4.3.2 Storyboard 

Forsiden (Figur 2) skal give et hurtigt overblik over hvad der er adgang til. Når man kommer ind på 

siden, vil der afspilles en lyd, som giver én fornemmelsen af, at være i en regnskov. På overskuelig 

vis står linkene til undersiderne forneden på siden. Til venstre er der billeder af dyr, som linker 

videre til galleri-undersiden. I en tekstbox til højre for billederne, vil der endvidere være en ”vidste 

du”-feature som vil skifte information hver gang man skifter side. Hovedteksten er centreret på 

siden (herefter hovedtekstfeltet) og byder kort velkommen til terrariets hjemmeside. Som 

dekoration er der en bladranke i højre side og en grøn træfrø som kigger ind på ”vidste du”- boxen. 

Forsidens design vil være gennemgående på alle sider, for at skabe ro og overblik for brugeren. 

Forsiden skal linke videre til undersiderne: Historie, Kontakt, Undervisning, Leksikon, Galleri, 

Kvalitetstid og Nyheder. 

Historie 

Figur2 

Side 19/31




Undersiden ”Historie” vil lægge sig op ad forsiden i design. Hovedtekst og illustration vil blot være 

udskiftet. Terrariets historie skal opridses på denne side. 

Nyheder 

Lige som ”Historie” vil ”Nyheder” ligne hovedsiden. Her skal der være mulighed for at se nye og 

gamle nyheder. 

Familietid 

”Familiehygge” vil beskrive de forskellige muligheder for børnefamilier som terrariet kan byde på. 

Kontakt 

I ”Kontakt” (Figur3) findes adressen på Vissenbjerg Terrarium til venstre på siden hvor, ”Vidste 

Du”- boxen befinder sig på forsiden. Endvidere er der en mailfunktion, hvor man kan skrive en mail 

Figur3 

Side 20/31




direkte til Terrariet fra siden. Boksene ”Afsender navn”, ”Afsender e-mail” og selve mailboxen, 

som er placeret i hovedtekst-feltet, skal udfyldes af afsenderen, så terrariet kan svare på afsenderens 

mail. 

Undervisning 

På denne underside (jf. Figur4) er der i hovedteksten en beskrivelse af Terrariets tilbud til 

skoleklasser. Ved klik på den lille kalender som er synkroniseret med Terrariets, øverst i højre 

hjørne af hovedtekst-feltet, kommer man ind på en forstørret kalender, hvor det vil være muligt at se 

hvornår der er ledige tider på terrariet. Neden for hovedteksten er der et link til under-undersiden 

”Undervisningsmateriale”. 

Figur4 

Side 21/31




Undervisningsmateriale 

Hovedtekstfeltet på denne underside (jf. figur5) indeholder en kort beskrivelse af det 

undervisningsmateriale som er tilgængeligt, samt, til højre, billeder som linker til materialet i PDFform. 

Figur5 

Side 22/31




Leksikon 

Figur6 illustrerer hvordan det ser ud når man kommer ind på siden med det ønskede dyr. I rammen 

til højre, er det muligt at se både et billede samt video af dyret. Der kan også afspilles lyd. Disse 

funktioner udløses ved at trykke på knapperne under rammen. Til venstre for og evt. under billedet 

kan man læse fakta om valgte dyr. Hvis der er et galleri med det dyr man har søgt på, vil siden også 

linke til det. 

Figur6 

Side 23/31




Gallerier 

Ved at klikke på billederne til venstre på siden, kommer man som nævnt til siden med gallerier 

(Figur7). På samme måde som i ”Undervisningsmateriale”, indeholder hovedtekstfeltet billeder der 

linker videre. Ved klik på et galleri, vil siden fade ud og galleriet vil træde frem i forgrunden. Her 

slider billederne langsomt forbi og det er muligt at klikke på de enkelte billeder for at se et større. 

For at komme tilbage til siden igen, skal man ganske simpel lukke ned for funktionen. 

Figur7 

Side 24/31




4.4 Budget 

Dage (1 dag = 8 timer) Pris pr. time (Kroner m. moms) Personer 

Udarbejdelse af websitet 10 dage 250,- 4 person 

Hosting Årsbeløb 75,-, pr. år Ingen personer 

I alt: 80075,- 

Side 25/31




5 Evaluering af gruppeproces 

I gruppen har vi en reflektor/teoretiker, en reflektor, en aktivist og en teoretiker/aktivist. Som 

gruppe betyder det at vi arbejder forskelligt med tingene og supplerer hinanden godt. Vi er en meget 

rolig gruppe, (næsten for rolig), men arbejder godt sammen og holder vores plan. Vi er gode til at 

tale sammen og overholde vores aftaler og deadlines. 

Fordelingen af arbejdsopgaver er foregået løbende og vi ved hele tiden hvad de andre er i færd med, 

hvilket giver tryghed og gør at vi koncentrerer os godt om det vi sidder med. 

Under forløbet med opgaven, har vi hjulpet hinanden med de forskellige opgaver, såsom at finde 

relevant materiale osv. Vi har fra start haft det mål at lave et godt produkt og er derfor alle 

ambitiøse omkring hele projektet. 

Vores gruppeleder er aktivist. Hun går i gang med det samme og finder ud af tingene hen ad vejen, 

hun er struktureret og er en god leder med overblik. 

Gruppens teoretiker går også i gang med det samme, hun vil gerne have styr på gruppens planer og 

gruppens andre medlemmer, hun fungerer godt i gruppesammenhænge, men er også glad for at 

arbejde selvstændigt uden at skulle tage hensyn til andre. 

De to reflektorer i gruppen har lavet en del arbejde sammen, fundet oplysninger, billeder, skrevet 

tekst, designet, analyseret osv. Som teoretikeren har udtalt, arbejder de: "Langsomt, men sikkert". 

Der er en væsentlig forskel på de to reflektorer mht. overblik. Den ene stoler på de andre har styr på 

sagerne og den anden følger nøje med i hvordan processen skrider frem og hvordan planerne i 

gruppen overholdes. 

Vi er alt i alt en meget homogen gruppe trods forskelle. Det at de fleste i gruppen ligger stor vægt 

på overblik og samarbejde samt det at vi alle er rolige og snakker om tingene er et stort plus. 

Side 26/31




6 Koder vi er stolte af 

6.1 

Denne kode er en del af gallerisiden, og har til formål at hente billederne som skal virke i galleriet. 

Billederne vises i et javascript, som ved at klikke på et billede aktiveres, og starter et slideshow. 

Normalt skal alle billeder vises på siden for at javascriptet kan lave slideshow med dem. Derfor har 

jeg brugt php til at få den til at hente billederne fra en mappe i stedet for. Billederne er desuden delt 

op i temaer, og koden gør derfor også at den henter de billeder som jeg har bestemt skal være en del 

af temaet. Eksemplet viser hvordan jeg har gjort med temaet slanger. Koden er blevet valgt som 

eksempel, fordi den viser hvordan man løser noget mere komplekst, og hvordan man integrere både 

html og php og implementere det til et javascript. 

1 

2 

3 

4 

1) Først laves en reference til hvor den skal gå hen og hente billedet den skal starte med i 

slideshowet. Derefter linker jeg til mit javascript, og giver den en true-værdi om at den gerne må 

”slide” automatisk, når jeg starter slideshowet. Bagefter får den nogle værdier om at den skal 

være i stand til at kunne blive trykket frem og tilbage. 

2) Dernæst laves selve billedelinket, som aktiverer billedgalleriet når man trykker på den. 

Efterfølgende går jeg ind i php og laver en while-løkke for at få den til at tage de 10 billeder der 

er af slangerne. Jeg bruger $i som variabel og fortæller den at den må være mindre eller lig med 

10. 

3) Inde i selve variablen skriver $i++ for at fortælle den at den skal øges sig i værdi. 

Side 27/31




4) Herefter skriver jeg echo for at skrive linket ud, om hvor den skal hente fra, og tilføjer $i for at 

vise at er alle de tal fra løkken den må hente. Mappen jeg henter fra er billeder navngivet med 

tal, og $i gør at den henter det antal billeder som jeg har sat den til i variablen. 

6.2 

55: Hvad sker der når man slipper musen over ”lyd”-knappen: 

57: Hvis indholdet i containeren ikke nu er ”sound.swf”. 

59: Så skal indholdet være ”sound.swf”. 

60: Det skal vi bruge funktionerne switchContent og loadSWFFile til. 

64: Funktionen switchContent: 

66: Fjern indholdet i containeren, 

70: Funktionen LoadSWFFile: 

73: Vi skal komme en ny holder til indholdet ind, der hedder ”ldr” 

74: Det vi skal hente ind er det den knap der er blevet trykket på har bedt om (”sound.swf”) 

Side 28/31




75: Den ligger i flashmappen under sit navn. 

76: Vi har brug for en ny URLRequest til at loade filen 

77: Holderen modtager sit indhold 

79: Holderen bliver sat i containeren på siden ved hjælp af .addChild. 

= der en blevet trykket på lydknappen på siden og lyden afspilles. 

Koden er valgt, fordi det faktisk er gået op for kodeskriveren hvordan det hele hænger sammen og 

det var lidt af en åbenbaring. 

Side 29/31




7 Konklusion 

Vi har lagt vægt på udvikle et seriøst site som afspejler det læringsrige miljø, som terrariet udstråler. 

Især har vi lagt vægt på PLUS-værdierne usabilty og likeability; Sitet er meget overskueligt og vi 

har lagt vægt på at skabe nysgerrighed og en legende tilgang til læring jf. ”Vidste du” og 

”Leksikonet”. Endvidere er dyrene i terrariet en flot feature i sig selv. Hvilket især kommer til 

udtryk i galleriet. 

Udover hjemmesiden har vi fundet ud af, at terrariet bør fokusere på yderligere tiltag. En legeplads 

og mere børnevenlige omgivelser, samt de sanseoplevelser terrariet selv efterlyser, fx gennem en 

følekasse, som beskrevet i idékataloget, ville være et stort plus. 

Over de 2 uger vi har arbejdet med Style & Experince, har vi gjort os mange erfaringer. Vi har lært 

en del om kodning både i xhtml og Actionscript 3. Der er både gået lys op for os, mens en del også 

blev midlertidigt slukket. 

Hvorom alting er, har vi i projektets forløb lært meget, som vi kan tage med os videre. Samtidig har 

vi lavet forslag til et site, som vi mener Vissenbjerg terrarium kan være godt tjent med. 

Side 30/31




8 Litteraturliste 

24.dk. . Retrieved May 28, 2008, from http://24.dk/article.jsp?articleId=527. 

Aynsley, Jeremy. 2001. A Century of Graphic Design. London. Octopus Publishing Group Limited 

Adobe - Adobe Flash Player : System Requirements. . Retrieved May 28, 2008, from 

http://www.adobe.com/products/flashplayer/productinfo/systemreqs/. 

ArtLex on the Bauhaus. . Retrieved May 28, 2008, from 

http://www.artlex.com/ArtLex/b/bauhaus.html. 

Bilag1, Grafisk skrift. Odense. Erhvervsskolernes forlag. 

Boligtorvet - Aktiv børnefamilie. . Retrieved May 28, 2008, from 

http://www.boligtorvet.dk/Home/Inspiration/Artikel.aspx?articleid=884D1222-AE1F-416B- 

BFE7-2CD83528C43A. 

Browser Statistics. . Retrieved May 28, 2008, from 

http://www.w3schools.com/browsers/browsers_stats.asp. 

Børn&Unge - fagblad for pædagoger og klubfolk organiseret i BUPL. . Retrieved May 28, 2008, 

from 

http://www.bupl.dk/internet/BoernogUnge.nsf/0/F4845A9080E2814FC1256D480040BF59? 

opendocument. 

Freidlein, Ashley. 2001. Web Project Managemet – Delivering Successful Commercial Web Sites. 

‘ San Francisco. Morgan Kaufmann Publishers 

Guldguiden-ver2.pdf (application/pdf Objekt). . Retrieved May 28, 2008, from 

http://www.minff.dk/fileadmin/template/minffdk/pdf/Konferencer/Guldguiden-ver2.pdf. 

Introduction (Prints and Photographs: An Illustrated Guide). . Retrieved May 28, 2008, from 

http://www.loc.gov/rr/print/guide/intro.html. 

Kartell Habitat Division. . Retrieved May 28, 2008, from http://www.kartell.it/. 

Merrill C. Berman Collection. . Retrieved May 28, 2008, from 

http://www.mcbcollection.com/pages/tschic11.html. 

The History of Visual Communication - The Modernists. . Retrieved May 28, 2008, from 

http://www.citrinitas.com/history_of_viscom/modernists.html. 

Williams, R., & John Tollett. 2006. The non-designer's Web book: an easy guide to creating, 

designing, and posting your own Web site, third Edition. Berkeley, CA. Peachpit Press. 

Side 31/31

Style and Experience (.pdf)

Transform your PDFs into Flipbooks and boost your revenue!

Delete template?

Save as template ?