Projektrapport www.alselservice.dk

Af Sofie Toftgaard Janerka (28574733) & Maria Wind Retoft (28691276)Multimedieteknologi og Interaktionsdesign,Erhversakademiet Lillebælt, december 2011 1

Indholdsfortegnelse3/Indledning 3/HOME-metoden 4/Foranalyse4/Informationsindsamling5/Afgrænsning5/Projektplan 6/Undersøgelse (kickstart)6/Mindmap/idebank7/Kommunikationsplan7/Afsender7/Målgruppe8/Budskab/koncept 9/Design9/El-installatørens udtryk9/Informationsdesign10/Interaktionsdesign11/Præsentationsdesign12/Designparametre14/Komposition15/Stil og stemning 16/Realisering17/Evaluering 18/Bilag18/Bilag 1: Projektplan19/Bilag 2: Tidsforbrug20/Bilag 3: Logoforslag21/Bilag 4: Skitser af websites (ideudvikling)22/Bilag 5: Flowchart23/Bilag 6: Storyboards28/Bilag 7: Websitets skelet29/Bilag 8: Designmanual31/Bilag 9: Idékatalog til videre udvikling af sitet

2

Indledning I denne rapport vil vi gennemgå de vigtigste overvejelser, vi har gjort os i arbejdet med at redesigne Als El-services website som afslutning på kurset i Multimedietek-nologi og Interaktionsdesign. Rapporten har vi, ligesom vores arbejde med projek-tet, bygget op efter HOME-modellen for at sikre en kronologi, der gør det lettere for udenforstående at sætte sig ind i processen.

Vores website findes på adressen http://mariawindretoft.dk/alselservice

HOME-metodenHOME-metoden (holistic, Open Multimedia, development, mEthod) er en model, man kan bruge til at strukturere udviklingsarbejdet af digitale medier1. Metoden er helhedsorienteret og beskæftiger sig derfor både med det egentlige produkt og processen bag. Vi finder den særligt relevant, fordi den kan tilpasses til det enkelte projekt. Vi benytter derfor de dele af modellen, som vi har fundet relevante i den forholdsvis korte periode, projekt har spændt over.

Vi koncentrerer os primært om produktet frem for processen, da det har virket mest relevant set i forhold til projektets og projektgruppens størrelse. Vi har over-ordnet strukturet vores arbejde efter disse fire trin i modellen.

• Foranalyse• Undersøgelse• Design• Realisering.

1 Digital Medie Management, Fischer/Oosterbaan, side 42 3

Foranalyse InformationsindsamlingGennem det skriftlige oplæg og telefonisk kontakt har vi sporet os ind på, hvad kunden ønsker for det nye website. Vi har blandt andet spurgt ind til, hvordan med-arbejderne - i praksis ægteparret som ejer virksomheden - definerer deres virksom-hed, og hvordan de ønsker at blive opfattet.

Als El-service har eksisteret i 26 år og er derfor kendt i lokalområdet og sponsore-rer blandt andet de lokale fodbold- og håndboldhold. Historien er vigtig for dem, hvorfor de også er stolte af at have en medarbejder, som netop har haft 20 års jubi-læum. Als El-service arbejder hårdt på at promovere salget af varmepumper, som i forvejen er ret populære. Gitte Sand siger blandt andet: “Det er et godt alternativ til anden energi, et grønt alternativ. Vi vil gerne gøre, hvad vi kan for at spare på energien”. Firmaet anbefaler derfor også sine kunder at benytte de nye LED-pærer i stedet for almindelige glødepærer eller for den sags skyld de ældre elsparepærer. Også solceller er i fokus og forhandles.

Firmaet beskriver sig selv med egenskaberne:

• Troværdige og loyale• Servicemindede• Effektive• Faglig dygtige• En grøn profil

Disse egenskaber skal vi naturligvis sørge for at afspejle og underbygge på websitet.Kunden efterspørger mere overskuelighed i forhold til det nuværende website, hvor der ikke er ensartethed i designet. 4

Det nuværende logo på www.alselservice.dk

Als El-service har eksisteret i 26 år. Dette er det nuværende forsidebillede på alselservice.dk

ProjektbeskrivelseAls El-service ønsker et website, som er mere gennemført i designet end det tidligere. Formålet er, at give firmaet en skarpere profil.

