Responsiv hjemmeside

Transkript

1 Kom/it niv.a 3.år Responsiv hjemmeside Hospidana Carina Aa Hansen, Mathias Larsen, Peter Lærke 2014

2 Forord I vores rapport vil man kunne gå ind og læse omkring hvorfor vi har valgt at opbygge vores hjemmeside på den måde vi har valgt. Hvorfor den er opbygget med den farve og disse billeder. Derudover vil man også kunne læse omkring hvor det er Hospidana gerne vil hen, samt hver det egentlig emner omkring hjemmesiden. Om de synes hjemmesiden fanger den målgruppe vi gerne vil fange ved hjælp af hjemmeside, og om de synes at det fungere ved hjælp af den responsive hjemmeside.

3 Indholdsfortegnelse Forord... 1 Indledning... 3 De seks faser... 3 Problemanalyse... 3 K-strategi... 3 Ideudvikling... 4 Medieproduktion... 4 Test... 5 Kanylemodellen... 5 Afsender... 5 Budskab... 5 Medievalg... 6 Kodning... 6 Støj... 6 Modtager... 6 Målgruppe... 6 Minerva modellen... 7 Grafisk design... 8 Billedbeskrivelser Aidamodellen Brugervenlighedsparametre Konklusion Kildeliste... 13

4 Indledning Vi har valgt at gå ind og lave en ny hjemmeside til Hospidana. Dette har vi valgt da, deres hjemmeside ikke var responsiv, samt deres hjemmeside ikke var opdateret i forhold til hvad vi normalt har i dag. Dette finder vi vigtigt da at selve ansigtet udad til er vigtigt, for det er denne måde de kommer til at kommunikere til folk på. De seks faser Der er seks forskellig men meget vigtige faser når man arbejder med kommunikation, dette berører hvordan man kommer ud til folk. På hvilken måde man gerne vil signalere, hvad man vil signalere. Samt hvor man gerne vil hel med det hele. Der er disse 6 faser; Problemanalyse Problemet ved denne side er at budskabet, samt måden de kommer ud til folk ikke er opdateret. Det er en gammel side som ikke er opsat på samme måde som de sider vi har i dag. Der er også det problem at faktisk alle personer har en smartphone, hvilket man kan gå på nettet med, og der er ikke noget mere irriterende end hvis man sidder på en mobil og man skal sidde og kører frem og tilbage på siden for at kunne se alt på siden. Det vil nok gå ind og gøre at folk bliver trætte af at kigge på hjemmeside, og at evt. nye kunder ikke finder det interessant på samme måde end hvis hjemmeside nu var mere inspirerende. Vi vil gå ind og opdatere det så det bliver interessant for folk at gå ind på siden og evt. finde en ny leverandør. Ikke bare ved hjælp af de er ude og snakke med kunderne men i stedet også at selv vil kunne finde en hjemmeside samt de finder en som de også udad til ser opdateret på højeste standart, som deres materialer også er. K-strategi Her har vi gået ind og analyseret hvad det egentlig er Hospidana gerne vil ud med, hvor det er de vil hen. De vil gerne kunne signalere igennem deres hjemmeside, er at de er troværdige. At de er opdateret på de nyeste ændringer. De vil gerne vise at de er åbne for nye ideer, at de generelt er positive for nye ting. Derud-

5 over også at de holder hvad de lover og forventer det samme den anden vej. De vil også gerne kunne kommunikere med hele verden ved hjælp af deres hjemmeside. Og igennem dette vil vi gerne kunne gå ind og lave en rødtråd igennem hele Hospidanas meninger og holdninger samt på måden vi opbygger hjemmesiden på. Dette vil vi gøre ved at brug samme farveskema gennem alle siderne inde på vores hjemmeside. Dette skal være farver som signalere de holdninger som Hospidana her, om hvordan de gerne vil drive et firma. Samt det skal være en hjemmeside som skal være simpel men stadig fyldt med alle de informationer der skal være. Ideudvikling Her er vi gået ind og lavet nogle forskellige optagninger på hvordan vi skulle ud til folk, hvordan vi ville sætte siden op, og med hvilke farver vi ville gøre det med. Til dette brugte vi både andre hjemmesider til inspiration samt koble det op til måden vi gerne vil ud med budskabet på. Grunden til at vi har valgt denne opbygning, er at det er den måde vi synes den er mest overskuelig, samt den måde vi kommer bedst ud med budskabet samt det er den mest overskuelige samt lettilgængelige måde. Det endelige valg er så opbygningen ude til højre. Medieproduktion Her vil vi begynde selve produktionerne af vores hjemmeside, her har vi gået ind og taget nogle valg omkring farven, VI har valgt at skifte mellem en lys farve og en mørk farve. Dette har vi valgt da vi gerne vil bibeholde den ene side, men det skal stadig være overskueligt. Dette synes vi fungere godt ved at dele siden op på denne måde.

