zoo.dk - redesign webdesign og webkommunikation forår 2012 underviser: Sigurd Trolle Gronemann

Størrelse: px
Starte visningen fra side:

Download "zoo.dk - redesign webdesign og webkommunikation forår 2012 underviser: Sigurd Trolle Gronemann"

Transkript

1 webdesign og webkommunikation forår 2012 underviser: Sigurd Trolle Gronemann zoo.dk - redesign Signe Gry Braad Anette Meldgaard Andersen Mette Kragh Wismann Mette Solgaard Frøst 1

2 Indholdsfortegnelse 1 Indledning (mkwi) side 3 2 Problemformulering/problemstilling (msol) side 3 3 Metode (amel) side 3 4 Desk Research (sgpe) side Analyse af Zoo-hjemmesider (sgpe) side Web-inspiration (mkwi) side Kontakt til Zoo København (msol) side 7 5 Usability 6 (amel) side 7 6 Målgruppe 9 (sgpe) side 9 7 Personaer 10 (mkwi) side 10 8 Card sorting 13 (msol) side 12 9 Wireframes 16 (amel) side Responsive design 18 (sgpe) side Visuelt udtryk (mkwi) side HTML og CSS 20 (msol) side Arbejdsmetode (msol) side Generel opbygning (amel) side Media querias (sgpe) side Dynamiske elementer (mkwi) side Slidere (msol) side Konklusion (amel) side Perspektivering (sgpe) side Litteraturliste side Bilag side 26 mkwi: Mette Kragh Wismann msol: Mette Solgaard Frøst amel: Anette Melgaard Andersen sgpe: Signe Gry Braad Pedersen 2

3 1 Indledning 2 Problemformulering/problemstilling Zoo København er en populær og traditionsrig attraktion med et stærkt brand. Hvert år har haven mere end en million gæster, og i 2011 blev besøgt af personer 1. Desværre mener vi ikke, at haven udnytter sit potentiale på nettet godt nok. Siden fremstår uoverskuelig, teksttung og de samme oplysninger optræder flere gange. Derfor har vi valgt at arbejde med redesign af Vores ambition er at lave en enkel hjemmeside, som også fungerer på mobile platforme som tablets og smartphones. I vores øjne er zoo.dk oplagt til det formål, fordi hjemmesiden på den måde også kan fungere som en slags guide, når gæsterne bevæger sig rundt i haven. Zoo København er et sted, man kommer for at få en oplevelse - et dynamisk og levende sted. Det vil vi gerne have afspejler sig i vores design, og vi synes, det er en spændende designmæssig udfordring, både hvad angår indhold, teknik og visuelt udtryk. Vi har prioriteret, at arbejde med den del af siden, som henvender sig til besøgende, da det i vores øjne er den mest vigtige målgruppe. 1 Zoo Københavns årsrapport 2011 Hvordan kan vi skabe en hjemmeside for Zoo København, som på en nytænkende og intuitiv måde både understøtter brandet og sikrer brugerne den nødvendige information, og som også kan bruges på varierende skærmstørrelser? 3 Metode Den nuværende zoo.dk er teksttung og præget af intern og specialiseret information, som vi ikke mener, den almindelige bruger har behov for at se. Derfor stod det hurtigt klart for os, at en stor del af vores arbejde ville handle om at sætte målgruppen i højsædet og forenkle siden. Derfor har vi udviklet to personaer, som har fungeret som ledesnore i opgaven. Fordi zoo.dk er så fyldt med informationer - og kan virke en smule uoverskuelig - lavede vi en omfattende card sorting af hele siden. Det skabte overblik og hjalp os med at prioritere indholdet på den nye side. Da vi har arbejdet med mobile first (Wroblewski, 2011), udvik- 3

4 lede vi først wireframes til smartphones, derefter tablets og bærbare. Vores wireframes har gennem hele forløbet fungeret som en rød tråd, som vi flere gange vendte tilbage til. Vi har desuden besøgt flere hjemmesider for zoologiske haver - både i Danmark og i udlandet. Det har vi primært gjort for at få inspiration til gode løsninger men også for at få et indblik i, hvilke tendenser der går igen. Vi har en iterativ arbejdsproces, hvilket er naturligt i de fleste designopgaver, man vil oftest i processen opnå indsigt, som betyder, at man tilretter projektet. Det vil sige, at vi i hver fase af opgaven gennemløber en form for miniudgave af vandfaldsmodellen 2. I den traditionelle vandfaldsmodel afsluttes hver fase, før man påbegynder den næste. I slutforløbet har vi lavet en tænke-højt-test af det nye site til Zoo København. 4 Desk Research Indledende skrivebords-research. 4.1 Analyse af zoo-hjemmesider Da ingen af os har stor viden om hvilke elementer, der skal være på en hjemmeside for zoologiske haver, besøgte vi et hav af hjemmesider fra ind- og udland i startfasen af vores arbejde. Vi var interesserede i at finde ud af, om der er en form for konsensus omkring, hvordan en hjemmeside skal se ud: Hvad er traditionelt og hvad er avanceret? Den amerikanske designer, Raymond Loewy, er ophavsmand til de såkaldte MAYA-principper 3 (Most Advanced Yet Acceptable) der går ud på, at der er grænser for, hvor nyskabende man kan være, hvis man også skal have brugerne med sig. Den viden havde vi i baghovedet, når vi så nærmere på siderne. I researchen fokuserede vi desuden på, hvilke virkemidler der er brugt som eksempelvis hierarki, dynamik, farver, informationsmængde og valgmuligheder. Vi valgte nogle specifikke zoo-forsider fra ind- og udland ud, som vi gik mere i dybden med:

