Indhold. Præsentationsdesign Realiseringstrinnet Søgemaskineoptimering Foranalyse Kravspecifikation Karakteristik...

Størrelse: px
Starte visningen fra side:

Download "Indhold. Præsentationsdesign... 15. Realiseringstrinnet... 16 Søgemaskineoptimering... 16 Foranalyse... 18 Kravspecifikation... 18 Karakteristik..."

Transkript

1 Præsentationsdesign Indhold Indledning... 4 Problem-beskrivelse... 5 Problemformulering... 6 Metode... 7 Foranalyse... 7 Systemudviklingsmetode... 7 Karakteristik af Bryghuset Vendia... 8 Undersøgelse... 8 Design Realisering Teori Foranalyse Karakteristik af virksomheden Undersøgelse Projektets succesfaktorer SWOT-analyse Interessentanalyse Målgruppe Kommunikationsplanlægning Designtrinnet Realiseringstrinnet Søgemaskineoptimering Foranalyse Kravspecifikation Karakteristik Kravspecifikation Undersøgelse Projektets succesfaktorer SWOT-analyse Konklusion på SWOT-analysen Interessentanalyse Hvem er interessenterne Hvad er deres interesse i projektet Hvad kan de bidrage med Research af konkurrenter Brugerinvolvering Prototypetest Brugervenlighedstest Peer reviews Afsluttende test Ideudvikling Konceptbeskrivelse

2 Kommunikationsplanlægning Målgruppe Primære/ interne målgruppe Eksempel på primær/ intern persona Sekundære/ eksterne målgruppe Eksempel på sekundær/ ekstern persona Design Analyse af hjemmeside Logo Favicon Moodboard Inspirationsark Hjemmesiden Video Informationsdesign Interaktionsdesign Navigation Flowchart Visuel identitet Præsentationsdesign Tekst Billeder Animation Video Lyd Komposition Opmærksomhedsniveauer Skitselayout Gestaltlove Typografi Kontrast Valg af farver Realisering Typo Template jquery Nyhedsbrev Open Source Moduler CMS Strukturering Navigering Søgemaskineoptimering Afprøvning test Browser test Validering

3 Brugervenlighedstest Peer reviews Vedligeholdelse og opdatering Budget Konklusion Perspektivering Procesrefleksion Litteraturliste Bøger Internet Moodboard Inspirationsark Andet Bilag 1 Kravspecifikation Bilag 2 Gammel hjemmeside Bilag 3 Moodboard Bilag 4 Skitser Bilag 5 Undersider Bilag 6 -Budget Bilag 7 Designmanual Farver Skrifttyper Bilag 8 Tidsplan Bilag 9 PPM booklet.77 3

4 Indledning Bryghuset Vendia startede i oktober 2006 da en gruppe selbestaltede købte ejendommen på Markedsgade 9. De købte den med det formål atter at få gang i ølproduktionen i Hjørring. Det var tænkt som at, bryghuset skulle være et multifunktionshus med fokus på at brygge special øl, lave mad og lave events af god kvalitet. Bryghuset er nu etableret i funktionelle og hyggelige lokaler, her finder restaurationsdrift, mødeaktivitet og lignende ting sted. I bryghuset findes der flotte selskabslokaler som egner sig til bryllup, konfirmation eller fødselsdag. Lokalerne kan også med fordel benyttes til familiefester, jubilæer, og foredrag/undervisning. Bryghusets Brasserie er hyggeligt indrettet med uformel atmosfære. Der er fra brasseriet udsigt til baren, hvor der tilbydes øl direkte fra lagertankene, gourmet restauranten og bryggeriet. Brasseriet er et prismæssigt overkommeligt spisested, med et spændende udvalg af deres egen kvalitets øl, men der er også et bredt udvalg af vine og avecer. Uanset hvad det hedder, så handler det om ganske enkelt at læne sig tilbage, opleve - og nyde. 4

5 Problem-beskrivelse Bryghuset Vendia har en hjemmeside som de ikke føler, er helt up-todate, derfor vil de gerne have en ny hjemmeside som er mere moderne. Hjemmesiden skal dog stadig være i retning af den samme stil, da de ikke vil miste de besøgende på siden som de allerede har. De skal selv have muligheder for at redigere i siden, ligge billeder, tekst og lignende ting op. Samtidig vil de gerne kunne kommunikere med deres brugere ved at sende nyhedsbreve ud til dem som er skrevet op til det. De vil også gerne have en video der fortæller om hvem de er og hvad det er de laver. 5

6 Problemformulering Hvordan laver jeg en hjemmeside for bryghuset som både de selv, men også deres målgruppe, oplever som up to date? - Samtidigt skal den eksisterende målgruppe ikke opleve at identiteten er voldsomt forandret. Hvordan kan man endvidere tilføje en video til den nye hjemmeside, som giver målgruppen et visuelt billede af hvem bryghuset er? 6

7 Metode Jeg har valgt at opbygge mit projekt med Home-metoden. Jeg vil tilpasse HOME-metoden til projektet, så det kun er de ting som er relevante for mit projekt. Foranalyse Systemudviklingsmetode Systemudviklingsmetoder er modeller eller metoder, de repræsentere forskellige holdninger til, hvordan udviklingsarbejdet kan organiseres. Metoderne giver også en god forståelse af, hvordan webudviklingsarbejdet kan organiseres, selvom det primære fokus er på systemudviklingsaktiviteter. Det særlige ved webudviklingsprojekter er, at de omfatter både kreative og analytiske aktiviteter, derfor er tilrettelæggelsen speciel vigtig. Der skal nemlig samarbejdes på tværs af mange professioner, hvilke ikke har kendskab til hinandens fag, fx grafikere, marketingsanalytikere, programmører, kunder, brugere. Det udgør en særlig udfordring for tilrettelæggelsen. tilfældes. Det er kravspecificering, design, implementering, test og videreudvikling. Nogle gange er der også en forundersøgelsesaktivitet, andre gange er denne inkluderet i kravspecifikationen. Der er gennem tiden kommet mange forskellige bud på systemudviklingsmetoder, men grundlæggende for dem alle er at de repræsenterer to syn. Der er lineært syn, det afspejles fx i vandfaldsmetoden. Den opbygges på at kravene til et system kan defineres på forhånd. Den kræver meget planering, men det er også en utrolig veldokumenteret proces. Det andet syn er, evolutionært, der antages det at kravene er foranderlige, og kan derfor ikke defineres på forhånd. Her udvikles der lidt af gangen, så giver kunden feedback, også arbejder man videre. Her hører prototyping ind under. Når man arbejder med metoderne kommer der nogle helt naturlige spørgsmål omkring, behovet for dokumentation og spørgsmålet om, hvordan der dokumenteres. Hvordan sikrer jeg at kunden for det produkt han/ hun ønsker. Hvordan sikrer jeg systemets kvalitet. Hvordan organiseres et udviklingsteam, og hvilke roller og kompetencer kræves for at udføre de enkelte aktiviteter. (Busch et al. 2011: ) Der findes mange måder at tilrettelægge udviklingsarbejdet på, men der er nogle grundlæggende aktiviteter, som alle modeller har 7

8 Jeg vil bruge vandfaldsmetoden til mit projekt. Ved at bruge vandfaldsmetoden er det meget nemt, og synligt, hvordan man skal planlægge sit projekt. Metoden giver samtidig også en meget god dokumentation af processen. Der er samtidig også ulemper ved at bruge vandfaldsmetoden, den er delt meget op. Her kan det blive et problem hvis folk har hver deres ansvarsområde, og folk ikke rigtig interessere sig for hinandens områder. Men dette problem vil jeg dog ikke få problemer med da jeg er alene og derfor har interesse i alle aspekter af projektet. Det er også vigtigt at man har en god og uddybende kravspecifikation, for hvis ikke man har det, så kan man godt ramme ved siden af det som kunden egentlig ønsker. (Busch, Anne Mette et al s ) En kravspecifikation er en aftale mellem udvikleren og kunden, den omhandler de systemkrav der stilles til produktet. De krav som er i kravspecifikationen, er oplysninger om hvad systemet skal kunne gøre for brugeren, og hvordan det skal anvendes og virke. Kravspecifikation bliver lavet for at finde frem til hvad det er kunden vil have og har brug for. Det er også en aftale mellem udvikleren og kunden. Det er den som skal testes op imod til sidst, for at se om produktet lever op til kundens forventninger og krav. Det er også de krav som indgår i prisen man har aftalt med kunden, skal der laves ekstra tilføjelser, så kommer det til at stå for kundens regning. Man kan sige at kravspecifikationen er en slags kontrakt. (Busch, Anne Mette et al s. 157) Karakteristik af Bryghuset Vendia Jeg vil lave en karakteristik af Bryghuset Vendia for at, jeg ved mere om kunden, og kan sætte mig i deres sted. Dette skulle kunne hjælpe mig med at lave et bedre produkt. Undersøgelse I det her punkt af processen er det at der skal undersøges, og jeg skal finde ud af hvad der yderligere skal ske inden projektet er færdigt, for at det bliver en succes at have arbejdet med projektet. Det skal også gøres for at, jeg har noget at måle op imod når der skal reflekteres over hvordan processen og det endelige projekt er endt ud. Jeg vil lave en SWOT-analyse i forhold til det at, Bryghuset Vendia får lavet en ny hjemmeside. Det er selvfølgelig for at finde ud af fordele/ulemper og styrker/svagheder. 8

9 I interessentanalysen vil jeg kigge på hvem det er der har indflydelse på projektet, og hvem der vil blive påvirket af projektet. Nogle påvirker, eller have indflydelse, under projektets forløb, mens andre først bliver påvirket når projektet er slut. I undersøgelsen af konkurrenter vælger jeg at fokusere på andre restauranter, men også de andre bryghuse som er indenfor regionen (Nordjylland). Men da der ikke er så mange bryghuse, så er det primært restauranter i Hjørring og omegn som jeg vil fokusere på. Jeg gør dette for at finde ud af hvad jeg skal tage højde for i udviklingen af hjemmesiden og undersøge hvad der er bedst at gøre for at Bryghuset Vendia kan nå ud til så mange brugere som muligt. I brugerinvolveringen vil der blive taget stilling til hvorvidt brugerne skal have indflydelse på produktet. Det er vigtigt at finde ud af forholdsvis hurtigt, om jeg vil have brugeren med hele vejen igennem processen, eller om jeg kun ønsker dem under enkelte beslutninger, eller de slet ikke skal have indflydelse, også bare lave et produkt der rammer dem jeg ønsker. Hvis jeg ønsker at de skal være med under hele udviklingsprocessen, så skal der selvfølgelig bruges en del mere tid på det, end hvis jeg slet ikke vælger at have dem med. Når jeg har fundet ud af hvorvidt brugeren skal være med under processen, så vil jeg lave en idéudvikling. For at få alle ideerne med, vil jeg lave en brainstorming for at blive inspireret af de ideer jeg går med, og som nødvendigvis ikke har nogen sammenhæng med hinanden. Det vil få nogle anderledes ideer frem, men det vil også kunne hjælpe mig med at udvikle den rigtige løsning til kunden. Når jeg har fundet frem til ideen for det produkt som skal fremstilles, så vil jeg beskrive det i en konceptbeskrivelse. Konceptbeskrivelsen er med til at fastlægge ideen som er komme ud fra brainstormingen. Den gør så alle parter har samme forståelse for det der er kommet ud af ideudviklingen. Inden jeg kan gå i gang med at designe løsningen til kunden, vil jeg gå ind og undersøge nogle af de ting som kan have indflydelse på det designmæssige i produktet. Kommunikationsplanlægning fastlægger nogle rammer for den kommunikation som jeg ønsker at bruge. Når jeg planlægger kommunikationen, vil jeg først kigge på hvad det er for en effekt som jeg ønsker af produktet. Jeg vil også kigge på afsenderen, det er vigtigt at jeg får de værdier frem som kunden ønsker. Jeg vil også undersøge målgruppen for produktet, da det er vigtigt for hvordan jeg skal designe produktet så det rammer de ønskede brugere. Budskabet med produktet skal også fastlægges, det skal gøres for at se hvad det er for nogle informationer som skal være på siden. Det er også vigtigt at fastligge hvad for et medie som mit produkt skal bruges på. For at designe layoutet til hjemmesiden er det vigtigt at kigge på hvor og hvornår brugeren skal bruge produktet. 9

10 I forhold til hvordan jeg ønsker at kommunikere budskabet ud til brugerne, vælger jeg at benytte Transmissions - og interaktionsparadigmet. Det gør jeg for at man som afsender kommer igennem de trin der skal planlægges i forløbet fra afsender til modtager. Design Det første jeg vil gøre inden jeg går i gang med at designe produktet er at, jeg laver et moodboard. Et moodboard giver et visuelt billede af målgruppen som produktet henvender sig til. Når jeg har det visuelle billede af målgruppen, så vil det være nemmere at fremstille et produkt som rammer denne. For at få et visuelt billede af stilen jeg ønsker på hjemmesiden, laver jeg et inspirationsark. Det består af billeder af den stil jeg ønsker, både opbygning af hjemmesiden, men også rent visuelt. Det gør at jeg har nogle retningslinjer at gå efter. Jeg skal også finde ud af hvad det er for nogle informationer jeg ønsker der skal være med på hjemmesiden. Det kan være alt fra undersider, til hvilken struktur de skal være bygget op efter. Jeg vil også kigge på hvad det er for nogle muligheder brugeren skal have for at interagere på hjemmesiden. At gøre det inden jeg går i gang med at lave produktet, vil sørge for at der ikke vil opstå større omkostninger i forbindelse med ændringer. Jeg vil skabe en visuelidentitet til vores kunde. Den visuelle identitet er en slags rød tråd igennem alle de produkter som Bryghuset Vendia nu har. Det gør at man lettere bliver genkendt, uden at der nødvendigvis er et logo. Det behøver ikke nødvendigvis at være det femte element som er den visuelle identitet, det kan også være typografi og farver. Når jeg har alle de grundlæggende ting på plads, så kan jeg gå i gang med at lave et skitselayout. Så er alle overvejelser gjort inden udviklingen, og det vil spare en masse tid. (Fischer og Oosterbaan, 2012 s. 169) For at gøre det hele så brugervenligt som muligt, så vil jeg gå ind og kigge på hvad der vil være relevant at bruge på siden, det er f.eks. villeder, animationer, video og lyd. Jeg vil også bestemme hvordan brugergrænsefladen skal vræe, hvor brugeren skal ligge sin opmærksomhed, hvilke farver der skal bruges, samt arbejde med typografi, gestaltlove og stil. Det er vigtigt at jeg ligger en del kræfter her, da det er det eneste som brugeren kan se. Det er vigtigt at det er et design som fastholder 10

11 brugerne, og som giver et sammenhæng på siden, så der ikke er nogen tvivl om at det her er vores produkt. Realisering Jeg har valgt at lave min side i et CMS system som hedder Typo3. Der vil blive en del valg som skal overvejes i forbindelse med udviklingen. Jeg vil beskrive de valg som jeg kommer til at skulle tage. Når jeg fremstiller mit produkt vil jeg tænke over struktureringen. Det vil jeg gøre det da er meget vigtigt for at kunden ikke forlader siden. For kan kunden først ikke finde rundt, så vil kunden forlade siden og finde en anden. Jo bedre strukturering, jo bedre oplevelse for brugeren af produktet. Navigering er også en vigtig ting i forbindelse med oplevelsen af produktet. Det vil hjælpe brugeren hvis de altid kan finde ud af hvor de er, hvor de kom fra, eller altid har mulighed for at gå tilbage dertil. Hvis brugeren farer vild, så er det det same som med struktureringen, så forlader brugeren siden. Hjemmesiden skal også søgemaskineoptimeres. Grunden til at det er ekstremt vigtigt er at, jo højere ens side er i søgemaskinerne, jo større er chancen for at brugeren vil besøge lige netop din side. Tit og ofte bruger man bare Google og skriver et stikord, og hvis ens side er højt der, så bliver den med al sandsynlighed valgt. For at sikre at brugeren for en god oplevelse, så skal siden testes. Jeg vil validere hjemmesiden med W3C s validator. Dette gøres for at sikre at siden overholder de grundlæggende regler omkring kodning. Jeg vil også afprøve siden i de mest populærer browsere, det vil jeg gøre fordi at, ikke alle browsere har samme standarder. Og hvis jeg kun har udviklet hjemmesiden til en standard, så er der mange brugere som jeg går glip af fordi de bruger en anden browser. Jeg vil som den sidste test afprøve den på nogle personer for målgruppen. Det er for at se om de kan navigere rundt uden at fare vild, og for at se m den opfylder de krav jeg har sat i starten. Vedligeholdelse er også en vigtig overvejelse at have med. Det skal være muligt for kunden selv at opdatere hjemmesiden, således at jeg er fri for at gøre dette, og også for at det bliver lettere for kunden selv at kunne gøre det. Derved vil kunden også følge sig mere tryk med det produkt som han har købt. Det skal derfor være overskueligt så de også kan gøre det. For at kunden selv skal kunne navigere rundt på siden, så vil denne blive indkaldt til et møde hvor der skal foregå undervisning. Her skal kunden sættes ind i de nødvendige ting for at kunne vedligeholde sin hjemmeside. Der vil også blive lavet en speciel bruger til kunden til 11

12 hjemmesiden, det er for at denne ikke kommer til at gå ind nogle forkerte steder så de kan komme til at ændrer ved selve hjemmesiden. 12

