REDESIGN AF SØREN K S WEBSITE SKREVET AF KARINA MAHMUD OLE SERGIO CLAUS

Størrelse: px
Starte visningen fra side:

Download "REDESIGN AF SØREN K S WEBSITE SKREVET AF KARINA MAHMUD OLE SERGIO CLAUS"

Transkript

1 REDESIGN AF SØREN K S WEBSITE SKREVET AF KARINA MAHMUD OLE SERGIO CLAUS

2 WEBSITE - PROJEKT 3 Cphbusiness Lyngby Multimediedesigner MUL- A 1. semester, 2012 PROJEKT URL LÆRERE Ditlev Skanderborg (DSK) Morten Rold (MORO) Merete Lindemann (MLI) Ian Wisler- -Poulsen (IWPO) UDARBEJDET AF: Claus Buus Ole Hansen Mahmud Sahan Karina Rossing Kjær Hansen Sergio Calero

3 INDHOLD INDLEDNING 4 PROJEKTPLANLÆGNING 4 WBS 4 Gannt-diagram 4 Risikoanalyse 4 EKSPERTVURDERING 4 DESIGNBRIEF 4 KOMMUNIKATIONSANALYSE 5 FLOWCHART 6 KODEEKSEMPLER 7 HTML 7 CSS 8 JavaScript 8 DESIGN DOKUMENTATION 13 BRUGERTEST 13 PROCESBESKRIVELSE & EVALUERING 13 LITTERATURLISTE 13 BILAG 1 - WBS 14 BILAG 2 - Gannt-diagram 15 BILAG 3 - Risikoanalyse 16 BILAG 4 - Ekspertvurdering 17 3

4 INDLEDNING Gruppen har fået til opgave at re-designe websitet for restauranten søren k s hjemmeside. Opgavens fokusområde er funktionalitet, da restaurantens kunder har oplyst, at det er et problem at navigere og finde nødvendige oplysninger på websitet. Re-designet af websitet skal være et nykodet website efter gældende normer indenfor internationale regler og standarder. PROJEKTPLANLÆGNING WBS Ved hjælp af WBS (Work Breakdown Structure) har vi lavet en agenda for de forskellige arbejdsområder i projektet. Vi har fastsat milepæle med ønsket om at arbejde struktureret med henblik på at sikre os det bedst mulige overblik igennem projektforløbet. (Se bilag 1) GANTT-DIAGRAM Vi har planlagt vores tid vha. et Gannt-diagram og nedbrudt projektet i relevante arbejdsopgaver. Et Gantt-diagram er et vigtigt værktøj til at skabe overblik over et projekt. (Se bilag 2) RISIKOANALYSE For at imødekomme eventuelle risici er det nødvendigt at lave en risikoanalyse. Allerede i begyndelsesfasen af et projekt opstilles en tabel, der har til formål at skabe overblik over mulige risici (Se bilag 3). Tabellen indeholder de forskellige risici samt graden af disse. Derudover forklares konsekvensen af de opstillede risici og til sidst en løsning på at imødekomme dem. EKSPERTVURDERING Som led i gruppens researchproces har vi lavet en ekspertvurdering på det oprindelige website for restauranten søren k. En ekspertvurdering har til formål at finde fejl og mangler, der påvirker websitets kvalitet i brugen. For at løse sitets usabilityproblemer udførte gruppens fem medlemmer alle testen individuelt, for derefter, i fælleskab, at sammenligne, diskutere og vurdere fejlene. Testen er lavet med udgangspunkt i 10 af usabilityeksperten Jakob Nielsens mest anerkendte heuristikker. Dokumentation af testens resultat har vi noteret i et log-skema (Se bilag 4). DESIGNBRIEF Ved fælles gennemgang af søren k s eksisterende website, blev vi hurtigt enige om fem simple krav til vores redesign: enkelthed, relevans, overskuelighed, troværdighed og tilpasset sprogbrug. Det nye design bør være simpelt og enkelt. De vigtige elementer skal fange brugerens opmærksomhed, samtidig skal designet være relevant for websitets formål og budskab. Overskuelighed på det nye website er afgørende for brugervenligheden, mens sprog og mængden deraf skal tilpasses målgruppen. 4

5 På det eksisterende website er der fundet mange gode og designmæssige flotte elementer. Disse elementer kan genbruges i hel- eller delvis oprindelse. På baggrund af en ekspertvurdering har vi fundet en del elementer, som ikke virker eller virker i mindre grad, samt nogle uhensigtsmæssige funktioner eller funktioner som ikke virker overhovedet. Et restaurantbesøg kan ofte være en pludselig indskydelse. Valg af restaurant kan træffes på baggrund af en søgning på internettet. Det må påregnes at denne søgning kan foretages i bil, tog, bus osv. - Websitet skal altså fungere på alle typer mobile enheder og må derfor ikke indeholde flashelementer. Websitet skal afspejle den kvalitet, som det gamle indeholdt, men i en nyere og bedre fungerende stil. Det er vigtigt at vise tilbudene på en sådan måde, at kunderne vil blive fristet til at købe flere retter efter trin for trin metoden. Det er vigtigt at vise diverse retter med indbydende fotos. Præsentationen af varerne og virksomhedens betjening og service skal gå hånd i hånd og ledsage brugeren i tiden efter besøget. Af større ændringer skal der laves nye farver, som gør sitet mere lyst og porøst uden at miste værdien af præsentationen. Der bør flyttes og ændres på emner i hovedmenuem, så navigation bliver bedre. Der må ikke være et eneste dødt link på sitet. Der skal flyttes og sorteres i fotomaterialet og de grafiske elementer, som ikke lever op til resten af kvaliteten på sitet skal rentegnes og reproduceres. KOMMUNIKATIONSANALYSE Følgende afsnit er en kommunikationsanalyse af restauranten søren k s website. Analysen er baseret på en kommunikationsmodel med udgangspunkt i forskeren Harald Dwight Lasswells formel; Hvem siger hvad til hvem i hvilken kanal med hvilken effekt. Støj Afsender Budskab Modtager Formål Medie Effekt For at en kommunikationsproces kan finde sted, er afsender og modtager en nødvendighed. I dette projekt skelnes der mellem primær og sekundær afsender. Førstnævnte er restauranten søren k, da det er den part, der tager initiativ til, at kommunikationen skal finde sted. Den sekundære afsender er projektgruppen, der udarbejder websitet. Budskabet er afgørende for restaurantens mening med websitet. Websitets budskab er helt enkelt at restauranten er værd at besøge. Hvis kommunikationsprocessen lykkes succesfuldt, vil modtager konkludere samme. Den ønskede effekt med budskabet er at tiltrække nye kunder samt bibeholde nuværende kunder, mens formålet med denne effekt er at restauranten tjener penge og opnår popularitet. Den overordnede målgruppe for restauranten søren k er unge, voksne- og ældre mennesker. En analyse af målgruppen for restauranten, som produkt, afgrænser målgruppen yderligere. Restauranten er placeret i Den Sorte Diamant Det Kongelige Biblioteks tilbygning - med udsigt til vandet i hjertet af København. 5