Websitet skal kommunikere de værdier, som Als El-service står for. Desuden skal det være nemmere for eksisterende og potentielle kunder at navigere rundt på sitet og finde det, de søger. Et gennemtænkt design vil samtidig kunne hjælpe firmaet med at fremstå professionelt.

Da vores projekt strækker sig over en relativ kort periode, valgte vi primært at tilret-telægge vores proces efter vandfaldsmetoden1, som er en lineær proces, hvor man arbejder fra det ene trin til det næste. Vi har dog ikke låst os mere fast på metoden, end at vi har kunnet vende tilbage et tidligere trin, hvis det viste sig nødvendigt.

AfgrænsningVi fokuserer i ikke på tekststykker og formidlingen af de skriftlige budskaber men holder os til at skabe en ramme for design, signalværdi, stil og stemning for et nyt website til Als El-service. Vi foreslår dog, at der, hvis det nye design skal implemente-res, også bliver arbejdet med teksten på siderne (Se bilag 9).

Vi har fremstillet siderne: “Forside”, “Kontakt”, “Firmaets historie”, “Medarbejdere” og “Var-mepumper”.’ Websitet vil i dette projekt ikke blive gjort færdigt med indhold på samt-lige fungerende sider.

Projektplan Projektplan og forventet/reelt tidsforbrug er vedlagt som bilag (bilag 1+2).

1 Digital Media Management, Fischer/Oosterbaan, side 31 5

Forsiden på www.alselservice.dk

Forsiden på www.mariawindretoft.dk/alselservice

Undersøgelse (kickstart)Undersøgelsesfasen har vi set som en kickstart af den konkrete del af projektet. For-målet har været at lade ideerne flyde for at have så mange (gerne løsslubne) mulighe-der og indgange som muligt i det videre arbejde med målgruppe, kommunikation og ikke mindst det videre forløb i designet.

Vi tog os god tid til denne fase, fordi vi mener, at jo mere tid og energi vi lagde i at udvikle ideer og forme dem, jo bedre ville det hjælpe os på vej i den følgende process.

Mindmap/idebankIngen ide er for skør - ingen for langt ude, og ingen er forkert. Det var udgangspunktet for de første ideudviklingsseancer.

Et stort blankt A3-ark på bordet med “Als El-Service” i midten. Hver sin kuglepen og så ellers bare skrive, tegne streger imellem ordene, evt lave en lille skitse ind imellem. Det blev til ord som bæredygtighed, PLC-styring, kontakt og firmabil.

Efterhånden som ordene kom frem, tegnede der sig nogle grupper, som beskrev det samme. Noget om virksomhedens ideologi, historie og menneskene bag den. Nogen om de konkrete elektriske installationer og hvidevarerne, nogen om den grønne energi og fremtiden.

Arket med alle ordene brugte vi som udgangspunkt for at arbejde med skitser til, hvad der faldt os ind. Igen med et stort ark blankt papir - ingen regler. Denne gang var det bare mere grafiske elementer, som vi kunne bruge i videreudviklingen af såvel koncept som logo og selve designet af hjemmesiden (se illustration næste side).

6

Idéudvikling på El-service.

Idéudvikling på Als El-service.

KommunikationsplanDer skal være ét og kun ét bærende budskab fra en hjemmeside. Det skal skinne klart igennem og være det, kommunkationen bygges op omkring. De næste afsnit handler derfor om de overordnede ideer og valg vi har truffet i forhold til kommu-nikationen i projektet - fra afsender over budskab til modtager.

AfsenderAfsenderen er Als El-Service som samlet virksomhed. Dens primære mål med web-sitet er at sælge deres produkt, el-opgaver. Det sekundære mål har vi defineret som, at de gerne vil informere om deres virksomhed, så modtagerne får indtryk af Als El-Service som en troværdig el-forretning.

MålgruppeAls El-Service har både private, offentlige og erhvervskunder. Men ifølge Gitte Sand forventer de ikke at erhvervs- og offentlige kunder vil finde frem til dem via web-sitet. Disse kunder har de kontakt med ad andre kanaler. Vi har derfor besluttet, at websitet skal rette sig mod private kunder, som søger efter el-installatører til deres bolig, hvadenten det drejer sig om opsætning, nybygning eller ombygning. Og hvad enten det drejer sig om helårs-, eller sommerhuse. Als ligger midt i et stort som-merhusområde og har dermed mange potentielle kunder, som ikke er fra lokalom-rådet. De skal let og funktionelt kunne orientere sig via websitet og få kontakt med firmaet.