13 Teori Foranalyse Karakteristik af virksomheden Når jeg laver en virksomhedskarakteristik, så kigger jeg på hvad det er for en type virksomhed, er det en produktionsvirksomhed, handelsvirksomhed, engrosvirksomhed osv. Jeg vil også gå ind og kigge på dens funktioner, og hvilke ejerforhold den har. (http://toolbox.systime.dk/index.php?id=914), (http://vob.systime.dk/index.php?id=69) Undersøgelse Projektets succesfaktorer For at finde ud af om det har været et succesfuldt projekt, så er jeg nødt til at have opstillet nogle kriterier for at finde ud af dette. Jeg skal gøre mig klart hvilke tanker jeg har om projektet. Det er ikke kun kunden der skal have indfriet sine forventninger til projektet, men ligeså meget mig. Punkterne kan evt. opstilles som spørgsmål. Jeg kan løbende godkende de forskellige mål, og se om jeg opfylder mine egne kriterier for at det skal blive et succesfuldt projekt. (Fischer &Oosterbaan, 2010 s ) SWOT-analyse SWOT-analysen er velegnet til at give et overblik over virksomhedens situation på et givet tidspunkt, den kan også anvendes til at vurdere hvorvidt ideen er bæredygtig om den er værd at bruge ressourcer på. (Thorborg, 2005 s ) Interessentanalyse Det der kendetegner interessenter i et projekt er at, de yder noget til projektet og som modydelse forventer de at få noget igen. Alle interessenterne har ikke nødvendigvis de samme krav og forventninger, nogle gange kan de faktisk være direkte modstridende. Derfor er det nødvendigt at beskrive interessenterne enkeltvis. Formålet med en interessentanalyse er at finde evt. samarbejdspartnere. (Thorborg, 2005 s. 22, ) 13

14 Målgruppe Vælger man en specifik målgruppe, så kan man tage udgangspunkt i hvad gruppen synes er mest interessant og relevant at vide. Jo mere præcis målgruppen er defineret, jo mere målrettet vil indsatsen være. Der vil også være større sandsynlighed for at markedsføringen bliver korrekt. Gallup kompas Gallup kompas er et segmenteringsværktøj, der udelukkende på baggrund af holdningsspørgsmål giver en nuanceret indsigt i forbrugernes holdninger, værdier og livsstil. Hvis man ønsker en mere præcis profil af forbrugere, medier og brands, så er gallup kompas en løsning. Brugerprofil En brugerprofil er et fiktivt, men repræsentivt billede af brugerne. Det er kortfattet, og omhandler forskellige mennesker som kunne tænkes at have interesse i produktet. Profilen kan bruges til at forudsige brugerens mål og præferencer, og inspirere informationsdesignet. (Harder & Oosterban, 2010 s ) Kommunikationsplanlægning De klassiske kommunikationsmodeller består grundlæggende af to pradigmer, transmissionsparadigmet og interaktionsparadigmet. Transmissionsparadigmet Denne kommunikation defineres som en transmission af et budskab fra en afsender til en modtager, og det medfører en given effekt. Primær og sekundær målgruppe Den primære målgruppe er en bestemt gruppe mennesker som en virksomhed ønsker at henvende sig til. Den sekundære målgruppe er den gruppe mennesker som ikke er direkte i målgruppen, men som ligger lige udenfor men som alligevel kan have en interesse i produktet. Lasswells kommunikationsmodel Kommunikationsprocessen er delt op i en række sekvenser, der følger lineært efter hinanden, i en vandret bevægelse. Afsenderen har en 14

15 hensigt med sin kommunikation. Budskabet fortæller hvad afsenderen har på hjertet. Mediet har betydning for kommunikationssituationen, og hvordan afsender og medium er forbundet. Der er forskellige former for medier (skrevne ord, talte ord, billeder og musik), hver især invitere medieformerne til en bestemt form for påvirkning, brug og adfærd. (Lindberg, 2009 s ) Modellen her tager udgangspunkt i de klassiske lineære modeller. Men her har modtageren fået mulighed for at være aktiv i kommunikationsprocessen og give personlig feedback. (Lindberg, 2009 s ) Designtrinnet Interaktionsparadigmet Interaktionsparadigmet er en dynamisk og strategisk tovejsproces, her bidrager afsender aktivt til kommunikationen. Der er ikke kun tale om afsenderens aktion, men også om modtagerens reaktion. Præsentationsdesign Præsentationsdesign handler om at iklæde indhold og interaktioner den rigtige form. Præsentationsdesign er en konkretisering og udvidelse af interaktionsdesignet. Det er en udvidelse hvor indhold og struktur bliver til kommunikation og oplevelse. Det handler om valget af medieelementer, teknologi knyttet til disse brugergrænsefladedesign som oftest er kaldet the look and feel. (Fischer & Oosterbaan, 2010 s. 158) Kotlers model for markedskommunikation For at et webdesign skal være godt, så er der nogle punkter man skal tage stilling til. - Komposition: Det handler her om at sammensætte, opbygge og gruppere de valgte medieelementer. Det gælder om hvordan brugeren skal navigere mellem de forskellige medieelementer. 15

16 - Farver: I præsentationsdeisgnet bruges farver til flere ting og nogle af de vigtigste virkemidler vi har. - Typografi: valget af skrift, skiftstørrelsen, linjelængden og linjeafstanden er alle vigtige at tage stilling til, da de er med til at afgøre om folk gider læse teksten. Er den for uoverskuelig, så er brugeren videre. - Gestaltlove: Er retningslinjer af elementernes komposition, de bruges oftest som tommelfingerregler, men derfor er de ikke nødvendigvis endegyldige sandheder. o Loven om nærhed: Elementer der placeres tæt på hinanden opfattes som en sammenhæng. o Loven om lukkethed: Man ser ikke hele figuren, men man kan derfor alligevel godt tænke sig til resten. o Loven om lighed: elementer der deler form, farve eller mønster opfattes som sammenhængende. - Stil og stemning: Medievalg, komposition, farver og typografi danner tilsammen en stil og stemning som gerne skulle harmonere med målgruppen og budskabet. - Opmærksomhed: De klassiske regler for komposition og læsevaner styrer vores adfærd ved læsning af informationsskærme. (Fischer & Oosterbaan, 2010 s ), (Nielsen, Dorte et al s , 62-67) Realiseringstrinnet Søgemaskineoptimering Søgemaskineoptimering er en rigtig vigtig del når man har en hjemmeside. Det er noget af det der kan gøre at din hjemmeside bliver en succes, eller en fiasko. Søgemaskineoptimering gør at du kommer højere på søgemaskiner som Google. Der er mange ting man kan gøre for at komme så højt op som muligt, og derved opnå større chance ved at blive valgt blandt tusinder af hjemmesider. Blandt andet kan man gøre følgende ting: - Title(Titel): Det er vigtigt altid at give sin side en titel, f.eks. hvis man har trykket sig en på en side der hedder om os, så skal man huske at skrive det ind i <title> tagget. Det er også det som kommer til at stå i toppen af browservinduet. - Description(Beskrivelse): Her skriver man en lille beskrivelse af sin side. På Google kan man kun se 100 ord, så kortfattet men præcist. Det er kun søgemaskinen som bruger dette, det står ikke på ens side. - Keywords(Nøgleord): Er egentlig det samme som description, men det er bare i stikordsform. Det er vigtigt ikke at lyve med 16

17 sine stikord. Har man f.eks. et skisportssted, så skal man ikke til at skrive at det er en charterferie bare for at komme frem lige meget hvad der bliver søgt på. For finder Google ud af dette, så bliver man blacklistet og ryger sidst i køen. - Headings(Overskrifter): <h1>-<h6> er alle overskrifter. Det er vigtigt at prøve at bruge alle overskrifterne, søgemaskinen går nemlig ind og søger efter disse. - Body(Tekst): Det er brødtekst på siden, søgemaskinen kan kun læse tekst og ikke billeder. Derfor er det bedst at undgår at bruge billeder der er tekst i. Søgemaskinen kan kun læse det der står i alt tagget på billeder. (Duckett, 2010 s ) 17

18 Foranalyse Kravspecifikation Karakteristik Bryghuset Vendia er beliggende i Hjørring, det er ikke kun et bryghus, det har både sit eget brasserie og en gourmet restaurant og selvfølgelig bryghuset. Navnet kommer af det latinske ord for Vendsyssel, Vendia. Bygningen som Vendia driver bryghus i, stammer helt fra I 2006 købte en selvbestaltet gruppe ejendommen, de købte ejendommen med det formål atter at få gang i ølproduktionen i Hjørring igen. Bryghuset er tænkt som et multifunktionshus, men med fokus på at brygge specialøl, at lave mad og events af god kvalitet. Selskabet er et anpartsselskab, deres anpartshaver er Computershare med hvem de har en aftale med om adminstrationen af alle data vedr. anpartshaverne. Det er for at de nemt og sikkert kan styre informationsopgaverne i fremtiden. Christian Ledet, Henning Pedersen, Henrik Lintner, Ib Mariegaard, Kent Jørgensen, Steen Madsen. Firmaet har også forskellige tilbud i forbindelse med arrangementer rundt omkring i byen, bla. i forbindelse med Hjørring revyen har de en 2 retters menu og 2 glas vin for 295 kr. pr. pers. Kravspecifikation Der laves en kravspecifikation så der ikke opstår uenighed mellem kunden og firmaet som fremstiller produktet. Kravspecifikation er en slags kontrakt mellem kunden og firmaet så begge parter ved hvad der skal laves, til den aftalte pris. Når man har en kravspecifikation så risikere man heller ikke, at der er nogle af parterne der skal af med en masse ekstra udgifter for at få det ønskede produkt. Men sker det at kunden skal have lavet noget mere end der står i kravspecifikationen, så skal kunden således også betale ekstra for det. (se bilag 1 kravspecifikation) Selskabet bliver ledet af en valgt bestyrelse og en direktør. Direktøren er Kristian Rise. Selskabets bestyrelse udgøres af: Erik Lytzen, Hans 18

19 Undersøgelse Projektets succesfaktorer Jeg opstiller nogle mål for projektet, det gør jeg for at jeg har noget at perspektivere op imod når projektet er færdigt. Målene som jeg stiller op indeholder de faktorer som jeg mener, skal være opfyldt inden projektet har været succesfuldt. Mine mål i forhold til at perspektivere mit projekt lige efter projektperioden er: At det produkt jeg laver lever op til kundens krav og forventninger. At arbejde selvstændigt, men samtidig få lavet et projekt som lever op til alle forventningerne omkring projektarbejde. At føre en god dialog med kunden således at, både kunden og jeg bliver tilfredse og produktet bliver så godt som muligt At få lavet en tidsplan som strukturere projektet og hjælper til med at gøre det mere overskueligt. Jeg stiller også nogle mål op som først vil blive opfyldt efter projektet er færdigt. Det er nogle mål som skal hjælpe med at vise om, den kommunikation jeg har lavet har haft den indflydelse jeg ønsker. Da bryghuset i en del år har været markedsført som bare et bryghus, så vil de gerne nu have folk til, ikke at være i tvivl om at det er mere end et bryghus. Få 10% flere kunder over de næste 2 år. SWOT-analyse Jeg vil lave en SWOT-analyse i forhold til at få en ny hjemmeside. Her kigger jeg på styrker og svagheder ved at få en ny hjemmeside, men også på muligheder og trusler. Styrker Svagheder - Hjemmesiden bliver mere brugervenlig, både for brugeren og for kunden. Kunden kan nu selv gå ind og ændre indholdet på siden. For brugeren er den nemmere at navigere rundt på, og man er ikke i tvivl om hvornår der er en - Brugerne af deres nuværende side skal vende sig til en ny hjemmeside. 19

20 undermenu, eller hvor man er på siden. - Det bliver muligt at vælge koncept, således skal man ikke kigge hele siden igennem for at komme ind på det man søger. - Bryghuset kommer til at blive set som mere end et bryghus, hvilket de gerne vil. - Den visuelle identitet som er i restauranten, aviser og andet de har, bliver også ført igennem på hjemmesiden. Muligheder - Hvis Vendia pludselig beslutter sig for at anskaffe sig endnu en restaurant, så er der stadig muligheder i at bruge den samme side. Trusler - Brugerne af deres nuværende side kan måske godt have et problem med at finde deres nye side mere troværdig, der vil gå Konklusion på SWOT-analysen noget tid før de føler sig hjemme på den nye side. Med den nye hjemmeside har bestyrelsen på Vendia selv mulighed for at opdatere siden, det gør at den hele tiden vil være opdateret med de nyeste menukort, vinkort osv. Med den nye side bliver de også set som mere end et bryghus, det kommer til at give dem flere kunder, før når kunderne besøgte deres side, så følte de sig måske meget begrænset da det kun var et bryghus. Men nu kan man se alle de koncepter de har på første side. Den visuelle identitet vil være med til at skabe et stærkere, og mere genkendeligt brand. Det vil gøre, at folk vil vende tilbage til siden en anden gang. Interessentanalyse Hvem er interessenterne Målgruppe Voksne i aldersgruppen år, både mænd og kvinder. Bestyrelsen Det er dem som har fået ideen at de skal have en ny hjemmeside, og de er en del af hvad bryghuset står for. 20

21 Brugerne Det er dem som har et behov for at finde oplysninger på siden. Andre restauranter i Hjørring området De er konkurrenterne. Webudviklerne/ Multimediedesignerne Det er dem der udarbejder produktet. Hvad er deres interesse i projektet Målgruppens interesse er at de får bedre information på siden, de får også bedre overblik over de forskellige koncepter således at de ikke kun tror det er et bryghus, og derfor vil få en bedre oplevelse. Bestyrelsens interesse er at, skabe bedre information således at man ved at det er mere end et bryghus. Bestyrelsen har også interesse i projektet da det er dem der skal stå indenfor det færdige produkt. Andre restauranter i Hjørring området har interesse i projektet fordi at, de er nødt til at følge med i hvad der foregår hos deres konkurrenter for at kunne være ligeså interessante for kunderne. Webudviklerne/ Multimediedesignernes interesse er selvfølgelig at tjene penge. Men udover at tjene penge, så er de også interesseret i at lave et godt produkt, således at andre potentielle kunder kan se at det er et godt stykke arbejde de har lavet her, og derved kan de få flere jobs. Hvad kan de bidrage med Målgruppen kan være med under fremstillingen af produktet. De kan være med under testene så man kan se om produktet rammer dem. Bestyrelsen kan bidrage med sin viden til bryghuset, men også med sin viden indenfor faget. Det er også dem der bestemmer hvad der skal være på siden, og hvad den skal udtrykke. Bestyrelsen er også dem der skal sige god for hvordan produktet ser ud. Webudviklerne/ Multimediedesignerne bidrager med deres kompetencer indenfor webløsninger og design. (Fischer og Oosterbaan, 2010, s ) Research af konkurrenter Det er vigtigt at vide hvem ens konkurrenter er når man starter ny virksomhed, eller koncept. Det er vigtigt at vide dette for at man ved hvad man skal vægte højt i sit koncept og design af produkt. Det er også en fordel at kende sine konkurrenters salgsmetoder, det kan hjælpe med at vide hvad det er der virker hos målgruppen, og se hvad der virker knap så godt, og som trænger til forbedring for at opnå større succes hos brugeren. Produktet for Vendia er jo en restaurant, altså mad og drikke. Derfor er der jo utroligt mange konkurrenter indenfor det her område. Vendia er 21

22 i nogle år efterhånden kun blevet set som et bryghus, men det er jo det der skal laves om på. De skal derfor ses mere som en restaurant med eget bryggeri, og det gør jo så også at der kommer flere konkurrenter. For at Vendia kan opnå større succes på markedet, så har de jo en stor fordel i at de har et unikt produkt som der ikke er ret mange der har, øl brygning. Det gør jo at de har noget mere at tilbyde i forhold til andre restaurationer. Nogle af de virksomheder som kan være konkurrenter for Vendia er jo andre restauranter i Hjørring. Der er fine restauranter som Bøf og vin, Restaurant Villa vest og Restaurant Glashuset. Når der er andre gode restauranter som disse, så er det vigtigt at Vendias visuelle identitet er opsigtsvækkende, samt at konceptet er klart uden at brugerne er i tvivl om hvad Vendia har at tilbyde. Brugerinvolvering Jeg vil involvere brugeren under processen med at udviklingen af hjemmesiden, når der kommer nogle valg som har indflydelse på den brugergrænseflade som der skal navigeres rundt i. Når hjemmesiden er færdig, laver jeg en test til brugerne. Den test vil undersøge om produktet fungere som jeg ønsker, og om det giver mening for brugeren at navigere rundt på siden. Det vil være folk som høre under målgruppen som skal teste produktet, det er ikke nødvendigvis den samme hver gang. Det kan variere om det er en eller flere personer som der bliver testet på. Under alle testene vil brugeren være en repræsentant fra målgruppen, men vil ikke nødvendigvis være den samme person hele vejen igennem. Nogle gange vil en test blive afprøvet på flere personer fra målgruppen. (Fischer & Oosterbaan, 2010, s ) Prototypetest I prototypetesten ser jeg på og tester hvad det er der fungerer, og hvad der ikke fungerer på hjemmesiden. Prototypen vil blive lavet under design processen, men også efter realiseringen så det både bliver testet under og efter udviklingen. At hjemmesiden bliver testet under designprocessen gør at, jeg får lavet et design som rammer målgruppen, og samtidig et design som Vendia kan stå inde for. Det vil blive en repræsentant for målgruppen som skal teste og give feedback. Brugervenlighedstest Der er nogle forskellige ting som gør at en test er brugervenlig. Det man kan er at lave en tænke højt test. Når man laver en 22

23 brugervenlighedstest er der fem forskellige principper der gør at et digitalt medie er brugervenligt. Disse er: Let at lære Let at huske Effektivt at bruge Forståelig Tilfredshed/ rart at bruge Jeg starter med at lave nogle opgaver som brugeren skal finde svaret på, svaret er selvfølelig på siden, og der skal ikke være nogen form for hjælp fra mig. Dette gøres for at teste hvor let den er at lære. Derefter skal der gå lidt tid. Så vil den samme testperson igen lave de samme opgaver. Det gør jeg for at teste hvor let den er at huske, og for at se at det ikke bare var held at svarene blev fundet i første omgang. Effektiviteten vil blive testet ved at der bliver lavet en trunktest. Den foregår ved at jeg finder en underside, her sætter jeg så brugeren af også skal brugeren ellers finde vej til forsiden igen. Det sidste skridt i brugervenlighedstesten er hvor tilfreds brugeren har været ved at navigere rundt på siden. Det finder jeg ud af ved at stille et simpelt spørgsmål. Ville du anbefale andre brugere dette site? Svaret på dette gør at, man hurtigt kan få en ide af om personen har været tilfreds med at navigere rundt på siden. Brugervenlighedstest vil blive lavet når siden er færdig. (Fischer & Oosterbaan, 2010, s ) Peer reviews Peer reviews er en test hvor man får en faglig person til at se på et område. Det kan f.eks. være koden bag hjemmesiden. Til denne test vil jeg bruge en af medarbejderne ved mit praktik sted. Grunden til at jeg gør dette er for at, tjekke om kvaliteten af min kode er i orden da man selv nemt kan stirre sig blind på det. Afsluttende test Her vil der blive testet op imod den kravspecifikation som der blev lavet sammen med kunden i starten af projektet. Når testen er underskrevet, er hjemmesiden overdraget til kunden og projektet afsluttes. Denne test vil blive udført når projektet er afleveret. (Fischer & Oosterbaan, 2010, s. 78) 23

24 Ideudvikling For at udvikle konceptet til hjemmesiden, blev jeg nødt til at få nogle ideer. Jeg lavede derfor en brainstorm. Jeg brainstormede ud fra Bryghuset Vendia da det er dem jeg laver hjemmesiden for. Når man laver en brainstorming så er det bare med at tænke på den første indskydelse når man hører ordet, det gør at der måske kommer nogle andre tanker som man skal overveje end hvis man ikke gjorde det. besøger en restaurant som Vendia, så forventer man også at få en god oplevelse. Samtidig har Vendia også så mange flere ting at tilbyde i forhold til en almindelig restaurant. De har både et brasserie afsnit som er for dem der bare vil have et godt måltid mad til fornuftige penge, også er der gourmet afsnittet som er for dem der er til det mere fine og som ikke har noget imod at betale det ekstra. Man skal heller ikke glemme at de har deres eget bryggeri, det er topmoderne, men det foregår stadig på gammeldages maner. Når man ser bryggeriet kan man med det samme mærke en form for nostalgi, der er en historie i det her bryghus som gerne vil fortælles. Jeg vil gerne lave en hjemmeside hvor man får det samme indtryk som når man kommer ind i restauranten. Man skal have en god oplevelse på en moderne hjemmeside. Hjemmesiden bliver lavet i et elegant layout som er meget stilrent, men samtidig vil der også være den der følelse af at det er noget helt specielt det her, ikke bare ligesom en hvilken som helst anden restaurant. Konceptbeskrivelse Ud fra min brainstorm er jeg nået frem til at, Bryghuset Vendia er en forening som har et produkt de gerne vil sælge. Produktet er ikke kun fysisk, men også i form af at få en god oplevelse. Når man kommer til Bryghuset Vendia er det for det meste for at købe mad. Men når man Hjemmesiden skal være mere brugervenlig end den nuværende side. Til tider kan den nuværende godt virker forvirrende og uoverskuelig med de mange sider, og undersider man nemt kan overse. 24

25 Kommunikationsplanlægning Det er vigtigt at en virksomhed ved hvad det er de vil kommunikere ud til brugeren og hvordan de ønsker at gøre det. Det vigtigste i kommunikationen er at, få afsendt et budskab, det budskab skal så formidles ud til den ønskede modtager, og som i alle andre kommunikationssituationer er det vigtigt at sætte sig ind i, hvordan man bedst får de budskaber som man ønsker, frem til målgruppen. For at opnå den rette kommunikation, er det vigtigt at vide hvilke tangenter man skal spille på i sin formidlingsmetode, for at rette henvendelse til den gruppe man ønsker at kommunikere med. Bryghuset Vendia vil formidle deres budskab ved hjælp af en hjemmeside, den skal i sit design og udtryk henvende sig til og klargøre den besked der skal afsendes til målgruppen. En hjemmeside har nødvendigvis ikke kun et formål, den kan have flere, som at give information om et emne, oplyse produkter, sælge produkter osv. Den har for det meste flere formål, der er flere interessenter der benytter hjemmesiden så derfor skal den have flere. Men det er alligevel vigtigt at vælge hvilket formål der er det primære med hjemmesiden. Det er nemlig ud fra dette formål at, indholdet på hjemmesiden bestemmes. Formålet med en hjemmeside er den primære grund til at, man har valgt at oprette hjemmesiden. Det som Bryghuset Vendia ønsker at få ud af en ny hjemmeside er at, oplyse brugerne af siden om hvad det er der foregår i restauranten. De bliver holdt opdateret om når der sker noget nyt omkring restauranten, eller andet som sker på Bryghuset Vendia. Den skal også formidle videre til folk som ikke har besøgt Vendia før at, det ikke kun er et bryghus. Men at de også har mange flere koncepter under taget, så som brasserie, gourmet restaurant, selskab/ konferencer, og selvfølgelig bryggeriet. Bryghuset Vendias hjemmeside bygger på transmussuinspradigmet, da de ved hjælp af et medie afsender et budskab til brugeren. Målgruppe Min målgruppe er delt op i to forskellige grupper. Den ene er den primære/ interne målgruppe. Den anden er den sekundære/ eksterne målgruppe. For at den rette kommunikation kan henvende sig til min målgruppe, så vil den interne kommunikation bestå af forståelse og brug af hjemmesiden, mens kommunikationen som er rettet mod den 25

26 eksterne målgruppe vil være baseret på brugervenlighed, overskuelighed og enkelthed. Primære/ interne målgruppe Den primære/ interne målgruppe er dem som allerede spiser på restauranten, direktøren og bestyrelsen som står for vedligeholdelse af siden. Da de besøgende som de har af restauranten nu er en del af den primære målgruppe, gør at den bliver bred. Dem som primært besøger stedet nu er mellem år, der er folk som er ældre. Men de bruger måske ikke så meget hjemmesiden og henvender sig derfor til den sekundære målgruppe. Målgruppen er både mænd og kvinder, mest par da det er en lidt dyrere restaurant hvor man sjældent kommer alene eller med vennerne. Da det er en restaurant som har mange forskellige besøgende, så vil det være svært at indskrænke målgruppen endnu mere. De to målgrupper har selvfølgelig det tilfældes at, de er interesseret i at komme i restauranten og få en god oplevelse og noget god mad. Eksempel på primær/ intern persona Per på 46 år er andelshaver i Bryghuset Vendia. Han kommer fra Aalborg af og er stadig beboende der. Han arbejder til daglig i en lille it-virksomhed i Aalborg som han selv er bestyrer af. Han bruger et par gange om ugen på at holde sig opdateret omkring Bryghuset Vendia, han modtager diverse nyhedsbreve for andelshavere og bestyrelse, men er også med til generalforsamlingerne. Grunden til at Per er med i den primære målgruppe er fordi at, han allerede har en interesse i virksomheden, og derfor engagere han sig også for den interne kommunikation. Sekundære/ eksterne målgruppe Den sekundære/ eksterne målgruppe er de personer som ikke er involveret i bryghuset via bestyrelse eller anpartsindehaver, men de har stadig det tilfælles at de går ud for at spise og få en god oplevelse. De ved måske ikke helt hvad de mest er til når de skal finde en restaurant, de ved bare at det er maden og oplevelsen det kommer an på. Derfor kunne de godt blive fristet af at det er et bryghus, og derfor er det lidt anderledes og kan måske give dem en god oplevelse som de er ude efter. Målgruppen her er indskrænket af geografi, det er folk som er bosiddende i Hjørring, eller i de små byer omkring Hjørring. For at underbygge min teori omkring målgruppen af denne kategori har jeg brugt Gallups kompas segmenter. Her hører den sekundære/ eksterne målgruppe indenunder de traditionelle. I dette segment finder man i stor udtrækning den ældre del af befolkningen. De har ydet sit til det danske samfund, og nu nyder 26

27 de godt af de danske velfærdssamfunds goder. De kan både være bosat vest og øst for Storebælt, men de befinder sig hovedsageligt i provinskommunerne. Den sekundære/ eksterne målgruppe er derfor fra 60 år og opefter da hovedparten er pensionister, dog er der undtagelser. Formålet med denne analyse er at, skabe et større overblik over hvilke typer af mennesker jeg skal koncentrere hjemmesiden omkring. (http://www.gallup.dk/voresmarkedsfokus/medier/printmedier/gallupkompas/kompassegmenter.aspx) Eksempel på sekundær/ ekstern persona Hans er 73 år, han bor i Skibsby lidt udenfor Hjørring med sin kone Frida. Hans har tidligere været meget interesseret af ølsmagning. Hans og Frida har besluttet sig for at gå ud at spise, men de ved ikke hvor. De spørger derfor deres datter og svigersøn om de kender et sted, der bliver nævnt flere steder men Bryghuset Vendia falder specielt Hans i ørene. Grunden til at Hans nu er i den sekundære/ eksterne målgruppe er fordi at, han er nu blevet præsenteret for Bryghuset Vendia, og med deres enkle design og navigation så har han ingen problemer med at navigere rundt på siden. Og da han tidligere har været meget interesseret i ølsmagning, så passer han perfekt ind til denne målgruppe. 27

28 Design Analyse af hjemmeside Inden jeg kunne gå i gang med at designe min hjemmeside, så var jeg nødt til at lave en analyse af Bryghuset Vendias gamle hjemmeside. Det blev jeg nødt til for at finde ud af hvad der var godt, og hvad der var skidt. Det gode ved siden er at, teksten er en sans-serif. Den ser meget elegant og stilren ud og udtrykker seriøsitet. Stilen på hele siden er meget enkel, der er brugt rigtig meget sort hvid så det gør den meget stilren, den ser meget minimalistisk ud. Billederne på siden er også rigtig lækre, de er med til at gøre siderne mere spændende. Det som ikke var godt ved siden var at, menuen i bunden ligger man ikke så meget mærke til, man skal nok finde den men det er stadig ikke noget af det første man får øje på. Når man så kører musen henover så kan man ikke rigtig se at der sker noget, det gør som end ikke noget, men når man så trykker på punktet og er kommet ind på en ny side, så kan man ikke se hvilken side man er på. Menulinjen forbliver uændret og man kunne ligeså godt have ramt en forkert knap. Når man så er inde på en side så undrer man sig lidt over at der ikke er mere indhold på siden, men det er så fordi at der er en undermenu, den er så placeret under hovedmenuen så den er faktisk ret svær at finde første gang man er inde på siden, det syntes jeg i hvert fald. Og når man var inde på en side hvor der var en del tekst, så skulle man scrolle selve tekstfeltet op og ned. For det første så synes jeg ikke det ser ret godt ud og for det andet, så ville det ikke kunne lade sig gøre på en Ipad som der så er flere og flere der er begyndt med at bruge. Så det jeg kan bruge den her korte analyse til er at, jeg skal have en sans-serif skrifttype som giver det samme indtryk som den gamle, og siden skal være meget elegant og stilren, den skal være minimalistisk. Der skal være nogle gode billeder som er rigtig lækre og som man gider se på. Menulinjen skal jeg have flyttet op i toppen så det er noget af det første man ser, og når man bevæger musen henover og klikker på et punkt, så skal dette være synligt. Undermenuen skal gøres mere synlig så man ikke er i tvivl om at den er der, og tekstfelterne på siden skal ikke scrolle. Hvis der er mere tekst, så skal hele siden bevæge sig ned ad. (Se bilag 2 Gammel hjemmeside) 28

29 Logo Bryghuset Vendia har et logo som stammer fra oprindelsen af bryghuset. Logoet er en rød ring hvor der øverst står Bryghuset og nederst står Vendia, som jo er navnet. Indeni den her ovale cirkel er der sort, og i det sorte er der et stykke korn. De startede ud med kun at være et bryghus, men er de senere år begyndt med at fungere som en fin restaurant med egen gourmet, eget brasserie og en masse andre tiltag. Derfor føler de også nu at, deres navn hæmmer dem lidt i at kommunikere ud til folk at de er mere end et bryghus. Grunden til at de ikke vil have et nyt logo er at det er en meget stor omvæltning der skal til da de har logoet flere steder, og folk genkender det allerede. Derfor har de også et slogan som siger at meget mere end et bryghus da de gerne vil have ud til folk at de ikke kun er det her bryghus. De har også et andet slogan som hedder fra humle til gourmet men det er det andet som de for det meste bruger og som de har valgt skulle være på den nye hjemmeside. Favicon Et favicon bruges som et ikon i adresselinjen til at repræsentere hjemmesiden. Et favicon skal være meget lille, og derfor må det ikke være for detaljeret så man kan se hvad det forestiller. Jeg har valgt at bruge deres logo som favicon, det er ganske vist lidt mere detaljeret end man skulle tro det måtte være. Men den røde ring og den sorte midte gør at, man sagtens kan genkende logoet og derfor fungere det på samme måde som et hvert andet favicon. Det kan endda være at det er nemmere genkendeligt end hvis det bare havde været et stykke korn eller noget. Faviconet er med til at understøtte hjemmesidens adresse og være med til at give den identitet. Moodboard Moodboardet viser en målgruppe som er mellem år. Det kan man se da, manden kan godt lide at gå fint klædt, han har måske et arbejde hvor han bruger jakkesæt. Men bare fordi han godt kan lide at se godt ud, så går han ikke nødvendigvis ud og bruger en formue på tøj. Han kan nemt gå i Mr. og købe noget tøj som han kan lide. Kvinden har lidt det samme, hun vil gerne se godt ud, men stadig uden at bruge en formue, så et eksempel kunne være Noa Noa. 29

30 De køber en ny bil når de skal have bil. Men de er ikke i overklassen hvad penge angår, så derfor køber de en Opel Insignia. Den ligger omkring de kr. så det er en bil som mange ville have råd til at købe, men der skal dog stadig være styr på økonomien. De handler i Føtex da de er sikre på at de har alt hvad man skal bruge også er de sikre på at de har nogle gode råvarer. De vil hellere give de 100 kr. mere når de handler end at skal køre flere steder hen for at finde det de mangler. Deres hjem er meget stilrent. De har indrettet det minimalistisk. Det har de gjort fordi at, minimalisme kan man nemt få til at se dyrt ud, men det behøves det ikke at være. (se bilag moodboard) Inspirationsark Hjemmesiden Jeg har valgt at bruge restaurant AOC som inspiration. Vendia ville gerne have at man kunne vælge mellem deres forskellige koncepter på forsiden. Det synes jeg at restaurant AOC har løst på en måde der ser utrolig lækker ud, men også meget stilren. Restaurant Umami har jeg brugt som inspiration fordi at, jeg er helt vild med deres undermenu og deres hovedmenu. Igen ser det utrolig stilrent ud, selvom det hele er krydret med nogle billeder der har lidt farve så ser det stadig utrolig roligt ud. Det at man altid ser hvor man er henne når man trykker på hovedmenuen, det ser også utrolig lækkert ud, og samtidig er det meget brugervenligt da man altid kan se hvor man er. Direktøren for Bryghuset Vendia er også utrolig glad for effekter og bevægelser på en hjemmeside, selvom han ikke er den store computer haj, så ved han hvad han vil have. Derfor har jeg brugt Amitech som inspiration. Deres produkter har et billede hvor man kører musen henover, også bliver billedet stort. Det ser godt ud, og det kan sagtens gøres stilrent og mere pænt med nogle lækre billeder og det rigtige design omkring. Video Til videoen har jeg brugt en præsentationsvideo fra restaurant Maemo i Norge som inspiration. Valget af den rolige musik, nærbillederne og de korte klip, gør at man for et godt indtryk af restauranten. Man kommer hele vejen rundt om det de laver i restauranten, fra de møder 30

31 ind og til de lukker. Det er det som jeg også vil forsøge at gøre med Bryghuset Vendias video. - Nederst på siden Informationsdesign Informationsdesigneren skal designe vidensbaser, som skal kunne imødekomme mange niveauer af færdigheder til mange forskellige brugerprofiler. Informationsdesignets kvalitet afhænger af: Udvælgelsen, bredden, dybden, relevansen for brugeren, tempo i leveringen og rækkefølgen, informationen bliver præsenteret i. Når man er på forsiden vil der være mulighed for at vælge punkterne, første gang man er på siden vil man nok bruge billederne som bevæger sig da det kan være sjovt og anderledes. Men når man først har gjort det en gang, så kan det godt være man er træt af det. Derfor har jeg valgt at beholde menulinjen så man kan komme hurtigt videre. Jeg har valgt nogle punkter som der skal være nemt tilgængelige. Jeg har valgt at placere dem i menulinjen som er i toppen lige under logoet. Grunden til at den er placeret der er at, man vil først lede efter navigationen i toppen da øjets naturlige vandring er fra venstre top og ned mod højre hjørne. Punkterne jeg har valgt at placere i menulinjen er: (Fischer & Oosterbaan, 2010, s.141) For at fastholde brugeren på siden, så har jeg vurderet hvilket ting det er som skal være let tilgængelige for at, brugerne kan finde de informationer de søger. På forsiden skal alt være let og overskueligt, der skal næsten ikke være noget tekst. Forsiden skal bruges til at brugeren kan komme videre til det de ønsker. Samtidig skal brugeren selv have mulighed for at lave noget, altså den må godt være lidt spændende. Forsiden Bryggeri Brasserie Gourmet Selskaber Diner Transportable Om Vendia Take Away Kantine Kokkeskole Aktuel 31

32 For at komme tilbage til forsiden kan man trykke på logoet eller trykke på punktet der hedder forsiden. På mange andre sider kan man kun komme tilbage til forsiden ved at trykke på logoet, men grunden til at jeg har valgt at beholde Forside er at, dem som er tæt på at være de ældste i min målgruppe, måske ikke helt ved at man kan trykke på logoet og komme tilbage. Bryggeri er det første punkt i menulinjen. Grunden til dette er at, det er jo et bryghus og det siger navnet jo også. Så noget af det første man vil vide mere om er deres øl. Når man kommer ind på siden kommer der nogle underpunkter, her er der mulighed for at læse noget forskelligt om øl. Man skal kun bruge 3 klik for at komme hen på det ønskede punkt, og det gælder faktisk hele vejen igennem. Brasserie er deres restaurant afsnit som har åbent hver dag undtagen søndag, den er ikke så dyr som gourmeten. Det vil være logisk at placere den efter det som egentlig har døbt restauranten da man kommer der for at få mad, også kommer den først som har mest åbent. Gourmet er det tredje punkt, det er den fineste del af deres restaurant, den har kun åben torsdag og lørdag. Når man går ind og vil have en menu, så leder man nok ikke efter den dyreste og man leder heller ikke efter den som man skal vente på, hvis nu det f.eks. er en mandag man vil spise. Derfor kommer den som nummer 3. De første 3 punkter er også placeret først fordi at, det er for menneske som vil ind og spise på restauranten, og det er de brugere Vendia primært fokusere på. Selskaber kommer som nummer 4 da det stadig sker på restauranten, men det er ikke dem som kommer i første række. Men selskaber er stadig noget af det de fokusere mest på. Bruges til konferencer og lign. Diner Transportable er deres mad til store selskaber, det kan både være ud af huset, men det kan også arrangeres hos Vendia. Det er typisk til konfirmationer og sådan. Om Vendia kommer her da folk kan synes at det er interessant at læse om, blandt andet deres historie. Her vil der også være en film der viser lidt om hvad det er de laver. Take Away er placeret her da det ikke er særlig ofte folk bare kommer der for at købe mad som de skal have med, for det meste når det er Take Away så er det 2 liters øl de sælger som folk vil have med. Kantine er mest for andre virksomheder som skal hen og spise en større flok. Derfor er den placeret her, for hvis man som virksomhed søger et sted at spise, så ved man også hvad man kigger efter, også gør det ikke noget den står lidt tilbage. 32

33 Kokkeskole står placeret næst sidst da det ikke er noget som bliver brugt så meget, men det er stadig en vigtig mulighed at have da det dog bliver brugt. Aktuel er her hvor nyheder, nyhedsbrev, arrangementer og lign. er. Grunden til at jeg har placeret den bagerst er for at, man lægger mere mærke til den der står bagerst end den der står helt inde i midten af menulinjen nu når der er en del menupunkter. Grunden til at der ikke er en kontakt side er helt bevist. Jeg har valgt at placere alle kontaktinformationerne nede i bunden af siden så de altid er let tilgængelige og man kan finde dem på alle siderne, så det er helt bevist der ikke er en kontakt side. Da jeg selv havde lavet designet til hjemmesiden havde jeg designet den med færre menu punkter, det gjorde siden meget enkel og nem at overskue. Jeg snakkede så med kunden, og han forstod hvad jeg mente, men han insisterede dog på at der skulle være flere menupunkter, og da det er kunden der skal være tilfreds med siden, så er det med at makke ret. Det har selvfølgelig hæmmet overskueligheden og enkeltheden lidt, men brugervenligheden er det samme da det er det samme man stadig skal gøre, der er bare mere at vælge i mellem. Interaktionsdesign Når man snakker om interaktionsdesign, så snakker man om hvordan brugeren bliver en del af siden. Ved min hjemmesiden sker det både ved at, bestyrelsen/ direktøren kan selv opdatere siden, de kan ændre stort set alt så de får de seneste nyheder, tilbud, arrangementer osv. Brugeren kommer også til at interagere med siden. De har mulighed for at tilmelde sig et nyhedsbrev så de får de seneste nyheder, tilbud, arrangementer osv. Det vil også være muligt for brugeren at sende en forespørgsel om bordbestilling, de skriver deres informationer også bliver der sendt en forespørgsel af sted til Bryghuset Vendia. På undersiden Om Vendia vil der også være en video. Den video vil præsentere Bryghuset Vendia, således at gæsterne kan se hvad det er de laver, og for et godt indtryk af Vendia. Navigation Der er en menulinje som er placeret lige under logoet og sloganet. Som beskrevet tidligere er det fordi at, øjets naturlige vandring er oppefra og ned, og derfor vil man støde ind i den rimelig hurtigt. Menupunkterne er placeret efter relevans som beskrevet tidligere. Der er også en undermenu på alle siderne. Man kan vælge at gå ind på hver side også trykke sig ind på undersiderne, det er nok mest hvis man er ny på siden og ikke lige helt ved hvad man vil. Men det er også 33

34 muligt at tilgå undersiderne via drop down menuen som der kommer når man kører musen over punkterne. På forsiden er der også en lidt speciel funktion. Det er alle menupunkterne som er stillet op på en lidt anderledes måde hvor man kan køre musen over de forskellige punkter, også bliver billedet stort og man kan se hvad der er derinde. Det har jeg gjort fordi det er med til at gøre det hele lidt mere spændende for brugeren, og det giver også noget liv til siden. Hvordan alle siderne hænger sammen vil blive beskrevet med et flowchart. Flowchart Jeg har lavet et flowchart der viser hvordan man navigere rundt på siden, samt hvilken knap man skal trykke på for at komme de forskellige steder hen. Jeg besluttede fra starten af at den skulle bygges op efter 3-kliks reglen. Det betyder at man højest skal klikke 3 gange for at komme det ønskede sted hen. Det gør siden meget enklere, og det bliver meget nemmer at finde rundt i hvor man er hvis man ikke skal klikke for meget rundt. Flowchartet er også lavet for at hjælpe mig under udviklingsfasen. Ved at kigge på flowchartet kan jeg altid se hvordan siden skal bygges op, det gør at jeg ikke skal ændre i programmeringen senere. En af de vigtige ting som er på siden er deres nyheder. Hvis de har en nyhed allerede nu som de ved de skal have frem til jul, så kan de allerede skrive den ind nu også kommer den frem på siden til den ønskede dato. Det gør at de ikke skal gå og huske på at de skal have lagt det op. (Se bilag 9 Flowchart) Visuel identitet Bryghuset Vendia har i forvejen et logo som der allerede er lavet en identitet omkring. Jeg har derfor valgt at beholde logoet som en del af det femte element. Bryghuset Vendia er kun en del af det femte element, jeg har valgt at der skal være flere måder at genkende Vendia på. En anden ting jeg har brugt er deres slogan meget mere end et bryghus, det går igen på alle deres produkter. Bil, hjemmeside, nyhedsbrev, avis osv. En anden ting jeg har brugt er de beige farvet kasser som man kan se i submenuen på hjemmesiden. Dem vil jeg prøve at få ført videre i bryghuset vendia så de indgår i den røde tråd. De bliver indtil videre set på hjemmesiden og nyhedsbrevet, og snart vil der også være en facebook side hvor de indgår. Farven sort er også meget brugt. Det er den fordi at, det er en farve de har brugt over det hele på deres produkter, så derfor var der en del genkendelig i den farve allerede, så derfor har jeg valgt at føre den videre. Som skrift har jeg valgt en skrifttype som er let genkendelig. Det er Futura light, den 34

35 er enkel og elegant sans serif font. Den giver hjemmesiden et elegant og seriøst look. Havde jeg f.eks. brugt en comic sans, så ville hjemmesiden ikke virke seriøs. Skrifttypen er ikke en standard skrifttype, og derfor bliver den ikke understøttet som standard af nogen browsere. Det har jeg så løst ved at bruge jquery. Jeg vil forklare nærmere om dette i realiseringstrinnet. Der er også et problem med fonten i nyhedsbrevet. Et nyhedsbrev skal åbnes i et mail program, og et mailprogram kan ikke finde ud af at bruge jquery og for meget styling. Men det har jeg løst ved at lave overskriften hver måned som et billede. Det gør ikke noget at der er brugt et billede her da der ikke skal søgemaskine optimeres på nyhedsbrevet. Præsentationsdesign Tekst Grunden til at der er kommet tekst på siden er for at, understrege sidens seriøsitet, men samtidig også for at give siden indhold. På forsiden har jeg undladt tekst da det i første omgang skal være de flotte billeder der fanger, og holder brugerne på siden. Derefter er det op til hver enkelt bruger hvad de vil. På hver side er der noget tekst. Det er delt op i mindre bider for at gøre det mere overskueligt for brugeren, men også for at der ikke skal være noget irrelevant på siden. I stedet for at skrive en helt masse hvor noget af det måske vil være irrelevant, så har jeg valgt at lave undermenuer så man selv kan vælge hvad det er man vil. At have tekst i stedet for en film eller lydklip til at fortælle det hele gør at, brugeren kan læse informationerne i deres eget tempo når de har tiden til det. Billeder Der er brugt billeder til siden for at skabe en stemning og for at gøre siden mere interessant for brugeren. Billederne som er på hver side er valgt ud fra at, de passer ind i de koncepter som er på den enkelte side. F.eks. under gourmet er der billeder helt tæt på af nogle svampe, det skaber en stemning af noget rigtig lækkert, og det er jo det som gourmet er, noget rigtig lækkert. Billeder siger mere end tusind ord og supplere derved teksten. Det er også ofte lettere for brugerne at huske et billede end en tekst. Billederne gør det spændende for brugerne at være på siden, og derved bliver de hængende lidt længere. Animation Animation kan være med til at give ekstra betydning til et multimedieprodukt, samtidig kan det give noget liv på siden og være med til at underholde på siden. Nogle animationer kan være flytbare, dvs. at disse animationer involverer brugeren og virker som en slags indlæringsproduktion. For mange animationer på en side kan være trættende og irriterende for brugeren. Så det er en fin balance om 35

36 hvad der er nok, og hvad der er for lidt hvis man vælger at bruge animationer. Jeg har valgt at bruge animationer på siden i for af, et slideshow på undersiderne og en billede slider på forsiden. På undersiderne er det muligt for kunden selv at bestemme om han vil bruge et slideshow eller om han bare vil have et billede der står fast. Det at der er et slideshow gør at man kan bruge mere end et billede til at gøre siden mere flot og elegant, hvis man altså har de rigtige billeder til det. På forsiden er der billede slideren. Den fungere som en slags hovedmenu og er med til at, give liv til forsiden i stedet for at det bare var et billede af bryghuset. Hvis man har været inde på siden mere end en gang og ikke har lyst til at bruge billede slideren, så er der stadig en mulighed at bruge hovedmenuen. Video Video kan kommunikere ens budskab hurtigt og effektivt ud til sine brugere. Videoen er et af de medier som kommer tættest på virkeligheden, da vi som mennesker forstår det levende og visuelle udtryk bedre uden de store besværligheder. Videoen skal dog være af god kvalitet og relevant, men det skal andre elementer jo også være. Brugeren skal altid have mulighed for at stoppe eller pause videoen, ellers bliver brugeren fanget i en såkaldt time-trap. På hjemmesiden kommer der til at være en enkel video. Den viser en kort præsentation af bryghuset, og den vil være at finde under hovedmenupunktet Om Vendia. Den består af klip fra bryggeriet, brasseriet, gorumet restauranten og køkkenet. Den kommer altså hele vejen rundt om Vendia. Hjemmesiden vil give nye brugere et indblik i hvad det er for en restaurant de kommer til, mens dem der allerede kommer i restauranten kan få et lille indblik i hvordan det hele foregår bag facaden. Videoen kan også være med til at skabe en stemning på siden. Lyd Jeg har valgt ikke at have lyd på siden da den ofte godt kan blive irriterende, og godt kan fjerne brugerens opmærksomhed fra det relevante på siden. Lyden vil også hurtigt miste sin effekt hvis den bliver gentagende. Der vil selvfølgelig være lyd på videoen, og det er for at understøtte den og gøre den mere interessant for brugeren. Komposition Komposition er mediets overordnede struktur, den skal som andre medieelementer helst være indbefattet af nogle krav til kvaliteten af hjemmesidens visuelle udtryk. Disse krav er blandt andet æstetik (smag og stil), funktion (relevans og overskuelighed) og teknik (kunnen 36

37 og viden). Der findes ikke noget korrekt skærmbilledekomposition, det er op til hver enkeltes metoder, hvordan hjemmesiden skal stilles op. På Bryghuset Vendias hjemmeside har jeg udført den klassiske komposition, det betyder at logoet er øverst til venstre, og menulinjen er horisontal. Opmærksomhedsniveauer Dette handler om brugeren forventninger ti opbygningen af siden. Efterhånden som internettet og brugen af hjemmesider er blevet en del af vores hverdag, så har brugerne også fået forventninger til hvor elementerne og indholdet på siden er placeret. Så man skal i opbygningen af sit design af hjemmesiden og navigering tage stor hensyn til brugervenligheden. Brugervenligheden er en vigtig del af projektet, og det er derfor vigtigt at holde sig til reglerne om eytracking studiet. Det er lidt som det jeg snakkede om tidligere med øjets naturlige vandring. Det gælder f.eks. placeringen af søgemuligheder, link til forsiden, navigationslinks osv. af hvad jeg skal lave, men det går også hurtigere end hvis jeg bare går i gang med at kode med det samme og prøver mig lidt frem. Jeg har lavet 5 forskellige layouts som jeg viste til kunden, de første 4 lavede jeg inden vores første kundemøde for at have noget at vise frem. Men efter det kundemøde fandt jeg ud af hvad han egentlig ville have og kunne lave det som han ville. (Se bilag 4 Skitser) Skitselayout For at finde frem til det helt rigtige design af hjemmesiden, så er det vigtigt at inden jeg går i gang med at lave produktet får lavet et layout af hvordan siden kommer til at se ud. Det gør det nemmere at finde ud 37

38 Jeg tog så til mit første kundemøde, og han havde en masse at fortælle som han synes skulle være anderledes. Jeg fik en rundvisning i restauranten og så hvordan der så ud, og så kunne jeg godt se at det jeg havde lavet passede overhovedet ikke ind i det restauranten egentlig var. Jeg tog så hjem og prøvede at lave noget andet. Så fik jeg så noget inspiration fra lidt forskellige sider, gik i gang med at designe og kom så frem til det sidste. Jeg havde først lavet det i hvid da jeg synes det var Ved de første 3 havde jeg prøve a skabe en lidt mere hyggelig stemning, jeg brugte derfor noget farve på siden. Ved 2 af dem gjorde jeg menulinjen rød og havde nogle quicklinks som havde noget farve. Ved de første 2 er der egentlig ikke nogen forskel andet end at jeg har lavet menulinjen i en anden farve. Men ved den 3 valgte jeg og prøve at lave noget helt andet. Jeg lavede et stort billede som skulle have et slidshow der stod og skiftede, lavede en kort velkomst tekst til højre, og nogle quicklinks i bunden. Men problemet med de første 3 var at de ikke helt passede til restauranten. Ud fra analysen som jeg havde lavet fandt jeg jo ud af at, den gamle var meget stilren og elegant. Og dem jeg havde prøvet at lave var jo varme og hyggelige. Så ved det 4 prøvede jeg at lave det lidt mere elegant og stilrent, og det lykkedes også. meget pænere, men da det meste var sort, deres avis, bil osv. så lavede jeg den sort. Han var godt tilfreds med den og synes det var den jeg skulle arbejde videre med. Jeg prøvede så at lave nogle forskellige undersider (se bilag 5-undersider), og var så klar til at gå i gang. Han kunne godt tænke sig at der var lidt liv på forsiden, så derfor valgte jeg at bruge billedslideren på forsiden. Gestaltlove Jeg har brugt nogle forskellige designmæssige retningslinjer, jeg har brugt 2 designprincipper, symmetri og hierarki også har jeg brugt 2 gestaltlove, loven om nærhed og loven om lighed. Som sagt så bliver disse brugt som retningslinjer for placeringen af forskellige elementer på en hjemmeside. Symmetri har jeg brug på både forside og de forskellige undersider. På forsiden kan se det hvis man slår en lodret streg ned gennem midten 38

39 af siden, der er lige meget indhold på begge sider. Det samme med undersiderne. Det kan godt være det ikke er tekst som er på begge sider af stregen, men der er noget til at fylde det ud så det ikke ser asymmetrisk ud. Hierarki har jeg brugt på alle sider. Det kan man se i form af teksten. De ting jeg vil have man fokusere på og som fortæller noget hurtigt om siden, så som en overskrift, er gjort større. Undermenuen er også gjort større end hovedmenuen da man gerne vil have brugeren til at navigere i undermenuen når denne er inde på en underside. Loven om nærhed er brugt på nogle af undersiderne. Man kan se at teksten som står til venstre for billedet hører samen, og undermenuen til højre for billedet hører sammen, men fortæller dog noget forskelligt. Loven om lighed er blevet brugt på undermenuerne, de ser ens ud, selvom de er forskellige. Hovedmenuen benytter også dette så man kan se at det er en sammenhængende hovedmenu. Typografi Typografien er vigtig da det er med til at forbedre læseligheden og modtagerens mulighed for at forstå budskabet. Nogle af de ting som gør en forskel når det kommer til læselighed er, skrifttype, linje længde, linje afstand og skriftstørrelse. Jeg har valgt at bruge futura-light som skrifttype til overskrifter, hovedmenu og undermenu. Den er både flot og elegant, også er den utrolig let at læse. Til brødteksten på siden har jeg brugt en verdana, den er måske knap så elegant at læse, men hvis jeg havde brugt futura-light på alt teksten, så var det blevet for uoverskueligt, også havde overskriften ikke haft den samme effekt, den havde ikke fanget brugeren på samme måde. Nu er der noget mere specielt over overskrifterne. På de fleste af siderne er linjelængden god og kort, men på nogle sider har det dog være nødvendigt at gøre linjerne længere da der var rigtig meget tekst der skulle skrives ind. Der er også god linjeafstand mellem linjerne, man kommer ikke til at blande linjerne sammen. Kontrast Jeg har valgt at bruge kontraster i forhold til farver og størrelser på siden. Grunden til at gøre dette er at, det giver mere dynamik på siden og det kan være med til at få brugerens opmærksomhed ledt i den rigtige retning. Jeg har valgt at gøre brug af farverne sort og hvid. De giver god kontrast af hinanden, og de er begge hovedingredienserne til minimalisme. Logoet er dog rødt, men det er også godt da det skaber god opmærksomhed om sig selv og fortæller hvem man er hos. Logoet er også lavet stort af samme årsag. På forsiden er billede slideren meget dominerende i forhold til menulinjen, men det er for at få 39

40 brugeren til at benytte denne og se hvad det er. Og når man er inde på siden så er undermenuen meget dominerende da man gerne vil have brugeren til at læse mere om det valgte emne, men man har altså stadig muligheden i hovedmenuen. At logoet skiller sig ud i farver gør også at det skiller sig mere ud og kommer til at virke mere effektivt. Valg af farver Jeg har valgt at bruge meget sort og hvid, det har jeg gjort for at skabe en rød tråd mellem hjemmesiden og deres andre produkter. Samtidig giver den også det minimalistiske look som de er ude efter. Ved at jeg har beholdt logoet i farve gør at det skaber blikfang, og fanger brugerens opmærksomhed. Det samme med billederne, de er meget dominerende, og ser man dominerende billeder, så vil man også huske teksten. 40

41 Realisering Typo3 Typo3 er et Open Souce CMS system. Det er udviklet af en dansker, Kasper Skårshøj, i Det er et af de mest udbredte CMS systemer i verden, deres Typo3 pakke har været downloadet mere end gange. Typo3 er meget som andre CMS systemer. Grunden er bygget på PHP og MySQL. Når selve CMS systemet er oppe og køre på domænet, så er det dog dets eget scripting sprog der tager over, typo script. Det er i Typo3 muligt at installere forskellige moduler, installere forskellige temaer osv. som med andre CMS systemer. For at installere Typo3 på sit domæne, så er der nogle minimums krav som skal være opfyldt. Webhotellet som man vælger at oprette sin side på skal understøtte PHP og MySQL. Grunden til at jeg har valgt at bruge Typo3 er at, i min praktikperiode hos IdeFA Gruppen foregik alt som havde med webudvikling at gøre for mit vedkommende i Typo3, og så er det Open Source så det er dermed gratis. Jeg fik derfor et utroligt godt kendskab til det, og lærte hvordan man laver sin hjemmeside i systemet. Typo3 er også, ligesom mange andre CMS systemer, utrolig brugervenligt og nemt for en kunde at skulle lære at skrive tekst, ligge billeder og andet ind på sin side. En anden grund til at jeg har valgt at bruge Typo3 er at, i Typo3 lærte jeg hvordan man lavede sit eget template (skabelon) og implementerede det i systemet, hvorimod at hvis jeg havde valgt f.eks. Wordpress, så ville jeg skulle vælge et standard template og redigere dette. Men på den her måde kunne jeg lave mit helt eget template fra bunden og dermed skræddersy det specielt til kunden. Template Det første jeg skulle gøre, efter designet var klart selvfølgelig, var at lave templatet i Dream Weaver. Det er som når man altid laver hjemmesider i Dream Weaver, det foregård med HTML og CSS. Der er god nogle ting man skal overholde når man koder hvis det skal virke. Når man i CMS systemet f.eks. opretter en tekstboks, så gør man det i noget der hedder kolonner. Der er margin, normal, højre og venstre kolonne. Så når man koder hvor de skal være placeret i CSS, så skal man skrive #colnormal, hvis det er den man vil placere. Se eksempel nedunder på hvordan. På en hjemmeside er der jo gerne forskellige sider, en forside, en underside med tekst, en underside med en undermenu også en evt. 3 underside. De kan også se anderledes ud. Når jeg så laver mit 41

42 template, så skal der laves en af hver så kunden kan bestemme hvad for en slags side det er som skal bruges. Derfor har jeg lavet en front.html, temp1.html, temp2.html og en temp3.html. Front.html giver jo lidt sig selv hvad det er, det er forsiden. Temp1 er hvis kunden vil have en side med meget tekst eller et stort billede. Temp2 er hvis der skal være tekst og et billede på siden. Temp3 er hvis der skal være 2 tekstbokse ved siden af hinanden. Alle sider er lavet med en undermenu, undtagen forsiden, da der skal være dette på alle siderne. For at jeg ikke skal lave 3 forskellige stylesheets, så har jeg lavet det hele i et. Det kan lade sig gøre da jeg har brugt forskellige class. Når jeg f.eks. skulle lave en normal kolonne på temp2 siden, så skrev jeg #colnormal.temp2. Så i min temp2.html skulle jeg skrive <div id= colnormal class= temp2 > så ved den at det er #colnormal.temp2 som skal bruges. Se eksempler på stylesheet og temp2.html herunder. Når man så skal bruge de forskellige skabeloner, så skal man jo vælge dem et sted. Det man gør først er at, vælge hvilken side det er man vil ændre skabelon på, derefter trykker man på rediger sideegenskaber (se billede under) 42

43 jquery Som jeg skrev tidligere havde jeg brugt jquery da jeg skulle bruge en speciel font til hjemmesiden. Det er dog ikke det eneste jeg har brugt jquery til, der er blandt andet også forsiden med billede slideren og slideshowet der kører på undersiderne. Alt jqeruryen er placeret under, skabelon->template også jquery. Det er her jeg har placeret mit script. I scriptet har jeg bestemt hvad det er for noget tekst på siden der skal være med den specielle font. Det er Herefter trykker vi på udvidet og i dropdown menuen under select content area template vælger vi så den ønskede skabelon. alt teksten i hovedmenuen, undermenuen også er det overskrifterne h1, h2, h3 og h4. Og hover true betyder at når man kører musen henover, så skal skrifttypen stadig være der. Se eksempel under. Herunder er der et billede af scriptet til billede slideren på forsiden. 43

44 Nedenunder dette er der nogle egenskaber for størrelsen og placeringen af tekstboksen. Width er bredden, height er højden, top er hvor langt fra toppen den skal være i pixel, left er hvor langt fra venstre den skal være i pixel. Der er også andre muligheder for at style vores billede slider, men det foregår i et stylesheet. Nyhedsbrev På hjemmesiden er det muligt at tilmelde sig deres nyhedsbrev. Man skriver sig op, udfylder de forskellige ting også er man tilmeldt. Det der Det er ikke det hele der er med på dette billede, det kunne ikke være på et screenshot. Men på dette billede kan man se de captions egenskaber der er brugt. En caption er den tekstboks der er brugt som kommer frem når man kører musen over billederne. Den første som hedder slideshow:false, betyder at det ikke skal køre automatisk som et slidshow, men skal bevæge sig når musen bevæger sig henover. Shadow:true betyder at jeg gerne vil have skygge på mine billeder. AlignType:centerCenter betyder at det altid skal holde sig i midten. ClosedPanelSize:60 er hvor store billederne skal være når de er lukket. Captionfadeduration:50 er hvor hurtigt tekstboksene skal forsvinde når man bevæger musen væk. sker når man tilmelder sig nyhedsbrevet er at, man sender en forespørgsel af sted til Bryghuset Vendia. Herunder er der et billede af en som har skrevet sig op til nyhedsbrevet, personen har dog ikke bekræftet sin mail endnu og modtager derfor endnu ikke nyhedsbrevet, derfor er der stop mærket over. Personen modtager så en mail med et link i, når personen trykker på det link så er mailen bekræftet. Se herunder. 44

45 For at sende et nyhedsbrev ud skal man trykke på den der hedder direct mail. Her skal man så vælge den der hedder internal pages. Her kommer der så en liste op med de forskellige nyhedsbreve, der skal man så vælge hvilket et det er man vil sende ud. Når det er gjort Det der sker, er at alle adresserne bliver gemt i en database. Når vi så skal have sendt et nyhedsbrev ud, så skal vi ned og vælge hvilke adresser det er vi vil sende det her nyhedsbrev ud til. Man kan lave forskellige lister. F.eks. ville det være logisk at lave en liste med anpartshavere og en med almindelige kunder. Så kunne man lave en mail med generalforsamling og lign. til anpartshavere, og et andet til almindelige kunder. Herunder er der et eksempel på en liste med modtagere, det er dem der skal modtage det almindelige nyhedsbrev. så følger man egentlig bare de forskellige steps. Og på step 5 vælger man hvilken liste det er man vil sende nyhedsbrevet ud til. Sen herunder. Open Source Open Source betyder at man som bruger har fri adgang til en række frie software licenser. Det giver brugeren loft til at se og ændre programmets kildekode samt lave nyere versioner. Der er rigtig mange Open Source programmer, og det er ikke kun indenfor webudvikling. 45

46 Der er også kontorpakker som open office, multimedie produkter som VLC player, operativsystemer som linux og mange flere. Så der findes altså rigtig meget som er Open Source i dag. Moduler Moduler er det samme som plugins som man kender fra forskellige CMS systemer. Blandt andet har jeg brugt et modul til mit nyhedsbrev. Det giver mig en skræddersyet løsning til mit nyhedsbrev, i stedet for at jeg selv skulle sidder og bruge flere timer på at programmere dette i, f.eks. asp.net. Det sparer både mig tid, og kunden penge. Altså er moduler en funktion som man ønsker, men som programmet ikke har, man kan finde det i sit CMS system og tilføje det på siden, også har man pludselig det man ønsker og siden har fået en ny funktion. Der er også brugt flere moduler på siden. Der er brugt et nyhedsmodul, en slimbox der åbner billeder op i en flot ramme, jeg har så ikke valgt at have noget galleri, og der er brugt et SEO modul. CMS CMS betyder Content Management System, på dansk vil det sige indholdsstyringssystem. Det er en software som installeres på en webserver, her kan det så tilgås igennem en browser. Det betyder at man har mulighed for at lægge nyt indhold op på hjemmesiden, så længe man har en computer der er online. Man behøves altså ikke at have en masse programmer installeret på sin computer, og man kan gøre det hvor som helst og når som helst. Alt indhold bliver gemt i en database på nettet, her styrer CMS systemet så indholdet for brugeren. Fordelen ved at bruge et CMS er at, det bliver muligt for kunden selv at opdatere hjemmesiden. At skrive tekst fungere på næsten samme måde som med et system, en almindelig rich text editor. CMS systemet vil så kombinere det design vi har lavet i forvejen med indholdet, og det giver så det færdige resultat i frontend. Det bliver jo så også billigere for kunden på den her måde da han ikke skal bruge en mellemmand til at holde siden opdateret for ham. Nu da de har mulighed for at opdatere siden oftere, så vil det også give nyere indhold på siden og dermed vil de besøgende have større tilbøjelighed til at komme tilbage. At der kommer flere besøgende vil også hjælpe på sidens placering i søgemaskiner. Strukturering Strukturering er vigtig da jeg efter at være færdig med projektet skal have overdraget projektet til kunden. Hjemmesiden skal derfor være så overskuelig at, det er muligt at de selv kan opdatere hjemmesiden. Hjemmesidens strukturering er vigtig, da hjemmesiden er bygget op omkring nogle linjer så den bliver mere overskuelig og nem at få overblik over. Jeg har også valgt at headeren på siden skal forblive uændret, det vil sige at logo, slogan og menuen aldrig flytter sig. Det 46

47 har jeg gjort for at brugeren ikke skal tro at man er kommet ind på en ny hjemmeside, men stadig er på den samme. Navigering Navigeringen er meget vigtig på hjemmesiden, den påvirker hvor meget den vil blive brugt af brugeren. Noget af målgruppen er vokset op uden it og internet, og det er derfor vigtigt at man nemt og hurtigt, men også på en logisk måde, kan finde oplysninger om det man ønsker. Der har jeg lavet en tydelig menulinje på alle sider, så er man ikke i tvivl om at man her skal navigere rundt, selvfølgelig kan man på forsiden også bruge billede slideren. Jeg har også bestemt mig for at brugerne skal kunne finde de ønskede oplysninger så hurtigt så muligt, jeg har derfor valgt at benytte 3-kliks reglen. Den betyder at de skal kunne komme alle steder hen ved at benytte sig af max 3 klik. På alle siderne har jeg lavet en undermenu. Grunden til at jeg har lavet den på den måde som jeg har, er at den skal skille sig ud fra hovedmenuen så man kan se at det er noget som tilhøre siden, og dermed sker der noget nyt her. Hvis jeg havde valgt at placere den lige undr hovedmenuen, så kunne den godt have tilbøjelighed til at drukne i hovedmenuen. Søgemaskineoptimering I Typo3 er der installeret et SEO modul. Det som SEO modullet gør, er at det laver real urls, giver mulighed for nemt at give hver side title tag, keywords, description og lave redirects. Real url kan man se i url en (andressen). Der er jo altid sidens adresse, Men når man så har undersider på siden, så komemr de normalt til at hedder noget med Men det real url en så gør at, den i stedet for at hedde det forfærdelige navn efter skråstregen, så kommer der til at stå Title tagget er en af de vigtigste ting at gøre når man søgemaskine optimere. Et godt title-tag skal være unikt for siden, og det skal stemme overens med sidens indhold. Når man laver et title-tag, så er det også vigtigt at det indeholder det søgeord som man ønsker siden skal ranke på. Når man søger på Google vil man se title-taget, som overskriften på den enkelte side. Derfor skal title-taget repræsentere siden på en god måde. Herunder er der et eksempel på et title-tag, title-taget er typo3-hvad er typo3 gratis cms 47

48 Keywords er noget som alle sider har tilknyttet. Det de bruges til er blandt andet at beskrive siden, de betyder dog ikke så meget mere som de har gjort, hvis de overhovedet betyder noget. De skal som titletags være unikke og relevante i forhold til siden, men man skal ikke overdrive med bruge af keywords. Det er bedre at undlade keywords end at bruge dem forkert. Description er også noget som enhver side har. Det er en sammenhængende tekst som beskriver siden. Denne tekst vil blive vist når man søger på Google, og den vises lige under title-tagget. Teksten skal derfor være repræsentativ for siden, men ikke på mere end 100 karaktere da det er det højeste Google kan vise. Det er vigtigt når man bruger title-tags, keywords og descriptions, at de er unikke for hver side. Hvis man bruger den samme tekst på flere sider eller alle siderne, så vil søgemaskinerne tro at de er ens og i værste tilfælde kun indeksere en af siderne. Herunder er der et eksempel på hvordan man med SEO modulet nemt kan give hver side title-tags, keywords og descriptions. Man vælger den side man vil søgemaskinerne optimere på, så trykker man på infor. Og i den øverste dropdown box vælger man SEO management og Edit SEO fields. Så får man billedet frem som er ovenover teksten her, her kan kunden så selv udfylde title-tag, description og keywords. Kunden vil blive undervist i vigtigheden af dette og hvordan det skal gøres. Alle sider bliver bedømt på Google. De ser blandt andet på hvor mange der linker til netop denne side. Hvis man så en dag ændre sin url adresse, så vil denne værdi som udgangspunkt gå tabt. F.eks. hvis man havde siden og ændrer den til Så vil søgemaskinerne betragte dem som to forskellige sider, selvom indholdet er det samme. 48

49 Det kan man så løse ved at lave et redirect, så kan man fortælle søgemaskinerne at det er den samme side, den er bare blevet flyttet. På den måde så kan man overføre værdien fra siden med den gamle url til siden med den nye. Mozilla Firefox Internet Explorer Google Chrome Jeg har også testet den på en mobil enhed: Iphone Konklusion Siden virker perfekt i alle de browsere jeg har testet. Når de virker og ser ens ud i disse browsere, så vil jeg også våge at påstå at de virker og Det er her (billedet over) at man laver redirects. Man skriver sin gamle side øverst, dog kun det som kommer efter domænenavnet. Og nednunder skriver man så det nye, sætter flueben i checkboxen, trykker save også er der lavet et redirect. (Typo3 SEO.pdf, vedhæftet på CD) Afprøvning test Browser test Jeg har testet hjemmesiden i forskellige browsere. Ved alle de browsere jeg har testet i, har der ikke være nogle fejl eller mangler. Jeg har testet hjemmesiden i følgende browsere: ser ligesådan ud i andre browsere da de største forskelle er mellem firefox og internet explorer. Den er også testet på Iphone, det er selvfølgelig meget småt da det ikke er lavet til en håndholdt enhed, men den virker. Og da den virker på en Iphone, så skulle den også meget gerne virke på en Ipad da det er samme browser de bruger. Validering Jeg har valideret hjemmesiden på Jeg får nogle få fejl frem når jeg validere siderne, men de har alle det samme tilfælles, det er tags der mangler at blive lukket. Jeg har prøvet at finde frem til problemet, men uden held. Så jeg kan ikke helt forstå hvorfor den giver mig den fejl. Men selvom den har disse fejl, så ændrer det intet ved sidens form eller funktion. 49

50 Jeg kan så desværre ikke sige at siden er 100% fejlfri, men den fungerer som den skal, så der skulle derfor ikke være nogle problemer. Brugervenlighedstest Jeg fandt 3 brugere fra målgruppen som jeg testede siden på da den var færdig. Først bad jeg dem om at finde ud af hvor man skrev sig op til nyhedsbrevet. Det fandt de faktisk alle sammen rimelig hurtigt. Så bad jeg dem om at finde åbningstider for gourmet restauranten. Til at starte med kiggede 2 af dem under aktuel, mens den anden navigerede direkte hen på siden. Derefter skulle de finde frem til festmad ud af huset. Her valgte de alle sammen faktisk først at kigge hele take away punktet igennem inden de valgte at kigge under den der hedder diner transportable. Her efter skulle de så navigere sig hen til rundvisning i bryggeriet. Her ramte de også alle sammen plet første gang. Jeg ventede så i 15 min, så skulle de finde de samme punkter i en tilfældig rækkefølge. Her fandt de så alle sammen frem til punktet i første forsøg. Konklusion på brugervenlighedstest Ud fra den test jeg har lavet har jeg fundet frem til at, store dele af siden er nemme nok at navigere hen til, mens andre er lidt svære at navigere til. Da jeg fandt ud af at 2 ud af 3 havde svært ved at finde åbningstider, så har jeg besluttet at lave en lille tilføjelse på siden, jeg vil placere et link i bunden med alle åbningstider så de altid er nemme at finde. At deres festmad ud af huset er så svær at finde overrasker mig egentlig ikke. diner transportable er ikke dansk og siger ikke hvad det er på et sprog som alle forstår, derfor har de svært ved at finde det. Men da det er et koncept som kunden har brugt flere steder, så vil han ikke ændre det. Men da brugeren først havde fundet det en gang, så kunne denne også finde det igen. Peer reviews Jeg har fået en fra mit praktik sted til at kigge min kode igennem. Han ville have gjort det på mere eller mindre samme måde. Der var dog nogle ting han ville have gjort anderledes, men ellers synes han kodningen så fin ud og den var let og overskuelig at finde rundt i. Det positive ved at den er let og overskuelig at finde rundt i er jo at, hvis nu der er en anden der skal ind at rette i siden, så er det jo en fordel at han kan finde rundt i koden og ikke skal til at lede alt for meget. Vedligeholdelse og opdatering Efter overdragelsen af hjemmesiden vil firmaet som jeg har lavet hjemmesiden for (IdeFA Gruppen) ikke have meget at gøre med siden mere. Det er kun hvis der er større designmæssige ændringer der skal foretages at de skal kontaktes. Ellers kan alt vedligeholdelse laves af 50

51 brugeren selv. For at brugeren skal kunne finde ud af at gøre alt dette selv, så skal den som kommer til at stå for vedligeholdelsen indkaldes til undervisning. Her bliver kunden undervist i hvordan alle de nødvendige ting fungere. Hjemmesiden bliver ikke sat i luften før at kunden har været til undervisningen. Budget Når et budget som er baseret på udvikling af en hjemmeside for en Oprettelse af nyhedsbrev Flytning af sider (50-55 sider) kunde laves, så er der to ting man skal basere det på. Det ene er at virksomheden som skal lave opgaven, får et overblik over hvad projektet vil komme til at koste. Det andet er at, budgettet giver kunden et overblik over hvad det kommer til at koste. Et budget er ikke endeligt, under projektforløbet kan der komme yderligere ting til. Der vil som regel blive taget højde for det når kravspecifikationen udarbejdes. Ved mit projekt har der dog været lavet et tilbud til kunden. Tilbuddet kommer i alt op i kr. også er der mulighed for forskellige tilvalg (se bilag 6 - budget). Men hvis jeg skulle lave et budget over alt det jeg har lavet. Så ville jeg basere det på følgende. Udarbejdelsen af nyt hjemmeside design Implementering af ny hjemmeside Opgaver Antal timer Timepris inkl. I alt Moms Udarbejdelse af nyt 15 timer 850 kr. hjemmeside design Implementering af 20 timer 850 kr. ny hjemmeside Oprettelse af 6000 kr. Nyhedsbrev Flytning af sider ( kr. 55 sider) I alt 25 timer kr. Jeg har taget udgangspunkt i at timelønnen er den samme som ved mit praktiksted, og at priser på nyhedsbrev og flytning af sider er det 51

52 samme. Jeg har så lagt 15 timer til design af hjemmesiden og 20 timer til implementering af hjemmesiden. De ting har taget mig ca. 15 og 20 timer. Oprettelse af nyhedsbrev har selvfølgelig også taget tid, men da det er en fast prise har jeg ikke taget tid på dette, det samme med flytning af sider. 52

53 Konklusion I dette projektforløb har jeg arbejdet med opbygning af en ny hjemmeside til Bryghuset Vendia. Jeg påtog mig denne opgave da de havde problemer med den nuværende side, de havde et system de ikke selv kunne finde ud af at opdatere siden i, og de havde også nogle navigationsproblemer på siden også følte de at designet var forældet. Jeg synes derfor det var en spændende, men også udfordrende opgave da der var en del arbejde at gøre. De skulle have en helt ny hjemmeside samt en video som præsenterede dem. Jeg var fra starten af nødt til at lave en del analyse. Det gjorde jeg for at udvikle et produkt der passede bedst til dem. Noget af det vigtigste var deres målgruppe, det var både den interne og eksterne målgruppe. Jeg kom frem til at interessen for lige netop den her restaurant startede fra 30 år og op til 60 år. Derfor har jeg brugt meget tid på at udvikle hjemmesiden til netop denne målgruppe. deres slogan, og deres undermenuer. I de produkter jeg har lavet, og vil lave, går disse ting igen så der er en rød tråd mellem deres produkter. Der er også en fordel ved at bruge det gamle logo i deres nye design, der er jo en vis genkendelighed ved det nye logo. Gamle kunder genkender det stadig, og ved at det er den samme restaurant. Jeg har brugt en del tid efter afleveringen af hjemmesiden på at teste. Ud fra testene kan jeg se at produktet alt i alt er i godt, der er dog nogle ting som ikke fungere helt så godt som de kunne. Nogle af navnene i hovedmenuen virker forvirrende og navnene misvissende, men dette kunne jeg ikke ændre da det var kundens ønske, og det er kunden der skal være tilfreds med produktet. De havde i forvejen et logo til deres restaurant. De var selv enige i at logoet var lidt misvisende da det fortalte at det kun var et bryghus, men de ville ikke have lavet et nyt da det var for stor en omvæltning. Deres logo var nemlig trykt på forskellige produkter de havde i forvejen. Jeg har derfor skabt en visuel identitet til dem. Den går ud på 53

54 Perspektivering Når jeg nu ser tilbage på projektet, så mener jeg stadigvæk at jeg har valgt de forskellige analyser og metoder som jeg valgte helt fra start. Jeg har arbejdet ud efter HOME-metoden, her har jeg brugt paradigmet som hedder vandfaldsmetoden. Denne har jeg dog været nødt til at tilpasse mit projekt lidt da jeg ikke har haft ret meget tid, og jeg har, skulle lave det hele selv. Men de ændringer jeg har lavet har ikke været så store. Blandt andet da jeg skulle til mit første kundemøde var jeg nødt til at have nogle skitser med for at finde ud af hvad jeg skulle lave. Og for at finde ud af hvordan skitserne skulle se ud, så har jeg været nødt til at have målgruppen på plads først. Så dette var noget af det første jeg har lavet. Men selvom jeg har gjort dette kan man stadig se på min tidsplan og på mit projekt, at jeg har arbejdet ud fra vandfaldsmetoden. nyheder, billeder, tekst osv. Men for at kunden kan gøre alt dette skal han til et kursus/ undervisning hos IdeFA Gruppen, de sætter ham ind i hvordan alt det vigtige virker så han selv kan gøre alle disse ting. Dette vil jeg dog ikke have noget med at gøre da det er mit praktik sted og ikke ved hvad der skal ske efter dette projekt. Videoen er jeg selv overrasket over, kunden var tilfreds med den med det samme. Og jeg synes at den giver en god præsentation af bryghuset. Set i bakspejlet ville jeg dog have lavet lidt tests på denne video for at være sikker på at den rammer folk på den måde som jeg ønsker. Jeg mener at jeg har skabt et produkt som er bedre end det gamle, og som kan hjælpe Bryghuset Vendia med at blive endnu mere succesfuldt end det allerede er. Deres tidligere side fungerede ikke helt som de havde ønsket, blandt andet med deres undersider og hovedmenu der var fejl placeret, dette synes jeg at have løst på en god og bedre måde. Jeg har valgt at lave siden i Typo3, det gør siden mere brugervenlig for kunden da han nemt selv kan opdatere siden med 54

55 Procesrefleksion Hele vejen under forløbet har jeg arbejdet hårdt og målrettet efter at, få lavet et succesfuldt produkt. Der hvor jeg har lagt mest energi har været i fremstillingen af produktet, men for at få et succesfuldt produkt har jeg også lavet analyserne. Det har været utroligt stressende at arbejde alene, alt presset har kun været på mig. Men det at presset også har været på mig, tror jeg har hjulpet mig til at få lavet et bedre projekt. Jeg har været igennem det hele, hvorimod at hvis jeg havde arbejdet i en gruppe så havde jeg lavet min del også havde de andre lavet deres, også skulle jeg sætte mig ind i det arbejde de havde lavet op til eksamen. Nu ved jeg hvad jeg selv har lavet, og derfor bliver det en del nemmere at forberede mig til eksamen. Jeg har også lært utrolig meget under det her projekt. Jeg har haft en kunde som har været utrolig kritisk og som har vidst lige hvad han vil have. Det synes jeg til tider har været irriterende, men når jeg nu ser tilbage, så har det bare gjort det hele bedre. At jeg har haft min helt egen kunde føler jeg også har forberedt mig bedre på hvad fremtiden har at bringe. 55

56 Litteraturliste Bøger Busch, Anne Mette et al. 2011: Kommunikation i multimediedesign, Hans Reitzels forlag. Fischer, Louise Harder & Oosterbaan, Marie, 2010: Digital Media Management, Nyt Teknisk Forlag. Thorborg, Steen, 2005: Projektstyring, Gyldendal Boghandel. Lindberg, Henrik, 2009: Markedskommunikation, Academica Nielsen, Dorte et al. 2009: Grundbog for art directors, Grafisk litteratur. Duckett, Jon, 2010: Beginning HTML, XHTML, CSS and Javascript, Wiley Publishing. Internet Moodboard m=isch&tbnid=uhytqrospnisym:&imgrefurl=http://www.askmen.com /fashion/apparel/jcrew-ludlowsuit.html&docid=b3ozzywou1errm&imgurl=http://images.askmen.co m/fashion/apparel/ _jcrew-ludlow- suit_1.jpg&w=400&h=400&ei=wr3ht9jhk8zmsgacpi3- Dg&zoom=1&iact=hc&vpx=462&vpy=200&dur=172&hovh=225&hovw =225&tx=118&ty=99&sig= &page=1&tbnh=1 28&tbnw=128&start=0&ndsp=26&ved=1t:429,r:11,s:0,i:155 jakkesæt m=isch&tbnid=nd7f6zxex-szem:&imgrefurl=http://mrfrederikshavn.dk/profil&docid=ouy24vfqeesfjm&imgurl=http://mrfrederikshavn.dk/media/44977/logo.png&w=83&h=83&ei=tlrht4msg thlsgbq_omsdg&zoom=1&iact=rc&dur=429&sig= &page=1&tbnh=75&tbnw=75&start=0&ndsp=18&ved=1t:429,r: 0,s:0,i:66&tx=39&ty=35 - mr logo m=isch&tbnid=knzv9_wzgzssjm:&imgrefurl=http://volumee.dk/noanoaonline/&docid=tqv9np7rs4aebm&imgurl=http://volumee.dk/wp- 56

57 content/uploads/noanoa3w.jpg&w=652&h=314&ei=1rrht6kliovmtaa Xj6mVDw&zoom=1&iact=hc&vpx=327&vpy=201&dur=310&hovh=156 &hovw=324&tx=180&ty=66&sig= &page=1& tbnh=82&tbnw=170&start=0&ndsp=18&ved=1t:429,r:1,s:0,i:108 Kvinder logo m=isch&tbnid=knzv9_wzgzssjm:&imgrefurl=http://volumee.dk/noanoaonline/&docid=tqv9np7rs4aebm&imgurl=http://volumee.dk/wpcontent/uploads/noanoa3w.jpg&w=652&h=314&ei=1rrht6kliovmtaa Xj6mVDw&zoom=1&iact=hc&vpx=327&vpy=201&dur=310&hovh=156 &hovw=324&tx=180&ty=66&sig= &page=1& tbnh=82&tbnw=170&start=0&ndsp=18&ved=1t:429,r:1,s:0,i:108 Noa Noa =671&tbm=isch&tbnid=b8olfjtMMb5BRM:&imgrefurl=http://www.sko leidraet.dk/default.aspx%3fpage%3d3041&docid=qeeqieymmk8v6m &imgurl=http://www.skoleidraet.dk/uploads/fotex_logo1.jpg&w=153 9&h=768&ei=_7rHT7SgEsTSsgbHvKjUDg&zoom=1&iact=hc&vpx=144& vpy=200&dur=620&hovh=158&hovw=318&tx=199&ty=68&sig= &sqi=2&page=1&tbnh=83&tbnw=166&start=0&nd sp=18&ved=1t:429,r:0,s:0,i:132 Føtex m=isch&tbnid=onepglmlvv3drm:&imgrefurl=http://www.vhj.dk/nyhe der/arkiv/aarets_firmabil.aspx&docid=nzpd9zjo0eo1sm&imgurl=http: //www.vhj.dk/nyheder/arkiv/~/media/vholmjensen/opel/opel% insignia%252520photo_3.ashx&w=1280&h=854&ei=krvHT- O6CNDvsgbHgYHgDg&zoom=1&iact=hc&vpx=173&vpy=191&dur=62& hovh=183&hovw=275&tx=189&ty=104&sig= &page=1&tbnh=121&tbnw=181&start=0&ndsp=15&ved=1t:429,r:0,s:0,i:132 Opel =671&tbm=isch&tbnid=Ls- jzuvqfc66jm:&imgrefurl=http://boligmagasinet.dk/article/ herrelaekkerherrehybel&docid=lfftcypksli4qm&imgurl=http://boligmagasinet.dk/ image/205872/2/0/620&w=620&h=422&ei=slzht9gicyzbsgb72ic9dg &zoom=1&iact=hc&vpx=631&vpy=273&dur=129&hovh=185&hovw=2 72&tx=178&ty=95&sig= &sqi=2&page=1&tb nh=148&tbnw=209&start=0&ndsp=16&ved=1t:429,r:13,s:0,i:94 - Indretning 57

58 Inspirationsark Andet (Typo3 SEO.pdf, vedhæftet på CD) 58

59 Bilag 1 Kravspecifikation Funktionellekrav Der skal være en side som er nem at komme til som indeholder nyheder. Den skal kunne opdateres automatisk så kunden kun skal skrive i backenden hvad der skal ske de forskellige dage. På forsiden skal man kunne vælge hvilket koncept man vil ind på. Det skal være muligt for bestyrelsen selv at gå ind og lave rettelser på siden. Det skal være synligt at det ikke Kvalitetskrav Oplevelseskrav kun er et bryghus. Der skal flyttes mellem 50 og 55 sider fra den gamle side til den nye. Der vil være mulighed for rettelser en gang efter aflevering. Max 3 klik før brugeren har fundet det de søger Der vil være 2 kundemøder undervejs eksklusiv afleveringen, her vil der være mulighed for rettelser en gang efter. Hjemmesiden er færdig d. 1. juni Siden skal være nem at navigere Hjemmesiden skal være stilren. Stilen som kunden ønskes der skal bruges er minimalistisk. Enkel og overskuelig 59

60 Bilag 2 Gammel hjemmeside 60

61 Bilag 3 Moodboard 61

62 Bilag 4 Skitser 62

63 63

64 64

65 65

66 66

67 67

68 68

69 69

70 70

71 71

72 Bilag 5 Undersider 72

73 73

74 Bilag 6 -Budget 74

75 Bilag 7 Designmanual Farver Skrifttyper Til overskrifter, hovedmenu og undermenu har jeg brugt futura-light. Til brødtekst på siden har jeg brugt verdana. Brødtekst har størrelsen 12px. H1 har størrelsen 49px. H2 har størrelsen 41px. H3 har størrelsen 29px. H4 har størrelsen 14px. # #ffffff #bcbaab 75

Grafisk design. Ide. Designprocess. Målgruppe

Grafisk design. Ide. Designprocess. Målgruppe Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk.

Læs mere

Introducering af Flip MinoHD: http://celikshadow.dk/flip/

Introducering af Flip MinoHD: http://celikshadow.dk/flip/ Introducering af Flip MinoHD: http://celikshadow.dk/flip/ Ahmad Hahmoud Besir Redzepi Jeffrey Lai 04/05-2009 2.semester 3. projekt Indholdsfortegnelse: 1.0 Forord 3 2.0 Kommunikationsplan 4 3.0 Navigationsdiagram

Læs mere

kollegiekokkenet.tmpdesign.dk Side 1

kollegiekokkenet.tmpdesign.dk Side 1 kollegiekokkenet.tmpdesign.dk Side 1 Indholdsfortegnelse Forord 3 Problemformulering 4 Udviklingsmetode 5 Tidsplan 6 Målgruppe 7 Design brief 8 Logo 10 Typografi og farve 11 Navigationsdiagram 12 Usecase

Læs mere

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er

Læs mere

Portfolioudvikling. Line la Fontaine. Multimediedesigner

Portfolioudvikling. Line la Fontaine. Multimediedesigner Portfolioudvikling Line la Fontaine Multimediedesigner Indholdsfortegnelse - Designvalg s. 1-9 - Målgruppe s. 1 - Wireframes/skitser s. 1-5 - Informationsarkitektur s. 6-7 - Farver s. 8 - Typografi s.

Læs mere

Cindie Mortensen, Merete Koudahl, Pernille Tramp Webdesign, gruppeprojekt exercise 7. Menu A/S

Cindie Mortensen, Merete Koudahl, Pernille Tramp Webdesign, gruppeprojekt exercise 7. Menu A/S Menu A/S Problemfelt MENU A/S (MENU) er en dansk design virksomhed og producent. MENU har specialiseret sig indenfor skandinavisk design samt deres evige stræben efter at lave noget originalt. De repræsenterer

Læs mere

REDESIGN AF PORTFOLIO 16. jan. 2015

REDESIGN AF PORTFOLIO 16. jan. 2015 REDESIGN AF PORTFOLIO 16. jan. 2015 Christoffer Møller Jarolics CPH Business Lyngby Multimediedesign Udviklingsprocessen af tilblivelsen af dette projekt redesign af portfolio, vil på de følgende sider

Læs mere

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl. Indledning Mit sidste projekt her på 1.semester gik ud på at jeg skulle lave et redesign af mit første portfolio, som jeg lavede i starten af semesteret. Formålet var at vise hvad jeg havde lært siden

Læs mere

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E.

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E. Portfolie Redesign www.gaardbodesign.dk Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013 Jens Jákup E. Gaardbo indholdsfortegnelse design... gestaltlove... opbygning...

Læs mere

Grafisk Design 70% Skitser

Grafisk Design 70% Skitser Grafisk design Grafisk 2 PRODUKT Som et led i den online markedsføring af BBQ Wing it, har jeg valgt at lave et website, med fokus på information. Det er et website, der er baseret ud fra lærte funktioner

Læs mere

Indledning... 12 Udviklingsmetoden HOME... 12 Bogens opbygning... 13 Hvem kan bruge bogen?... 14 Centrale begreber... 14

Indledning... 12 Udviklingsmetoden HOME... 12 Bogens opbygning... 13 Hvem kan bruge bogen?... 14 Centrale begreber... 14 Indhold Forord.... 10 Indledning... 12 Udviklingsmetoden HOME... 12 Bogens opbygning... 13 Hvem kan bruge bogen?... 14 Centrale begreber... 14 1. Den faglige arv og det nye perspektiv... 17 Projektledelse

Læs mere

Drømme er individuelle. Natascha Fuchs MUL-08. Pia Svensson. Jeffrey Lai. Stefan B. Eilers. Visuel ID. og kommunikation

Drømme er individuelle. Natascha Fuchs MUL-08. Pia Svensson. Jeffrey Lai. Stefan B. Eilers. Visuel ID. og kommunikation Natascha Fuchs MUL-08 Pia Svensson Jeffrey Lai Stefan B. Eilers Visuel ID og kommunikation KNORD - Multimediedesigner 1. sem, nov 2008 Indholdsfortegnelse Kapitel 1.0 Indledning 1.1 Læringsmål 1.2 Problemformulering

Læs mere

Grafisk design. Svendeprøve Juni 2015 - Pia Søgaard

Grafisk design. Svendeprøve Juni 2015 - Pia Søgaard Grafisk design Dokumentation Svendeprøve Juni 2015 - Pia Søgaard Kunde: Sognegaarden - Hedensted Opgave: ny grafisk identitet og hjemmeside Programmer: Indesign, illustrator og photoshop Farverum: CMYK

Læs mere

Kommunikation/IT A 2014

Kommunikation/IT A 2014 Kommunikation/IT A 2014 Facebook side projekt Forside Indholdsfortegnelse Formål:... 3 KIE-modellen:... 3 Fase 1: Problemanalyse... 3 Fase 2: K-strategi... 4 Fase 3: Idéudvikling... 4 Fase 4: Medieproduktion...

Læs mere

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. Grafisk design Grafisk design Opgaven Jeg har fået til opgave at re-designe Sells.dk. Sitet skal benytte elementer fra en kampagne, der tidligere er

Læs mere

Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN

Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN 1/20 Indledning Dette projekt er den afsluttende del af webudvikling-studiet på Erhvervs Lillebælt 1. semester. Projektet er udarbejdet med

Læs mere

Roskilde Tekniske Gymnasium. Eksamensprojekt. Programmering C niveau

Roskilde Tekniske Gymnasium. Eksamensprojekt. Programmering C niveau Roskilde Tekniske Gymnasium Eksamensprojekt Programmering C niveau Andreas Sode 09-05-2014 Indhold Eksamensprojekt Programmering C niveau... 2 Forord... 2 Indledning... 2 Problemformulering... 2 Krav til

Læs mere

srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008

srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008 Gruppe 9: Besir Redzepi, Jacob Pedersen, Garwun Jeffrey Lai og Sean Rørgren srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008 Indholdsfortegenelse

Læs mere

INFLUENCERS. Nemt igang på internettet. Kom hurtigt igang med det du er god til. Klar, start! w w w. i n f l u e n c e r s. d k

INFLUENCERS. Nemt igang på internettet. Kom hurtigt igang med det du er god til. Klar, start! w w w. i n f l u e n c e r s. d k INFLUENCERS Nemt igang på internettet Kom hurtigt igang med det du er god til Klar, start! w w w. i n f l u e n c e r s. d k STOR effekt - billig løsning Hej, jeg hedder Anders Søndergaard, og jeg er selvstændig

Læs mere

Cykelhandler projekt KOM / IT

Cykelhandler projekt KOM / IT 2015 Cykelhandler projekt KOM / IT Indhold Indledning... 2 Tidsplan... 2 Fase 1 - Problemanalyse... 3 Informations problem... 3 Markedsundersøgelse... 3 Analyse af deres eksisterende medieprodukter...

Læs mere

Kom godt i gang med DanaShop

Kom godt i gang med DanaShop Kom godt i gang med DanaShop Tillykke med jeres nye webshop I din webshop fra DanaWeb findes der utroligt mange muligheder for at tilpasse den til lige netop jeres behov. DanaWeb har opsat alle shoppens

Læs mere

15-11-2013 TANDLÆGE KAMPAGNE. Marc Sztuk, Simon Drabsch og Marcus Rasmussen

15-11-2013 TANDLÆGE KAMPAGNE. Marc Sztuk, Simon Drabsch og Marcus Rasmussen 15-11-2013 TANDLÆGE KAMPAGNE Marc Sztuk, Simon Drabsch og Marcus Rasmussen Forord Vi har tilmeldt os konkurrencen fra Tandlægeforeningen, om at lave en kampagne for at få flere unge til at tage til tandlæge.

Læs mere

10-trins raket til logo-design

10-trins raket til logo-design 10-trins raket til logo-design Stjerne-modellen Dette notat er udarbejdet i forbindelse med foredrag og kurser som supplement til bogen Virksomhedens logo. Ideen er, at det skal fungere sammen med bogen,

Læs mere

Mediegruppen bevæger mennesker

Mediegruppen bevæger mennesker Mediegruppen bevæger mennesker 03 Fra ide til færdig løsning Hos Mediegruppen har vi arbejdet med internettet siden bureauets start i 1997. Vi har været med fra de traditionelle løsninger i HTML og de

Læs mere

Grafik Design...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Målgruppe...6 Købskriterier Design Parametre...8 Tekst Illustrationer

Grafik Design...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Målgruppe...6 Købskriterier Design Parametre...8 Tekst Illustrationer Grafik Design...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Målgruppe....6 Købskriterier Design Parametre...8 Tekst Illustrationer Farver Form AIDA.... 10 Attention Interest Desire Action

Læs mere

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress.

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Wordpress manual Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting og funktioner i Wordpress, så du selv kan redigere indholdet eller tilføje

Læs mere

Kend dine brugere. Om brugertest. 2 sem., feb. 2010 Multimediedesigner, København nord

Kend dine brugere. Om brugertest. 2 sem., feb. 2010 Multimediedesigner, København nord Kend dine brugere Om brugertest 2 sem., feb. 2010 Multimediedesigner, København nord Andreas Frandsen, Ninette Nielsen Agnete Gnistrup, Senia Lundberg Side 1 af 7 Indholdsfortegnelse Indledning s. 2 Valg

Læs mere

1 Robbins, Jennifer N.: Learning Web Design, s. 41

1 Robbins, Jennifer N.: Learning Web Design, s. 41 I designarbejdet forbundet med at udvikle en hjemmeside, er det vigtigt at gøre sig nogle overvejelser over hvilken optimale skærmstørrelse man designer til, da dette har konsekvens for den efterfølgende

Læs mere

GRAFISK DESIGN. Kenneth Friis Petersen

GRAFISK DESIGN. Kenneth Friis Petersen GRAFISK DESIGN Kenneth Friis Petersen Kenneth Friis Petersen - Svendeprøve 2015 Opgavebeskrivelse Total redesign af hjemmeside til Trademark Textiles A/S, både layout og kodning af side. Trademark textiles

Læs mere

Grafisk Design. Dansk Center For Organdonation

Grafisk Design. Dansk Center For Organdonation Grafisk Design Dansk Center For Redegørelsen Hvad går opgaven ud på? Denne opgave går ud på at få lavet et redesign af det logo, Dansk Center For fik fremstillet i 2008, af vores kommunikations afdeling.

Læs mere

Produkt. Index side GRAFISK DESIGN

Produkt. Index side GRAFISK DESIGN Grafisk design Produkt Index side Produkt Underside - kontakt Redegørelse OPGAVEN I forbindelse med valgfag, som jeg tog i København, havde vi lært forskellige nye funktioner, som vi skulle implementere

Læs mere

Indledning... 2. Problemformulering... 2. Problemstilling... 2. Spørgeundersøgelse... 2. Projektstyring... 4. Projektgruppe... 5

Indledning... 2. Problemformulering... 2. Problemstilling... 2. Spørgeundersøgelse... 2. Projektstyring... 4. Projektgruppe... 5 Indhold Indledning... 2 Problemformulering... 2 Problemstilling... 2 Spørgeundersøgelse... 2 Projektstyring... 4 Projektgruppe... 5 Paramenter på 3 eksisterende teater hjemmesider... 6 Om os... 7 Konkurrencer...

Læs mere

Responsiv hjemmeside

Responsiv hjemmeside Kom/it niv.a 3.år Responsiv hjemmeside Hospidana Carina Aa Hansen, Mathias Larsen, Peter Lærke 2014 Forord I vores rapport vil man kunne gå ind og læse omkring hvorfor vi har valgt at opbygge vores hjemmeside

Læs mere

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet GRAFISK DESIGN Diner no. 34 Hjemmeside + Visuel identitet Diner no. 34 9 Opgavebeskrivelse Fiktive opgave. Redesign af visuel identitet og design af ny hjemmeside. Materialet skal skabe et genkendeligt

Læs mere

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation Portfolioudvikling I denne rapport vil du kunne læse om mit porfolios tilblivelse. Det skal give læseren indblik i mine designvalg og hele processen bag projektet. Hjemmesiden er kodet fra bunden i HTML

Læs mere

WBS. Inledning. Afsluttende projekt 1. sem

WBS. Inledning. Afsluttende projekt 1. sem MARK KRISTENSEN.DK Afsluttende projekt 1. sem Inledning I denne rapport kan du læse om den udviklingsproces, der ligger til grund for min nye portfolio, de metoder jeg har brugt, mine designvalg og designprincipper.

Læs mere

Rapport. E-magasin - Projekt 2, 2. semester. Gruppe - MulB 2. sem: Mikkel Thomsen Ivan Christensen Augusta Naundrup-Jensen

Rapport. E-magasin - Projekt 2, 2. semester. Gruppe - MulB 2. sem: Mikkel Thomsen Ivan Christensen Augusta Naundrup-Jensen Rapport E-magasin - Projekt 2, 2. semester Gruppe - MulB 2. sem: Mikkel Thomsen Ivan Christensen Augusta Naundrup-Jensen Indholdsfortegnelse Indledning 3 Problemformulering 3 Målgruppeanalyse 3 Designvalg

Læs mere

Afsluttende opgave - Kommunikation/IT C Klasse 1.1

Afsluttende opgave - Kommunikation/IT C Klasse 1.1 11-05-2015 Affaldshåndtering Afsluttende opgave - Kommunikation/IT C Klasse 1.1 Hans Rasmussen & Kevin Kumar ROSKILDE TEKNISKE GYMNASIUM Indhold Affaldshåndtering i Grønsted kommune... 2 Krav... 2 Design...

Læs mere

grafisk design Se webappen på din mobil

grafisk design Se webappen på din mobil ideudvikling Jeg har valgt at bruge kulturbegivenheden Aarhus Festuge, som udgangspunktet i min svendeprøve. Jeg vil redesigne deres marketingsmateriale såsom logo, magasin, plakater m.m. Derudover vil

Læs mere

Afsluttende opgave. Navn: Lykke Laura Hansen. Klasse: 1.2. Skole: Roskilde Tekniske Gymnasium. Fag: Kommunikation/IT

Afsluttende opgave. Navn: Lykke Laura Hansen. Klasse: 1.2. Skole: Roskilde Tekniske Gymnasium. Fag: Kommunikation/IT Afsluttende opgave Navn: Lykke Laura Hansen Klasse: 1.2 Skole: Roskilde Tekniske Gymnasium Fag: Kommunikation/IT Opgave: Nr. 2: Undervisningsmateriale Afleveres: den 30. april 2010 Indholdsfortegnelse

Læs mere

PROCESSUM DESIGNMANUAL 1.0 2013

PROCESSUM DESIGNMANUAL 1.0 2013 PROCESSUM DESIGNMANUAL 1.0 2013 1 INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE FORORD RETNINGSLINJER LOGO PLACERING OG BRUG FRIZONE: PLACERING: TYPOGRAFI PRIMÆR TYPOGRAFI SEKUNDÆR TYPOGRAFI KOMMUNIKATION GRUNDPAPIR

Læs mere

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk Kunde Bogforlaget Frydenlund A/S Produkt www.his2rie.dk Opgave Hjemmesiden før Redesign af hjemmesiden www.his2rie.dk, som ejes af forlaget. Min opgave lød på, at udforme et nyt design til hjemmesiden,

Læs mere

det færdige resultat

det færdige resultat grafisk design Under dette fagområde har jeg valgt at præsentere jer for en opgave, jeg har udarbejdet for virksomheden Breinholt. Breinholt er en nyopstartet virksomhed i Odense, der tilbyder spirituel

Læs mere

Indhold Formål:... 3 De 6 faser:... 3 Fase 1: Problemanalyse... 3 Fase 2: K-strategi... 3 Fase 3: Idéudvikling... 4 Fase 4: Medieproduktion...

Indhold Formål:... 3 De 6 faser:... 3 Fase 1: Problemanalyse... 3 Fase 2: K-strategi... 3 Fase 3: Idéudvikling... 4 Fase 4: Medieproduktion... Indhold Formål:... 3 De 6 faser:... 3 Fase 1: Problemanalyse... 3 Fase 2: K-strategi... 3 Fase 3: Idéudvikling... 4 Fase 4: Medieproduktion... 4 Fase 5: Test... 5 Fase 6: Offentliggørelse... 5 Kanyle-modellen:...

Læs mere

Case study: Pinterest

Case study: Pinterest Case study: Pinterest Hvad? Pinterest er en social medieplatform, der hovedsageligt fungerer som værktøj til at samle, dele og udforske visuelt indhold. Udbredelse, hvor mange, vækstpotentiale? Pinterest

Læs mere

GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST

GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 1 af 13 DOKUMENTATION OPGAVE Opgaven jeg stillede mig

Læs mere

Creativity Design Undersøgelse Case 1: Auction Travels INDEX 1 WORK BREAKDOWN STRUCTURE (WBS) 2 RISIKOANALYSE 3 INTERESSENTANALYSE 4 BRUGERPROFILER 4

Creativity Design Undersøgelse Case 1: Auction Travels INDEX 1 WORK BREAKDOWN STRUCTURE (WBS) 2 RISIKOANALYSE 3 INTERESSENTANALYSE 4 BRUGERPROFILER 4 Index INDEX 1 WORK BREAKDOWN STRUCTURE (WBS) 2 PROJECT KEY PURPOSE STATEMENT 2 DELIVERABLES STATEMENT 2 ACTIVITIES FOR EACH DELIVERABLES 2 UNDERSØGELSE: 2 RISIKOANALYSE 3 PLAN B 3 FOR TYNDT KONCEPT ERROR!

Læs mere

GRAFISK DESIGN SVENDEPRØVE 2013. Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

GRAFISK DESIGN SVENDEPRØVE 2013. Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5 NAVN PÅ OPGAVEN KERNEOMRÅDE SVENDEPRØVE 2013 Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5 Beskrivelse af opgaven I min fritid modtog jeg en opgave, som bestod i, at redesigne og kode et

Læs mere

Læringsprogram. Christian Hjortshøj, Bjarke Sørensen og Asger Hansen Vejleder: Karl G Bjarnason Fag: Programmering Klasse 3.4

Læringsprogram. Christian Hjortshøj, Bjarke Sørensen og Asger Hansen Vejleder: Karl G Bjarnason Fag: Programmering Klasse 3.4 Læringsprogram Christian Hjortshøj, Bjarke Sørensen og Asger Hansen Vejleder: Karl G Bjarnason Fag: Programmering Klasse 3.4 R o s k i l d e T e k n i s k e G y m n a s i u m Indholdsfortegnelse FORMÅL...

Læs mere

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder.

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder. GRAFISK DESIGN KUNDEN PA Vaskeriteknik er en enkeltmandsvirksomhed som startede i 2008. Manden bag er Preben, som gennem 14 års brancheerfaring startede sit eget firma op da han føler at han med sit partnerskab

Læs mere

Indhold. Cebrail Erdogan 3.5

Indhold. Cebrail Erdogan 3.5 Indhold Indledning... 2 Popularitet... 3 Kommunikation... 3 Hvilken felt vil jeg arbejde med?... 5 Bollemodel... 5 Formålet og præmis... 5 Indhold... 5 Målgruppe... 5 Afsender... 6 Mediet... 6 Kommunikationsmiljø...

Læs mere

Portfolio redesign. Kia Dahlen! cph-kd51@cphbusiness.dk! 1. semester eksamen! MUL-A 2013! !!! www.mul17.itkn.dk/portfolio/index.html!

Portfolio redesign. Kia Dahlen! cph-kd51@cphbusiness.dk! 1. semester eksamen! MUL-A 2013! !!! www.mul17.itkn.dk/portfolio/index.html! Portfolio redesign Kia Dahlen cph-kd51@cphbusiness.dk 1. semester eksamen MUL-A 2013 www.mul17.itkn.dk/portfolio/index.html Underviserer: Ditlev Skanderby Frederik Tang Ian Wisler-Poulsen Jesper Hinchely

Læs mere

Afsenderen af hjemmesiden er Ulla Bersang, som er Bersang. Opgaven er en ny opsætning. Opgaven er

Afsenderen af hjemmesiden er Ulla Bersang, som er Bersang. Opgaven er en ny opsætning. Opgaven er 38 Grafik design Opgave beskrivelse Overordnet kommunikation Opgaven er en hjemmesiden, lavet for en kunde Ulla Afsenderen af hjemmesiden er Ulla Bersang, som er Bersang. Opgaven er en ny opsætning. Opgaven

Læs mere

Grafisk workflow. bl.udbudsnet.dk

Grafisk workflow. bl.udbudsnet.dk Grafisk workflow. bl.udbudsnet.dk Hvad går opgaven ud på? Opgaven gik ud på at lavet et præsentations website for Udbudsnet. Hjemmesiden skulle bruges til at sælge Udbudsnet, på en messe som hedder BL.

Læs mere

NY IDENTITET TIL SCHWARZ

NY IDENTITET TIL SCHWARZ GRAFISK DESIGN NY IDENTITET TIL SCHWARZ Redskaber: Photoshop Illustrator Kundeprofil: Schwarz er en eksklusiv forhandler af senge og tilbehør i topklavlitet. Med deres store sortiment af kvalitetsmærker

Læs mere

JB Plastics visuelle identitet... 2. Et nyt logo... 2 Visitkort og brevpapir... 4 PowerPoint... 6. Designprocessen... 6

JB Plastics visuelle identitet... 2. Et nyt logo... 2 Visitkort og brevpapir... 4 PowerPoint... 6. Designprocessen... 6 0 Indholdsfortegnelse JB Plastics visuelle identitet... 2 Et nyt logo... 2 Visitkort og brevpapir... 4 PowerPoint... 6 Designprocessen... 6 WBS (Work Breakdown Structure)... 6 Procesnedbrydning og SWOT...

Læs mere

RAPPORT Projekt 4: Website design 10-28.11.2014 Gruppe A3: Anastasia Keller, Jakob Plenge, Rasmus Bernhard, Benjamin Vinje, Raquel Hesdorf

RAPPORT Projekt 4: Website design 10-28.11.2014 Gruppe A3: Anastasia Keller, Jakob Plenge, Rasmus Bernhard, Benjamin Vinje, Raquel Hesdorf RAPPORT Projekt 4: Website design 10-28.11.2014 Gruppe A3: Anastasia Keller, Jakob Plenge, Rasmus Bernhard, Benjamin Vinje, Raquel Hesdorf 1 Web-agency Den første del af opgaven var at skabe en web-agency

Læs mere

For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle Mikkalina Glas s produkter.

For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle Mikkalina Glas s produkter. Moodboard opgave design At designe og udforme en ny visuel identitet til Mikkalina Glas, bestående af logo og hjemmeside. For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle

Læs mere

Grafisk design: Ny identitet til LiveCV

Grafisk design: Ny identitet til LiveCV Grafisk design _ 22 / 42 Grafisk design: Ny identitet til LiveCV Produkt _ Igennem mit eget firma Wunderly, har jeg fået til opgave at re-designe LiveCV s online identitet, med henblik på at gøre det hele

Læs mere

# Redesign af copenhagenskatepark.dk

# Redesign af copenhagenskatepark.dk # 1 Grafisk Design # Redesign af copenhagenskatepark.dk Opgave Dette er en fiktiv opgave hvor jeg har valgt at redesigne copenhagenskatepark.dk's website. Jeg synes det kunne være en spændende udfordring

Læs mere

grafisk // design // d k sign

grafisk // design // d k sign gr a fis grafisk e // d k sign grafisk vinbog / redegørelse / brainstorm og inspiration / farver, fonte og logo / layout / opslag / omslag HVAD? Design og opsætning af et fiktivt magasin, Plus, hvor design

Læs mere

#30DageMedBranding. Guiden er under løbende evaluering og opdatering og du kan downloade nye versioner her. Henrik G. Qvottrup

#30DageMedBranding. Guiden er under løbende evaluering og opdatering og du kan downloade nye versioner her. Henrik G. Qvottrup #30DageMedBranding Følgende er en enkel guide til et bedre personligt brand på internettet. Processen løber over 30 dage og hver dag skal du gøre en ny ting. Nogen gange vil du blive nødt til at udskyde,

Læs mere

Indholdsfortegnelse. 1) Titel. 6) Produktion. 2) Konceptet. 7) Visuel udformning. 8) Opsætning. 3) Forløb. 4) Målgruppen. 9) Facebook.

