Issuu on Google+

Projekt ”NYT WEBSITE” Til Risskov Fysioterapi Multimedieteknologi & Interaktionsdesign, Erhvervsakademi Århus, marts 2011

Udarbejdet af: Webspirerne Pernille V. Jachobsen Lene Damgaard


Kontakt information For videre samarbejde

WebspirerneŠ Lene Damgaard: 22392912 Pernille V. Jachobsen: pvj83@hotmail.com


1

INDHOLDSFORTEGNELSE INDLEDNING

s.3

METODE

s.3

FORANALYSE Produktdefinition Procesdefinition PROJEKTBESKRIVELSE

s.4 s.4 s.4 s.4

UNDERSØGELSESTRINNET KOMMUNIKATIONSPLANLÆGNING Afsender Budskab Målgruppe KUNDENS ØNSKER OG KRAV

s.5 s.6 s.6 s.6 s.6 s.6

DESIGN INTERAKTIONSDESIGN INFORMATIONSDESIGN PRÆSENTATIONSDESIGN DE SEKS DESIGN PARAMETRE Form Typografi Illustration Farver Animation og lyd GRAFISKE VIRKEMIDLER Komposition Stil og stemning AIDA-MODELLEN Attention Interest Desire Action

s.7 s.7 s.7 s.8 s.9 s.9 s.10 s.10 s.11 s.12 s.12 s.12 s.12 s.13 s.13 s.13 s.13 s.13

REALISERING KVALITETSVURDERING OG KONKLUSION

s.13 s.14

BILAG


3

INDLEDNING Dette projekt udspringer af afslutningen på kurset Multimedieteknologi & Interaktionsdesign, hvor opgaven lyder på at fremstille et website til kunden Risskov Fysioterapi, samt en projekt rapport. Risskov Fysioterapi ønsker sig et nyt og mere brugervenligt website, da de har fået henvendelser fra patienter der ikke kan finde de informationer de skal bruge på deres nuværende site. Vi vil gennemgå forskellige trin og processer, for til sidst at sidde med et færdigt og brugervenligt site som klinikken og ikke mindst brugerne bliver tilfredse med. Det færdige site kan ses her: http://multimediekursus.ats.dk/0511/lene/wp/

METODE Vi tager udgangspunkt i den helhedsorienterende og åbne HOME-model, hvis fire hovedpunkter: Foranalyse, Undersøgelse, Design og Realisering, har til formål at sætte arbejdet i system. Gennem de fire hovedpunkter, bliver alt fra krav til ideer gennemtænkt og bearbejdet, så man til sidst sidder med et færdigt gennemarbejdet produkt. Vi vælger at arbejde med de underpunkter i modellen, vi finder relevante for vores projekt.


4

FORANALYSE For at kunne levere det bedste resultat til kunden, beskriver vi i foranalysen produkt- og procesdefinitioner, så vi kan få første udkast til projektbeskrivelsen formuleret. Første trin i vores foranalyse er et kundebesøg, hvor sekretæren Ann Anker kom og fortalte os lidt om klinikken og deres ønsker og krav til websitet. Bl.a. at de gerne vil have et mere brugervenligt og tidssvarende website. Herefter havde vi mulighed for at stille uddybende spørgsmål, og vi fik udleveret nogle billeder og noget tekst. Efter dette er vi klar til at definere produkt og proces.

Produktdefinition: For at brugerne af sitet hurtigt kan få fat på de informationer de søger, skal det være let tilgængeligt og brugervenligt.

Procesdefinition: Ved hjælp af udviklingsmetoden Prototyping udarbejdes i løbet af en uge, et overskueligt og brugervenligt site, der både er nemt for brugerne at navigere rundt på, og nemt for klinikken at opdatere.

PROJEKTBESKRIVELSE Formålet og motivationen for at udvikle et nyt website er, at give brugerne en hurtigere tilgang til de informationer de søger. Brugeren skal have mulighed for nemt at kunne finde telefonnummer, kontaktformular, billeder af de ansatte osv. Derudover skal det være nemt for klinikken at opdatere sitet. Vi laver derfor sitet i WordPress som er et CMSsystem der vil gøre det let for kunden selv at opdatere, indsætte nye billeder og sider m.v. Vores udviklingsmetode kommer nærmest Prototyping (som giver plads til løbende evaluering og fokus på validering). På grund af den korte projektperiode og for at minimere risici, har vi forsøgt at opstille forholdsvis grundige specifikationer til websitet før den egentlige design fase. I forbindelse med vores idéudvikling har vi taget stilling til,