Primærmålgruppen for hjemmesiden definerer vi derfor som private, som søger efter en el-installatør til at klare installationer i hjemmet. Og med øje for at der sandsynligt er et stort potentiale i sommerhuskunder, vil vi sikre, at informationen er klar og tydelig for dem, som hverken kender virksomheden eller lokalområdet.

Projektet her er så kort, at det ikke er muligt at lave større undersøgelser af den specifikke profil på målgruppen. Og den vil også være relativt bred, da stort set alle typer mennesker har behov for el-installationer, da loven siger, at man skal have en autoriseret installatør til at stå for installationerne i et hus. 7

Grafisk idéudvikling.

Kommunikationsmodel.

Alligevel er der nogle begrænsninger i målgruppen. Websitet vil nemlig kun være mål for dem, som i forvejen søger information på nettet. Man kan derfor argumentere for, at den skal sælge førstehåndsindtryk. Det er nye kunder. Eksisterende kunder kender virksomheden og vil, hvis de var tilfredse med den service, de fik, sandsynligvis finde telefonnummeret andetsteds og ringe direkte uden at være forbi websitet.

Da målgruppen er nye private kunder, og de ifølge Gitte Sand ikke kan lægge pristil-bud på siden, fordi priserne afhænger af individuelle forhold og tilbud, er det særlig vigtigt, at det skal være overskueligt og let at finde kontaktinformation, så målgrup-pen - hvis den ønsker det, kan nøjes med at bruge hjemmesiden til at søge efter tele-fonnummer.

Budskab/konceptUd fra samtalen med Gitte Sand og de ord, hun har brugt til at beskrive virksomhe-den og deres ønsker, har vi defineret følgende overordnede budskab for det nye web-site:

Als El-Service er en stabil og troværdig el-virksomhed med en grøn profil, som leve-rer et gedigent og holdbart stykke arbejde til den aftalte tid.

Det budskab er den røde tråd i vores udvikling af websitet.

8

Footer med kontaktdata er indsat på alle sider, så det er nemt at finde et telefonnummer på el-installatøren.

Design El-installatørens udtrykHvordan designer man et website til en el-installatør, så den både bliver saglig, faglig, overskuelig og personlig? Udviklingen af, hvad vi mener er designet til Als Elservice, beskriver vi i det følgende. Her kommer vi først ind på sitets informationsdesign, herefter interaktionsdesignet, præsentationsdesign og designparametre.

InformationsdesignI første del af designprocessen har det været vigtigt at ideudvikle og beslutte, hvad det de-signmæssige fokus for sitet skal være. I udvælgelsesprocessen har vi taget udgangspunkt i de beslutninger, som vi tog i forbindelse med kommunikationsplanen og det budskab, Als El-Service ønsker at sende med hjemmesiden.

Da loyalitet, troværdighed og personligt kendskab til både faget og området (de 26 års erfaring) er gennemgående i firmaets selvopfattelse, besluttede vi tidligt i processen, at menneskerne bag firmaet skal have en central placering på siden. Det giver troværdighed og genkendelighed. Man skal som kunde hurtigt kunne sætte ansigt på, hvem man har talt med, eller hvem man kan forvente at få besøg af, hvis fryseren sætter ud.

Det har i samtalerne med Gitte Sand og i deres valg af produkter skinnet klart igennem, at firmaet ønsker en grøn profil. De vil gerne lægge vægt på energi-sparemuligheder som varmepumper, solcelleanlæg. Derfor vil vi også igennem designet vise den grønne profil.Ud over det personlige indtryk, mødet med menneskerne bag Als Elservice, og den grønne profil, skal websitet selvfølgelig også formidle viden om det, firmaet lever af - ele-krikerarbejdet. Den del ønsker vi at holde i et informativt og klart design, så det skal være let at finde den ydelse, man søger efter.

9

InteraktionsdesignFunktionalitet og overskuelighed har været hovedparameteret bag udviklingen af interak-tionsdesignet. Vores mål var, at navigationen skal foregå, så brugeren kommer frem til det ønskede site med så få klik som muligt, og at sitet beholder overskueligheden.

Vi har derudover arbejdet med menupunkterne, så de kommer i den rækkefølge, vi for-venter, brugeren søger. Så de først leder efter, hvad firmaet kan og derefter undersøger, hvem der står bag. I denne inddeling har vi taget højde for, at brugeren allerede er blevet præsenteret for medarbejderne i Als El-Service allerede er blevet præsenteret i headeren.