Indholdsfortegnelse. 1) Titel. 6) Produktion. 2) Konceptet. 7) Visuel udformning. 8) Opsætning. 3) Forløb. 4) Målgruppen. 9) Facebook. Konceptbeskrivelse Indholdsfortegnelse 1) Titel 6) Produktion 2) Konceptet 7) Visuel udformning 3) Forløb 8) Opsætning 4) Målgruppen 9) Facebook 5) Påstanden 10) Brugskontekst Titel Titlen for konceptet

Læs mere

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK Denne rapport indeholder en primær analyse af webstedet www.bilforhandler.dk. Vi har kigget på: Det vigtige førstehåndsindtryk af webstedet Brugervenlighed Anvendte

Læs mere

Interviewer: Men da du så kom ind på siden hvad var dit førstehåndsindtryk af den så?

Interviewer: Men da du så kom ind på siden hvad var dit førstehåndsindtryk af den så? Transskribering af interview med EL Udført tirsdag den 27. November 2012 Interviewer: Hvordan fik du kendskab til Pinterest? EL: Øj, det er et godt spørgsmål! Hvordan gjorde jeg det? Det ved jeg ikke engang.

Læs mere

Personlig branding i webdesign

Personlig branding i webdesign Personlig branding i webdesign I forhold til vejledning vil jeg spørge, om opgaven i sin helhed ser fornuftig ud. Er min problemformulering skarp nok? Er min metode i orden? Er det ok at gøre brug af min