5

hvorvidt kundens ønsker og krav vil blive opfyldt. Da kunden ikke har de store krav og idéer til hvordan websitet skal se ud, har vi rimeligt frit spil til at præsentere kunden for en masse idéer. Kort før deadline præsenteres kunden for vores prototype, hvorefter vi specificerer kravene endnu engang og laver rettelser. Projektforløbet er på en uge, og der udarbejdes tidsplan over hvor lang tid vi bruger på de forskellige ting (se Bilag 1). Forløbet afsluttes med aflevering af et færdigt site og en rapport.

UNDERSØGELSESTRINNET Efter foranalysen indleder vi undersøgelsestrinnet med yderligere research på klinikker for fysioterapi, og har selv besøgt Risskov Fysioterapi, for at få en fornemmelse af hvordan det er at være der, så vi har oplevet den atmosfære kunden gerne vil have overført til sitet. Efter vi er kommet hjem, giver os til at brainstorme og lave mindmaps (se Bilag 2). Herefter bruger vi bl.a. post-its til efterfølgende at kategorisere idéerne, da de er nemme at flytte rundt på, hvis man under processen ombestemmer sig i forhold til hvilken kategori de forskellige tanker hører til (se Bilag 3).

Grundig research og idégenerering har gjort at vi kan definere afsender, budskab og målgruppe.


6

KOMMUNIKATIONSPLANLÆGNING Afsender Risskov Fysioterapi har patienter i alle aldre, fra 8uger til 98år, og er meget kendt i lokalområdet. De ønsker ikke nødvendigvis at tiltrække nye patienter via websitet, men derimod et overskueligt og brugervenligt site, så deres patienter hurtigt kan finde de informationer de søger. Budskab Klinikken er kendt for deres behagelige atmosfære, vægt på et personligt behandlingsforløb og deres dygtige fysioterapeuter. Derfor er det målet at få dette til at fremgå af sitet. Målgruppe Den primære målgruppe er klinikkens patienter, der skal have lettere adgang til relevant information. Den sekundære målgruppe er nye besøgende på sitet, der også skal have let adgang til relevant information, men samtidig også skal have mulighed for at danne sig et indtryk af klinikken.

KUNDENS ØNSKER OG KRAV Sitet skal gerne opfylde dette: 

Overskuelighed

Brugervenlighed

Nemt at finde kontaktoplysninger

Udstråle klinikkens kompetence og venlige atmosfære

Være uden scroll

Nem at vedligeholde

Mulighed for at fortælle om nye tiltag på klinikken

Fællesbillede og personbilleder så man kan genkende de ansatte

Et tidssvarende site

Information om behandlingsformer og træning

Overenskomst med sygesikringen


7

DESIGN Efter at have diskuteret ideerne igennem, med både for og imod, er det næste at få fastlagt designet. Da vi har besluttet hvilke kategorier de forskellige ting fra vores mindmaps skal ligge under, begynder vi nu at tegne skitser. De forskellige skitser leder os frem til Storyboardet. Her tegner vi den endelige skitse over hvordan vi ønsker at sitet skal ende med at se ud (se Bilag 7). I forhold til navigationen har vi, som vist i Flowchartet, valgt at brugerne nemt skal kunne klikke sig ind på alle sider, ligegyldigt hvilken side de er på (se Bilag 5). Der vil herudover være et par links til eksterne sider, der åbner i nyt vindue. Herefter følger en gennemgang af informationsdesign, interaktionsdesign og præsentationsdesign, og ydermere tankerne omkring designparametre, grafiske virkemidler og AIDA-modellen.

INFORMATIONSDESIGN Sitet skal hurtigt kunne give besøgende de oplysninger de leder efter. De skal kunne finde kontaktoplysninger med det samme de klikker sig ind på siden, og de skal hurtigt kunne skabe sig et overblik over hvor de kan finde den information de søger.

INTERAKTIONSDESIGN En simpel opbygning af websitet gør, at brugerne hurtigt kan navigere der hen hvor de vil, så de får det de ønsker ud af deres besøg på siden. Derudover har vi valgt at lave to menuer. Den ene, der ligger horisontalt i toppen under banneret, er med kontaktsider og information om hvem klinikken er og hvor den kan findes. Vi laver en ”vejviser” med et billede af klinikken udefra og et kort, så det er nemt for brugeren at finde vej. Ydermere er der et link til Midttrafik, hvor brugeren kan finde køreplaner