5 Knuthenborg Safaripark Zoo Barcelona Los Angeles Zoo Zoo Berlin Zoo Praha Zoo København Alle seks sider er baserede på et layout med en fast bredde på cirka 900px. Baggrunden i hele skærmens bredde er udnyttet i varierende grad; fra ingenting eller svag farve, til tung farve eller et visuelt fængende billede. Tre af siderne kan ses i deres fulde længde på en normal skærm - på resten skal man scrolle for at komme til bunden. De fleste sider benytter farver indenfor samme farvetone/hue, og der er ikke store kontraster. Los Angeles Zoo 4 har de klareste farver, som bliver fremhævet yderligere af at stå på en hvid baggrund. Zoo Berlin 5 har en meget dominerende grøn farve. Der er en del dynamik på siderne: To Zoo s har lyd, Knuthenborg 6 har tre korte film, som kører i ring, to har billeder, der skifter i en boks og Zoo Praha 7 har små, grafiske elementer som bevæger sig hen over skærmen. 4 Se bilag 3 5 Se bilag 6 6 Se bilag 2 7 Se bilag 7 Zoo København 8 har den mest informationstunge forside. Brugeren kan træffe 35 valg mod mellem på de andre sider. Siden bærer præg af at være bygget op efter deres egen virksomhedsstruktur, hvor de løbende har tilføjet punkter efter behov. Hierarkierne på de seks sider er generelt tydelige: en topbar med pulldown menuer, en primær boks og en undergruppe med sekundære bokse. Desuden benyttes gestaltloven om forbindelse, og en masse mindre vigtige punkter er knyttet sammen i en grafisk svag boks (typisk grå) i bunden af siden. Der var en del kategorier, som gik igen på siderne: information til skoleklasser, fremhævelse af sponsorer, fremhævelse af tiltag for naturbeskyttelse og så selvfølgelig de åbenlyse som information om billetter, åbningstider osv. Fotos optræder hyppigt, og specielt Los Angeles Zoo gør sig bemærket ved at have en fotografisk høj kvalitet. Generelt har siderne horror vacui 9, og der er ikke meget luft omkring elementerne. Zoo Praha og Zoo København er mest pakkede, mens Los Angeles Zoo har den mest hvide/tomme baggrund. På baggrund af vores analyse konkluderede vi, at der hersker konsensus om, hvilke elementer, der skal være til stede på en 8 Se bilag

6 hjemmeside for zoologiske haver uanset hvor i verden, haven befinder sig. Det betyder, at der er visse bærende elementer, som brugerne forventer at finde på siden. Det drejer sig eksempelvis om billetpriser, åbningstider, kalender og billeder af dyr. Ingen af siderne udstråler derfor det, vi går efter i vores design. De er kompakte, relativt fastlåste, og det traditionelle boks-layout hersker. Derfor gik vi andre veje i vores jagt på inspiration. 4.2 Web-inspiration Desuden var vi alle meget begejstrede for det slideshow, som kører horisontalt på siden, og vi blev inspireret til at forsøge at lave noget lignende. er hjemmeside for Volkswagens beetle. Det er en utroligt sej side, som udnytter skærmen fuldt ud, og den har blandt andet inspireret os i forhold til at forstå, hvordan en lang side også kan se ud. er en hjemmeside lavet i anledningen af et jubilæum og vi synes, at siden er et godt eksempel på, hvor- Vi har gennem hele forløbet brugt meget tid på at besøge inspirerende hjemmesider. Det har specielt været brugbart i forhold til vores arbejde med responsive design og mobile first, hvor vi er stødt på utroligt mange gode løsninger. Et udvalg af de sider, som inspirerede os mest - og som vi løbende vendte tilbage til er: der ejes af et finsk webbureau. Det er, i vores øjne, en super side, som indeholder mange elementer, vi har forsøgt at indarbejde i vores projekt. Eksempelvis er den bygget op som én lang side, og man kommer hurtigt tilbage til toppen ved hjælp af en lille knap i højre side. er hjemmeside for et canadisk webbureau. Her er billede til kant og velfungerene responsive design. 6

7 dan man kan udnytte hele skærmen og undgår at bruge bokse og menuer. Vi har desuden brugt til at teste sidernes layout på forskellige skærmstørrelser. 4.3 Kontakt til Zoo København Vi forsøgte tidligt i forløbet at komme i kontakt med Zoo København, da vi var interesserede i at få svar på forskellige praktiske oplysninger: Hvor mange sidevisninger har de, hvad er resultatet af de brugerundersøgelser, de har fået lavet, hvad er tankerne bag opbygningen af hjemmesiden osv. Vi forsøgte både lykken hos en PR-medarbejder, hos en medarbejder i Skoletjenesten og en administrativ medarbejder. Desværre gav det ikke pote, og vi baserer i stedet vores viden på årsrapporterne fra 2010 og Usability Den anerkendte definition på usability er: I hvilken grad et produkt kan anvendes af en specifik bruger til at opnå specifikke mål funktionelt, effektivt og tilfredsstilende i en specifik brugskontekst. (Gregersen og Wisler-Poulsen, 2009) I vores problemformulering skriver vi, at vi gerne vil lave en intuitiv side, som både er tilfredsstillende og funktionel. Det betyder, at vi har haft fokus på usability gennem hele forløbet, og vi har prøvet at definere, hvad en tilfredsstillende web-oplevelse ville være for vores to personaer og prioriteret indholdet ud fra det. Det grundlæggende mål i arbejdet med usability er, at brugerne skal kunne finde den information, de søger, så hurtigt som muligt. (Gregersen og Wisler-Poulsen, 2009) Derudover kan man ønske sig, at siden f.eks. er æstetisk flot, at den signalerer et givent brand og at brugerne inspireres til at gå på opdagelse. Via privat netværk til Zoo København fandt vi ud af, at brugerne oftest søger efter ordene billetter og åbningstider på zoo.dk. Derfor har vi prioriteret, at netop disse praktiske oplysninger er tydelige på siden. 7

8 I virkeligheden kan man designe hjemmesider, som man vil. Men hvis hvis man har som mål, at brugerne rent faktisk skal læse, forstå og bruge siden, så er opbygningen altafgørende. Hvis de ikke finder det, de leder efter, går brugerne hurtigt videre til et andet sted, (Gregersen og Wisler-Poulsen, 2009) hvilket ikke umiddelbart er muligt for besøgende på Forfatteren og usability-konsulenten, Steve Krug, opfordrer webdesignere til at lave enkle og fokuserede hjemmesider. Det er altså ikke nok at kunne sætte et flueben ud for hvert af punkterne på en af de mange usability-tjeklister, som florerer på nettet, og så tro, at den er hjemme. (Krug, 2006) Hans hovedpointe er, at siden skal være selvfølgelig/self-evident. Det vil sige, at en gennemsnitsbruger, alene ved at kigge på siden, skal kunne regne ud, hvor man finder hvad. Hvis siden indeholder store informationsmængder, som betyder, at det ikke er muligt at lave den self-evident, skal man i stedet forsøge at gøre den selv-forklarende/self-explanatory. Det vil sige, at der ikke må være elementer på siden, som giver anledning til tvivl og sekundære valg hos brugeren. For at leve op til de pointer har sidens visuelle hierarki stor betydning. Steve Krug definerer tre virkemidler, beslægtede med gestalt-lovene: 1. Fremhævelse: Jo vigtigere elementet er, jo mere skal det fremhæves. 2. Gruppering: Emner, der er relaterede visuelt, er også indholdsrelaterede. 3. Underdeling: Emner der visuelt er under et andet. Med udgangspunkt i ovenstående har vi valgt at give de informationer, som besøgende oftest søger efter (priser og åbningstider) en central placering øverst på siden. Desuden har vi placeret en nyhedsboble centralt på siden. Det er tanken, at denne nyhed ofte skiftes ud, så indholdet skifter, hvis en bruger med jævne mellemrum besøger zoo.dk. Nyheden skal være af en sådan art, at brugeren får lyst til at læse mere og på sigt besøge haven. Syv steder har vi valgt at skære siden over ved at sætte en meget tynd, prikket streg. Det har vi gjort for at gruppere indholdet på siden og give den en visuel struktur, så sammenhængen bliver tydeligere. Vi har afprøvet forskellige stregfarver og tykkelser for at finde det rigtige udtryk, så stregen grupperer indholdet, uden den bliver dominerende og ødelægger fornemmelsen af, at det er én lang side. En andet vigtigt element i usability handler om at gøre klik nemme. (Krug, 2006) 8