Læs mere

Her vil jeg gerne være Det er sådan dine kunder skal tænke

Her vil jeg gerne være Det er sådan dine kunder skal tænke Her vil jeg gerne være Det er sådan dine kunder skal tænke I denne gennemgang lægger vi vægt på hjemmesidens opbygning. For at få det optimale udbytte af en hjemmeside skal mange elementer spille sammen.

Læs mere

Kom ud over rampen med budskabet

Kom ud over rampen med budskabet Kom ud over rampen med budskabet Side 1 af 6 Hvad er god kommunikation? God kommunikation afhænger af, at budskaberne ikke alene når ud til målgruppen - de når ind til den. Her er det særligt vigtigt,

Læs mere

Grundforløbsprøve Projektbeskrivelse

Grundforløbsprøve Projektbeskrivelse Grundforløbsprøve Projektbeskrivelse Webintegrator Thomas á Rógvi 221191-2505 Indholdsfortegnelse Opgaven... 3 Tidsplan... 4 Målgruppe... 5 Layout... 6 Design... 7 Fonte... 7 Browser... 7 Bilag... 8 Det

Læs mere

Bliv opdaget på Internettet! - 10 gode råd til at optimere din hjemmeside til søgemaskiner

Bliv opdaget på Internettet! - 10 gode råd til at optimere din hjemmeside til søgemaskiner Bliv opdaget på Internettet! - 10 gode råd til at optimere din hjemmeside til søgemaskiner Af Henrik Bro og Martin T. Hansen I har måske allerede en flot, og informativ hjemmeside. Og alle jeres kursister