6 Test VI har gået ind og lavet en test på hvad det er Hospidana, eller Hospidanas ledelse mener omkring hjemmesiden. Dette fik vi lidt respons på: Vores forside, var en rigtig positiv oplevelse for dem. Dette var det da de godt kunne lidt ideen med hånden hvor jorden er tegnet på. De synes det var en god ide, samt et godt perspektiv af hvordan de er. Derudover kunne de godt lide ideen om at opbygge siden, på en meget enkel måde ved at lave det som en one-page. Dog snakkede de om med hensyn til placering af kortet med deres placering var forkert. Men dette er kun en til rettelse. Samt de snakkede om at de synes vi skulle overveje at ændre den lilla farve på forsiden, men dette var der dog lidt delte meninger om. Kanylemodellen Laswells kommunikationsmodel også kaldet kanylemodellen er en analyse model, som man opfandt under 2. verdenskrig for at kunne beskrive Tv programmer, aviser samt radio udsendelser. Modellen er bygget sådan op at man kan beskrive: Hvem siger hvad gennem hvilken kanal til hvem og med hvilken effekt? Dette er den klassiske kommunikationsmodel. Modellen kaldes også for en passiv model, da den er tiltænkt til at man kan nærmest sprøjte et eller andet ind i modtageren uden at han egentlig har nogen indflydelse på det. Man plejer at sige at man kan dosere en modtager lidt ligesom man dosere en syg med medicin. I denne fase for at nå ud med det rigtigt budskab på den rigtige måde er der nogle faser man skal igennem nemlig; Afsender Vi har valgt at lave en hjemmeside til Hospidana det vil så sige at afsenderen er Hospidana og tildeles Mediplast, da det er moderselvskabet til Hospidana, hvor Hospidana er underfirma under Mediplast. Det er dem der har en interesse i at sælge deres varer, både til Danmark men også til resten af verden. Budskab Budskabet de gerne vil ud med ved hjælp fra deres side er at de er pålidelige, at de er åbne for nye firmaer samt nye ideer. At de står ved det de siger, men også at det er verdens omspændende. Det er det vi gerne vil have frem ved hjælp af vores hjemmeside. Desuden vil vi godt hjælpe dem med at sende gode signaler

7 afsted til deres kunder, således at de for fornemmelsen af et professionelt firma, som har styr på tingene. Med en hjemmeside, får de herved nemmere ved at blive fundet. Medievalg Dette er så en hjemmeside, men der er noget helt specielt ved denne type som vi har valgt nemlig en responsiv. Dette betyder at når man ser hjemmesiden på en mobil eller en ipad så justere hjemmesiden sig efter hvor stor genstanden er man ser hjemmesiden på. Den justere sig på denne måde uden at få en scroolbar i bunden. Dette har vi valgt da det er meget mere professionelt end hvis der skulle havde været en scroolbar. Samt det er meget nemmere og hurtigere at finde rundt på hjemmesiden. Så en hjemmeside der er automatisk justerbar i forhold til elementet. Kodning VI har brugt en meget ligefrem og meget informationsrig kodning på vores hjemmeside. Vi har valgt at den skal være overskuelig, men det der skal være på hjemmesiden skal være brugbart, samt det skal være overskueligt og forståelig. Så selv en person der ikke er inde i hvad Hospidana er, samt hvilke produkter de har. Her skal helt almindelige personer også skulle gå ind og gøre sig klogere på hvad det egentlig er de laver. Men det er dog også rigtig vigtigt at der kommer de ting ind på hjemmesiden som evt. andre fabrikker samt kunder vil kunne drage nytte af. Støj Der kan være mange forskellige støjkilder, når vi snakker omkring en hjemmeside. Der kan være reklamer der kommer op i bunden, eller programmer på ens egen computer som vækker personen opmærksomhed. Det kan for eksempel også være på mobilen hvis der er en person der skriver eller noget ligne derpå. Når vi har sådanne et produkt skal man vide at der er mange støjkilder, og derfor er det også vigtigt at man har en hjemmeside der fanger, da der er så mange de kæmper om opmærksomheden. Vi kender det også fra os selv, når vi er inde på Facebook, en netavis eller bare en helt almindelig hjemmeside, er der hele tiden andre reklamer eller genstande som hele tiden forsøger at få vores opmærksomhed. Modtager Modtageren er så hospitaler, store firmaer der levere videre direkte ud til kunderne, det kan være en apotek kæde. Der er mange forskellige modtager i lige dette tilfælde, både da de hele tiden gerne vil finde nye kunder, evt ved hjælp af de kunder som de har nemlig Activa og Krevi. Men dette kan der læses meget mere omkring nedenfor i afsnittet målgruppe da der har vi beskrevet helt i dybden med lige præcis hvilken målgruppe det er vi stiler imod. Målgruppe Det er meget vigtigt at kende sine målgrupper, det er faktisk det vigtigste, så derfor sørger vi for at fokusere på vores målgruppes behov og den bedste kommunikations metode. Vi laver en hjemmeside der er brugervenlig og forståelig for alle og ikke en kompliceret en som man bliver forvirret med alt for mange reklamer og links. Enkelt og simpelt men alligevel brugbart. Hjemmesiden sælger bandage og hvem bruger ikke bandage? Man kan købe bandage på apoteker og der leverer Hospidana også ud til. Når alle kan bruge bandage skal man også kunne fokusere på en målgruppe, men man kan ikke lave den perfekte hjemme side til alle fra år men kan prøve at skære ned og finde den perfekte målgruppe. Hospitaler, skader i hjemmet og