9 Et nemt klik kræver (næsten) ikke bevidsthed, og man har en fornemmelse af at være på rette spor. Hvis man efterlever disse krav, vil man ende op med en dyb side med få valg på forsiden i modsætning til en bred side med mange valg. en rigtig god øvelse. Vi har dog udarbejdet en plan for, hvordan en mulig usability test kunne se ud 11. Forsiden på det originale zoo.dk er fyldt med links og indgange til forskellige undersider. Det vil vi gerne ændre på, og vi har derfor arbejdet med at begrænse de klikbare elementer på vores nye side. Det er afgørende for forståelsen af usability, at man også har kendskab til, hvordan mennesker generelt interagerer med digitale produkter. (Gregersen og Wisler-Poulsen, 2009) Eksempelvis skal man være opmærksom på, at vi ikke læser websider på samme måde, som vi læser printet tekst. Den kendte usability ekspert, Jakob Nielsen, har udført flere eyetrackingstudier 10, der viser, at testpersonerne skimmer fra venstre til højre, dernæst ned over siden i et F-mønster, mest mod højre i toppen, næsten kun i venstre side i bunden. Generelt skimmer vi på nettet, det vil sige, at elementer, som fremstår tydeligere end andre, eksempelvis overskrifter, linktekst, bold-tekst og bullet-lister, bliver brugt som pejlemærker. 6 Målgruppe Den franske sociolog Pierre Bourdieu mente, at individers kulturelle præferencer, har betydning for, hvordan de forstår et budskab, de bliver præsenteret for. (Rasmussen og Fischer 2008) Og det er netop én af grundene til, at man ikke må glemme målgruppen, når man arbejder med hjemmesiden. Teksten og opbygningen på siden vil nemlig blive opfattet forskelligt afhængigt af, hvem man er. Det betyder, at hvis man ønsker at ramme en bestemt målgruppe, så skal man bruge kræfter på at sætte sig ind i, hvad der er vigtigt for det pågældende segment. Vi ved fra Københavns Zoo s årsberetning, at havens primære målgruppe er børnefamilier i hovedstadsområdet samt turister fra Danmark og Norden. På baggrund af den (noget begrænsede) viden har vi skabt to personaer, som repræsenterer begge grupper. Vi har, af tidsmæssige årsager, ikke udført en usability test af vores hjemmeside, men der er ingen tvivl om, at det ville være Se bilag 9 9

10 7 Personaer En persona er en brugermodel, som kan hjælpe os med at sætte os ind målgruppens tanker og handlinger, og på den måde guide os på rette vej i arbejdet med hjemmesiden. I en ideel verden er personaer skabt på baggrund af eksempelvis etnografiske studier, interviews eller observationer af potentielle brugers ageren adfærd. Disse data danner derpå grundlag for en fiktiv person med personlighed og empati. I vores tilfælde - hvor tiden var knap - benyttede vi de oplysninger, vi kunne få fra Zoo København til at skabe to provisional personas også kaldet ad hoc personaer. (Cooper, A et al. 2007) Ad hoc personaer er ikke optimale, men vi er enige med Allan Cooper i følgende betragtning: Using provisional personas is better, than no user model at all. Vi har udformet vores personaer med både demografiske, socioøkonomiske og kulturelle baggrundsvariabler, for at danne et så dækkende billede, som det aktuelt er muligt at lave. (Rasmussen og Fischer 2008) Persona 1 Kathrine er 32 år, hun bor på Vesterbro i en andelslejlighed, som hun har købt sammen med sin kæreste, Andreas. Sammen har de børnene Sally på seks år og Otto på fire år. Kathrine læser dansk og er i gang med at skrive speciale. Andreas arbejder med byplanlægning i Københavns kommune. I sin fritid kan Kathrine godt lide at fotografere, og hun har tidligere været meget aktiv sportsdykker. Hun bruger ofte nettet til informationssøgning og følger med i en del blogs. Hele familien har årskort og besøger Zoo København ca. seks til syv gange om året og både i weekender, ferier og på hverdage uafhængigt af årstiden. Kathrine bruger zoo.dk før hvert besøg. Hun kigger eksempelvis efter spændende arrangementer og nye dyreunger, som de skal se på deres tur rundt i haven. Familien kender haven så godt, at de langt fra kommer rundt til alle dyr hver gang. I stedet udvælger de nogle enkelte favoritsteder, hvor de til gengæld tilbringer længere tid. Kathrine tilhører det moderne fællesskabsorienterede segment i Kompas-modellen. Et segment, som blandt andet er kendetegnet af personer med en akademisk uddannelse, der bor i storbyen og er hyppige brugere af computere og internet. (Rasmussen og Fischer 2008) Persona 2 Peter er 67 år og pensioneret tømrermester. Han bor i Kolding sammen med sin kone, skolelæreren Kirsten, som han har været gift med i 42 år. 10