Læs mere

KOMMUNIKATION/IT. Eksamensprojekt MARCUS NIEBUHR OG CHRISTOFFER A. BREVADT. ROSKILDE TEKNISKE GYMNASIUM Klasse 1.1

KOMMUNIKATION/IT. Eksamensprojekt MARCUS NIEBUHR OG CHRISTOFFER A. BREVADT. ROSKILDE TEKNISKE GYMNASIUM Klasse 1.1 KOMMUNIKATION/IT Eksamensprojekt MARCUS NIEBUHR OG CHRISTOFFER A. BREVADT ROSKILDE TEKNISKE GYMNASIUM Klasse 1.1 Introduktion Vi har valgt at tage udgangspunkt i case 2 affaldshåndtering, og som fokuspunkt

Læs mere

Digital Identitet. Projektudvikling af www.virtualdating.dk

Digital Identitet. Projektudvikling af www.virtualdating.dk Synopsis Digital Identitet. Projektudvikling af www.virtualdating.dk Gruppe 14 Kasper Spaabæk, Allan Jonas, Trine Uldall, Jonna Bolette Degn Titel Digital Identitet. Formål Vi laver et datingsite (www.virtualdating.dk),

Læs mere

Grafisk design 5 STK. ØL / DRINKS / VAND. Opgaven. Farver. Målgruppe. Logo. Stil og stemning Familie, hygge og samvær.