6 Derudover leverer restauranten alle cateringopgaver i Den Sorte Diamant, hvor større arrangementer, såsom festarrangementer, konferencer og receptioner, afholdes. Beliggenhed, kvalitet og pris hænger ofte sammen og sorterer i målgruppen. Målgruppen for restauranten kan derfor defineres som kunder, både private og firmaer, med interesse for kvalitet. I en analyse af restaurantens website kan det dog forsvares at karakterisere modtager som et publikum. Publikummet kunderne - vælger selv på et bredt marked og bruger websitet til at søge information om restauranten. Der er ikke tale om tydelig målrettet kommunikation på websitet, dog påvirker designmæssige virkemidler formidlingen af sitets budskab positivt. Støj, såsom dårlig omtale og tekniske problemer, kan derimod påvirke formidlingen negativt. Websites for forskellige restauranter giver kunder mulighed for at undersøge markedet online og blive informeret om forskellige spisesteder. Dette giver kunderne mulighed for at finde præcis den restaurant, de ønsker. Websitets optimerede brugervenlighed og informationsarkitektur samt design giver kunden mulighed for problemfrit at søge information om restauranten, mad, priser, beliggenhed samt online bordbestilling. Udfaldet af den optimale kommunikationsproces er, at kunden via websitet finder restaurant søren k et besøg værd. FLOWCHART Vi har udarbejdet et flowchart, der giver en oversigt over navigationen. Det indikerer hvilke sider websitet består af, og hvordan de er placeret i forhold til hinanden. 6

7 KODEEKSEMPLER På websitet er der anvendt kodning i HTML-5 og CSS-3 externt stylesheet, samt javascript. HTML HTML koderne i ovenstående eksempel genererer en kasse <div> med listet indhold. Kassen skal i dette tilfælde fungere som en menu. Liniernes tekst i listerne skal optræde som link, som sender brugeren videre til andet indhold, når der klikkes på dem. Listerne <ul> består at liste-elementer eller linier <li> og endvidere er der indsat endnu en liste <ul> under et liste-element for at danne undermenupunkter i menuen. Linkene i HTML skrives som <a href= > hvor der imellem anfører hvor hen brugeren ska sendes. I linkene herover er indsat et # som bruges i testfasen inden det rigtige link isættes. Dette gøres for at se om linkteksten opfører sig som et link uden at sende brugeren videre. Hvis disse koder vises i en browser, ser det sådan ud: Rene HTML koder danner dette indtryk. For at forandre dette indtryk skal der tilsættes styling i form af CSS-kodning. Stort set alt HTML kan pyntes og styles med CSS og vise hvad der ønskes, bl.a. former, farver, kanter, margin, typografi, streger, kasser mv. 7

8 CSS Hvis der tages udgangspunkt i ovenstående eksempel, med den anvendte HTML-kodning, ønskes en styling af typografi og baggrund mv. Fra basic er link stylet med en streg under og er blå og liste-elementer er basic stylet med udfyldte eller åbne prikker mv. Baggrunden skal i dette tilfælde indeholde en farve og teksten skal ikke have prikker og linjer under. Endvidere ønsker man at overholde visse indryk, marginer og afstande. Dette kom tl at se sådan ud i CSS: Som det fremgår af koderne, er de vidt forskellige fra HTML kodningen i dokumentet. CSS kodning kan enten foretages hvor det skal anvendes eller kodes i et ark ved siden af dokumentet og derefter linkes ind. Disse metoder kaldes hhv. for in-line styling eller styling ved hjælp af eksternt style-sheet. Når man kobler ovenstående koder til de før beskrevne HTML-koder, ser det ud som til højre. JAVASCRIPT Udover HTML og CSS kodning er der i sitet også anvendt javascript kodning. Denne kodning er en helt anden form for kodning og er særlig idet det er Objekt Orienteret kodning. Denne type kodning anvendes især på meget store sites og grundlaget er Microsoft programmet: Visuel Basic. På denne site er javascript-kodningen hentet på internettet og tilrettet til vores brug. Dette er gjort, fordi det ikke, uden meget indgående kendskab til for- og backgroundkodning, er muligt at kode selv. Scriptet i vores tilfælde befinder sig på forsiden, og gør at bannerbillederne slider ind fra højre og skifter hele tiden. Javascriptet er et gratis kodekompleks, som alle kan få del i på Da selve scriptet er et meget stort kodekompleks, har vi fravalgt at vise det her. 8

9 DESIGN DOKUMENTATION REDESIGN AF Et af vores vigtigste krav til redesignet var, at det skulle være enkelt og vi ønskede ikke at gå helt væk fra det oprindelige design og stilen. Derfor er nogle af elementerne forblevet, som de var før. OPSÆTNING I det oprindelige site er der kasser (nogle baggrundskasser, footeren og en kasse under menuen), som går helt ud til kanten af skærmen. Dette skaber tomrum imellem dem, hvor man som bruger forventer indhold. I starten af vores redesignproces fik vi hele indholdet samlet i en kasse, sådan at det hele var lukket inde i en kasse, men det gjorde, at det hele blev pakket sammen, og sitet blev tungt at se på. For at undgå dette har vi i stedet klippet de lange kasser fra det oprindelige site, så siden af menuen og footeren flugter med indholdet imellem dem. På den måde har vi stadigvæk samlet det hele sammen, men alligevel givet luft imellem objekterne, så det ikke bliver tungt at se på. Grundet den sorte kasse med indhold nederst på forsiden og introsiderne fremstår det oprindelige site som delt i to. Dette er løst ved at sætte alt indholdet imellem menulinjen og footeren i én kasse - i tilfælde af at der skal flere kasser til, får de alle samme farve. Menulinjen og footeren har fået samme farve og danner en åben ramme omkring indholdet. Kassen bag indholdet i undersiderne fader ud jo længere man scroller ned og forsvinder helt til sidst. Dette er gjort, fordi der ellers, i tilfælde af, at der er meget tekst, er en tom kasse i venstre side (underside-menu-kassen). 9