8 millitæret, alle kan bruge bandage og alle kan være uheldige. Alligevel skal vi måske skærpe det ned til at fokusere at sælge til lidt større end bare en enkelt person men firmaer og butikker. Vores målgruppe er skåret ned til at blive solgt til større firmaer og hospitaler. På den måde viser Hospidana også at de sælger en kvalitets varer og dermed får Hospidanas kunder mere tillid og tro til deres produkt. Dette gør de da, Hospidana laver kvalitetsvarer, og derved tager fat i de storekunder. Når de gør dette signalere de stabilitet til andre kunder. Hospidana søger folk samt virksomheder som vil kunne sælge vores produkt videre. Hospidana handler allerede med en del store firmaer som giver dem god respons og giver vores firma en større genkendelse. Ved genkendelse og god marketing vil vi forbedre kommunikationen ud til mere internationale firmaer og hospitaler som vi vil gøre en indsats i at få større kontakt og handel med. Hospidana er et firma der vil gøre en forskel for folk der har behov for god bandage. Så dette vil sige vi søger virksomheder som kan sælge produkterne videre, eller bruge produkterne til de funktioner som de er beregnet til. Det skal være personer Minerva modellen

9 Vores målgruppe ligger i det blå segment for vi søger folk med høj standart firmaer der vil have kvalitet frem for pris. Hospidana produkt er af det højeste kvalitet og ikke noget billigt som Kina ville prøve at efterligne og sælge meget billigere. Vores produkt er let at anvende og bliver kun udleveret til hospitaler og apoteker. Vi sælger til firmaer der får tilfredse kunder. Vi søger netop dem med høj standart for det er ikke billig lav kvalitetsvarer. Hvorfor har vi netop valgt at sælge vores produkt til firmaer og hospitaler. Fordi vi vil sælge til dem der vil sælge videre og give til deres patienter. Samt det er disse personer som sidder i den sektor som Hospidana vil henvende sig mest til. Hvilket de vil optimere ved hjælp af hjemmesiden, for at komme op på samme niveau som andre højtlæggende firmaer. Derudover er det private virksomheder der handler imellem, dette er Hospidana også. Virksomhederne handler imellem, og derefter sælger de det videre til de offentlige i alle lande. Grafisk design Siden er bygget således op, at den er tilsvarende til de designs, som man bruger i dag. Blandt andet har vi valgt ikke at have mange forskellige undersider, men i stedet at lave siden som et One Page design, hvilket som navnet antyder har den betydning, at man har hele siden, som en enkelt side, man så scroller igennem. Derefter har vi også valgt at have Smooth Scrool, fordi at det gør siden lidt mere livlig, i forhold til den måde det ellers ville have set ud på, hvor det bare hopper rundt, når man bruger menuen. En anden ting vi har lavet, er selvfølgelig at vi har gjort selve siden responsiv, således at den tilpasser sig til de forskellige enheder, som den bruges på. Det har vi også eksempler på lige nedenunder.