8

over de busser der kører til klinikken. Og et link til krak, så de kan få lavet en kørselsvejledning. Der ligger en anden menu i venstre sidebar, hvor brugeren kan finde alt om behandling, træning, priser osv. Disse to navigationsmenuer går igen på alle sider. Vi har lavet en kontaktformular, så klinikken kan kontaktes via mail, hvor man her kan stille spørgsmål, afbestille tid, tilmelde sig hold mv. Ydermere er der under kontaktformularen lagt oplysninger om seneste tid for afbestilling. Brugeren kan også hele tiden se undersiderne, så de kan komme der hen de ønsker, med kun to klik. På forsiden vil der i højre side være mulighed for at lægge nogle aktuelle nyheder ind, såsom Rygskole eller opstart af hold, så man hurtigt kan se om der sker noget nyt på klinikken. Under siden Links, er der nyttige links til andre relevante sites, hvor nogle informationer uddybes.

PRÆSENTATIONSDESIGN Næste skridt er at få selve præsentationsdesignet til at gå op i en højere enhed med informations- og interaktionsdesignet. Det gør vi gennem det grafiske design af sitet, så det er i overensstemmelse med de overvejelser og undersøgelser vi har haft undervejs. Vi har valgt at udtrykket på sitet skal være roligt, stilfuldt og samtidig uhøjtideligt. Det gør vi ved at vælge lyse farver og forholdsvis korte tekster der er nemme for øjet at overskue. Der er to forskellige bannere i headeren, som skifter når man klikker rundt mellem siderne. Formålet med disse er at tydeliggøre at man befinder sig på et website for fysioterapi. Billederne i bannerne skal vise at der både er dynamik og en behagelig stemning på klinikken. Dette er det eneste der bevæger sig på sitet, så vi stadig kan holde den rolige stemning vi ønsker. Resten af sitet er opbygget, med en menulinje i toppen under banneret og i venstre sidebar, så det kun er tekst og billeder der ændrer sig, på


9

de forskellige sider. I venstre side vil man også altid kunne finde telefonnummer på klinikken, så man hurtigt kan komme i kontakt med dem. Den højre sidebar bruges i de fleste tilfælde til billeder fra klinikken, f.eks. for at vise genoptræning eller behandling. På forsiden bliver denne sidebar dog brugt til Aktuelt – f.eks. nyheder fra klinikken. Mellem de to sidebars er et tekstfelt, og i bunden en footer. For at bibeholde den rolige stemning, og for at efterkomme kundens ønske om ikke at have scroll, holder vi så vidt muligt teksten så kort som muligt, men så den stadig kan beskrive hvad de kan. Dette er også for at siderne er så overskuelige som muligt.

DE SEKS DESIGNPARAMETRE Form For at gøre sitet overskueligt har vi valgt at centrere det og ikke lade det fylde hele browseren. Derudover vælger vi en helt enkel formopbygning som denne:

Dette gør igen at overskueligheden fremhæves.


10

Vi holder så vidt muligt denne form på alle sider, så der bliver så få sider så muligt med scroll. Dette gør det også lettere for brugeren at finde de informationer de søger. Typografi For at det skal være nemt at læse selve teksten, har vi valgt den websikre skrifttype Verdana. Den er med sine runde former nem at læse

lige meget hvor

STOR

eller hvor

lille

den er.

Da den horisontale menulinje hænger sammen med headeren, har vi her valgt Helvetica, da denne ikke har fødder på I´et, og dermed hænger bedre sammen med skrifttypen i logoet. Dette understøtter også de forskellige typer indhold i de to menuer. Vi har valgt en linjeafstand på 15px for at linjerne ikke er for tæt på hinanden, og dermed er lettere at læse. Størrelsen på teksten på alle sider er 11px, da det er en behagelig størrelse at læse og samtidig ikke er for stor og ikke forstyrrer rent designmæssigt.

Verdana:

ABCIdef-!%&

Helvetica:

ABCIdef-!%& (str.14)

(str.14)

Illustration Banneret er den første illustration man lægger mærke til, når man kommer ind på sitet. Det skal give den besøgende en hurtig opfattelse af hvilken type site de er havnet på, og et billede af at der sker noget aktivt på denne klinik. Vi har bibeholdt klinikkens logo, da det for nogle af sitets brugere vil skabe en ”genkendelsesglæde”, og en vished om at de er på den side de ønsker at være på. Dette er placeret i midten af billederne i bannerne sammen med navnet, da det giver en god balance på siden.