10 GRIDS Det redesignede site er sat op i grids. På den måde har vi prøvet at organisere det rum, vi havde at arbejde med. Grids er med til at skabe komfort for øjnene, så det var vigtigt for os at udnytte det - især fordi det oprindelige site er så rodet, som det er. Man kan i det oprindelige site ikke finde ud af, hvor man skal kigge for at finde det, man søger. GESTALTLOVE Vi har prøvet at sætte objekter, som hører sammen, i kasser, linjer, ens farver og tæt på hinanden, så brugeren ikke er i tvivl om, hvad der er hvad, og hvad der hører sammen. Forskellige gestaltlove er taget i brug og overholdt - heriblandt loven om lukkethed, lighed, ensartethed og nærhed. Dette ses bl.a. ved menulinjen og footeren. SCROLLING Brugerne er ikke så glade for at scrolle - især når det gælder forsiden på et site. På forsiden på det oprindelige site er vigtigt indhold placeret nederst og brugeren bliver derfor tvunget til at scrolle for at se det. Vi har derfor prøvet at få alt information samlet øverst, så dette ikke er nødvendigt. Billedet til venstre er et screenshot af søren k s forside med 5 vigtige klikbare billeder, som man kun kan se toppen af. FARVEVALG Med farvevalget har vi valgt ikke at gå helt væk fra de farver, som allerede er i det oprindelige site. Vi har dog prøvet at give sitet et mere imødekommende og varmt udtryk. Dette er for at give de varme billeder af restaurantens varme sager lidt mere liv, så hele designet i en helhed fungerer, samt få brugeren til at føle sig velkommen, tryk og tilpas på siden. BAGGRUNDSFARVEN En af de ting, som vi i det oprindelige site synes er et problem, er den kedelige og lidt kolde grå baggrundsfarve sitet har, som i helheden gør, at billederne også bliver lidt kolde og man føler ikke man er velkommen. Vi har givet den en tilpas gylden farve, som vi mener hjælper med at gøre siden varmere og som smelter sammen med billederne, så det hele fungerer i en helhed. Den gamle grå farve har den fordel, at billederne bliver fremhævet lige en tand mere. Det er selvfølgelig også vigtigt, men vi mener, at helhedsfunktionen lige netop på et restaurant-site, som søren k s, er vigtigst, da søren k på siden har meget information (både tekst og billeder), som kræver at man bliver på siden lige en stund ekstra i forhold til andre sites. 10

11 BESTIL BORD -KNAPPEN Bestil bord -knappen på det eksisterende site er blå og har runde hjørner, hvilket gør, at man let overser den. De runde hjørner har den ulempe her, at knappen ikke får øjet til at stoppe op og kigge, men i stedet bare kører videre. Derfor har vi valgt at designe en stor og kantet firkant. Farven er grøn, fordi det er den mest dominerende farve, hvis man kniber øjnene og kigger på forsiden. Der er ingen grund til at have en ekstra farve på siden, da vi som tidligere nævnt går efter en helhedsfunktion, der virker. Den grønne farve symbolerer bl.a. sundhed. FOOTEREN Designet af footeren er den samme som i det oprindelige site. Dog er bankoplysningerne fjernet, da vi mener at bankoplysninerkan udvæksles på anden måde i tilfælde af bord-bestilling eller andre situationer. MENUEN Menupunkter er fjernet og tilføjet. Første menupunkt er omdøbt fra at hedde Restauranten til at hedde Menukort. Når man læser Restauranten tænker man, at knappen fører til information om stedet - lidt ligesom menupunktet Om os. Da knappen fører til undersider, der alle handler om menukort, har vi valgt at kalde den det. Ydermere mener vi ikke, at cafe øieblikket hører til i menulinjen, da den ikke har så meget at gøre med selve siden og er derfor misvisende for nye kunder. Menulinjen bør kun bestå af overordnede emner, som siger noget om søren k. For at tydeliggøre forskellen på restauranten og cafeen har vi fjernet den fra menuen og i stedet sat den på forsiden i form af et reklamebillede. Som det sidste har vi tilføjet menupunktet Kontakt. Næsten alle brugere vil søge efter kontaktinformationer på sitet. Det er derfor vigtigt, at knappen fremtæder tydeligt. Menuknapperne er redesignet. Fra at være løse tekstknapper uden rammer omkring, har vi lukket dem inde i en lang sort kasse/ramme. Når man holder musen over knapperne, bliver teksten markeret med samme farve som sitets baggrundsfarve. Den lille detalje med markeringen viser brugeren, at sitet rent faktisk virker. Teksten forbliver markeret, når man klikker sig ind på en knap. Menuteksterne er lavet korte og præcise, så brugeren ikke er i tvivl om navigationen. Det er også meget vigtigt at man altid kan klikke sig tilbage på den forrige side man var i, så man ikke lige pludselig ender på en side uden at kunne komme videre. Dette skaber ro på siden og troværdighed hos brugeren. Derfor har vi en underside-menu i venstre side, når man klikker sig ind på en underside. Denne underside-menu fungerer som en brødkrummesti og har en You are here -indikation. Alle de hovedsider og undersider, brugeren har klikket sig ind på, bliver i underside-menuen markeret med den farve, sitet har som baggrundsfarve. 11

12 LOGOET Vores redesign giver ikke brugeren valget mellem sprogene dansk og engelsk og knapperne er derfor fjernet. Dette har medført, at der er skabt en unødvendig stor luft mellem logoet og toppen af sitet, som visuelt ikke så så godt ud i en helhed med resten af siden. Derfor er logoet gjort lidt større, mens det er flyttet længere op. Til venstre ses udviklingen af logoets størrelse og placering, samt farveændringen af baggrunden og den nye placering, som menupunktet Kontakt hat fået. BILLEDER OG TEKST I alle undersider er der øverst placeret et billede, som siger noget om emnet. Man siger, at billeder siger mere end 1000 ord. Hvis kun der stod tekst, ville det se tungt og kedeligt ud. Undersider som Frokostkort har to hovedtitler. For at tydeliggøre dette, har vi adskilt dem ved at sætte et billede ind imellem. Alle billederne er taget, redigeret og brugt fra søren k s oprindelige site. Linjelængden på teksten i undersiderne var alt for lange og gjorde teksten tung at kigge på. Da søren k har meget vigtig information, som de udformer i form af tekst, er dette et stort problem. Derfor har vi forkortet linjelængden - yderligere er alle tekster i det oprindelige site læst igennem og rettet for stavefejl og unødvendige gentagelser. YDERLIGERE ÆNDRINGER Vigtige klikbare billeder såsom Menukort og Hold fest på søren k er i det oprindelige site skubbet ned i bunden af forsiden pga. et stort banner med billeder og tekst, som ligger lige under menuen. Dette ville vi finde en løsning på og startede med at fjerne banneret helt og flyttede de klikbare billeder øverst. Efter at have afprøvet det, blev vi i gruppen enige om, at banneret ikke kunne undgås, da der på forsiden ellers ville mangle information om restauranten. Godt nok var der billeder, men lidt tekst er altid godt for at få brugeren til at blive interreseret og søge på et site, som kun er et klik væk. Derfor blev vi nødt til at finde en løsning på det. Vi fik løst problemet ved at sætte banneret og knapperne ved siden af hinanden i grid øverst på siden. Afstanden mellem knapperne og banneret er lidt større end den afstand, der er imellem selve knapperne - dette for at overholde loven om nærhed. Ovenover ses et eksempel ud af flere forsøg på at løse problemet med de klikbare billeder. 12