Grafisk design 5 STK. ØL / DRINKS / VAND. Opgaven. Farver. Målgruppe. Logo. Stil og stemning Familie, hygge og samvær. 1 DRINK GRAFISK DESIGN 5 STK. ØL / DRINKS / VAND GRAFISK DESIGN Grafisk design 3 DRINK 2 DRINK 5 DRINK 4 DRINK Opgaven bestod i at udvikle et nyt design til Galten byfest, som bliver holdt en gang årligt.

Læs mere

Få din egen hjemmeside

Få din egen hjemmeside I dette afsnit lærer du at bygge din egen hjemmeside tilføje tekst og billeder lave dit eget design lægge en baggrund på hjemmesiden I næste nummer får du hjælp til at bygge en større hjemmeside til en

Læs mere

Folkekirken.dk. Koncept for folkekirken.dk

Folkekirken.dk. Koncept for folkekirken.dk Folkekirken.dk Koncept for folkekirken.dk Udkast 27.08.0916.06.09 Koncept for folkekirken.dk 27.08.09 Folkekirken.dk er Den Danske Folkekirkes hjemmeside. For driften af folkekirken.dk gælder følgende:

Læs mere

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ******

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ****** Workflow Svendeprøve Emil Momsen BeskrivelseN WorkFlow BeskrivelseN Side - 2 / 8 Arktis Brief Fra kunde Opgave / Indhold Kunden var WWF og opgaven gik ud på at få folk til at blive klar over, hvor alvorligt