Tv-pakker og salg af hvidevarer er i fokus i højre spalte, fordi vi har vurderet, at det ikke er alle el-installatører, som tilbyder den service. Det er derfor ikke sikkert, at brugeren forventer at møde den service her. Boksene i højre spalte følger med på alle sider. De fungerer som firmaets salgsvindue. Her kan de lægge “annoncer” for de ydelser, de ønsker særligt fokus på. Hvis websitets brugere kommer ind på andre sider end forsiden, fx efter en søgning på Google, vil man altså også kunne se disse bokse på den side, man lander på.Varmepumperne har vi lagt i toppen, da det er et udtrykkeligt ønske fra Als El-Service, at de gerne vil sælge flere.

Flowchart er vedlagt som bilag 5.

10

Leg med menupunkter.

Den færdige navigation.

PræsentationsdesignFor at finde ud af, hvordan vores site skulle opbygges, startede vi med at tegne skitser byg-get på vores mindmap (Se bilag 4). Vi lod fantasien få frit løb, og gav plads til skøre idéer - eksempelvis interaktive sider med æstetikken og det kunstneriske i front.

For at spore os ind på hvilken idé, vi ville gå videre med, forsøgte vi at sætte os både i bru-gernes og afsendernes sted, for at kunne vurdere, hvilken sammenhæng mellem funktiona-litet, æstetik og teknik, der skal være på websitet.

Når brugere kommer ind på websitet, skal funktionaliteten være i højsædet. Kunderne skal kunne finde det, de søger, hurtigst muligt. Kontaktdata skal være synlige, så kontakten mel-lem firma og kunde hurtigt kan skabes. Desuden ønskede kunden, som tidligere beskrevet, at have mulighed for at fremhæve ting på forsiden - derfor de tre bokse. Æstetikken er dog også vigtig, da den spiller en stor rolle i at understrege de værdier, firmaet gerne vil ud-stråle.

Vores læresætning undervejs i opbygningen af websitet har derfor været, at vi skelner mel-lem “nice to have” og “need to have”. For eksempel forelskede vi os i en idé, hvor forsiden på sitet skulle være en stor stikkontakt, hvor man kunne “tænde” for at komme videre til det egentlige website. Det ville dog gå ud over funktionaliteten og være noget “sjov”, som ikke er nødvendigt for at websitet kan formidle sit budskab. Ideen blev derfor valgt fra. Overskuelighed frem for alt - som kunden også selv har ønsket det.

De enkelte designparametre vil blive beskrevet yderligere herunder. Skeletopbygning og storyboard er vedlagt som bilag (bilag 6+7).

11

Skitse. Forsiden som en stikkontakt.

DesignparametreDisse seks parametre har været pejlemærker i udarbejdelsen af websitets design.

Form: Enkelthed har været kodeordet i formen på vores website. Formen er klassisk opbygget med header, tekstfelt, footer og en fast højrespalte, som sammen med header og menu følger med på alle sider. Højrespalten er designet til, at Als El-service kan fremhæve produkter, som de gerne vil gøre ekstra opmærksomme på. De tre bokse er ens i størrelse og står i samme felt. I følge gestaltlovene om lighed og nærhed2 signalerer dette, at de har samme funktion. Vi har dog givet den øverste boks en baggrundsfarve, som derfor skiller sig ud og hurtigere fanger blikket, end de andre. Vi har fjernet alt overflødigt teknisk “lir” som rss-feeds, søgefelt osv., da vi ikke synes, det passer ind i den stil, vi har givet siden.På indholdssider er den muligt at indsætte en boks til højre (som det ses på siden med var-mepumper), hvor der kan linkes eksternt til yderligere information om produkter.

Websitets wrapper er 1000px bred, hvilket måske lige er til den brede side, hvis den grønne baggrund skal komme til sin ret på alle typer af skærme, og man skal undgå at scrolle vandret. Vi har alligevel beholdt bredden, da vi går ud fra, at det i de fleste tilfælde ikke vil være noget problem, og at vi derved også undgår at skulle scrolle meget horisontalt.