13 BRUGERTEST På ethvert projekt, der berører optimering af usability, vil det være ideelt at lave en afsluttende test. I dette tilfælde en brugertest/brugervenlighedstest. I en brugertest kan det afprøves, om brugeren kan navigere på sitet og finde de nødvendige informationer, samt give indblik i, hvad brugeren tænker i brugen på sitet. Formålet med denne test er, for gruppen, at forstå hvor brugeren oplever eventuelle problemer på websitet, for efterfølgende at rette op på disse. Brugertesten er ressourcekrævende, fordi der er en del forberedelse. Testen kræver både forberedelse af spørgsmål og testopgaver samt udførelse. Grundet tidsog ressourcemangel har vi ikke udført en usabilitytest på det redesignede website. PROCESBESKRIVELSE & EVALUERING Gruppen har som udgangspunkt forsøgt at arbejde kollaborativt og effektivt. Vi har fordelt de enkelte arbejdsopgaver imellem gruppens medlemmer. Efterfølgende har vi arrangeret et møde, hvor vi har gennemgået og evalueret de stillede delopgaver. Derefter har vi fordelt arbejdsopgaver igen, afholdt endnu et gruppemøde, gennemgået og evalueret og aftalt nyt mødetidspunkt. Gruppen har enkeltvis og i fælleskab arbejdet intensivt med arbejdsopgaverne og tidsplanen er blevet overholdt. Som sidste led i projektet har vi i fælleskab sammenfattet en rapport. Alt i alt har gruppearbejdet fungeret optimalt, og vi er endt ud med et tilfredsstillende produkt. Det redesignede site er til sidst HTML5 og CSS valideret uden fejl. LITTERATURLISTE Jacobsen, J. K. (2011). 29 spørgsmål (2. udgave). Samfundslitteratur Gregersen, O. & Wislet-Poulsen, I. (2009). Usability (1. udgave). Grafisk Litteratur Wisler-Poulsen, I. (2012). 20 Designprincipper (1. udgave). Grafisk Litteratur Fischer, L. H. (2010). Digital Media Management (3. udgave). Nyt Teknisk Forlag Materiale fra fronter 13

14 BILAG 1 - WBS 14

15 BILAG 2 - Gannt-diagram 15

16 BILAG 3 - Risikoanalyse HÆNDELSE SANDSYNLIGHED KONSEKVENS BESLUTNING Tidsplanen holder ikke Dårligt kommunikation i gruppen Manglende viden til at løse opgaven For meget tidspilde ved gruppemøder Pludseligt tabt af information/ opgaven Forkert designudvikling Useriøst indsats til løsning af opgaven Lille Lille Lille Lille Mellem Vi får ikke leveret produktet til kunden Usammenhængende opgave Svært at danne belæg for anvendte teorier Ikke bruger tiden konstruktivt Projektet går i stå. Risiko for for sen aflevering Vi starter i god tid og holder gruppens aftaler og møder Via gruppemøder og Drop Box kan vi alle følge opgavens udvikling Vi sætter os ind i de emner, teorier og tekniske krav der kræves for at løse opgaven Vi er seriøse og målrettede når vi arbejder sammen og har gruppemøder Vi har alle opgaven liggende på vore computer og i gruppens Dropbox Stor Redesign Vi har et konstant interndialog og overblik i forhold til designudvikling af opgaven Mellem Manglefuld opgave. Vi aftaler i gruppen at vi alle arbejder målrettet. Der kan muligvis skrives et gruppekontrakt 16

17 BILAG 4 - Ekspertvurdering HEURISTIK/ DESIGNPRINCIP: Navn og nummer LOKATION: URL PROBLEM: Beskrivelse af brugerens problem KATEGORI: 1-4 LØSNING: Forslag til løsning på problemet #8 Æstetisk og minimalistisk design Restaurantens_ frokostkort.html For meget og rodet info på websitet. 4 Løsning: Færre menupunkter og information prioritering og reducering. #8 Æstetisk og minimalistisk design Websitet fremstår som delt i to grundet den sorte boks med indhold nederst på intro -siderne. 3 Nyt design ingen visuel opdeling af sitet. #3 Brugerkontrol ogfrihed intro-om-os.html Brømkrummesti er ikke gennemgående logisk. I nogle tilfælde er titlen på undersiden det samme som undersidens navn i menuen - andre gange ikke. 3 Navngivning konsekventgøres. Undersidens titel i brødkrummestien bør være det samme som i menuen og kun stå en gang. Tilbageknap på samtlige sider vil optimere navigationen yderligere. #8 Æstetisk og minimalistisk design Restaurantens_ frokostkort.html Gennemgående tekst/ informationer Det samme tekst står alt for mange gange. 3 Fordel oplysning på siderne. Gentagelser sker kun, hvis det er nødvendigt. #4 Konsistens og standarder vinkort.html Døde links, døde links til billeder, billeder der åbner i ny fane, en vin i vinkort uden pris osv. 3 Alt skal virke og være optimalt. #8 Æstetisk og minimalistisk design Restaurantens_ frokostkort.html Teksten på undersiderne forekommer uoverskuelig at læse. 3 Forkortet linjelængden. #2 Sammenhæng mellem website og den virkelig verden Menupunktet Cafe Øieblikket er misvisende for nye kunder. Kunder registrerer ikke nødvendigvis at det er en helt ny restaurant/café. 2 Tydeliggør forskellen på restauranten og cafeen skal ikke ligge som menupunkt. Vises evt. på startsiden i form af reklamebillede. #4 Konsistens og standarder Links er ikke visuelt ens, nogle understreges andre markeres med farve. 2 Konsekvent styling af links. #2 Sammenhæng mellem website og den virkelig verden Ulogisk placering af menuer. Ulogisk navngivning 2 Optimering af informationsarkitekturen #4 Konsistens og standarder vinkort.html Opsætning af navne og priser på vinkortet er ikke ensartet medfører et rodet indtryk. 1 Konsekvent 17

WEBSITE Projekt 3 Af: Ulvi Imanov, Adem Kurnaz, Shiko Nzorubara og Alexander Kofod Dato: 23.11.2012

WEBSITE Projekt 3 Af: Ulvi Imanov, Adem Kurnaz, Shiko Nzorubara og Alexander Kofod Dato: 23.11.2012 WEBSITE Projekt 3 Dato: 23.11.2012 Indholdsfortegnelse Indledning... 2 Designbrief... 2 Kommunikationsanalyse... 3 Flowchart... 4 Eksempel på HTML... 5 Argumentation for design... 7 Evaluering... 9 Gant-diagram...

Læs mere

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas INDHOLD GRUPPEMEDLEMMER...3 DESIGNBRIEF...4 KOMMUNIKATIONSANALYSE...4-5 KOMMUNIKATIONSMODEL...5 ARGUMENTATION FOR DESIGNPRINCIPPER...6

Læs mere

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave.

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave. Portfolioudvikling Planlægning Da jeg startede på projektet lavede jeg en tidsplan, til at starte med gav jeg de forskellige opgaver lidt ekstra tid eftersom jeg synes man altid formår at bruge lidt mere

Læs mere

Projekt 2, Bannere. Reklamebanner og landing-page for kulturnatten 2012. http://www.cph64.webkn.dk/banner/index.html. Vejledere: DSK, MORO, FDTA, IWPO

Projekt 2, Bannere. Reklamebanner og landing-page for kulturnatten 2012. http://www.cph64.webkn.dk/banner/index.html. Vejledere: DSK, MORO, FDTA, IWPO Projekt 2, Bannere Reklamebanner og landing-page for kulturnatten 2012 http://www.cph64.webkn.dk/banner/index.html Vejledere: DSK, MORO, FDTA, IWPO CLmul-a12e 1. Semester, 2. projekt Lasse Mathias Bruun