10 Billederne ovenover er ekspempler på hvordan det ser ud på forskellige enheder. Øverst et billede fra en normal browser, derefter fra en mobiltelefon og til sidst fra en tablet. Som det kan ses på billedet er siden lavet sådan at menuen helt forsvinder, hvor bredden bliver for lille til at den kan være der. I stedet kommer der en lille knap med 3 streger frem, som man så skal trykke på, for at få menuen frem. Grunden til valget af dette er selvfølgelig at normale knappe ville blive for små, og til dels også at hvis vi skulle have den mobile navigation med en liste åbent, ville man have alt for lidt skærmplads, hvilket ville forpurre brugeroplevensen på siden, hvilket vi jo ikke vil. Nogle af vores små billeder er også responsive sådan at de ændre farve enten når man scroller over dem, eller når man har musen over dem. Grunden til dette er igen at vi håber at den orange farve kan skabe en del opmærksomhed omkring sig og derved få folk til at læse om det. Der ud over har vi valgt at holde farver i stildels samme farvelege, dette har vi valgt da vi gerne vil have samme linje igennem siden. Dette har vi valgt da det gør siden mere overskuelig, og brugervenlig. Dette tilpasser sig også når skærmstørrelsen ændrer. Vi har valgt at bruge nogle meget almindelige, og letlæselige skrifttyper. Dette har vi da dette er stilrent, og det henvender sig til en større gruppe. Dette gør det da, hvis der er for meget kims krams kan det blive svært og se og hvor de bliver for store og klodset er de heller ikke behagelige at kigge på. SÅ bliver man bare irriteret over det. Skrifttyperne er hovedsageligt sorte, dette har vi valgt da det passer bedst ind til resten af designet af hjemmesiden. Da vi har valgt at køre hjemmesiden generet neutral. Der er dog visse ting der skiller sig ud, dette er vigtige ting hvis vi gerne vil have at vores målgruppe lægger mærke til. Dette har vi valgt at farve orange, da det er en farve som fanger øjet. Dette er skrifttypen; Den generelle opbygningen Siden er opdelt i 4 sider, hvor at man ned gennem siden kan finde de oplysninger som er nødvendigt for at finde de fornødne oplysninger omkring Hospidana. VI har valgt at skifte mellem lyse og mørke sider, dette har vi valgt da det deler siden på i 4 under grupper. VI har valgt at bruge den orangefarve ned gennem hele siden. Dette har vi valgt da, det er en farve som fanger øjet. VI har placeret den orange farve, vigtige steder. Dette vil sige at det er steder, hvor der er noget vigtigt vores målgruppe skal lægge mærke til omkring Hospidana. Derudover har vi valgt at opbygge halvdelen af siden, med cirkler. Dette har vi valgt da dette giver et hurtigt overblik over hvilke informationer de gerne vil ud med til deres målgruppe. Hvor der står en smule information omkring Hospidana, også man derefter kan trykke på linksne og derved kan komme videre ing og se mere omkring dem. Nederst på siden har vi så lavet hvor man kan komme

11 videre, for at afrunde siden. For at vise dem at hvis man skriver her kan man komme videre og komme i kontakt med dem. Billedbeskrivelser Dette billede har vi valgt at bruge i toppen lige når man møder siden, hvor der derpå så står en lille smule omkring Hospidana og links til at komme videre. VI har valgt dette billede, da det passer godt ind i selve hjemmesiden. Dette gør den både farvemæssigt, for vi så kan vi nemlig skifte farvemæssigt hele vejen ned gennem hjemmesiden. Vi har også valgt dette billede, da det både viser at vi går hånd i hånd. Dette gør det ved at man har overmalet 2 hænder, som kan gå ind og symbolisere sammenhold og fællesskab. Hvilket hænger godt sammen med Hospidana, dette gør det da Hospidana laver et produkt som skal kunne hjælpe folk i situationer, hvor de virkelig behøver den. Da deres produkter både kan bruges i brandpunkter og på hospitaler samt private hjem. Derudover signalere billede verden og derved verdensomspændende. Farvernes betydning Farverne på billede går også ind og signalere en del til vores målgruppe. Da farverne generelt har en stor indflydelse på hvordan man opfatter en side. Samt hvordan ens indtryk af siden kan blive ændret på grund af farverne. Hvis man går fra nogle meget positive farver til negative, kan det få målgruppen til at reagere, og finde det mærkeligt. I vores billede finder man hovedsagelige; Lilla farvekode 65168B o Den lilla farve signalere balance, det er en farve som er en blanding af den røde farves stimulering og den blå s beroligende effekt. Det er en farve som også tiltrækkes og henvender sig til kreative. Dette hænger godt sammen med Hospidana, dette gør det da de er klar på at forny sig.