11 Peter abonnerer på Jydske Vestkysten og lytter dagligt til P4 syd. Han holder meget af at gå på jagt og lave god mad serveret sammen med franske rødvine. Ferierne tilbringer Peter helst i Frankrig, hvor han kører ned sammen med Kirsten. De har to børn; Lars på 41 år og Henrik på 38 år. Lars bor stadig i Kolding og har overtaget tømrervirksomheden. Henrik bor i Virum med sin kone og de to døtre; Laura på syv år og Asta på 10 år. Han er tandlæge og har egen praksis. Peter kommer ca. hver 2. måned for at hjælpe med at passe de to piger, og ca. én gang om året tager han pigerne med på til Zoologisk Have. Når de er i haven, vil Peter gerne se det hele, så han føler, han får noget for pengene. Hvis han skulle vælge, er det dog de afrikanske savannedyr, som står ham nærmest. Han bruger ikke nettet ofte, og hvis han endelig gør, synes han hurtigt, at det er uoverskueligt og mister tålmodigheden. Han har besøgt zoo.dk for at lede efter information om parkering og åbningstider. Peter tilhører det individorienterede segment i Kompas-modellen, som er kendetegnet af personer, som bor vest for Storebælt, har en erhvervsuddannelse og læser lokalaviser. (Rasmussen og Fischer 2008) På vegne af Kathrine og Peter har vi udarbejdet nogle specifikke ønsker til, hvordan zoo.dk kan fungere bedre. Kathrine ønsker sig: Inspiration til nye opdagelser i den velkendte have med hjælp fra mobilen. Let tilgang til nyheder og dagens begivenheder Forslag til ruter, f.eks. Dyreunger eller Polarrute At kunne få fakta om zoo på sin smartphone, mens hun går i haven. Peter ønsker sig: En let og overskuelig side Oversigt over parkeringsforhold og åbningstider Et kort over haven, som han kan printe hjemmefra Søger specifikt på emner og vil gerne læse i detaljer om f.eks. byggeriet af den arktiske ring eller fakta om forskellige dyr Da det ikke var muligt at teste vores dummy-side på testpersoner, har vi i stedet udtænkt nogle scenarier med vores to personaer. Vi har diskuteret, hvordan Kathrine og Peter vil bruge Zoo Københavns hjemmeside før, under og efter deres besøg i Zoo. Vi fandt frem til, at Katrine vil bruge sin mobil hjemmefra til at læse nyheder og se dagens program. Derudover vil hun f.eks. bruge mobilen i Zoo til at prøve en interaktiv rute sammen med børnene og til at finde hurtige oplysninger om de enkelte dyr, 11

12 hvis børnene spørger om noget, hun ikke kan svare på. Peter vil besøge zoo.dk fra sin stationære computer, før han tager hjemmefra. Han har hverken smartphone eller tablet. Han vil kigge på åbningstider og parkeringsforhold. Det, som har fanget hans interesse under besøget i haven, tjekker han op på, når han kommer hjem. han/hun synes giver mening. I en lukket card sorting er kategorierne navngivet og fastlagte på forhånd, og det er testpersonens opgave at fordele sideindholdet i disse kategorier( Spencer & Warfel 2007). Vi startede med at foretage en åben card sorting, hvor vi selv udgjorde testpersonerne. Vi er godt klar over, at dette ikke er ideelt, men vi mener alligevel, at øvelsen kan bruges. 8 Card sorting Card Sorting er en organiseringsøvelse, som blandt andet kan hjælpe informations arkitekter samt personer i lignende stillinger med at få styr på den hjemmeside, de arbejder med. En veludført card sorting kan eksempelvis besvare spørgsmål som: Hvilke informationer skal prioriteres højest, og hvor giver det mest mening, at de pågældende informationer bliver placeret (Spencer & Warfel, 2007). Card sorting er særligt nyttigt i forbindelse med design og redesign af hjemmesider, og det er derfor et oplagt værktøj for os. I en åben card sorting bliver en eller flere testpersoner præsenteret for kort med sideindhold, som de skal inddele i kategorier Det nuværende zoo.dk er, som tidligere nævnt, meget tungt og omfangsrigt 12, og vores ambition om at gøre siden mere enkel og ligetil virkede næsten uoverskuelig i vores indledende arbejde. Vores håb var, at en card sorting-øvelse ville skabe det nødvendige overblik og hjælpe os med at målrette informationerne på siden bedre. Efter vi havde noteret ALLE elementer på zoo.dk ned på hvide papirslapper, begyndte vi sorteringsarbejdet 13. Undervejs diskuterede vi frem og tilbage, og vi havde især fokus på, hvilke elementer, der skal placeres på forsiden. Samtalen drejer sig meget om, hvilke placeringer, der virker logiske, og hvor vi selv ville lede. Efter en frasortering af gengangere fordelte vi kortene på seks 12 Site map Zoo.dk:http://www.zoo.dk/sitemap.aspx 13 Bilag 11 billede fra card sorting 12

13 grupper: Om Zoo: 56 punkter som eks. direktion, job i zoo, osv. Forside: 16 punkter som eks. nyheder, dagens program osv. Praktisk info: 13 punkter som eks. parkering, billeter osv. Dyr og hus: 29 punkter som eks. abegrotten, hyppige spørgsmål om dyr osv. Oplev Zoo: 16 punkter som eks. rundvisninger, rid på en pony osv. Skoletjenesten: 23 punkter som eks. biologisk værksted, undervisningsmateriale osv. Oven på vores åbne card sorting foretog vi en mindre lukketcard sorting med to testpersoner. Testpersonerne var enige i vores kategorisering i cirka 70 procent af tilfældene. Der var dog lidt forvirring i forhold til kategorien Om Zoo, hvor rigtigt mange elementer blev placeret. Hvis man fulgte denne tankegang ville Om Zoo hurtigt blive proppet til randen, og vi ville få brug for en masse underkategorier. I stedet har vi lavet en kategori med navnet Virksomheden Zoo. Så bliver det forhåbentligt mere tydeligt, at det er her, man finder information som jobmuligheder, årsberetninger og pressekontakt - og ikke et sted, man som besøgende nødvendigvis behøver at bevæge sig hen. De syv vigtigste punkter vi kom frem til på baggrund af vores card sorting: Det skal være muligt at vælge mellem tre hovedsider: Virksomheden Zoo, For Besøgende og Skoletjenesten. Vi vil udelukkende fokusere på siden For BesøgendeVi vil samle en masse forskellige informationer i kortet over Zoo København. Nyheder fra sidst år hører ikke hjemme på siden. Reklamér for Facebook-siden frem for tilmelding til nyhedsbrev. Drop zoo-tv og link til kanal på youtube. Generelt samle information, hvor det hører til - i stedet for at det ligger spredt ud over hele siden som nu. Alt i alt er card sorting en virkeligt god og, bogstaveligt talt, håndgribelig metode til at skabe overblik. Og mange vigtige beslutninger blev truffet i løbet af processen. 13

14 Billed 1: Wireframe Billed 2: Wireframe 14