Læs mere

Headeren er for stor når man kommer ind på siden. Det virker irriterende at man skal scrolle for at få indholdet vist.

Headeren er for stor når man kommer ind på siden. Det virker irriterende at man skal scrolle for at få indholdet vist. Ekspertvurdering Antal af eksperter: 1 Tid brugt til evaluere website: 2 timer. Konklusion: Da jeg gennemgik sitet for fejl, mangler og problemer fandt jeg hurtigt ud af, at det største issue var tekst,

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

Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum

Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum Usability dokumentation Lavet af Sarina, Maria og René MulB-13 22.11.2013 I forbindelse med ekspertvurderingstests udarbejdes som hovedregel altid

Læs mere

Projekt 3 - Website. http://cph60.webkn.dk/soerenk/index.html

Projekt 3 - Website. http://cph60.webkn.dk/soerenk/index.html Projekt 3 - Website http://cph60.webkn.dk/soerenk/index.html www.soerenk.dk Lars Nordenbæk Lucas Perch-Nielsen Mark Skov Halding Lasse Mathias Bruun Overgaard Majbritt Østergaard Andersen Ian Wisler-Poulsen

Læs mere

Redesign af Cinnober. Analyse af hjemmesiden Cinnober

Redesign af Cinnober. Analyse af hjemmesiden Cinnober Redesign af Cinnober Gruppe 25 Vi har i denne uge arbejdet på at redesigne hjemmesiden til butikken Cinnober, som ligger på Strøget i København. Cinnober sælger bøger og andre kontorartikler. Deres hjemmeside

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

Gruppe 15. Redesign af bageriet FeelGood Bakery s website. Gruppen Består af: Nanna Søderquist Christian Thorsø Rolf Josephsen Søren Henrik Wilhardt

Gruppe 15. Redesign af bageriet FeelGood Bakery s website. Gruppen Består af: Nanna Søderquist Christian Thorsø Rolf Josephsen Søren Henrik Wilhardt Gruppe 15 Redesign af bageriet FeelGood Bakery s website Gruppen Består af: Nanna Søderquist Christian Thorsø Rolf Josephsen Søren Henrik Wilhardt Link til redesignet website: www.feelgoodbakery.thorsoe.dk

Læs mere

MUL B SofieKen, SimoneIbsen, SørenLind, SilleNoël. Unique Landscapes. URL:

MUL B SofieKen, SimoneIbsen, SørenLind, SilleNoël. Unique Landscapes. URL: MUL B SofieKen, SimoneIbsen, SørenLind, SilleNoël Unique Landscapes URL: http://sillenoel.com/uniquelandscapes/index.html 1 7. Ekspertvurdering Kvalitetsvurdering af Unique Landscapes nuværende website.

Læs mere

Portfolio Redesign Kamilla Klein 1. Semester eksamen

Portfolio Redesign Kamilla Klein 1. Semester eksamen 2014 Portfolio Redesign Kamilla Klein 1. Semester eksamen Lærene: Ditlev Skanderby Frederik Tang Ian Wisler- Poulsen Jesper Hinchely Merete Geidemann Lützen Morten Rold Thomas Hartmann Erhvervsakademiet

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

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

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot til hjemmesiden. Mine indledende tanker bag hjemmesiden

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 PRODUKTION & WORKFLOW. Endotest website

GRAFISK PRODUKTION & WORKFLOW. Endotest website GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere

Læs mere

EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen

EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen Pia Jensen cph-pj103@cphbusiness.dk 1. semester eksamensprojekt MUL-A 2013 mul33.itkn.dk/eksamensprojekt/index.html EKSAMENS PROJEKT DECEMBER 2013 JANUAR 2014 Lærere: Thomas Hartmann Jesper Hinchely Ian

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

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. Projektplan. Gantt chart

Indledning. Projektplan. Gantt chart Indholdsfortegnelse Indledning... s. 1 Projektplan... s. 1 Gantt chart... s. 1 Kommunikations-analyse... s. 2 Kommunikationsmodel... s. 3 Usability... s. 3 Ekspertvurdering... s. 3 Kortsortering... s.

Læs mere

FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7

FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7 FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7 EKSPERTVURDERING 10 REDESIGN AF PROJEKTER 12 BANNERPROJEKT 12

Læs mere

Dokumentation. Karen-Louise Fejerskov

Dokumentation. Karen-Louise Fejerskov Dokumentation Grafisk Workflow Et af produkterne, jeg skulle lave, var et redesign af FreQuence s info hjemmeside. A B Punkt 1 Ansvar: Jeg har selv stået for opsætningen af hjemmeside og selv bestemt,

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

Lav din egen forside i webtrees

Lav din egen forside i webtrees Lav din egen forside i webtrees Du behøver ikke at kunne kode eller gøre noget advanceret for at designe din helt egen forside i webtrees. Alt du skal gøre er bare at gøre brug af den indbygget editor.

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

Grafisk produktion & workflow

Grafisk produktion & workflow Grafisk produktion & workflow WORKFLOW & PRODUKTION WEBSITE NATURSPEJDERNE Dokumentation I 2 OPGAVEN Opgaven Jeg har lavet dette fiktive website der kunne være en mulighed for en nyopstartet spejderforening.

Læs mere

Website projekt 3, 2. semester. Responsive design. Lasse M. Bruun Overgaard www.lbodesign.dk. Mark Halding www.markhalding.dk

Website projekt 3, 2. semester. Responsive design. Lasse M. Bruun Overgaard www.lbodesign.dk. Mark Halding www.markhalding.dk Website projekt 3, 2. semester. Lasse M. Bruun Overgaard www.lbodesign.dk Mark Halding www.markhalding.dk Peter Konrad http://cph54.webkn.dk/ Anders Rein www.andersrein.dk Responsive design Projekt: www.andersrein.dk/projekter/hjemmesider/responsiv

Læs mere

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

GRAFISK PRODUKTIONSFORSTÅELSE

GRAFISK PRODUKTIONSFORSTÅELSE GRAFISK PRODUKTIONSFORSTÅELSE BRILLIANT BIKINIES WEBSITE MARÍ DYRMOSE OPGAVEN OPGAVEBESKRIVELSE Brilliant Bikini kompagniet skulle have designet og programmeret en website, hvor de kunne præsentere deres

Læs mere

Projekt: Kend dine brugere. Tr09mul02 Andreas Münter Jesper Hansen Tommy Pedersen Robin Hansen

Projekt: Kend dine brugere. Tr09mul02 Andreas Münter Jesper Hansen Tommy Pedersen Robin Hansen Projekt: Kend dine brugere Tr09mul02 Andreas Münter Jesper Hansen Tommy Pedersen Robin Hansen Indholdsfortegnelse Introduktion: 3 Marketing: 3 Usability test: 4 Mockup design 6 Opsumering 7 Konklusion