11

Der er billeder fra klinikken på stort set alle sider, for at illustrere teksten og det de laver på klinikken. Derudover har vi placeret et kort på ”hvor bor vi” siden, så nye patienter kan finde vej. Farver For at holde fast i idéen om at det skal være et roligt site, har vi valgt at holde det i lyse farver. Selve baggrunden er en lys grå tone.

Oven på den ligger selve sitet som er hvidt med en tynd mørk grå border rundt om, for at markere grænsen til den lyse grå baggrund. De lyse farver skaber ro og giver luft og fremhæver derfor det funktionelle. Det giver derudover plads til de farverige billeder fra klinikken, og de skiftende bannere. De grå nuancer der er brugt som baggrund i den horisontale menulinje og højre sidebar, skal fremhæve dem, da der her er noget aktuelt at kigge efter. Venstre sidebar har en tynd lys grå højre-border for at markere dens funktion, altså at der ligger information og funktion der adskiller sig fra center collumn. Teksten har vi også holdt i en GRÅ TONE så den ikke er for hård at kigge på, på den hvide baggrund. Den er dog stadig så mørk at den tydeliggøres i forhold til anden tekst på sitet. For at anvende noget farve fra logoet, har vi valgt at HOVER funktionen ved alle links er den blålilla farve fra logoet. Den højre sidebar har vi givet samme grå baggrundsfarve som browseren, for at synliggøre at ”her sker der noget”. Dette er


12

illustrerende billeder, eller som på forsiden, aktuel information fra klinikken. Herudover er der yderligere to designparametre animationer og lyd, men for at holde websitets design simpelt og overskueligt, har vi valgt ikke at benytte os af disse.

GRAFISKE VIRKEMIDLER Komposition Da det er et website, der ikke har så mange sider, har vi valgt en simpel opbygning, der gør det nemt at navigere rundt og finde de informationer, man søger. Menuen er brugervenlig, da den skifter farve ved hover, og den øverste menu er fremhævet med en baggrundsfarve der gør at den hele tiden er synlig på sitet. Herudover er der adgang til alle sider fra menuerne, og menuerne er tilgængelige fra alle sider. Baggrunden er holdt i hvidt, for at give en gennemgående ro på siden, og grå baggrundsfarver er givet på den horisontale menu og højre sidebar for at skabe fokus på deres indhold. Footeren har fået en baggrundsfarve for at adskille den en smule fra tekstfeltet. Stil og stemning Vi ønsker med dette site at brugeren får et behageligt indtryk af klinikken og et site der er let at bruge, der er derfor lagt stor vægt på en simpel og ren stil. Det gør at overskuelighed og venlighed er fremtrædende. Navigeringen skal være nem, og det skal være let at vedligeholde sitet fra klinikkens side. Med et ”rent” site uden alt for mange farver og forstyrrende elementer men samtidig noget dynamik – skaber vi den stemning af personlighed som klinikken lægger stor vægt på. Dette harmonerer godt med målgruppen.


13

AIDA-modellen Udviklingen af websitet har været med AIDA-modellen i baghovedet. Attention: Blikfanget er banneret i headeren, hvor der er billeder der associeres med fysioterapi, samt logo og navn i midten. Interest: Efter banneret fanger øjnene fællesbilledet i tekstfeltet, som sætter personer på klinikken, der giver den besøgende lyst til at vide mere om hvem de er, hvorefter blikket glider mod den horisontale menulinje, hvor brugeren kan finde sådanne oplysninger og kontakt information. Desire: Ved at udforske siden og indsamle informationer om Risskov Fysioterapi, skabes der efterhånden et ønske om at vælge denne klinik til sin behandling. Action: Efter let at have fundet den information man kunne ønske sig, skulle det gerne ende med at besøgende kontakter klinikken for at få behandling.

REALISERING Realisering på produktniveau går ud at udføre designbeslutningerne i praksis. Vi har udviklet designet i Wordpress, som er et open source CMS system, til opbygning og vedligehold af websites. Det er et brugervenligt system, der gør det let for kunden at vedligeholde efterfølgende, og endda mulighed for mere omfattende vedligehold end de umiddelbart efterspørger. Til gengæld giver det også kunden flere muligheder – hermed sagt at website vedligehold ikke behøver at være tidskrævende og besværligt, heller ikke hvis man ikke er ekspert på området. Vi har valgt et eksisterende tema (Atahualpa), og efterfølgende rettet det til med HTML, CSS, PHP og plug-ins, for at tilpasse det vores ønskede design. Billederne er redigeret i Photoshop og derefter implementeret i Wordpress.