15 9 Wireframes Wireframes er en simplificeret oversigt over, hvad der skal være på den endelige hjemmeside, og de fungerer som en ledestjerne i arbejdet. Ordet wireframe kan oversættes til trådramme. Det dækker over, at man arbejder med simple illustrationer, der opridser, hvad der skal være hvor på siden - uden at gå for meget i detaljer med det visuelle udtryk. Der findes en del wireframe-værktøjer på nettet, og man kan også bruge et simpelt program som PowerPoint. Vi har valgt at arbejde med pen og papir, hvilket giver en meget levende og demokratisk proces, hvor alle kunne deltage og en ny tegning hurtigt kunne ridses op. Vi arbejdede med low-fidelity, hvilket vil sige, at vi koncentrerede os om, hvor tingene skulle placeres på siden og ikke diskuterede ting som farver, typografi osv. Vi lavede desuden kun en enkelt wireframe til hver skærmstørrelse, da vi netop arbejder med én lang side. Da vi er meget inspirerede af tankerne om mobile first 14, startede vi med at lave en wireframe til smartphones med en skærmstørrelse svarende til en iphone. Vi lavede flere forskellige wireframes, indtil vi nåede frem til en endelig model, som vi alle var tilfredse med. Derefter gik vi videre til at lave en wireframe til bærbare/tablets. De wireframes, vi lavede, blev hevet frem flere gange i vores videre arbejde, hvis der opstod tvivlsspørgsmål i forhold til specifikke elementers placering. Hvis vi skulle overlevere vores wireframes til andre, som derefter skulle arbejde videre med dem, ville vi på baggrund af skitserne lave en digital version, så de blev mere forståelige og entydige. Ifølge vores problemformulering er vores mål, at zoo.dk skal være nyskabende og intuitiv og kun give brugerne den information, de rent faktisk har behov for. Det forsøgte vi at opnå ved at tage udgangspunkt i vores card sorting og den efterfølgende mini-bruger-test under udarbejdelsen af vores wireframes. 14 Se afsnit 10 15

16 10 Responsive design Take advantage of the enormous growth in mobile internet usage and find new ways for people to use our websites and applications. (Wroblewski, 2011) Sådan lyder opfordringen fra forfatteren og webudvikleren Luke Wroblewski i hans bog, Mobile First. Og det er netop det, som er et af målene med denne opgave. I vores problemformulering skriver vi, at det nye zoo.dk skal tilpasse sig alle skærmtyper og størrelser automatisk. Dette kaldes også responsive webdesign. Responsive webdesign er i kraftig fremgang i takt med at antallet af smartphones og tablets vokser 15, og nye tal viser, at selv inden for hjemmets fire vægge, hvor computeren ellers er inden for rækkevidde, sker en stigende andel af vores internetbesøg via en mobiltelefon. (Wroblewski, 2011) Vi ønsker at udnytte de muligheder, som denne udvikling lægger op til og vi er inspireret af det følgende citat fra den grafiske designer, Mark Boulton: 15 January_2012_U.S._Mobile_Subscriber We need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out. 16 Mark Boultons pointe er, at vi indtil nu har opfattet internettet som et fast medie, hvor man har udviklet layouts, som passede til rammen på en standard computerskærm. Men hvis vi vil følge med udviklingen, må vi ændre vores traditionelle opfattelse og begynde at tænke i fleksibelt design, der passer til den moderne internetbruger, som både går på nettet fra mobilen, tv et og ipad en. Vi synes, det er meget interessant at redesigne Zoo Københavns hjemmeside med udgangspunkt i brugeren, indholdet og den lille skærmstørrelse. Vi kan forestille os flere oplagte muligheder, hvor man eksempelvis kan søge informationer om dyr, begivenheder, guidede ture og så videre fra sin telefon, mens man fysisk befinder sig i haven eller er i færd med at planlægge et besøg. I mobiludgaven har vi valgt at nedprioritere virksomheden zoo og skoletjenesten, da vi vurderer, at det primært er besøgende der vil tilgå zoo.dk fra mobilen. Vi er desuden meget opmærksomme på, at der skal være nem adgang til oplysninger som åbningstider, dagens program, 16 http//wwwmarkboulton.co.uk/journal/comments/a-richer-canvas 16

17 nyheder, spisesteder, parkeringsforhold og så videre. I mobiludgaven har vi dog fjenet cirklerne og dermed åbningstider og billetpriser fra toppen af siden. Knappen med praktisk info har nu fået så central en placering, at vi mener, at brugerne intuitivt vil trykke her for at fi nde åbningstider og priser. Der er dog også udfordringer ved mobile fi rst -udviklingen. En af dem går ud på, at folk typisk kun har den halve opmærksomhed på telefonen, og dermed altid er klar til at vende opmærksomheden mod noget andet. Wroblewski beskriver det på følgende måde: One eyeball - one thumb (Wroblewski, 2011) Det betyder, at vi skal simplifi cere designet af siden både i forhold til indholdet og det visuelle aspekt. Med hjælp fra vores card sorting og vores personaer har vi forsøgt at skære helt ind til benet og hele tiden stillet spørgsmålet: hvad er vigtigt for brugerne? Når man arbejder med sidens visuelle udtryk på en mobil, er det desuden vigtigt at huske på, at folk ofte manøvrerer med højre tommel- eller pegefi nger. Derfor skal felterne være forholdsvis store, så de er nemme at markere. Eksempelvis skal menu-baren være foroven, så der ikke er for Figur 1: Det mørkegrønne felt er nemt at nå, det lysegrønne er ok og det gule felt kan let nås ved at strække fi ngeren. (Wroblewski, 2011) mange menupunkter på den lille skærm. Figur 1: Det mørkegrønne felt er nemt at nå, det lysegrønne er ok og det gule felt kan let nås ved at strække fi ngeren. (Wroblewski, 2011) Som nævnt tidligere vil en webside opbygget efter principperne bag mobile fi rst, som den vi arbejder med, altid være forholdsvis lang. En af forklaringerne på det er, at det giver en bedre brugeroplevelse, hvis siden kun skal loade én gang. På den måde tager vi også hensyn til, at det mobile net kan 17

18 være både langsomt og kostbart. En måde at undgå for meget tekst på siden er ved at vise indholdet i stedet for at skrive det. (Wroblewski, 2011) Det har vi forsøgt at gøre ved at samle mange forskellige informationer, som man tidligere kunne finde spredt på mange sider, i en visuel genstand: Et oversigtskort over Zoo København. På denne måde får vi præsenteret en masse praktisk information på en overskuelig og visuel måde, der både appellerer til at blive brugt fra den stationære computer såvel som mobilen. På oversigtskortet kan brugeren blandt andet få vist spisesteder, toiletter og så videre. 17 I forbindelse med vores æstetiske overvejelser har vi ladet os inspirere af Lektor og studieleder ved Kommunikation på RUC, Lisbeth Thorlacius. Hun har opstillet fire vigtige punkter, som man ikke må glemme, når man laver webdesign: Æstetikken skal understøtte de indholdsmæssige og funktionelle aspekter Æstetikken skal tilpasses den websitegenre, som vi opererer indenfor. Æstetikken skal tilpasses målgruppen De æstetiske aspekter er udarbejdet i forhold til funktion, websitegenre, målgruppe og afsenderprofil. (Thorlacius, 2005) 11 Visuelt udtryk Farvevalget har stor betydning for brugerens opfattelse af en hjemmeside, og de forkerte farver kan være med til at ændre opfattelsen af en virksomhed. 18 Desuden kan farver hjælpe sidens usability på vej. 17 se bilag Vi har valgt vores farver med udgangspunkt i det farveunivers, som allerede er på Zoo Københavns hjemmeside i dag, og det er vores mål, at farverne signalerer liv og appellerer til både voksne og børn. Rent praktisk brugte vi hjemmesiden Kuler 19 til at sammensætte vores egen farvepalet 20. Vi har fundet de grafiske tegninger af zebraerne i årsberetnin Se bilag 12 18