Læs mere

AFSLUTTENDE OPGAVE I KOMMUNIKATION/IT

AFSLUTTENDE OPGAVE I KOMMUNIKATION/IT AFSLUTTENDE OPGAVE I KOMMUNIKATION/IT Rikke Ihle & Jeppe Brogaard Roskilde Tekniske Gymnasium Indholdsfortegnelse Indledning... 2 Planlægning... 2 Problem... 3 Målgruppe... 3 Løsning... 3 Produkt... 3

Læs mere

Delaflevering. Webdesign og webkommunikation, (hold 2), IT Universitetet, f2011. Kim Yde, kyd@itu.dk. Kenneth Hansen, kenhan@itu.

Delaflevering. Webdesign og webkommunikation, (hold 2), IT Universitetet, f2011. Kim Yde, kyd@itu.dk. Kenneth Hansen, kenhan@itu. Delaflevering Webdesign og webkommunikation, (hold 2), IT Universitetet, f2011. Kim Yde, kyd@itu.dk Kenneth Hansen, kenhan@itu.dk 1 Indholdsfortegnelse Problemfelt - Problemformulering... 3 Målgruppe...

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

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt.

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt. Opgaven Opgaven var fiktiv og bestod i at redesigne og kode hjemmesiden Copenhagen Street Food samt at redesigne logo. Kunden ville gerne have et bedre flow på hjemmesiden og tiltrække flere besøgende

Læs mere

Bilag 2. Noter. Alternativ: Skriv pakkelabel i søgefeltet Klik på linket ved teksten øverst: pakke labels

Bilag 2. Noter. Alternativ: Skriv pakkelabel i søgefeltet Klik på linket ved teksten øverst: pakke labels Bilag 1 Bilag 2 Projekt 1 - usability test og marketing Gruppe: Senia, Agnete, Andreas, Ninette Website: postdanmark.dk Undersøgelsesområde: navigation og funktionalitet Tests: Brugertest (funktionalitet)

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

Projekt 2, Banner. Project 02 - Banners. Gruppenummer: 8

Projekt 2, Banner. Project 02 - Banners. Gruppenummer: 8 Projekt 2, Banner Project 02 - Banners Gruppenummer: 8 Navne/mail: Kasper Nick Thomasen(k.n.thomasen@gmail.com), Christian Lund (christianlund_667@hotmail.com), Alexander Kofoed (laemse@hotmail.dk) Hold:

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

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

Case: http://www.julius-nielsen.dk/

Case: http://www.julius-nielsen.dk/ Case: http://www.julius-nielsen.dk/ Hjemmesidens formål og målgruppe Formålet med hjemmesiden må være at informere potentielle kunder om firmaet, da hjemmesiden indeholder informationer om firmaets historie,

Læs mere

GRAFISK DESIGN. webdesign af pl.dk

GRAFISK DESIGN. webdesign af pl.dk Webdesign af pl.dk Opgavebeskrivelse Bold.dk og 6 eren har slået sig sammen for at skabe Danmarks største Premier League fodboldportal, PL.dk. Hjemmesiden skal indeholde mange informationer, og samtidig

Læs mere

WORKFLOW & GRAFISK PRODUKTION

WORKFLOW & GRAFISK PRODUKTION Opgavebeskrivelse Kunde: Gorm Larsen & Zornig (GLZ) Websitet Social media cheat sheet er en oversigt over forskellige sociale mediers opsætning. Formålet er altså at gøre det nemt at finde de mål, der

Læs mere

Silkeborg Review Mine sider

Silkeborg Review Mine sider Silkeborg Review Mine sider Datagrundlag Det er vigtigt, at de informationer man viser kan hentes let (hurtigt) fra bibliotekssystemet eller Brønden. Det vil betyde rigtig meget for hastighed i præsentationen

Læs mere

GRAFISK DESIGN. Min personlige e-portfolio

GRAFISK DESIGN. Min personlige e-portfolio GRAFISK DESIGN Min personlige e-portfolio 2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse

Læs mere

Grafisk workflow. Hjemmeside til Bærkompagniet

Grafisk workflow. Hjemmeside til Bærkompagniet Grafisk workflow Hjemmeside til Bærkompagniet Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne

Læs mere

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2 Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2 Indledning:... 2 Metode 1 en samling af sider, med kun en engelsk version:... 3 Metode 2 Eksisterende sider med både en dansk og en engelsk

Læs mere

Indhold. 1. Adgang og afslutning

Indhold. 1. Adgang og afslutning 1 Indhold 1. Adgang og afslutning 2. Menupunkter 3. Tekst 4. Billeder 5. Video 6. Lyd 7. Bannere 8. Bokse 9. Dokumenter 10. Links 11. Iframe 12. Markedspladsen 13. Nyheder 14. Job 15. Kalender 16. Selvbetjeningsbjælken

Læs mere

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se. Solsystemet lavet af Jesper Kjær Webintegrator i Kastrup Tekniske Skole Grundforløbsprøve 2014 Opgave: Vores solsystem Onsdag 23 april til onsdag 7 maj Her ses et screenshot af websitet solsystemet i menuen

Læs mere

T o b i a s W e x i ø S o n n e MultiMedieDesigner CPH-Business 1/26

T o b i a s W e x i ø S o n n e MultiMedieDesigner CPH-Business 1/26 T o b i a s W e x i ø S o n n e MultiMedieDesigner CPH-Business 1/26 Indholdsfortegnelse - Intro - Mindmap - Designvalg - Farvevalg - Logo - Ensartethed - Farver - Det gyldne snit - Fleksibilitet & brugbarhed

Læs mere

Brainstorm Hjemmeside Grafisk interface med billeder af computer dele billederen skal så kunne klikkes og få information omkring delene,

Brainstorm Hjemmeside Grafisk interface med billeder af computer dele billederen skal så kunne klikkes og få information omkring delene, Idefasen. Brainstorm Hjemmeside Grafisk interface med billeder af computer dele billederen skal så kunne klikkes og få information omkring delene, Sider med hver hardware del og en forklaring til hvordan

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

Banner projekt. 2. Projekt. Af: Ülvi Imanov Adem Kurnaz 26/10/2012

Banner projekt. 2. Projekt. Af: Ülvi Imanov Adem Kurnaz 26/10/2012 Banner projekt 2. Projekt Af: Ülvi Imanov Adem Kurnaz 26/10/2012 Banner projekt Rapporten Indledning: Formålet med banner projektet er, at vi danner grupper, hvor vi skal udarbejde 3 banner med flash og

Læs mere

VELKOMMEN 3. KOM GODT I GANG 4 Log ind 5 Kontrolpanel 6 Tilpas profil 7 Tilknyt hold 8 Tilknyt fag 9

VELKOMMEN 3. KOM GODT I GANG 4 Log ind 5 Kontrolpanel 6 Tilpas profil 7 Tilknyt hold 8 Tilknyt fag 9 VEJLEDNING 1.0 Indhold VELKOMMEN 3 KOM GODT I GANG 4 Log ind 5 Kontrolpanel 6 Tilpas profil 7 Tilknyt hold 8 Tilknyt fag 9 SÅDAN OPRETTER DU EN QUIZ 10 Quiz info 11 Tilføj spørgsmål 12 Tilføj formel til