14

KVALITETSVURDERING OG KONKLUSION Vi har forsøgt at efterkomme alle kundens ønsker, og yderligere tilføjet nogle funktioner og idéer, som vi mener at kunden måske ubevidst har et ønske om, eller vi har vurderet at disse vil supplere ønskerne yderligere. Vi mener at websitet er i overensstemmelse med de idéer vi har udviklet igennem HOME-modellens faser, og vores projektbeskrivelse, samt de beslutninger vi har taget undervejs. Da vi præsenterede vores website for kunden, på det sidste møde inden aflevering, udviste de stor tilfredshed med resultatet. Der var efterfølgende nogle små tilføjelser, som var resultat af nogle muligheder vi ville drøfte med dem. Skulle kunden efterfølgende ønske at implementere sitet, ville dette medføre lidt flere drøftelser og idéudvekslinger med kunden, for at sikre en absolut optimering af sitet. Vi valgte at være en lille gruppe på to, på baggrund af erfaring med godt samarbejde (fra tidligere opgaver på kurset). Dette har betydet at der ikke har været så mange at diskutere med, men også en forøget arbejdsbyrde. Da vi ikke har været flere i gruppen, har vi begge måttet udfylde flere roller. Vi har suppleret hinandens kompetencer godt, og har gennemgået alle projektets faser i tæt samarbejde. Samarbejdet har fungeret rigtig godt, og alt hvad der har været af udfordringer er blevet løst med konstruktiv diskussion. Vi er meget tilfredse med resultatet, og vil til enhver tid gøre det igen.


Bilag 1 TIDSPLAN

PRODUKT- OG PROCESAKTIVITETER Overblik Foranalyse Projektbeskrivelse Undersøgelsestrinnet Designtrinnet Kundebesøg Brainstorm Flowchart Storyboard Skitser Form & Farver Skelet med mål Valg af WordPress-tema website FORMULERING - RAPPORTSKRIVNING Designparametre Designmanual (font, farver) Grafiske virkemidler - AIDA Vurdering af samarbejde Klinikbesøg Rettelser I alt

planlagt tidsforbrug

faktisk forbrug

2 2 2 1 4 2 2 1 2 2 2 3 2 35

3 4 3 2 5 2 2 1 2 1 1 1 2 45

2 2 1 1 3 5

2 5 2 1 3 8

76

95


Bilag 2 MINDMAPS


Bilag 3


Bilag 4 SKITSER


Bilag 5 FLOWCHART


Bilag 6 SKELET


Bilag 7 STORYBOARD Overordnet storyboard for websitet Sitet er delt op i 9 felter. Strukturen er fælles for alle sider.

Headeren: Felt A består af et baggrundsbillede med logo i midten. Felt B indeholder 4 menu-links. Venstre sidebar: Felt C indeholder endnu en menu med 4 punkter og 3 underpunkter. Felt D indeholder tekst med åbningstider og telefonnummer. Felt E indeholder ”De danske fysioterapeuter” og ”Sygeforsikiring danmark” logo’er. Center column: Felt F indeholder teksten for den enkelte side. Felt G indeholder eventuelle billeder. Højre sidebar: Felt H indeholder tekst eller billeder. Footeren: Felt I indeholder tekst - kontakt information. Websitets farver: Baggrundens farve:

