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: 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

Projekt 1 Re-design af Odense Bunkermuseum

Projekt 1 Re-design af Odense Bunkermuseum Erhversakademiet Lillebælt OEAMM18FDA 1.semester d. 08.03.2018 Projekt 1 Re-design af Odense Bunkermuseum prototype: video i ZIP-fil Gruppe 5 medlemmer: Simon Tagge, Sofie Florczak, Mathias Bøgedal, Anne

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

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

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

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen. Introduktion til webdesign Jeg har igennem webdesign projektet arbejdet med en masse forskellige processer, i alt 6 processer. Disse er skab moodboard fra en side, informationsdesign, navigationsdesign,

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

FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine

FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine FRISØR VEST Link til hjemmesiden: Frisorvest.github.io Lavet af: Aleksander, Benjamin, Line & Cathrine Case 3: Aleksander, Benjamin, Line & Cathrine. Beskrivelse af gruppens tidsplan Trello: Vi har benyttet

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE grafisk workflow OPGAVE: EMBRACE-IT WEBSITE BESKRIVELSE GRAFISK WORKFLOW BESKRIVELSE Den tidligere nævnte virksomhed Embrace-IT, forsøger i takt med at virksomhen vokser, at opdatere og optimere deres

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Analyse af Cinnobershop.dk

Analyse af Cinnobershop.dk Link til Cinnober site Analyse af Cinnobershop.dk Kommunikation Hvem er afsenderen? Cinnober er en selvstændig boghandler, der fokusere på design. De har som nichebutik mange produkter i en genre/ stilart.

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

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

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

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

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel Arbejdsgang - Skriv artiklens tekst - Gør billeder klar - Log-in på hjemmesiden - Opret ny artikel - Vælg kategori - Skriv overskrift - Indsæt tekst - Tilføj billeder - Gennemgå artiklens indstillinger

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

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

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

Afsluttende Projekt - Kom/IT

Afsluttende Projekt - Kom/IT 1 Afsluttende Projekt - Kom/IT Rasmus H. Plaep 1 Billedkilde: http://blog.snelling.com/files/2015/01/business-107.jpg Indhold... 0 Indledning... 2 Problemafgrænsning... 2 Problemformulering... 2 Teori...

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

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop Om opgaven: For et halvt år siden overtog nogle bekendte værtshuset Midtskiws i Skive. De havde derfor brug for en ny hjemmeside, som kunne fungere som et online informationssted og visitkort for deres

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

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

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

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

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

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

Vistemmernu. Et webbaseret værktøj udviklet af Programdatateket i Skive. E-mail: programdatateket@viauc.dk Web: http://www.programdatateket.

Vistemmernu. Et webbaseret værktøj udviklet af Programdatateket i Skive. E-mail: programdatateket@viauc.dk Web: http://www.programdatateket. Vistemmernu Et webbaseret værktøj udviklet af Programdatateket i Skive E-mail: programdatateket@viauc.dk Web: http://www.programdatateket.dk Kolofon HVAL-vejledning Vistemmernu på HVAL.DK Forfatter: Susanne

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

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

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT GRAFISK WORKFLOW WEBSITE - CHOCOADDICT DOKUMENTATION OPGAVEBESKRIVELSE Opskriftsbogen Chocoaddict skulle have et website, hvor alle opskrifter samt skabelon til print selv opskriften er tilgængelig. Der

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

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

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

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

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

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

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

sweetbot.design Kodning og design af hjemmeside Navne: Emma Blæsbjerg, Michell Aagaard Dranig og Andreas Oliver Hansen

sweetbot.design Kodning og design af hjemmeside Navne: Emma Blæsbjerg, Michell Aagaard Dranig og Andreas Oliver Hansen sweetbot.design Kodning og design af hjemmeside Navne: Emma Blæsbjerg, Michell Aagaard Dranig og Andreas Oliver Hansen Gruppe: MUL A 10 Email: Michell cph-md267@cphbusiness.dk, Emma cph-eb121@cphbusiness.dk,

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

Strategirapport for Bloggen alletidersslankekur.dk

Strategirapport for Bloggen alletidersslankekur.dk Kan du heller ikke finde rundt i alle de slankekure, du bliver bombaderet med i ugeblade, aviser og tv så se med på min blog, hvor jeg foreløbig har samlet 23 slankekure her kan du finde lige den, der

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

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 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

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

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

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

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

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

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

ViKoSys. Virksomheds Kontakt System

ViKoSys. Virksomheds Kontakt System ViKoSys Virksomheds Kontakt System 1 Hvad er det? Virksomheds Kontakt System er udviklet som et hjælpeværkstøj til iværksættere og andre virksomheder som gerne vil have et værktøj hvor de kan finde og

Læs mere

Poster design. Meningen med en poster

Poster design. Meningen med en poster Poster design At præsentere et naturvidenskabelig emne er ikke altid lige nemt. Derfor bruges ofte plakater, såkaldte posters, til at fremvise forskning på fx messer eller konferencer. Her kan du finde

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

Sådan laver du en film (VIDEO)

Sådan laver du en film (VIDEO) QUICK GUIDE Sådan laver du en film (VIDEO) En trinvis guide til nogle af de værktøjer, der er nødvendige for at lave en digital fortælling 1. Sådan skaber du en digital fortælling For at skabe en digital

Læs mere

Spørgsmålene kan tages som en fælles klassedebat eller i mindre grupper.

Spørgsmålene kan tages som en fælles klassedebat eller i mindre grupper. Intro Dette emne sætter fokus på: at være udenfor fællesskabet. kontra at være opmærksomme på hinanden. Formål Noget af det, som eleverne på mellemtrinnet er mest bange for, når de er i skole, er at blive

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

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

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