Typografi: Flere forskellige fonts var i spil til vores side. Vi ville gerne finde en skrifttype, som var “skærmvenlig”, og som understøttede det professionelle og simple look. Vi ønskede en skrift med et slankt og enkelt design og afprøvede både Verdana, Courier New, Helve-tica og Georgia men vi besluttede, at Geneva var den font, der matchede det enkle design. Denne skrifttype matcher i øvrigt logoet. Vi har valgt, at alle links skal være understregede som default, for at der ikke skal være nogen tvivl om, at de er klikbare.

2 Digital Media Management, Fischer/Oosterbaan, side 169 og frem. 12

abcdefghijklmnopqrstuvxyzæøåABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ

Geneva.

Det endelige farveskema.

Idéudvikling på farver

Illustration: Den første illustration, der møder brugeren er headeren. Vi har valgt at sætte medarbejderne i headeren for at understrege det nære og lokale. Folk skal kunne se, hvem de henvender sig til og genkende dem, når de ser dem i bybilledet. I de første udkast arbejde vi med, at medarbejderbillederne skulle have været i sort/hvid, men det viste sig, at farverne skabte meget mere liv på siden. Headeren er lavet i photoshop, hvor billederne af medarbejderne er blevet fritskrabet. Hvis der kommer en ny medarbejder, skal denne naturligvis sættes ind i headeren sammen med de andre. Kommer der mange nye medar-bejdere i fremtiden, vil dette kræve en nytænkning af headerens udseende (Se illustrationer næste side).

Logoet er ligeledes placeret i headeren og i sammenhæng med medarbejderbillederne. Det er udviklet gennem vores mindmap og idéudvikling i starten af processen. Vi har som nævnt valgt at satse stærkt på den grønne profil, og dette bliver naturligvis afspejlet i logoet. Vi lagde os fast på et logo med et slankt og elegant design, der understøtter profes-sionalisme og faglighed. Det grønne blad står i kontrast til de ellers afdæmpede farver i indholdet og bliver derfor ekstra blikfang.

På alle indholdssider har vi lagt et baggrundsbillede med en opacity på ca 20-30%, så man stadig kan læse teksten. Baggrundsbilledet gør den store tekstflade mindre hvid og lar-mende. Det er også muligt at indsætte billeder på almindelig vis i tekstfelterne, hvis kunden skulle ønske dette.

Farver: Et oplagtfarvevalg havde været blå. Blå forbinder man med el-installatører - sær-ligt på grund af logoet for autoriserede el-installatører, som firmaet også benytter sig af på det nuværende website. Vi valgte dog den grønne farve som blikfanget på siden, da firmaet selv vægter de grønne løsninger højt og særligt ønskede, at et nyt website kunne være med til at profilere dette. Det grønne og det grå/sorte skaber kontrast. Den grønne farve er den livlige, mens det grå og sorte symboliserer seriøsiteten og professionalismen. Den grå farve er afdæmpet og tidsløs. Animation og lyd: Funktionaliteten er i højsædet på dette website, og vi forventer, at kunder kommer for at få meget specifikke informationer. Vi har derfor vurderet, at lyd og animationer ikke er relevante for at formidle budskabet. 13

Forskellige bud på headere. Vi endte med at lægge os fast på den nederste udgave.

KompositionBrugerens opfattelse af et website afhænger i stor stil af kompositionen. De skal kunne afkode sitet lynhurtigt, finde det, de leder efter - på de pladser, de forventer at finde det. For at skabe en kompositionsmæssig velfungerende side, har vi både skelet til AIDA-modellen3 og Poynters Eyetracking study4, som begge giver viden om, hvordan hjemmesider bliver læst.

I forhold til AIDA har vi arbejdet med:

Attention: Her har vi fokuseret på headeren og ikke mindst logoet øverst i venstre hjørne. Det er her, vi forventer kunden “kommer ind” på siden.

Interest: Her skal interessen for produktet vækkes. Øjnene vandrer ned over stikproppen (på forsiden), som bevidst er lagt i en vinkel, så den bryder med øjets retning og dermed skaber opmærksomhed. Stikproppen er genkendelig og leder tankerne på el-virksomhed.

Desire: Nederst i højre hjørne møder synet symbolet fra den autoriserede el-installatør. Her skal kunden gerne opleve tillid og ønsket om at benytte Als El-Service.

Action: Det sidste punkt er action. Det er her, man handler. Derfor ligger adressen og telefonnummeret til Als El-Service i footeren. Man skal altid kunne komme i kontakt med firmaet for at få de oplysninger, man skal bruge for at handle.