forskellige nuancer af grå, hvid, blå og grøn fra klinikkens logo. lysegrå (#eee)


Sidens navn: Hjem Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Grafik: gruppe.jpg Tekstindhold: Verdana

(er websitets indsættes i felt indsættes i felt indsættes i felt farven er mørk (#505050)

forside) A E G grå

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i det første link (knap) fra venstre ”Hjem” er blå (#352774) og baggrundsfarven grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff) Højre sidebars baggrund er lys grå (#eee). Link: Teksten ”Se mere her” er grå (#505050) Baggrunden er lys grå (#eee) Link hover: Teksten ”Se mere her” er blå (#352774) Baggrunden er lys grå (#eee)

Sidens navn: Hvem er vi Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, indsættes i felt danmarkfys.png indsættes i felt Grafik: annanker1.png, heikemuller1.pgn, indsættes i felt andersmogensen1.png, ibenkruse1.png, jacob1.png, mettefrank1.png, sunepetersen1.png, trudymeijer1.png faelles3.jpg indsættes i felt Tekstindhold: Verdana farven er mørk (#505050)

A E G

H grå

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i det andet link (knap) fra venstre ”Hvem er vi” er blå (#352774) og baggrundsfarven grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc)


Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Sidens navn: Hvor bor vi Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Grafik: udefra.jpg, krakkort1.jpg Tekstindhold: Verdana

indsættes i felt indsættes i felt indsættes i felt farven er mørk (#505050)

A E F grå

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i det andet link (knap) fra venstre ”Hvor bor vi” er blå (#352774) og baggrundsfarven grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Sidens navn: Kontakt os Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Tekstindhold: Verdana

indsættes i felt A indsættes i felt E farven er mørk grå (#505050)

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i det fjerde link (knap) fra venstre ”Kontakt os” er blå (#352774) og baggrundsfarven grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc)


Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Sidens navn: Behandling Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Grafik: bornebehandling.png, mand.png Tekstindhold: Verdana

indsættes i felt indsættes i felt indsættes i felt farven er mørk (#505050)

A E H grå

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Under-sidens navn:

Vederlagsfri

Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Tekstindhold: Verdana

indsættes i felt A indsættes i felt E farven er mørk grå (#505050)

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)


Under-sidens navn:

Sålefremstilling

Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Grafik: fodform.png, formthotics.png Tekstindhold: Verdana

indsættes i felt indsættes i felt indsættes i felt farven er mørk (#505050)

A E H grå

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Sidens navn: Træning Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Grafik: cykel1.png, glmand.png Tekstindhold: Verdana

indsættes i felt indsættes i felt indsættes i felt farven er mørk (#505050)

A E H grå

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Under-sidens navn: Rygskole Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Grafik: ryg.png, ryg1.png Tekstindhold: Verdana

indsættes i felt indsættes i felt indsættes i felt farven er mørk (#505050)

A E H grå


Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Sidens navn: Priser Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Tekstindhold: Verdana

indsættes i felt A indsættes i felt E farven er mørk grå (#505050)

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve. Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff)

Sidens navn: Links Faste grafiske elementer: newbanner1.jpg, newbanner2.jpg, danmarkfys.png Tekstindhold: Verdana

indsættes i felt A indsættes i feltet E farven er mørk grå (#505050)

Navigation/knapper: Billedet i headeren er link til siden ”Hjem”. Den horisontale menulinjes baggrund er grå (#ccc) Teksten i de øvrige links (knapper) har farven grå (#ccc), som baggrundsfarve.


Link:

Teksten er grå (#373737) Baggrund er grå (#ccc) Link hover: Teksten er blå (#352774) Baggrunden er grå (#ccc) Den vertikale menus baggrund er hvid (#fff) Link: Teksten er grå (#666) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774) Baggrunden er hvid (#fff) Links på siden (felt F) har baggrundsfarve hvid (#fff). Link: Teksten er grå (#505050) Baggrunden er hvid (#fff) Link hover: Teksten er blå (#352774). Baggrunden er hvid (#fff)

Forsiden


Bilag 8 DESIGNMANUAL TEKST Typografi Der er valgt skrifttypen Verdana, og det vil være gennemgående på hele sitet, undtaget den horisontale menu der er Helvetica. Verdana:

ABCIdef-!%&

Helvetica:

ABCIdef-!%& (str.14)

Tekstfelt Verdana Overskrifter: Str. 12pt Brødtext: Str. 11px Farve: #505050 Line height: 15px Horisontal menu tekst: Helvetica Str.10px Farve: #373737 Hover: #352774 Uppercase Venstre sidebar tekst: Verdana Menu links: Str. 11px Farve: #666666 Farve ved hover: #352774 Uppercase, undersider: normal. Tekst: Str.11px Farve: #505050 Højre sidebar tekst: Verdana Str. 11px Farve: #505050 Line height: 15px Overskrift: Str.10px Bold Titel: Str. 11px Bold

(str.14)


Footer: Verdana Str.: 95% Farve: #777777 Links p책 sider: Verdana Str. 11px Bold Farve: #505050 Farve ved hover: #352774 Line height: 15px


FARVER

#ffffff

#eeeeee

#cccccc

#878787

#777777

#666666

#505050

#373737

#352774


Rapport Risskov Fys