19 gen fra 2010, og aben under menuen fandt vi et magasin. Da de ikke var tilgængelige i høj opløsning, har vi bearbejdet dem i Photoshop, tegnet ovenpå og gemt dem i gif-format og pngformat, der hvor vi havde brug for gennemsigtighed. De skal signalere bevægelse og give siden liv på en anderledes måde. Vi har bevidst forsøgt at undgå illustrationer, der bliver skåret over i bunden, og derfor skærer siden over. Vi har prioriteret at holde en gennemgående linje i det grafiske udtryk, og vi har arbejdet med organiske former og runde hjørner på bokse og menuer. Vores ambition har hele tiden været at bevæge os væk fra den traditionelle boks-model, som ellers huserer på zoo-hjemmesider 21. Det har blandt andet betydet, at vi har beskåret indholdet på siden, så det nærmest er på vej ud over kanterne og sprænger rammerne. Vi vil gerne have, at forsiden har en robust, grafisk identitet, som giver presseafdelingen mulighed for selv at opdatere indholdet i form af eksempelvis nyheder ellertilføje og fjerne de runde bobler. Desuden er det vigtigt, at siden er fremtidssikret, så man kan skifte den grafiske illustration ud om et halvt år og stadig gen- 21 Se afsnit 4.1 i opgaven kende Zoo København. 12 HTML og CSS 12.1 Arbejdsmetode I det indledende kodningsarbejde koncentrerede vi os om hvert vores element, og efterfølgende satte vi dem sammen i ét dokument. Der skulle løses en del større og mindre problematikker undervejs, så det virkede som en god løsning. Det gav dog lidt udfordringer, når vi sammenføjede koderne. På et tidspunkt krævede det eksempelvis et større opklaringsarbejde at finde ud af, hvorfor dele af siden pludseligt fungerede som ét stort link. Omvendt har vi svært ved at se, hvordan vi skulle have arbejdet sammen på én computer eller i det samme dokument. Vi har mødt en del tekniske udfordringer i forbindelse med designet af den nye hjemmeside. Eksempelvis kortet, der skulle vise forskellige ikoner, de horisontale slidere og kalenderen med pop up tekst. Vi har brugt nettet til at finde mulige løsninger og analyseret an- 19

20 dre siders kildekoder for at blive inspireret til, hvordan vi eventuelt kunne løses vores egne problemer Generel opbygning Siden er optimeret til at blive vist i browserne Mozilla Firefox og Chrome. Vi har opbygget siden i procenter og em s, så den tilpasser sig forskellige skærmstørrelser med responsive design. Vi har designet siden som en lang side, som kan scrolles ned, eller man kan via menuens punkter komme til bestemte dele. Menuen har af samme grund position: fixed, så den følger med hele vejen. Headeren og elementerne på toppen af siden har en bredde på 100 %, og menuen har en bredde på 12% procent. Resten af indholdet er i en article med width sat til 82% og en margin til venstre på 13% for at holde den fri fra menuen. Derefter er hver del i henhold til menuen i en særskilt article som har position: relative for at kunne placere elementer med position:absolute. På baggrund af vores overordnede designstrategi har vi valgt ikke at have en fast bredde på 900 pixels, og i stedet udnytte den relevante skærm 100 procent. Vi har justeret elementerne med media querias til størrelse < 1200px, 960px, 700px, 480px og 320px. I den givne opgave har vi fokuseret på media query for <480px og 320px. Vi har i vid udstrækning benyttet pseudoselectors og z-index til at udforme de dynamiske elementer. Kompositionen og placeringen af cirklerne øverst på siden er vigtig for helhedsindtrykket af siden. Det viste sig at blive for ukontrollabelt med procenter, derfor er de defineret med højde, bredde og border-radius i pixels og justeret med media query. I koden er hele remsen -moz-border-radius og -webkit-borderradius med for at borderradius understøttes i andre browsere, det validerer dog ikke som CSS3. I forbindelse med media queries har vi desuden haft brug for at udelukke nogle elementer, det er gjort med display: none; herved optager elementet ikke stadig sin plads, men resten af indholdet flytter sig respektivt Media querias 12.4 Dynamiske elementer 20

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

Re-design af Bøssehusets hjemmeside Webdesign og webkommunikation, F2012 Iben Kold Thomsen (hold 1) & Morten Mechlenborg Nørulf (hold 2)

Re-design af Bøssehusets hjemmeside Webdesign og webkommunikation, F2012 Iben Kold Thomsen (hold 1) & Morten Mechlenborg Nørulf (hold 2) Introduktion Vores eksamensprojekt er et re-design af Bøssehusets hjemmeside. Bøssehusets er et kulturhus for bøsser, lesbiske og transseksuelle personer beliggende på Christiania. Huset skaber rammerne

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

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

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

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

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

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

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

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

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner. GRAFISK DESIGN OPGAVEN Min kæreste er medstifter af en vinloge. Medlemmerne af logen kunne godt tænke sig et sted, hvor de bl.a. kunne få et overblik over, hvilke vine de har bedømt og hvornår næste loge

Læs mere

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

Lav en hjemme side der kan sælge fly billetter til en stor i Europa. EKSAMENS OPGAVE Lav en hjemme side der kan sælge fly billetter til en stor i Europa. Det første jeg startede ud med var at brainstorme hvad det var jeg skulle bruge i min side da jeg nu ved hvad den skal

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

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW DOKUMENTATION OPGAVEN Denne opgave er lavet som en fiktiv opgave. Opgaven er lavet for et fiktivt firma, som tilbyder personlig fitness træning.

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

Release notes Januar 2014

Release notes Januar 2014 Release notes Januar 2014 Det er vigtigt, I sletter midlertidige filer i jeres browser efter et nyt release af borger.dk, for at browseren ikke stadig anvender ældre komponenter herfra. For OPIS redaktører

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

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

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

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