Læs mere

Grafisk design AnnA SkAk Mediegr Afiker

Grafisk design AnnA SkAk Mediegr Afiker Grafisk design opgaven Jeg fik til opgave, at udforme en værdikupon til svenske Adlibris Fotoservice. Værdikuponen skulle være i A5-format på 2 sider. På første side skulle der være en indledende tekst

Læs mere

Carlas cupcakes. Projekt. http://bysileha.com/2.semester/cupcake/remake/index.html

Carlas cupcakes. Projekt. http://bysileha.com/2.semester/cupcake/remake/index.html Projekt 3 http://bysileha.com/2.semester/cupcake/remake/index.html Carlas cupcakes Amanda Hüttel Lindschouw Michelle Denise Andersen Simone Lenander Hansen Indholdsfortegnelse PROJEKTFORMULERING 1.0 3

Læs mere

Trin for trin guide til Google Analytics

Trin for trin guide til Google Analytics Trin for trin guide til Google Analytics Introduktion #1 Opret bruger #2 Link Google Analytics til din side #3 Opret konto #4 Udfyld informationer #5 Gem sporings id #6 Download WordPress plugin #7 Vent

Læs mere

Afsluttende semesterprojekt - 1. Semester

Afsluttende semesterprojekt - 1. Semester Afsluttende semesterprojekt - 1. Semester Portfolio Redesign Multimediedesign CPH business Akademi Emilie Arved Eriksen MULA 2014-2015 Indholdsfortegnelse Mind-map... 4 PBS... 5 WBS... 5 GANTT... 6 Brugertest...