Læs mere

WORKFLOW & PRODUKTION

WORKFLOW & PRODUKTION OPGAVE Jeg har lavet et fiktiv website for en hundekennel. Det er mit bud på hvordan sådan en eventuelt kan se ud. PROGRAMMER Photoshop Dreamweaver Illustrator WORKFLOW & PRODUKTION KENNEL BISCO Dokumentation

Læs mere

IDENTIFON. Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg

IDENTIFON. Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg 1 Indholdsfortegnelse side nr. 1. Forside. 2. Indholdsfortegnelse og indledning. 3. Problemformulering og afgræsning. 4. Tidsplan projektplan

Læs mere

Manual til Den Elektroniske Portefølje i Almen Medicin Tutorlægens udgave

Manual til Den Elektroniske Portefølje i Almen Medicin Tutorlægens udgave Manual til Den Elektroniske Portefølje i Almen Medicin Tutorlægens udgave Til Tutorlægen Velkommen til den elektroniske portefølje. Den er blevet til i dialog mellem Dansk selskab for almen medicin og

Læs mere

Projekt 3: User friendly website Soerenk.dk re-design

Projekt 3: User friendly website Soerenk.dk re-design Projekt 3: User friendly website Soerenk.dk re-design Mul-A, Gruppe 3, URL: http://bruhn-design.dk/index.aspx Annemette Bruhn cph41.webkn.dk Caroline Vikke Lundhild Madsen cph57.webkn.dk Julia Brøndum

Læs mere

Hvordan kan vi designe et website til studenterorganisationen Analog café?

Hvordan kan vi designe et website til studenterorganisationen Analog café? Analog Café - Design til Digitale Kommunikationsplatforme - E2012 Problem felt ITU s studenterorganisation Analog søger en bedre online profil. På nuværende tidspunkt bruger de flere forskellige online

Læs mere

CPH Business Academy. Lærere: JHI & TUJE www.ysy.dk/cfunding-it/index.html 04-10-2015

CPH Business Academy. Lærere: JHI & TUJE www.ysy.dk/cfunding-it/index.html 04-10-2015 Crowdfunding Modul 3 CPH Business Academy. Lærere: JHI & TUJE www.ysy.dk/cfunding-it/index.html 04-10-2015 Josephine Lorentzen Camilla Norqvist Hansen Shiya Yang Michella Serritzlew Jacobsen Kamilla Melnyczok

Læs mere

Grafisk Design. fra idé til visuelt udtryk Benett

Grafisk Design. fra idé til visuelt udtryk Benett fra idé til visuelt udtryk Benett Indholdsfortegnelse Brief...5 Idé og skitsering....6 Værktøjer....6 Farvevalg....7 Flowchart eksisterende site...7 Design i Photoshop....9 Ikoner i Illustrator...11 Setup

Læs mere

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site.

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site. 1 Opstart af et site Opret hovedmappen Opret grafikmappen Opret dit site Mappen skal indeholde alle elementer til dit site. Opret en mappe indeni den første og kald den grafik. Heri lægges alle dine grafikfiler.

Læs mere

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester PORTFOLIO SEBASTIAN NYHOLM Eksamensprojekt 1. Semester Indledning Dette projekt gik ud på at designe og udvikle sit eget portfolio, hvor indhold fra tidligere projekter, læring, brugerteste og begrundelse

Læs mere

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015 1. Semester afsluttende Projekt Charlotte Bruhn MUL A December 2014 - Januar 2015 Redesign af online portfolio www.cbruhn.dk Side 1 Indholdsfortegnelse Formål 3 Planlægning 4 Designvalg 5 Moodboard 6 Informationsarkitektur

Læs mere

Sundhedsguiden. Børn og unges sundhed. Jozef Indruszewski & Marc Ringsing. Kommunikation/IT C Afsluttende opgave 2010

Sundhedsguiden. Børn og unges sundhed. Jozef Indruszewski & Marc Ringsing. Kommunikation/IT C Afsluttende opgave 2010 Sundhedsguiden Børn og unges sundhed Kommunikation/IT C Afsluttende opgave 2010 Jozef Indruszewski & Marc Ringsing Problemformulering Vi vil lave en hjemmeside, der oplyser børn og unge om sundhed. Vi

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. september, 2012 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 8 2. Sider... 10 2.a Opret side...

Læs mere

KONCEPT NAVIGATION STRUKTUR KEA

KONCEPT NAVIGATION STRUKTUR KEA KONCEPT NAVIGATION STRUKTUR FOR NYT.DK KONCEPT NAVIGATION STRUKTUR DEN VIDERE PROCES AGENDA DEN PRESSERENDE GRUND FOR ET NYT WEBSITE ER, AT DER ER BRUG FOR FØLGENDE MÅLET MED DET HELE MEN ER IKKE SAT I

Læs mere

Forside 1: Bagside og bogryg:

Forside 1: Bagside og bogryg: Bagside og bogryg: Bagsiden og bogryggen er lavet i de samme farver som forsiden for at opnå et gennemgående og sammendhængende look. Stregen som skal forestille jernbanen er også fortsat på både bogryggen

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

Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8

Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8 Tabulex Hjemmeside Styling af sidemenuer Side 1 af 8 Styling af sidemenuer Sidemenuerne kan styles efter alle ønsker. Du skal vælge modulet: "Styling" på det niveau, hvor det skal have virkning. F.eks.

Læs mere

Grafisk workflow. Se siden her: www.cormas.dk

Grafisk workflow. Se siden her: www.cormas.dk Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html

Læs mere

Europcar vil altid levere den bedste transportløsning med venlighed, kompetence & troværdighed.

Europcar vil altid levere den bedste transportløsning med venlighed, kompetence & troværdighed. Europcar vil altid levere den bedste transportløsning med venlighed, kompetence & troværdighed. Trongårdsvej - 26. februar 2010 2. Semester multimediedesignere - Projekt 1: Kend dine brugere Gruppe Maria

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

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger GRAFISK PRODUKTION OG WORKFLOW Hjemmeside til Team Brügger DITTE MADSEN - SVENDEPRØVE - 2015 KUNDEPROFIL Team Brügger er en frisørsalon i Aars. Indehaveren Gitte Brügger startede salonen op sammen med

Læs mere

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING 2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING Baggrund Udgangspunktet er projekt 2, dvs. en blog om cupcakes, hvor målgruppe, afsender og modtager allerede er defineret. Du bliver nu bedt om at udvikle et

Læs mere

GRUPPE 5 Line - Nanna - Thea - Sarah

GRUPPE 5 Line - Nanna - Thea - Sarah GRUPPE 5 Line - Nanna - Thea - Sarah Gruppeopgave uge 40 Redesign af website - Feelgood Bakery 2. oktober 2015 Link til site http://nannalauth.com/fgb/website.html Kode Brugernavn : keammd Adgangskode

Læs mere