KALAS FESTIVAL. Link til hjemmesiden: http://www.kalasfestival.casperragn.com/ Laura Lundby Gravesen http://www.selragadedesign.wordpress.

KALAS FESTIVAL. Link til hjemmesiden: http://www.kalasfestival.casperragn.com/ Laura Lundby Gravesen http://www.selragadedesign.wordpress. KALAS FESTIVAL Link til hjemmesiden: http://www.kalasfestival.casperragn.com/ Laura Lundby Gravesen http://www.selragadedesign.wordpress.com Casper Ragn http://www.casperragn.wordpress.com Niels Otto Andersen

Læs mere

Delaflevering Re-design af Kirsten Kjærs Museums hjemmeside (kkmuseum.dk)

Delaflevering Re-design af Kirsten Kjærs Museums hjemmeside (kkmuseum.dk) Delaflevering Re-design af Kirsten Kjærs Museums hjemmeside (kkmuseum.dk) Gruppe: HÅT - or not Therese Dons Christensen, Else Vad, Marie Svan Olsen og Sofie Sol Danø Vejledning Litteraturvalg vil vi for

Læs mere

KT OR LOW PRODUKTION // WORKFLOW

KT OR LOW PRODUKTION // WORKFLOW PR D O U ION KT // W KFKF OR LOW PRODUKTION // WORKFLOW // WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS HVAD? Opgaven er en fiktiv hjemmeside

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

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

Projekt Kom/it A Semester 6

Projekt Kom/it A Semester 6 Jeanette Bengtsen og Isabel Odder Projekt Kom/it A Semester 6 Applikation - Virette Klasse 3.5k 05-04-2011 Indholdsfortegnelse: Indledning:... 2 Bollemodel:... 3 Formål og præmis:... 3 Indhold:... 3 Målgruppe:...

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

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

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

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

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

Kommunikation/IT C - Afsluttende opgave 2011

Kommunikation/IT C - Afsluttende opgave 2011 Kommunikation/IT C - Afsluttende opgave 2011 Roskilde Tekniske Gymnasie Martin Fabricius & Simon Dein, 1.3 Side 1 af 11 Indholdsfortegnelse: Indledning... s3 Målgruppe (diskussion)... s4 indledende kravfangst...

Læs mere

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2 GRAFISK WORKFLOW Kasper Staal - Portfolio - H2 Opgaven Denne opgave bestod i at design et website til min egen virksomed 3DService.dk. Websitet skulle være responsivt, og indeholde de mest gængse informationer

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

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

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder: Design en praktisk guide. Et design udtrykker dit websites grafiske udseende, lige fra hvilke skrifttyper der anvendes op til hvor navigationen er placeret og hvilke interaktive elementer der skal benyttes.

Læs mere

Se hjemmesiden på:

Se hjemmesiden på: Se hjemmesiden på: www.share-connect.dk Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed

Læs mere

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

Vejledning for LOF s afdelingshjemmeside

Vejledning for LOF s afdelingshjemmeside Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Marts 2012 Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ Mobilside: Der er lavet en

Læs mere

Analyse af website: cinnobershop.dk

Analyse af website: cinnobershop.dk Analyse af website: cinnobershop.dk Gruppe 12: Brit, Caroline, Line & Søren v1_7/3-16 Indholdsfortegnelse ANALYSE Kommunikation 3 Wireframes - Home 4 - about 5 - webshop 6 - webshop/betaling 7 Grafiske

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 WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv

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

Kom godt i gang med I-bogen

Kom godt i gang med I-bogen Kom godt i gang med I-bogen At åbne bogen Det allerførste, du skal gøre, for at kunne arbejde med i-bogen, er at aktivere den. Det gøres ved at oprette en konto på systime.dk og derefter aktivere bogen

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

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

Pixlr - vejledning Udarbejdet februar 2014

Pixlr - vejledning Udarbejdet februar 2014 Pixlr - vejledning Udarbejdet februar 2014 www.skive.dk 2.1 Billedbehandlingsprogrammet Pixlr.com Til redigering af et billede kan du med fordel benytte webtjenesten Pixlr, som du kan tilgå fra hvilken

Læs mere

Vejledning i upload af serier til Danske tegneseriskaberes app.

Vejledning i upload af serier til Danske tegneseriskaberes app. Vejledning i upload af serier til Danske tegneseriskaberes app. En kort intro Version 1.2 22/11/2012 Danske Tegneserieskabere har lavet appen for at give medlemmer og andre en nem adgang til at publicere

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

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

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

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper:

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper: DXP vejledning Generelt: DXP er et værktøj til at fremstille præsentationsmaterialer (foldere, brochurer, løbesedler mv.) DXP egner sig kun til mindre brochurer og lign., da den største skabelon kan rumme

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

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

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

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

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

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

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

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

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

Mads Bruun Simonsen, Daniel Engelhardt, Alexander Klug Rasmussen, & Philip Nielsen. Corporate Social Responsibility

Mads Bruun Simonsen, Daniel Engelhardt, Alexander Klug Rasmussen, & Philip Nielsen. Corporate Social Responsibility Corporate Social Responsibility 1st project 2nd sem. February 2016 Mads Bruun Simonsen Daniel Engelhardt Alexander Klug Rasmussen Philip Nielsen LINK Cphbusiness Side 1 af 10 Indholdsfortegnelse Projektbeskrivelse.3

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

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

8. Webdesign. Grundlæggende Grafisk design Stefan Grage & Klaus Bjerager Tirsdag 5. april

8. Webdesign. Grundlæggende Grafisk design Stefan Grage & Klaus Bjerager Tirsdag 5. april 8. Webdesign Grundlæggende Grafisk design Stefan Grage & Klaus Bjerager Tirsdag 5. april Kursusplan 5. apr. 12. apr. 18. apr. 9. Webdesign / Opg. 7: website K: Usability, s. 36-39 K: Smukkere grafisk design,

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

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

Sabine Puk Sørensen Svendeprøve portfolio

Sabine Puk Sørensen Svendeprøve portfolio Sabine Puk Sørensen Svendeprøve portfolio 2016 Grafisk workflow Svendeprøve Kvalitetsvurdering Hjemmesiden fungere som den skal, og kunden er meget glad for resultatet. Siden er simpel, men giver den ønskede

Læs mere

Kickstart Siteimprove. Sådan kommer du i gang med at bruge Siteimprove. Januar 2016 SKIVE.DK. Skive det er RENT LIV