12 Blå- Farvekode; 92B2D9 o Den blå farve signalere troværdighed, pålidelighed og engageret. Dette henvender sig også godt til Hospidana, dette gør det da de gerne vil vise ud af til at de er troværdige. At der ikke er nogle skjulte ting når man handler med dem. Orange/brun farve (hudfarve) farvekoden; CC5A27 o Dette er en blanding, hvor den brune signalere stabilitet og pålidelighed, hvor den orange viser ungdommelighed, varme og energi. Så hudfarven går ind og påvirker målgruppen på den måde at de får en ide om at Hospidana er klar på nye udfordringer, men de er stadig stabile. Aidamodellen AIDA er en forkortelse for Attention, Interest, Desire og Action og er en kommunikationsmodel. Attention (dansk: opmærksomhed) Dette er den del, som fanger øjet. Dette kan være tekst eller billede. Denne del er normalt placeret i øverste halvdel. Interest (dansk: interesse) Dette er den del, som får læseren til at fastholde interessen. Desire (dansk: ønske/begær) Dette er den del, som får læseren til at ønske, at han havde produktet. Denne del består ofte af en masse positive ord om produkt, og hvad produktet kan. Action (dansk: handling) Dette er den del som får brugeren til at købe produktet. Denne del indeholder ofte billeder af produktet og information om, hvor man kan købe produktet.

13 Attention. Er i vores tilfælde de lidt stærke farver på siden, som vi vil have til at fange folks opmærksomhed. Blandt andet den store orange knap midt på startsiden, hvor der står Lær mere om os. Det er desuden også det orange område i bunden af siden, hvor vi har en kontakt form, med tilhørende mappe, så folk kan se hvor adressen er. Interest. Det som får folk til at fastholde interessen her er selvfølgelig indholdet på siden, hvilket vi så ikke har fokuseret så meget på, men mere på selve designet og responsive funktionaliteten på siden. Derfor kan vi ikke sige det vilde om dette. Desire. Det som skal få folk til at ønske at de har produktet er lækre billeder og gode features. Da vi igen fokusere mest på designet er der ikke så meget indhold. Men vi har dog et afsnit på siden, som kort fortæller om hvorfor vores produkter netop er gode og hvorfor det er dem man skal købe. Dette ligger under afsnittet Hvad tilbyder vi?. Action. Da vores side ikke er tiltænkt som en webshop, er der som sådan ikke noget hvor man kan sige at det får dem til at købe det, som for eksempel en købs knap. Men vi har i stedet lidt oplysninger om hvordan vores produkter er lavet, og hvorfor de netop er gode produkter og dem som folk altså skal have. Brugervenlighedsparametre Funktion Den er funktionel, dette er den da hjemmesiden tilpasser sig efter hvilket materiale man finder hjemmesiden på. Med dette mener vi at hvis man åbner hjemmesiden på computeren eller en telefon tilpasser hjemmesiden sig det, sådan så der ikke kommer en scrollbar i bunden. Anvendelighed Hjemmesiden finder vi anvendelig, dette finder vi da den er opbygge på en så enkel måde som mulig. Men man har stadig mulighed for at kunne gå videre og finde flere informationer eller kunne komme i kontakt med dem. Vi finder den meget overskuelig, da man finder informationerne i en logisk rækkefølge ned gennem hjemmesiden. Æstetik Dette gør den da, siden er opbygget smart og nyt. Dette har vi gjort da Hospidana gerne vil virke klar og opdateret ud ad til, ligesom deres varer er. Den er også opbygget som indsat med de informationer sådan så den virker troværdig, da dette er vigtigt for dem at hjemmesiden viser dette. Dette er vigtigt da de gerne vil kunne vinde evt. nye kunder ved hjælp af hjemmesiden, så derfor skal den virke troværdig som deres firma også er. Sprog Man får en enkel beskrivelse af hvad Hospidana laver og hvad det er de gerne vil ud med. Dette er kortfattet og meget præcist. Samt det er skrevet i et letlæseligt sprog, da alle skal kunne være med. Det er formuleret lige frem, hvor der ikke er noget der er skjult.

14 Konklusion Konklusionen på denne hjemmeside er at vi har formået at kunne lave en hjemmeside som udfylder Hospidanas krav. Dog er der nogle ting der skal laves som lidt ekstra, hvilket er der skal laves en hjemmeside på tysk og engelsk også, da hovedleverandørerne ligger i udlandet. Men det er en hjemmeside som er overskuelig, hvilket var den hovedsagelige formål. Derudover var formålet ved hele processen at vi gerne ville ud med et budskab, hvilket Hospidana finder at vi har udfyldt. Kildeliste Kommunikation og IT A Grundbog Systime. Baggrundsbillede: Farvekodning; HUSK AT SKRIVE AT HJEMMESIDEN HAR VI KUN LAVET PÅ DANSK MEN DEN SKAL OGSÅ LAVES PÅ ENGELSK OG TYSK!