REKLAMEBANNER FOR MEDINA

REKLAMEBANNER FOR MEDINA REKLAMEBANNER FOR MEDINA http://mul112.itkn.dk/medina/index.html Et projekt af gruppe 8, multimediedesign B, Cphbusiness 2013 CHRISTIAN SONNE ROSENDAHL, CPH-CR104@CPHBUSINESS.DK KAREN LISE KRAGELUND, CPH-KK151@CPHBUSINESS.DK

Læs mere

4. DEC 5. DEC 8. DEC 2014

4. DEC 5. DEC 8. DEC 2014 1. DEC I dag fik jeg opgavebeskrivelsen og fik et overblik over, hvad der skal laves, ved at gennemgå opgavebeskrivelsen, samt lave en brainstorm og PBS. Jeg er i gang med at finde et alternativ til programmet

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

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning. Portfolie Redesign dette er en gennemgang af opbyggelse af mit portfolie, med samtilige begrunderlser af design valg. Forord Min portfolie hjemmeside er fra start af ment som et startplatform og ikke et

Læs mere

JB Plastic A/S. 3.Projekt - Rapport. MUL B - Gruppe E1 & E2

JB Plastic A/S. 3.Projekt - Rapport. MUL B - Gruppe E1 & E2 JB Plastic A/S 3.Projekt - Rapport MUL B - Gruppe E1 & E2 Indholdsfortegnelse JB PLASTIC A/S... 3 WBS... 3 TANKER VEDRØRENDE DESIGN AF LOGO... FEJL! BOGMÆRKE ER IKKE DEFINERET. LETTERHEAD... 5 ANDRE IDÉER

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

Roskilde Tekniske Gymnasium. Afsluttende opgave Ældre og handicappede Frederik & Peter

Roskilde Tekniske Gymnasium. Afsluttende opgave Ældre og handicappede Frederik & Peter Roskilde Tekniske Gymnasium Afsluttende opgave Ældre og handicappede Frederik & Peter Indhold Indledning... 2 Problemformulering... 2 Ressource planlægning... 2 Kommunikationsplanlægning... 3 Case... 3

Læs mere

Relevant skærmdump fra det evaluerede materiale indsættes her BRUGERTESTANALYSE M. 5 TESTBRUGERE

Relevant skærmdump fra det evaluerede materiale indsættes her BRUGERTESTANALYSE M. 5 TESTBRUGERE 1 Relevant skærmdump fra det evaluerede materiale indsættes her BRUGERTESTANALYSE M. 5 TESTBRUGERE 2 Alle testpersonerne giver udtryk for at sitet er forholdsvis nemt at anvende til at finde den information

Læs mere

Computerens - Anatomi

Computerens - Anatomi 2014 Computerens - Anatomi Rapporten er udarbejdet af Andreas og Ali Vejleder Karl G Bjarnason Indholdsfortegnelse Formål... 2 Indledning... 2 Case... 3 Design... 3 Skitser... 4 Planlægning... 5 Kravsspecifikation...

Læs mere

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse Interessentanalyse Jeg fik til opgave at skulle lave en ny studieweb som er min egen personlige side. Min studieweb skal bruges til lidt information og så vil jeg løbende igennem de to år jeg har igen

Læs mere

Ahmad Celik, Garwun Jeffrey Lai og Besir Redzepi. 09-10-2009: 3. Semester. Multimediedesigner Projektstart: 28/09-2009 Aflevering: 09/10-209

Ahmad Celik, Garwun Jeffrey Lai og Besir Redzepi. 09-10-2009: 3. Semester. Multimediedesigner Projektstart: 28/09-2009 Aflevering: 09/10-209 Ahmad Celik, Garwun Jeffrey Lai og Besir Redzepi 09-10-2009: 3. Semester. Multimediedesigner Projektstart: 28/09-2009 Aflevering: 09/10-209 Projektets produkt: http://www.abc-cykling.7effrey.dk 1 Indholdsfortegnelse:

Læs mere

Projekt 5 - Porfolio Redesign

Projekt 5 - Porfolio Redesign Projekt 5 - Porfolio Redesign 1 semester - Copenhagen Business School Business School. 1/20 Indholdsfortegnelse Projektbeskrivelse...side 3 Mindmap...side 4 Project Breakdown Structure...side 5 Work Breakdown

Læs mere

Produktbeskrivelse - Grafisk workflow

Produktbeskrivelse - Grafisk workflow Produktbeskrivelse - Grafisk workflow Opgavebeskrivelse Det er en nyhedsmail. De er en ny opsætning Ansvar for opgaveløsning Webadministratoren står for opgavefordeling. Tekst kommer fra salgs og butikslederen.

Læs mere

Gruppe: Julie Rasmussen, Laura Kongaa, Naja Lynge & Sophie Krogh Hold: B

Gruppe: Julie Rasmussen, Laura Kongaa, Naja Lynge & Sophie Krogh Hold: B Gruppe: Julie Rasmussen, Laura Kongaa, Naja Lynge & Sophie Krogh Hold: B Analyseafsnit Kommunikation Hvem er afsenderen? Cinnober Hvem er målgruppen? Hipstere. Spelt mødre Kunstbevidste Ingefærs spisende

Læs mere

Responsive design Der er ingen breaking points på hjemmesiden. Det er et astatic website, da det ikke er responsivt.

Responsive design Der er ingen breaking points på hjemmesiden. Det er et astatic website, da det ikke er responsivt. Gruppe 11 Asta, Björk, Marie-Louise, Sofie. http://arice.dk/scherninghtml/forside1.html Husk at trykke på den første ørering inde under smykker. Brug venligst inspectoren når i tjekker tablet og mobil

Læs mere

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside 1. Lidt om hvad du

Læs mere

GRAFISK WORKFLOW - RESPONSIV WEBSIDE

GRAFISK WORKFLOW - RESPONSIV WEBSIDE GRAFISK WORKFLOW - RESPONSIV WEBSIDE REDEGØRELSE Opgavebeskrivelse Redesign hjemmeside for Murerfirmaet Døssing i responsivt design, som udstråler professionalisme. Der skulle være en referenceside med

Læs mere

Guds Fred Grafisk produktionsforståelse

Guds Fred Grafisk produktionsforståelse Guds Fred Grafisk produktionsforståelse Jeg skulle lave hjemmeside og logo for Guds Fred, som er et musikalsk projekt af Thomas Kallehave. 35 Idegenerering Udtryk og symbolik Efter at jeg havde aftalt

Læs mere

Website design for WALK & TALK LYNGBY STAVGANGSKLUB. Gruppemedlemmer fra Mul A. Link til online visning af websitet

Website design for WALK & TALK LYNGBY STAVGANGSKLUB. Gruppemedlemmer fra Mul A. Link til online visning af websitet Website design for WALK & TALK LYNGBY STAVGANGSKLUB Gruppemedlemmer fra Mul A Auguste Ottesen Ida Bach Mark Harboe Patrick Eilert https://augusteottesen.wordpress.com https://idabachhansen.wordpress.com

Læs mere

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse

Læs mere