I arbejdet med opbygningen af sitet har vi i øvrigt skelet til Poynters Eye Tracking-model. Illustrationen til højre viser, hvordan øjnene flakker hen over siden i et zigzag-mønster og afkoder billedelementer. Derfor får medarbejderne særlig stor opmærksomhed. De ligger i toppen af siden, de er i farver, og øjet farer til headeren flere gange i afkodningen af siden.

3 http://www.noupe.com/design/the-aida-marketing-model-in-web-design.html4 Digital Media Management, Fischer/Oosterbaan, side 167 14

AIDA-modellen på vores website.

Poynters Eye tracking-model på vores website.

Stil og stemningMedarbejdernes egen opfattelse af firmaet (loyalitet, troværdighed, lokalt, miljøvenligt) har været omdrejningspunktet i arbejdet med stil og stemning. Målet har derfor været at skabe en funktionel og intuitiv side, som er let at navigere på, men som samtidig overrasker på visse punkter og ikke ersom andres (for eksempel valget af bladet i logoet og den grønne baggrundsfarve, som symboliserer grøn tanke frem for den traditionelle blå farve, som mange installatører anvender).

15

Sådan kunne logoet se ud på siden af en blå firmabil.

Realisering Wordpress-temaet Atahualpa er skabelonen for vores website. Temaet blev valgt på grund af dets mange redigeringsmuligheder, som gjorde, at vi ikke behøvede at gå i editoren for at kode elementerne. Temaet har dog givet os nogle problemer undervejs, da det ikke er særligt brugervenligt i forhold til at indsætte tekst og billeder.

Vi har været nødt til at kode meget i sidernes html-visning for at få designet, som vi gerne ville. Det har været fint for os, fordi vi har fået afprøvet nogle færdigheder, som vi har fået på kurset. Det kan dog blive et problem, hvis sitet skal overtages af nogen, som ikke har er-faring med html og css. Vi har dog instillet værdierne for headings, bokse og tekst i css-de-len af redigeringsværktøjet i Atahualpa, hvilket gør, at den medarbejder hos Als El-Service, som i givet fald skal opdatere hjemmesiden, blot behøver at vide, hvilken heading, der skal vælges, og hvordan man opretter en boks, for at få det rigtige udseende.

En enkelt gang forsøgte vi at ændre en indstilling i editoren i et af temadokumenterne. Det viste sig, at temaet tilsyneladende har indlagt en fejlmelding, hvis man arbejder direkte i koderne, som gør at både siden og kontrolpanelet blev hvidt og umulig at tilgå. Her måtte vi igennem ftp-programmet for at rette op på fejlen. Det sætter derved sine begrænsninger i redigeringsmulighederne.

Vi har undervejs fordelt arbejdet i Wordpress mellem os, efter vi har lavet skitser af, hvor-dan siderne skulle se ud.

Sidst i forløbet sendte vi et link til familien Sand for at høre, hvad de synes om vores forslag til deres website. De var særligt glade for den nemme og overskuelige forside. Også stil og farver var de tilfredse med. De påpegede dog, at stikproppen på forsiden er en tysk model og ønsker den ændret til en dansk. Det har ikke umiddelbart været muligt for os at finde et billede af en dansk model, som vi havde rettigheder til. Men hvis de ønsker at overtage hjemmesiden, vil vi sørge for at få det skaffet eller få lavet vores eget. På baggrund af tilba-gemeldingen foretog vi derfor ikke nogle nævneværdige ændringer efter kontakten.

16

Preview af Atahualpa theme.

EvalueringNu sidder vi med det (næsten) færdige website på skærmen og med stort set hele arbejdet gjort.

Vi har arbejdet godt sammen hele processen igennem, lige fra vi sad med store ark papir og ideud-viklede, og vi sad med hver vores design-tests, til vi har siddet hver for sig og skrevet på rapporten med kontakt over nettet.

Vi har talt vores grundlæggende ideer så meget igennem i starten, at vi har haft tillid til, at den anden kunne træffe sine egne valg, hvis det var nødvendigt.

Grundlæggende er vi tilfredse med resultatet og føler, det er lykkedes os at vise, hvad vi ønsker med siden (virksomhedens kerneværdier og vores forventning til målgruppe), hvilket vi også fik bekræftet af kommunikationen med Gitte Sand.

Vi vil derfor med glæde gøre sitet færdigt, hvis Als El-Service ønsker at gøre brug af det.

17