Læs mere

Multimediedesigner. Vedvarende. energi

Multimediedesigner. Vedvarende. energi Multimediedesigner Vedvarende energi Eksamensprojekt 2. sem. maj. 2014 - jun. 2014 Problemstilling Vedvarende energi er en samlebetegnelse for bioenergi, vindenergi, solenergi og andre teknologier, der

Læs mere

Google Plus for Virksomheder Hvordan laver man en Google plus side?

Google Plus for Virksomheder Hvordan laver man en Google plus side? Google Plus for Virksomheder Hvordan laver man en Google plus side? Google Plus er måske ikke det første du tænker på når du skal øge kendskabet til din virksomhed. I det følgende viser jeg hvorfor du

Læs mere

Kernefaglighedsbeskrivelse. Af Ditte Vium Overgaard

Kernefaglighedsbeskrivelse. Af Ditte Vium Overgaard Kernefaglighedsbeskrivelse Af Ditte Vium Overgaard Kernefaglighedsbeskrivelse Opgavebeskrivelse Grafik og billedbehandling jörna Opgave Opgaven gik ud på at redesigne virksomhedens logo, med fokus på at

Læs mere

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg Opgaven Der skal designes en hjemmeside til en pensioneret revisor, som ønsker at starte en fritids beskæftigelse op, som privat revisor. Han Ønsker en hjemmeside der skal kort fortælle om hans forretning.

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

TILFREDSHEDSUNDERSØGELSE

TILFREDSHEDSUNDERSØGELSE TILFREDSHEDSUNDERSØGELSE Parkering Danmark Postboks 301 1502 København V Tlf. 31148908 Mail: info@parkeringdanmark.dk Side 1 af 18 Kontortid: Mandag - Torsdag 14-16 Indhold Tilfredshedsanalyse... 3 Analysens

Læs mere

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15 DESIGNPROCES Indledende møde med

Læs mere

Afsluttende opgave 2009 Kommunikation/IT

Afsluttende opgave 2009 Kommunikation/IT Afsluttende opgave 2009 Kommunikation/IT Tema: Kulløse Miljømesse Rapport af: Jacob Almann Tinnesen, Oliver Mørk og Oscar Helmersen Roskilde Tekniske Gymnasium Klasse 1.1 Afleveret: 24-04-2009 Side 1 af

Læs mere

8 tips og tricks der sender din webshop i superligaen

8 tips og tricks der sender din webshop i superligaen 8 tips og tricks der sender din webshop i superligaen Indhold Intro Kend dine besøgende Gør valget simpelt og vind kunder Sådan får du en optimeret kategoriside Eksempler på to gode kategorisider Brug

Læs mere

E- Magazine 2. projekt 2. semester

E- Magazine 2. projekt 2. semester E- Magazine 2. projekt 2. semester Gruppemedlemmer: Mikki Houmand Olsen (www.?) Charlotte Bergstrøm (www.crispydesign.dk/portfolio) Lisbeth Kobberup (www.kobberupdesign.dk/portfolio) Klasse: MULB Landingpage:

Læs mere

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT PROJEKTET Udarbejdelse og idéudvikling af en fiktiv grafisk identitet til Puls Fitness. I denne kernefaglighed fremhæver jeg designet til websitet samt lidt merchandise. Derudover ses et udkast til bl.a.

Læs mere

Peter Kragh Hansen. Microsoft PowerPoint 2013 DK. ISBN nr.: 978-87-93212-07-7

Peter Kragh Hansen. Microsoft PowerPoint 2013 DK. ISBN nr.: 978-87-93212-07-7 Peter Kragh Hansen Microsoft PowerPoint 2013 DK ISBN nr.: 978-87-93212-07-7 I n d h o l d s f o r t e g n e l s e PowerPoint 2013... 3 Præsentation... 4 Oprettelsen af præsentationer... 5 Skabeloner og

Læs mere

DAGSORDEN. 1. Mobil prototype. 2. Service i forhold til OOOJA. 3. Slut.

DAGSORDEN. 1. Mobil prototype. 2. Service i forhold til OOOJA. 3. Slut. DAGSORDEN 1. Mobil prototype. Den mobile prototype Heuristisk inspektion af prototypen Tænke højt test af prototypen 2. Service i forhold til OOOJA 3. Slut. Service Gap-servicemodellen Fokus interview

Læs mere

Mark André Lyhne. Eksamen 2012. 12web1b

Mark André Lyhne. Eksamen 2012. 12web1b Mark André Lyhne Eksamen 2012 12web1b Indholdsfortegnelse Indholdsfortegnelse... 1 Projekt beskrivelse... 3 Målgruppe... 3 Afsender... 3 Budskab... 3 Kommunikationsmål... 3 Ideudvikling... 3 De 6 Designparametre...

Læs mere

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ Produkt Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen.

Læs mere

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

Indholdsfortegnelse: Indledning side 2 Usability side 3 Swot side 3, 4 Tows side 4, 5, 6 Konklusion side 6 Bilag side 7.

Indholdsfortegnelse: Indledning side 2 Usability side 3 Swot side 3, 4 Tows side 4, 5, 6 Konklusion side 6 Bilag side 7. Indholdsfortegnelse: Indledning side 2 Usability side 3 Swot side 3, 4 Tows side 4, 5, 6 Konklusion side 6 Bilag side 7 Indledning: Dansk sejlunion er den nationale organisation for kap og fritidssejlads

Læs mere

Kommunikationsværktøj

Kommunikationsværktøj Hjælp til selvhjælp Kommunikationsværktøj Gode overvejelser til projektlederen om interessenter og kommunikation o o Tænk over projektets interessenter og over kommunikationen af jeres projekt fra start

Læs mere