Kickstart Siteimprove. Sådan kommer du i gang med at bruge Siteimprove. Januar 2016 SKIVE.DK. Skive det er RENT LIV Kickstart Siteimprove Sådan kommer du i gang med at bruge Siteimprove Skive det er RENT LIV Januar 2016 SKIVE.DK Siteimprove Siteimprove er Skive Kommunes web governance program. Programmet har uendeligt

Læs mere

Indholdsfortegnelse Idéen bag logo Idéen bag website Farveversioner af logo Webdesign Videoen: Visuelle tanker Stil Speciel effects Motion Design

Indholdsfortegnelse Idéen bag logo Idéen bag website Farveversioner af logo Webdesign Videoen: Visuelle tanker Stil Speciel effects Motion Design 1 Indholdsfortegnelse Idéen bag logo 3 Idéen bag website 4 Farveversioner af logo 5 Webdesign 6 Videoen: 7 Visuelle tanker 7 Stil 7 Speciel effects 8 3D 8 Motion Design 9-10 2 Introduktion Hoved idéen

Læs mere

Karens vejledning til WordPress, september 2014 1

Karens vejledning til WordPress, september 2014 1 Karens vejledning til WordPress, september 2014 1 Karens WordPress vejledning september 2014 INDHOLD Hvad er WordPress 1 Generelt om WordPress 2 Frontend og backend 2 Skrive en blog-tekst (indlæg/post)

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

En museumsudstilling kræver mange overvejelser

En museumsudstilling kræver mange overvejelser En museumsudstilling kræver mange overvejelser Forfatter: Michaell Møller, Cand. mag. Int. i Virksomhedskommunikation med specialisering i Dansk Indledning Når danskerne i dag går på museum skal det være

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

Infographic Klasse arbejdsmiljø

Infographic Klasse arbejdsmiljø Infographic Klasse arbejdsmiljø Skitse af vores tidlige design Rapport af : 1/7 Målgruppen Målgruppen for vores infographic er generelt eleverne som der går på ZBC i Vordingborg, dog skal det ikke undlades

Læs mere

Delaflevering: Webdesign og webkommunikation. Organisation: Københavns Erhvervsakademi. Af Silke Brewster Rosendahl (hold 1) og Marie Anne Svendsen

Delaflevering: Webdesign og webkommunikation. Organisation: Københavns Erhvervsakademi. Af Silke Brewster Rosendahl (hold 1) og Marie Anne Svendsen Delaflevering: Webdesign og webkommunikation Af Silke Brewster Rosendahl (hold 1) og Marie Anne Svendsen Vi har valgt at lave et redesign af KEA s online videnscenter/bibliotek. Organisation: Københavns

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

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

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

RESPONSIV WEBDESIGN. Gøg og Gokke. Kommunikation IT Afleveres d. 17-9-2015. Sara Jacobsen & Natasja Christoffersen 3. års HTX

RESPONSIV WEBDESIGN. Gøg og Gokke. Kommunikation IT Afleveres d. 17-9-2015. Sara Jacobsen & Natasja Christoffersen 3. års HTX RESPONSIV WEBDESIGN Gøg og Gokke Kommunikation IT Afleveres d. 17-9-2015 Sara Jacobsen & Natasja Christoffersen 3. års HTX Indhold Indledning... 2 De seks faser... 2 Problemanalyse... 2 K-strategi... 3

Læs mere

Grafisk produktionsforståelse

Grafisk produktionsforståelse 04 Grafisk produktionsforståelse Design og koding af steentrae.dk 24 Svendeprøveportfolio Steentrae.dk Responsivt website med CMS I forlængelse af min Grafisk design-del, har jeg her valgt at fokusere

Læs mere

GRAFISK WORKFLOW. Hjemmeside design til Chem-Tec Plating

GRAFISK WORKFLOW. Hjemmeside design til Chem-Tec Plating GRAFISK WORKFLOW Hjemmeside design til Chem-Tec Plating REDEGØRELSE Hvad går opgaven ud på Virksomheden Chem-Tec Plating, som specialisere sig i metallisk overfladebehandling, havde været igennem et generationsskiftet

Læs mere

WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling. www.mads-pj.dk/clothesly

WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling. www.mads-pj.dk/clothesly WORKFLOW RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly DOKUMENTATION OPGAVE Opgaven jeg stillede mig selv, var at designe og kode et koncept til en webshop

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

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

PROGRAM VALG: InDesign CC Illustrator CC Photoshop CC Dreamweaver CC

PROGRAM VALG: InDesign CC Illustrator CC Photoshop CC Dreamweaver CC grafisk design WITTH AIRLINES KUNDEN: Kunden Carl Witth har etableret et rejseselskab, med rejser til lave priser. Witth Airlines er et selskab der flyver til de fleste hovedstæder samt storbyer til en

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

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

Grafisk workflow 3. Hovedforløb

Grafisk workflow 3. Hovedforløb Grafisk workflow 3. Hovedforløb 3. Hovedforløb Grafisk workflow Dreamweaver Opgavebeskrivelse Højbakkegaard har brug for en hjemmeside, som kan vise hvad gården har at byde på, deres unikke vine og faciliteter

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

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 WORKFLOW H1 MARIA SCHELDE

GRAFISK WORKFLOW H1 MARIA SCHELDE GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være

Læs mere

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne

Læs mere

TEKNISK VEJLEDNING SPILLET FREMTIDENS LANDBRUG

TEKNISK VEJLEDNING SPILLET FREMTIDENS LANDBRUG TEKNISK VEJLEDNING SPILLET FREMTIDENS LANDBRUG Før du går i gang Inden I går i gang, skal du vide følgende: Spillet kan kun spilles på tablets og computere både stationære og bærbare. Spillet virker IKKE

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

GRA DESIGN. HEARTS & MINDS

GRA DESIGN. HEARTS & MINDS GRA b DESIGN. HEARTS & MINDS HVAD, HVORFOR OG HVORDAN? HVAD GÅR OPGAVEN UD PÅ? Opgaven gik ud på at, udfra udleveret trykt materiale skulle lave et fuldt og responsivt hjemmeside design. Sitet er lavet

Læs mere

WORK- FLOW PLATFORM WEBSITE H2

WORK- FLOW PLATFORM WEBSITE H2 WORK- FLOW PLATFORM WEBSITE H2 Platform Min opgave var at lave logo og website til et nyt spillested i Vejle. Genren der spilles på stedet er alternativt og indie Rock + elektronisk musik. Kunden er en

Læs mere

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2. GRAFISK PRODUKTION OG WORK- FLOW CSS Wrapper paragraph h1 h2 DREAMWEAVER CS5 Class Tags Kodning Design a.link, a.hover, a.visited HTML Kundekontakt Komposition og modulopbygning Skelet Pixels Layout Usabillity

Læs mere