BilagBilag 1: Projektplan

18

Bilag 2: Tidsforbrug

19

20

Bilag 3: Logoforslag

Bilag 4: Skitser af websites (ideudvikling)

21

Bilag 5: Flowchart

22

Bilag 6: Storyboards

23

24

25

26

27

Bilag 7: Websitets skelet

28

Bilag 8: DesignmanualHerunder følger en gennemgang af de brugte designelementer.

Overskrift på indholdssider (H1):Geneva, 34px, #666, line-height: 1,2, margin: 0.3 em o 10px, padding: 0 0 0 80px, font-weigt: bold. Mellemrubrikker (H2):Geneva, 18px, #666, margin: 1 em 0 0.2 em, padding: 0 80px.

Overskrifter i bokse (H3):Geneva, 18px, #666, margin: 0 0.2 em, background-color: #b6b7b8

Emne i links-bokse (H4)Geneva, 16px, #666, margin 0.2em.

Baggrundsbilleder: Width: ca 740px, opacity ca. 30% eller efter behov.

Brødtekst:Geneva, sans-serif, 0.8 em, #000, padding-left: 80pxpadding-right: 80px.

Links:Geneva, 0.8 emdefault: #666, underlined, boldhover: #169520, underlined, bold.

Links-bokse (class=”box”):border: 2px solid, #cccwidth: 150px, float: right,padding: 5px,margin: 0 5 0 10 px.

29

Footer:padding: 10px, text-align: centerbackgroundcolor: #fffcolor: #444, font-size: 95%

Bokse i højrespalten:225x110px. Baggrundsfarve i øverste boks: #b6b7b8Baggrundsfarve i nederste bokse: gennemsigtig

Medarbejder-billeder:100x120px, s/h.

Menu-linje:11px, geneva, verdana, sans serif, uppercase,border solid 1,5 px #ccc, padding-left og -right: 20px.background-color: #fffbackground-color: hover: #ebeaebbackground-color: parent: #dddlink-color: #888, link-color: hover: #000.

Farvepalette#666: H1, H2, H3, default links#000: Brødtekst, link color hover (menu)#b6b7b8: Baggrund på H3, baggrund øverste boks i højre spalte#169520: Links: hover#ccc: Border (menu), border (links-boks)#fff: Baggrund: footer, body, menu#ebeaeb: Baggrund hover (menu)#ddd: Baggrund parent (menu)#888: Link color (menu)Baggrundsmønsteret findes på http://mariawindretoft.dk/alselservice/wp-content/uploads/2011/12/gronbag-grund.jpg 30

Bilag 9: Idékatalog til videre udvikling af sitetHerunder følger en række forslag til, hvordan man kunne arbejde videre med udviklingen af websitet.

• Færdiggøre de sider, som endnu ikke har fået indhold.• Vi ønsker at alle produktsider skal have samme opbygning som “varmepumpesiden”. Det vil sige, et baggrundsbillede som viser, hvad det handler om, en tekst om produktet, og hvad Als El-Service tilbyder + en boks i højre side med links til yderligere information om produkter og evt henvisning til sider med information om elspareråd etc.• Gøre teksterne mere brugervenlige/mere letforståelige og overskuelige.• Tænke i billeder - gerne medarbejderne i deres arbejdssituationer - vil virke autentisk.• Vi mener også, at man med fordel kunne nøjes med at have et billede af én bil på “Firmaets historie” siden. På den måde vil man kunne vise bilen skråt fra siden, så logo og genkendelighed tydeligt træder frem.• Hvis det er relevant, kunne man lægge yderligere billeder fra firmaets historie - de første lokaler - de nuværende lokaler. Igen for at skabe den historiske forankring.• Man kunne med fordel udtænke en form for systematik i, hvor meget/lidt information man har om de enkelte produkter på hjemmesiden, og hvor meget/lidt man i stedet vil linke til ekstern information.• Man kunne overveje at tilføje en side med “nyheder”. evt forsiden, som kunden også selv har ønsket. Det vil dog kræve et vist flow af updates. Vi har valgt ikke at have sådan en side med, fordi den nuværende side ikke har været opdateret i mere end et år. Det giver et forældet indtryk, hvis seneste nyhed er flere måneder gammel. • Vi har slet ikke arbejdet med søgemaskineoptimering på sitet, hvilket ellers ville være meget relevant i forhold til de sommerhusgæster og turister, der er mange af i området.

31