vissenbjerg terrarium eksamensprojekt
DESCRIPTION
Projektrapport fra Helle og BettinaTRANSCRIPT
![Page 1: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/1.jpg)
![Page 2: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/2.jpg)
Indholdsfortegnelse
Indledning 1
-Metode 1
Foranalyse 2
-Dataindsamling 2
-Tidsplan 2
-Projektbeskrivelse 2
Undersøgelsestrin 3
-Casebeskrivelse 3
-Testafeksisterendewebsite 3
-Målgruppe 6
-Markedsføring 7
-Ideudvikling 7
Designtrin 7
-Informationsdesign 7
-Interaktionsdesign 7
-Præsentationsdesign 8
-Grafiske virkemidler 8
-Komposition 8
-Logo 9
Designparametre 9
-Form 9
-Typografi 9
-Illustration 10
-Farver 10
Realiseringstrin 10
Konklusion 11
Bilag1:Tidsplan 12
Bilag2:Screendropsafdeteksisterendewebsite 13
Bilag3:Flowchartfordeteksisterendewebsite 16
Bilag4:Mindmapfordetnyewebsite 17
Bilag5:Flowchartfordetnyewebsite 19
Bilag 6: Diverse håndskitser for det nye website 20
Bilag7:Storyboardfordetnyewebsite 22
Bilag 8: Endeligt design af det nye website 23
Bilag9:Designprocesfordetnyelogo 24
Bilag 10: Designmanual 25
Bilag11:Screendropsafdetnyewebsite 26
![Page 3: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/3.jpg)
Indledning
Efter 6 ugers kursus i ’Multimedieteknologi og interaktionsdesign’ på Lillebælt Erhvervsakademi står nærværende opgave, som det endelige resultat af vores arbejde. På dette kursus er vi blevet introduceret forenheltnyverdenafHTML/CSSkoderogdesignafwebsitesm.m.,ogvieridengradblevetudfordretpåvores tekniske færdigheder. Kurset har bl.a. givet os kendskab til opsætning af brugervenlige CMS grænsef-lader, udvikling af websites og ikke mindst viden om grafisk design og virkemidler. Som afslutning på kurset har vi gennemført et projektarbejde, hvor vi er blevet givet muligheden for at demonstrere vores nytileg-nedekompetencer.
ProjektarbejdeterudvikletisamarbejdemellemgruppenogvoreskundeVissenbjergTerrarium,somharindvilligetiatværemedieksamensprojektet.VissenbjergTerrariumdeltagerunderforudsætningaf,atvioverholder krav om fuld fortrolighed af de oplyste informationer, og at vi ikke anvender billeder fra den eksisterende website til offentliggørelse, da terrariets webmaster har copyright på disse.Detskaldognævnes,atVissenbjergTerrariumikkeharudtryktønskeometnytwebsite,menderimoderyderst tilfredse, med det de har på nuværende tidspunkt. Formålet med denne eksamensopgave er der-for at udvikle et website, som muligvis kan inspirere Vissenbjerg Terrarium til at overveje et nyt design og struktur af deres website, som måske i højere grad kan skabe interaktion med deres interessenter.
Metode
Vi har valgt at anvende HOME-modellen1 som metode for vores opgave. HOME-modellen er en åben og helhedsorienteretmetode,derforløbergennem4udviklingsprocesser.Detværesig:forundersøgelse,undersøgelsestrin, design og realisering. De fire trin skaber en naturlig struktur for arbejdsprocessen. En af modellens styrker er dens åbenhed, som gør det muligt at tilpasse og anvende modellen i forskellige situ-ationer. Det kan være svært at forudsige, hvilke faktorer, der gør sig gældende for den specifikke kunde, og dermed giver HOME-modellen mulighed for at skabe et individuelt projektarbejde. Desuden er der fokus på at skabe helhed og kontinuitet for det færdige produkt, da hvert udviklingstrin fortløbende evalueres.
Under projektarbejdet fokuserer HOME-modellen på, at arbejdet fordeles på to forskellige aktiviteter. Detværesigprodukt,deromhandlerundersøgelse,designogrealiseringsamtproces,deromhandlerplanlægning,vurderingogregulering.Detervoresoverbevisning,atenløbendekorresponderingmellemprodukt- og procesaktiviteterne skaber de optimale rammer for at tilpasse og udvikle et samlet produkt. Dog skal det nævnes, at vi konstant har arbejdet sideløbende på både produkt og processiden i HOME-modellens fire udviklingstrin, og at det til tider kan være svært at adskille arbejdsprocesserne, da de er gensidigt afhængige.
1HOME står for Holistic, Open Multimedia development method 1/31
![Page 4: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/4.jpg)
Foranalyse
Dataindsamling
Som HOME-modellen angiver, indledes projektarbejde med en foranalyse, hvor vi forsøger at få et overblik over projektets forudsætninger. Først og fremmest skulle vi indsamle den nødvendige information for at kunneløseopgavenforkunden.Vistartedemedatundersøgeterrarietshjemmesideforatfåetindtrykaf,hvilket websitelayout de pt. er i besiddelse af, samt hvilke informationer vi kunne trække fra hjemmesiden. Dernæst udarbejdede vi spørgsmål til kunden om de informationer, vi havde brug for i udarbejdelse af et nyt website. Det være sig bl.a. info om målgruppe, samarbejdspartnere, holdning til nuværende website m.m.Torsdag den 26. maj 2011 tog vi på kundebesøg for at mødes med Klaus Dræby, der er direktør for terrariet. Han gav os en rundvisning på stedet og fortalte derefter detaljeret om terrariets organisation og daglige udfordringer. Vi fik mulighed for at stille spørgsmål og fik generelt en god fornemmelse af hvad det er for en kunde,viharmedatgøre.
Tidsplan
Foranalysen har også til hensigt at skabe et overblik over, hvor meget tid vi skal bruge på de forskellige udviklingstrin. Derfor har vi udarbejdet en tidsplan, som giver os en ide om, hvor meget tid vi skal bruge på projektet og evt. faktureres for. Tidsplanen er lavet bagudrettet. Dvs. ud fra den arbejdstid, vi har til rådighed,harvifordeltarbejdsopgavernepådeenkeltedagemedklarstrukturfor,hvilkeopgaverviskalløse dag for dag jf. bilag 1 ’Tidsplan’. Såfremt terrariet vælger at købe vores websitedesign, kan vi således dokumentere vores tidsforbrug og dermed fastsætte pris for vores arbejde.
Projektbeskrivelse
ProjektopgavenlyderpåatdesigneetwebsiteforVissenbjergTerrarium,somskalbeståaf3-4sider.Viudvikler en CMS brugergrænseflade i et Wordpress tema, som herefter implementeres i vores Wampserver for at kunne sætte sitet op i en browser. Slutteligt uploades projektrapporten på www.issuu.com i gruppen ’Multimediedesign og interaktionsteknologi 5411’, så den kan downloades for underviser og censor. Formålet med opgaven er at designe et website, som kan være inspiration til nytænkning af terrariets eksisterende website. Vi mener, at hjemmesiden i den grad er forældet og trænger til både nyt design og en større omstrukturering. Dog er terrariet af en anden overbevisning. De er meget tilfredse med deres hjemmeside og hævder at få yderst positiv respons fra deres brugere. Udfordringen bliver derfor at skabe et inspirerende website, som kan overbevise direktør Klaus Dræby om at etablere en mere nutidig, brugervenlig og salgsfremmende digital præsentation af Vissenbjerg Terrarium.
2/31
![Page 5: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/5.jpg)
Undersøgelsestrin
Casebeskrivelse
Vissenbjerg Terrarium er et mindre terrarium, der ligger godt 15 km fra Odense. Terrariet blev stiftet i 1973 på initiativ af Carl Aage Gram. Terrariets speciale er krybdyr og padder, og på hjemmesiden præsenterer terrariet sig som en ’specialzoo med en af Skandinaviens største samling af krybdyr, padder, insekter m.m.’. I dag ledes terrariet af direktør Klaus Dræby, som tiltrådte posten i 1992. Under sig har han 4-6 fastansatte plusnogleløsarbejdere.Klauserenstærkpioneråndindenforsitfelt.Hanharenklarmissionomatformidledyrslivinaturen.Derforerdetvæsentligtforhamatskabedemestnaturligeomgivelserforter-rarietsdyr.
Terrariets opgaver er mangeartede, og de arbejder ikke kun på lokalt plan. De bliver ofte kontaktet af private personer, som efterspørger gode råd om pasning og pleje af deres kæledyr.. Desuden har terrariet indgået en 24-7 aftale med politiet i Danmark om, at de gerne hjælper til med indfangelse af løsfarende dyr, som herefter indleveres som hittegods. I årenes løb har terrariet endvidere gjort sig særligt bemærket i internationale sammenhænge ved professionelt opdræt. De har bl.a. indgået samarbejde med Jersey Zoo i Polen,hvordevidendeleromdennyesteudviklingafopdræt.
For et års tid siden var terrariet lukningstruet og tæt på at dreje nøglen om efter 28 år. Terrariet har på intet tidspunkt modtaget støtte fra staten, men modtager dog hjælp fra Assens Kommune til de daglige driftsomkostninger. Dog valgte Assens Kommune sidste år at nedlægge den skoletjeneste, som hvert år indbringer 300.000 kr. til terrariet. Da Terrariet oprettede en vennegruppe på Facebook, fik de 12.000 tilmeldte fans, som efterfølgende donerede i alt 250.000 kr. til terrariet. Det var nok til, at de kunne fort-sætte endnu et år. Pt. er terrariets økonomi dog forsat ustabil, og fremtiden ser usikker ud.
TestafeksisterendewebsiteVissenbjerg Terrariums nuværende website findes på Websitet er blevet testet af projektgruppen. Vi har i nedenstående påpeget de relevante parametre, som vi finder problematiske. I bilag 2 findes samlede screen drops af de forskellige sider på websitet, som vi henviser til.
WrapperNårviklikkerindpåterrarietshjemmeside,kommerviindpåenside,derbyderbrugerenvelkommen.Der er tydeligvis problemer med indholdet i wrapperen idet det hele floater til venstre og således ikke er centreret på sitet. Det giver et ubalanceret visuelt indtryk jf. bilag 2.1 ’Velkomstside’. Når vi efterfølgende klikker rundt på de forskellige sider, centreres indholdet pludselig på siden ’Litteratur’ jf. bilag 2.4 ’Litteratur’.
Der er således ingen fast struktur, og dette er med til at forvirre læseren, og giver et samlet uprofessionelt indtrykafwebsitet.
3/31
![Page 6: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/6.jpg)
Farver
De valgte farver til hjemmesiden synes meget mørke og kolde. Velkomstsiden består af et baggrundsbillede medetclose-upbilledeafenslangeiblåogbrun/lillanuancer.
Baggrunden er sort. Jf. bilag 2 ’velkomst side’.
Sort #000
Mørkeblå #1C489F
Brun/lilla#9D666C
Medundtagelseafvelkomstsidenerdervalgtenfastbaggrundsfarveforhelesitet.
Mørkeblå #00446B
Sammenlagtsynesvalgaffarveratgivehjemmesidenetnogetkedeligtogdystertudtryk.Deteruheldigt,atdenmørkeblåbaggrundsfarvedominerersåmegetsomdengør.Visueltgiverdetenforvirrendeogrodetoplevelse for brugeren. Samtidig er brødtekst og alle overskrifter gjort hvide. Det får teksten til at stå frem fra baggrunden, men nedsænker samtidig brugeres læsehastighed pga. negativ skrift på en mørk baggrund jf. bilag 2.2 ’Forside’.
Header
Headeren består af et close-up billede af krybdyrs-struktur, heri indgår der hvid tekst og terrariets firben. Teksten er igen hvid på mørk baggrund, hvilket gøtr det svært at læse. Efter vores mening egner baggrundsbilledet sig ikke som en optimalt fungerende header, da valg af farver og mønstre ikke er i balance f.eks. er firbenet et meget primitivt animeret billede sat op på et foto; to skarpe kontraster der slet ikkematcher.
Vi antager, at terrariet ønsker firbenet som et kendetegn, da det går igen på både hjemmeside og brochure, men vi synes ikke, at det kan bruges som et logo hvis dette var hensigten. Vi har derfor designet et muligt logo jf. afsnit ’logo’ side 10.
Genereltfremstårheaderenforstyrrendeoguroligforøjet,ogtageraltformegetopmærksomhedfrarestenafsitet.
4/31
![Page 7: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/7.jpg)
Komposition
Forsidens komposition består af en header og 2 kolonner. Der er ingen navigationsbar eller footer. Den venstrekolonneindeholderenoversigtoverdesider,sombrugerenkanklikkeindpå.Dogforsvinderdenvenstre kolonne, når vi klikker ind på siderne ’Dyrene i terrariet’ og ’Galleri’. Hele navigationsstrukturen synes ikke særligt velfungerende jf. bilag 2.3 ’Galleri’.
Contentkolonnenindeholdertekstogbilleder.Dogsynesderendelpladsspild,daforsidenscontentbeståraf de samme sider fra venstre kolonne. Det medfører en meget lang scroll-funktion, hvor brugeren mister overblikket over sidens indhold, da der f.eks. ikke er gjort brug af nemme genveje i form af links til top eller kapitler.Sammeproblemopstårpåsidenforterrarietshistorie,hvorenmegetlangbrødtekstdominerersiden, og brugeren må scrolle sig frem til de sidste informationer. På forsiden opstår endvidere en del spildplads, da brødteksten floater til venstre men uden at udnytte kolonnens bredde.
Flowchart
Flowchartet for det eksisterende website må siges at være noget uoverskueligt. Der findes ikke mindre end 13sider,sombrugerenkanklikkeindpåfraforsiden.Mangeafsiderneindeholderknapsåmegetinformation, som nemt kunne slåes sammen. Der findes ingen undersider, men udelukkende ’forældre-sider’, strukturen må derfor betegnes som et meget fladt hierarki jf. bilag 3 ’Flowchart for eksisterende website’.Vi identificerer også adskillige problemer på de eksisterende sider. Når vi f.eks. åbner siden ’Miljøpolitik’ er der linket til et word-dokument i stedet for at lægge informationerne direkte på hjemmesiden jf. bilag 2.5 ’Miljøpolitik’.
Siden ’Dyrene i terrariet’ er i øvrigt identisk med siden ’Galleri’, men når vi åbner ’Dyrene i terrariet’ man-gler den mørkeblå baggrundsfarve pludselig, og siden fremstår i stedet med en hvid baggrund. Jf. bilag 2.3 ’Galleri’.
5/31
![Page 8: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/8.jpg)
Sammenfatning
Genereltfremstårterrarietswebsitesomuoverskueligt,dystertogikkesærligbrugervenligt.Detersværtat finde vej rundt på websitets mange sider, og som bruger mister man nærmest pusten med de lange scroll-funktioner. Design og layout skaber efter vores mening ikke ligefrem et flatterende billede af terrariet, og websitets visuelle elementer taler slet ikke til terrariets fordel, da der f.eks. er mangel på både logo og slogan.Desudenerviitvivlom,hvilkenmålgruppeterrarietønskeratkommunikeremedviadereswebsite.
Detskaldognævnes,atterrarietfårpluspointpåindholdssiden.Terrarietharenspændendehistorieatfortælle,ogderliggernoglegodeaktuellenyhederfradesenesteevents.Desudenharhjemmesidennoglerigtigt flotte billeder af terrariets dyr. Der synes rigeligt af indhold og gode billeder, der kan bruges i kommu-nikationen omkring terrariet, og det vil vi drage fordele af i udviklingen af det nye website.
Det er vores ambition, at det nye website skal opfylde følgende punkter:
•Mere overskueligt og brugervenligt flowchart, så brugeren hurtigt kan finde de nødvendige infor mationer indenfor 3 klik med musen.
•Centreretindhold,somerimmunoverforhvilkenbrowser,websitetåbnesi.
• Et lysere og mere imødekommende valg af farver, der dog afspejler de naturlige omgivelser for
terrarietsdyr.
•Stærktvisueltlayout,sådetbliverenspændendeoplevelseatbesøgewebsitet.
•Skabeetmerebørnevenligtlayout.
• Flere nyhedsrubrikker på forsiden så som ’appetitvækkere’, som hurtigt kan fange brugerens
interesse f.eks. ’Månedens Dyr’ og fortællinger/beretninger fra besøgende gæster.
• Fast footer og navigationsbar under header, som ikke ændres, uanset hvilken side brugeren står
på.
•Udviklingafgenkendeligtlogoogcatchyslogan.
•StørreeksponeringafterrarietsdirektørKlausDræby.
Målgruppe
Terrarietsprimæremålgruppebestårafbørnefamilierogturister.Dogmodtagerterrarietogsåendel
skolegrupper, der benytter sig af skoletjenesten, hvor skolen kan booke en biolog, og eleverne kan få under-
visningiterrarietslokaler.Dogerskoletjenestenpt.nedlagt.Terrariethardesudenendelfastegæstermed
årskort.
6/31
![Page 9: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/9.jpg)
Markedsføring
Pt. bruger terrariet 55.000 kr. om året på markedsføring. Det består af en pakkeløsning fra ’Det Gule
Kontor’, hvor terrariet får trykt annoncer i et samlet katalog for turistattraktioner på Fyn. De får lavet en
brochure, som uddeles i lokalområdet f.eks. i dagligvarebutikker.
Det skal nævnes, at det ikke virker som om Klaus Dræby tildeler hjemmesiden særlig stor markedsførings-
værdi, hvorfor driftomkostninger til denne er nedprioriteret. Hjemmesiden har primært funktion af at
formidle de mest nødvendige informationer, hvor muligheden for at tiltrække nye gæster via hjemmesiden
ikke ses som en værdifuld kommunikationskanal. Efter vores mening er dette rigtig ærgerligt, da et
velfungerende og inspirende website er alfa omega for at tiltrække nye gæster. Vi ser et godt website som
en rigtig vigtig del af en virksomheds markedsføring.
Ideudvikling
Påbaggrundafovenståendedataindsamlingogtestafterrarietseksisterendewebsiteharvibrugtenstordel af vores tid på at udvikle og planlægge vores idé til et nyt website. Vores idéudvikling illustreres via et mindmap, hvor vi først og fremmest samler alle vores idéer til projektet jf. bilag 4 ’Mindmap for det nye website’. Mindmap danner det spæde fundament for vores website. Der foretages efterfølgende på baggrund af mindmap en udviklingsprocess med yderligere tilvalg og fravalg.
Designtrin
Informationsdesign
Det primære ønske er at gøre det nye website langt mere appetitligt og overskueligt. Det skal være mere børnevenligtogderforlangtmerevisuelt.Viharderforvalgtatminimereitekstogprioriterebillederogfaktuelleogaktuelleoplysninger.Viønskeratskabedenpersonligedirektekontaktmellemafsenderogmodtager. Klaus Dræby får derfor en mere fremtrædende rolle som velkomsttager på forsiden, som skal afspejle den hyggelige og personlige atmosfære i terrariet. Vigtige informationer som f.eks. åbningstider har ogsåfåetenlangtmerefremtrædenderolle,ogerderforplaceretifastlåstewidgetsihøjrekolonne.Vi har valgt at lægge vægt på oplevelsesrige nyhedselementer som skal fungere som appetitvækkere; f.eks. månedensdyrogpersonligeberetningerfrabesøgendegæster.
Interaktionsdesign
Foratgørewebsitetmerebrugervenligt,harviigruppenforsøgtatskabeenmereoverskueligoggen-nemsigtig struktur. Gruppens primære mission er at skabe et website, der har en mere hierakisk infor-mationsopbygning . Vi minimere antallet af menupunkter og søger i stedet at gøre brug af forældresider meddrop-downmenuer.Viønskerenfastlåstmenubar,somerdensammeforallesiderligegyldigthvorbrugeren befinder sig. Det medvirker til en effektiv navigation rundt på sitet, som samtidig gør det lettere at indhente den nødvendige information nemt og hurtigt. Vi har foretaget en kategorisering af indholdet i en prioteret rækkefølge af 8 forskellige menupunkter, der gerne i sidste ende skulle give brugeren en mere positiv oplevelse af terrariets website, og øge brugerens interaktion. Jf. bilag 5 ’Flowchart for det nye website’.
7/31
![Page 10: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/10.jpg)
Præsentationsdesign
I bilag 6 ’Diverse håndskitser for det nye website’ og 7 ’Storyboard for det nye website’ vises forskellige layoutskitsersomvihararbejdetpå,foratudvikledetendeligstorybordogdesignforwebsitet.Viharsøgtat imødekomme ovenstående ambitioner om at skabe en mere brugervenlig struktur. Bilag 8 ’Endeligt design af det nye website’ viser det endelige valg af website, som vi tænker det skal se ud; stadigvæk på storyboardplan.
Hele websitet er opbygget efter en meget simpel og overskuelig brugergrænseflade. Vi har en fast header, menubar, en content kolonne, en højrestillet kolonne og en footer.
•Headerindeholderetvisueltvelfungerendebaggrundsbillede,detnyelogoogslogan. • Menubaren indeholder i alt 8 kategoriserede menupunkter med drop-down menuer. • Content indeholder den valgte sides indhold og ændres således hele tiden. • Højre kolonne indeholder faste widgets med faktuelle informationer. •Footerindeholderterrarietsadresseogtelefonnummer.
Som før nævnt indgår header, højre kolonne og footer i den fastlåste struktur og er tilgængelig og synlig på alle sider uanset hvor brugeren befinder sig. Det er således kun content, der skifter indhold, alt efter hvor brugerenvælgeratklikkesigind.
Grafiske virkemidler
Komposition
Vi har taget udgangspunkt i AIDA med omtanke for øjets naturlige bevægelsesflow, når det skal indsamle
ny information. Brugerens opmærksomhed fanges først øverst i venstre hjørne. Vi har derfor valgt at have
terrariets logo placeret der. Brugeren kan således hurtigt gøre sig bevidst om afsender. Terrariets nye slogan
er med til at fange brugerens interesse med en hurtig catchfrase. Derefter ledes opmærksomheden til klaus
og den personlig kontakt midt på siden og herefter ud til højre kolonne med de vigtige informationer så
som åbningstider osv. Øjets bevægelse slutter nederst i højre hjørne hvor vores appetitvækkere skal ende
ud i brugerens interaktion. Samlet set skal denne opbygning skabe lyst hos brugeren om et endeligt besøg
påterrariet.
8/31
![Page 11: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/11.jpg)
Logo
Vi ønsker et logo, der først og fermmest giver et klart billede af, hvem afsender er. Det skal samtidig være et sjovt og interessefangende logo. Vi har derfor valgt at gøre brug af både informativ tekst med afsender, slogan og et illustrativt billede i stærke farver. Jf.’ bilag 9 ’Designproces af det nye logo’.
Detendeligelogosersåledesud:
Designparametre
FormWebsitet er lavet i et fast bredde på 955px for at tage højde for brugere med forskellige skærmopløsninger. Scroll-funktionen træder i kræft pga. vores udvalgte Wordpress tema. På længere sigt ville dette være et punkt,derskulleudbedresforatgøredetmerebrugervenligt.
Typografi
Temaets indstillinger angiver oprindeligt Arial som font i brødteksten:Arial, 14px:
Her er et eksempel på en skrifttype…
Efter vores mening synes fonten en smule kedelig og rund i det. Derfor har vi eksperimenteret med en mere tiltalende skrifttype jf. bilag 10 ’Designmanual’.
Som resultat har vi ændret fonten således, at brødtekst, overskrifter og menupunkter i stedet bliver verdana. Brødteksten er str. 14px, menupunkter 20px og overskrifter 24px. Fonten verdana er god til skærmlæsning, hvor brugerens læsehastighed er nedsat med 1/3. Fonten verdana er en ren uden seriffer, hvilketgøratordeneernemmeatlæse.
Vissenbjerg
Terrarium- en dyrerig oplevelse!
9/31
![Page 12: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/12.jpg)
Illustration
Med hensyn til illustrationer har vi valgt at fokusere på brugen af nogle flotte farverige fotos af terrariets dyr.Viharbl.a.brugtbillederfrahjemmesidenogegnefotos.Billederneeralleklareogstærkefarver,derkomplimentererhinanden.
Til logoet har vi klippet en frø ind i navn og slogan, der tilsammen skaber et stærkt visuelt udtryk.
Farver
Foratimødekommedenaturligeomgivelserforterrarietsdyrharvisøgtatintegreredisseiwebsitetsfarvevalg. Vi har gjort tanker omkring farvevalg udfra det kriterie, at det skulle associere til regnskov eller jordbundsfarver. Den originale tekstfarve for overskrifter er
Mørkebrun #603913
Vi har forsgt at udskifte overskrifter i lysere brune nuancer og grønne farver jf. bilag 10 ’Designmanual’,
men har i sidste ende besluttet at fastholde den mørkebrune farve til overskrifter.
Brødteksten var oprindelig sort, den har vi valgt at ændre til mørkebrun, så den er identisk med
overskrifterne. Den mørkebrune farve skaber god kontrast til den hvide baggrund i headeren, så det øger
læsevenligheden.
Realiseringstrin
På baggrund af det udviklede storyboard, flowchart og illustrationer af websitets design har vi valgt et Wordpress tema, der imødekommer vores ambitioner for det ønskede design og layout. Det valgte tema har vi efterfølgende finjusteret for så vidt muligt at tilpasse det vores vision. Vi har udviklet en forside og 4 sider til websitet 2 som kan ses som screendrops i bilag 11 ’Screen drops af det nye website’.
2Vi har kun vedhæftet screen drops af forsiden + 3 sider, da vores 4 side ”historie” ville være for lang at indsætte.
10/31
![Page 13: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/13.jpg)
Konklusion
Formålet med projektet har været at opnå forståelse for og kendskab til de arbejdsprocesgange der indgår i opsætningen af et nyt website. Vi har gennemgået en lang og udfordrende proces fra idéudvikling, over skitse til realisering. Vi har udviklet et website, som efter vores mening opfylder de behov som Vissenbjerg Terrarium har for et mere nutidigt, brugervenligt og salgsfremmende design. Vi har arbejdet ud fra en realistisk vurdering om, at terrariet i den grad har brug for større markedsføring, idet de stadig står i en usikker økonomisk situation.
Dog har projektet ikke været 100% realistisk, da Klaus Dræby tydeligt har udtrykt, at han ikke ønsker et nyt website og er yderst tilfreds med det eksisterende. På trods af modstand fra kunden håber vi, at Vissenbjerg Terrarium kan blive inspireret til at nytænke deres website. I løbet af projektet er vi stødt på adskillige tekniske udfordringer, idet valg af et specifikt tema i Wordpress både har fordele og ulemper. Vi har ikke været i stand til 100% at imødekomme vores ambitioner og ud-viklede storyboard, men har måtte gå på kompromis med mindre designmæssige detaljer. Omvendt har vi fundet inspiration til f.eks. at flytte menubaren i det valgte tema. Vi har brugt en stor del af tiden til at analysere det eksisterende website og udvikle en idé, der kunne forbedre dette. En stor udfordring har bl.a. været at omstrukturere sitets flowchart og kategorisere indholdet i nogle mere overskuelige menupunkter. Samlet set er vi godt tilfredse med det endelige resultat, som vi mener i langt højere grad appellerer til ter-rariets primære målgruppe.
Websitet er udarbejdet i et gensidigt og velfungerende samarbejde mellem gruppens medlemmer :)
11/31
![Page 14: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/14.jpg)
Bilag 1: Tidsplan
Timeforbrug i alt: 9 dage à 7 arbejdstimer = 63 timer.
12/31
![Page 15: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/15.jpg)
Bilag 2: Screendrops af det eksisterende website
2.1 Velkomstside
2.2 Forside
13/31
![Page 16: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/16.jpg)
2.3 Galleri
2.4 Litteratur
14/31
![Page 17: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/17.jpg)
2.5 Miljøpolitik
15
![Page 18: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/18.jpg)
Bilag 3: Flowchart for det eksisterende website
16/31
![Page 19: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/19.jpg)
Bilag 4: Mindmap for det nye website
17/31
![Page 20: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/20.jpg)
Bilag 4: Mindmap af designet for det nye website
18/31
![Page 21: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/21.jpg)
Bilag 5: Flowchart for det nye website
19/31
![Page 22: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/22.jpg)
Bilag 6: Diverse håndskitser for det nye website
20/31
![Page 23: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/23.jpg)
21/31
![Page 24: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/24.jpg)
Bilag 7: Storyboard for nyt website
22/31
![Page 25: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/25.jpg)
Bilag 8: Endeligt design af det nye website (storyboard)
23/31
![Page 26: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/26.jpg)
Bilag 9: Designproces for det nye logo
24/31
![Page 27: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/27.jpg)
Bilag 10: Designmanual
Font
Arial, 14px:
Her er et eksempel på en skrifttype…
Verdana, 20px
Her er et eksempel på en skrifttype…
Calibri, 20px
Her er et eksempel på en skrifttype…
Broadway, 14px
Her er et eksempel på en skrifttype…
Skriftfarve Brun #3C270D
Lysebrun #553713
Meget lys brun #984806
Lysegrøn #00CC00
Grøn #8DC77D
Grålig grøn #4F6228
25/31
![Page 28: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/28.jpg)
Bilag 11: Screen drops af nyt website
Forsiden
26/31
![Page 29: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/29.jpg)
Kontakt
27/31
![Page 30: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/30.jpg)
Priser
28/31
![Page 31: Vissenbjerg Terrarium eksamensprojekt](https://reader031.vdocuments.pub/reader031/viewer/2022020321/568bf2001a28ab8933951ae8/html5/thumbnails/31.jpg)
Book en biolog
29/31