DET MOBILE REJSEKORT KURSUS: DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME UNDERVISER: BRIAN EVERETT UDARBEJDET AF: PLOR, MALN OG MTPL

Størrelse: px
Starte visningen fra side:

Download "DET MOBILE REJSEKORT KURSUS: DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME UNDERVISER: BRIAN EVERETT UDARBEJDET AF: PLOR, MALN OG MTPL"

Transkript

1 DET MOBILE REJSEKORT KURSUS: DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME UNDERVISER: BRIAN EVERETT UDARBEJDET AF: PLOR, MALN OG MTPL 1

2 DET MOBILE REJSEKORT // Vejledning VEJLEDNING TIL DET MOBILE REJSEKORT Da app en på nuværende tidspunkt kun er en interaktiv prototype er dens funktionalitet opbygget omkring et specifikt brugerscenarie. Vi vil derfor her beskrive, hvordan du kan bruge prototypen på den mest optimale måde. Vi anbefaler, at du ser prototypen i FireFox eller på en iphone/android smartphone. Bemærk, at app en er optimeret til en skærmstørrelse på 320x480 pixel. BRUGERSCENARIE Du er Klaus Hansen (bruger-id: og mobilkode: 1234) og er gået ind på prototypen Det Mobile Rejsekort. 1. Du står ved metrostationen DR Byen, København. Klokken er 9:05 og du ønsker at tage hjem med offentlig transport, som er beliggende på Elmegade, Nørrebro, København. Du har følgende rejseplan: 1. DR Byen-Nørreport st. (metro) 2. Nørreport st.- Elmegade (5A bus) Når du har indsat DVD en og er klar til at udforske vores prototype, vil du møde følgende to mapper: I løbet af din rejse vil du blive mødt af en kontrollør i metroen, som gerne vil tjekke om du er checket ind. Prototypen Opgaven 2. Efter at du er kommet hjem ønsker du at tjekke dine tidligere rejseaktiviteter. Klik dig ind i mappen Prototypen og klik derefter på index.html for starte prototypen. Hvis du er interesseret i at åbne prototypen direkte fra ITU-serveren, så skal du blot taste følgende adresse: 3. Derefter ønsker du at tilmelde dig automatisk optankning (beløb: 200 kr.). Men efter kort tid ombestemmer du dig, og vil igen afmelde dig automatisk optankning. 4. Afslutningsvis ønsker du at beregne prisen for en tur med toget fra Nørreport st. til Kolding st. (standard), lørdag d. 18. maj kl

3 DET MOBILE REJSEKORT // Indholdsfortegnelse 1. INDLEDNING MTPL 4 2. MÅLGRUPPE MTPL 5 3. METODISK TILGANG PLOR EN BRUGERCENTRERET DESIGNPROCES PLOR IDE GENERERING MTPL STORYBOARD MTPL EKSPERTVURDERING MTPL SKETCHING MTPL MOCK-UP FØRSTE PROTOTYPE MTPL 9 8. KODNING PLOR MOBILE PLATFORME PLOR JQUERY MOBILE PLOR GENEREL OPBYGNING PLOR GENEREL OPBYGNING AF EN SIDE PLOR SPECIFIKKE OPTIMERINGER TIL IPHONE PLOR POP-UP PLOR INDTASTNINGSFELTER PLOR CHECK-IND/CHECK-UD LYD MTPL PROTOTYPE MALN BRUGERTEST PLOR FØRSTE BRUGERTEST MTPL ANDEN BRUGERTEST MTPL KONKLUSION PLOR REFERENCER INFORMATIONSARKITEKTUR MALN BILAG DESIGNPRINCIPPER MALN VISUEL IDENTITET MALN BOMÆRKE MALN NAVNETRÆK MALN FARVE MALN TYPOGRAFI MALN IKONER MALN 18 3

4 DET MOBILE REJSEKORT // Indledning 1. INDLEDNING Hver dag bruger millioner af danskere offentlig transport. Men det fysiske klippekort er ved at blive skrottet og udfaset (udløbsdato 1. juli 2013). Alternativet hedder Rejsekortet, som nu bliver brugt af to millioner kunder i Danmark (Rejsekort.dk, 2013). Der er dog nogle problemer med Rejsekortet. Man får ingen kvittering for rejsen, man kan ikke se om man er checket rigtigt ind og glemmer man at checke ud får man en dummebøde på 50 kroner. Alt sammen ting der var løst med det gammeldags klippekort. Vores produkt er en app-løsning til Rejsekortet, der kan løse problemerne og give kunden bedre overblik over saldo, rejseaktivitet og personlige oplysninger. Teknologien til en back end løsning findes allerede i dag med NFC og GPS selv på iphone, der ikke har tilsluttet sig NFC-teknologien, vil det være muligt at sende en datapakke med oplysningerne fra Rejsekortet til ens mobil (kilde: Ken Friis Larsen, lektor i datalogi ved Københavns Universitet). - Det, der mangler for at lave en app for Rejsekortet i dag, er politisk velvilje. Rejsekortsstanderne laver i dag en almindelig netværksforbindelse til Rejsekortes backup-system. Det kan ligeså godt køre på en mobiltelefon, forklarer Ken Friis Larsen. Rejsekorts Applikationen vil komme til at fungere som et supplement til Rejsekortet som vi kender det i dag. Løber mobilen tør for strøm vil man kunne rejse videre på sit normale Rejsekort, ligesom man vil kunne checke ud på mobilen, hvis man glemmer at checke ud, når man har afsluttet sin rejse med det normale Rejsekort. Der er i dag allerede flere applikationer, der kan minde en om at checke ud, når man har afsluttet ens rejse. En egentlig mobil erstatning for Rejsekortet findes ikke. Med udbuddet af nuværende mobile lappeløsninger for Rejsekortet og allerede eksisterende løsninger for klippekort og billetter til DSB er det oplagt, at der mangler en mobil løsning for Rejsekortet. Det leder os hen til følgende problemformulering: Hvordan skaber man en mobilløsning som videreudvikling af Rejsekortet, der forenkler rejsen for brugeren, samt løser nogle af Rejsekortets nuværende problemer? 4

5 DET MOBILE REJSEKORT // Målgruppe og Metode 2. MÅLGRUPPE 3. METODISK TILGANG Vi har valgt at lade vores mobilløsning henvende sig til en primær målgruppe i alderen år. Det sker ud fra et valg om, hvem der er de primære smartphone-brugere og mest fortrolige med apps og den teknologi, der følger med. Generelt har halvdelen af danskerne nu en smartphone. Og det forventes, at det antal stiger til 80 procent i år. (Dwarf.dk, 2013) Rejsekortet har ikke så godt fat i den yngre målgruppe. En nylig brugerundersøgelse fra Epinion af Rejsekortets brugere, viser at der findes flest brugere i aldersgruppen år (41 procent), mens det overraskende viser sig, at den mindste gruppe, kun 23 procent, af brugerne er mellem 18 til 34 år (Epinion, 2012). Af borger.dk s personas passer gruppen De unge borgere også bedst til vores produkt. Johannes er 20 år, online 24/7, har en smartphone og bruger en masse apps. Han vil gerne betjene sig selv, men de digitale løsninger skal være forståelige. En sekundær målgruppe er De velvillige. Men selvom Claus på 44 år, har en smartphone og bruger apps, så er han lidt mere usikker end Johannes. Claus vil gerne have en vished for, at han gør det rigtigt. (Borger.dk, 2013) Derfor konkluderer vi, at vi ud fra både et forretningsmæssigt og brugermæssigt synspunkt har en målgruppe som hedder 18 til 34 år. I følgende afsnit vil vi redegøre for den metodiske tilgang og proces i vores konceptudvikling af det mobile rejsekort. Vi vil beskrive, hvordan vi med udgangspunkt i en brugercentreret designproces er kommet fra idé, første mock-up og endt op med den færdige prototype. 3.1 EN BRUGERCENTRERET DESIGNPROCES I forbindelse med udviklingen af nye brugergrænseflader, som fx softwareprogrammer er det en tradition at tage udgangspunkt i en udviklingsmodel. Modellen kan hjælpe til at give overblik og struktur over processen (Sharp et al. 2007). I lang tid har den såkaldte vandfaldsmodel været den mest anvendte model (Sharp et al. 2007). Vandfaldsmodellen som gennemgår seks forskellige faser i designprocessen er lineær og kronologisk. Det vil sige, at man ikke går tilbage til de tidligere faser i processen. Kun fremad. Da brugerinddragelsen først sker i afslutningen af designprocessen, karakteriseres modellen som ikke særlig anvendelig inden for processer, hvor man ønsker løbende feedback på design og funktionalitet fra brugeren. Ved udvikling af en ny app, der skal blive et aktivt redskab for brugeren, vurderer vi, at en brugercentreret designproces frem for en lineær, som fx vandfaldsmodellen, er vigtigst. Jf. Gregersen & Wisler-Poulsen, 2009 bør brugerinddragelse (usability-tests) altid være en integreret del af alle stadier i designprocessen. Fordi at uanset hvor godt man 5

6 DET MOBILE REJSEKORT // Metode som designer kender til produktet og slutbrugere, og uanset hvor meget erfaring man har med produktet eller design af brugergrænseflader, må man acceptere, at man reelt ikke har kendskab til konsekvenserne af ens mange designvalg. Dette kan man først få, når en bruger interagerer med grænsefladen i en virkelig brugssituation. Jf. Gregersen & Wisler-Poulsen, 2009 er der her tale om den såkaldte designudfordring. Designprocesser bør derfor være en gentaget (iterativ) proces, hvor de designvalg, der løbende foretages, skal afprøves og vurderes af de brugere, der i sidste ende skal anvende produktet. På denne måde skal designvalg altid evalueres for at tilgodese designudfordringen, og evalueringen bør altid føre til justering af det eksisterende design. Med afsæt i ovenstående har vi valgt at arbejde ud fra en såkaldt Interaction Design Lifecycle Model (Sharp et al. 2007). Denne cirkulære livscyklusmodel viser, hvordan brugen af interaktive prototyper og brugerevaluering får et tidligt fokus på brugernes behov og dermed mulighed for at evaluere, identificere nye behov og redesigne undervejs i processen. Da modellen kun illustrerer en iterativ proces, kan den i princippet fortsætte i det uendelige (Sharp et al. 2007). Set i lyset af vores tidsmæssige begrænsninger, valgte vi derfor at afgrænse designprocessen til to brugerevalueringer. Samtidig vurderede vi, at det ikke var nødvendigt at udføre en spørgeskemaundersøgelse, da vi havde materiale om Rejsekortets brugere fra Epinions undersøgelser. (Re)Design INTERACTION DESIGN LIFECYCLE MODEL (SHARP ET AL. 2007) 3.2 IDÉ GENERERING Identify needs establish requirements Build an interactive version Evaluate Final product Efter at vi havde fået gruppeformationen på plads, begyndte vi at tænke over hvilket koncept vi skulle designe. Om det skulle være et re-design af en eksisterende hjemmeside, eller noget nyt. Vi nåede egentlig ikke at idéudvikle ret længe, før at Philipp bragte et forslag på banen. Ud fra en hverdagssituation og fra noget som han manglede i sin hverdag, kom han med forslaget om en app til Rejsekortet. Vi kom derfor ikke at være ret lang tid i divergensprocessen, før vi 6

7 DET MOBILE REJSEKORT // Metode bevægede os videre til designproces og konvergens (Buxton, 2009: s. 91). Vi kunne alle sætte os ind i problemstillingen med det fysiske Rejsekort og valgte derfor at lave et nyt produkt, som vil være med til at løse de problemstillinger. STORYBOARD 3.3 STORYBOARD For at illustrere vores koncept begyndte vi derefter at producere et storyboard. Her har vi ladet os inspirere af professor ved datalog Stanford HCI Group, Scott Klemmers Youtube tutorial om storyboard, paper prototypes og mock-ups (Youtube.com, 2013). I vores storyboard fortæller vi en lille hverdagshistorie, hvor vores mobile løsning for Rejsekortet kunne forbedre brugeroplevelsen. Vi ser en mand, som skal til at tage bussen, men som har glemt sit Rejsekort derhjemme. Men så kommer han i tanke om, at han har Rejsekortet som mobil-app også. Han checker ind og kommer med bussen. Da han stiger af bussen bliver han dog i tvivl om, om han har husket at checke ud. Der kommer en alert fra Rejsekorts app en, der efter noget tid minder ham om, at han skal huske at checke ud. Manden er glad, fordi han har kunnet komme hjem med bussen og samtidig ikke har skulle betalt en bøde for at glemme at ud. 3.4 EKSPERTVURDERING Inden vi lagde os fast på emnet til denne opgave, var det vigtigt for os, at vi fik belæg for, at vi lavede et produkt som rent faktisk ville virke i dag, eller i den nærmeste fremtid. Derfor researchede vi og læste flere artikler om problemstillingen med, at der ikke er en app til Rejsekortet. Samtidig interviewede vi forskellige fagfolk. Vi fik i den forbindelse et interview i stand med en lektor i datalogi fra Københavns Universitet, Ken Friis Larsen. Han har også tidligere optrådt i DR2- programmet So Ein Ding i forbindelse med samme problemstilling. Her er hans konklusioner efter vores interview med ham: - Det handler om at have den politiske vilje for at lave en mobilløsning til Rejsekortet. Teknologien findes allerede. 7

8 DET MOBILE REJSEKORT // Metode - Med NFC-teknologi kan vi allerede i dag aflæse den RFID-chip, som sidder i alle fysiske rejsekort. Det betyder, at man med lidt teknisk snilde kan lave ens mobil om til en mobil rejsekortsscanner. Et problem med NFC er dog, at iphone ikke understøtter standarden. Men den datapakke, som sidder i Rejsekortet i dag kan scannes og sendes til enhver mobil. Så kommer man ud over problemet med NFC. - Via GPS og datatraffik kan man lokalisere ens smartphone, når man laver et check-ind eller ud. Der kan dog være lidt usikkerheder med lokationen, men oftest rammer den ret præcis. 3.5 SKETCHING Med belægget for opgaven på plads kastede vi os over sketching. Sketching er vigtigt for at tænke og lære design rigtigt. Samtidig er sketching godt for fantasien og forståelsen. (Buxton, 2009: s. 118 & 135) Vi tegnede en mobil med skærm og begyndte at tegne de funktioner ind i modellen, som vi gerne ville have med. Det var et utroligt godt redskab til at få vores tanker ned på papir. Samtidig var det med til at løse diskussioner i gruppen, fordi vi pludselig kunne se at det tegnede ofte var et kompromis af vores individuelle tanker. Da vi havde den overordnede navigation på plads begyndte vi at designe undersiderne. - Det er ikke muligt at lave en løsning, hvor man bare checker ind en gang og så ud, når man er færdig. Man skal stadig checke ind, når man skifter transportmiddel. Det hænger sammen med, at transportselskaberne har forskellige systemer. Derfor har vi lavet en løsning, der stadig fungerer som det nuværende Rejsekort på det punkt. UDKAST FRA SKETCHING PROCESSEN Problemer med en mobilløsning: - Man kan snyde med falske GPS-koordinater. Der kan dog indarbejdes en blokering mod disse i app en. - Det kræver politisk velvilje og penge til at udvikle teknologien til backend løsningen. Nu har vi så udviklet frontend løsningen. 8

9 DET MOBILE REJSEKORT // Metode 3.6 MOCKUP FØRSTE PROTOTYPE FYSISKE MOCKUPS Vi førte vores skitser over på papir og pap i en såkaldt papirs prototype. Dem bestod af en iphonelignende papmodel, hvor vi på papir tegnede de forskellige menusider og undersider. Det var første mockup af vores prototype. Vi havde skellettet på plads udfra vores første sketch, men blev hurtigt enige om, hvad de fem menuer skulle indeholde, og hvordan det skulle designes. Vi havde naturligvis en del idéer der blev sorteret fra under udarbejdelsen af mock-uppen. Ved at have designet foran os på papir kom vi hurtigt fra idé til udførelse. Efter at have lavet en komplet mock-up på papir overførte vi den til DIGITALE MOCKUPS en elektronisk version gennem programmet Appcooker. Med Appcocker fik vi en første interaktiv prototype som fungerede godt til en brugertest. Samtidig var det en stor hjælp, for at vores testpersoner kunne teste konceptet på en mobil og ikke skulle bladre igennem en masse papir mock-ups. (se afsnit 4.1). 9

10 DET MOBILE REJSEKORT // Brugertest 4. BRUGERTEST En brugertest er en kvalitativ metode, hvis styrke blandt andet består i at kunne afprøve, om brugeren kan løse de opgaver og mål, som det undersøgte produkt er konstrueret til (Gregersen & Wisler-Poulsen 2009). I den konkrete evaluering af app en gennemføres en brugertest med udgangspunkt i udvalgte fokusområder. Metoden anses særdeles relevant for usability-evalueringen. Testen giver indblik i den faktiske brug af app en, og hvad brugeren tænker og oplever, når app en bliver brugt. I brugertesten observeres således den faktiske brug, brugeroplevelse og eventuelle problemer. Sagt på en anden måde menes brugertesten at kunne give indsigt i hvordan app en måler sig i forhold til de tre usability-dimensioner: funktionalitet, effektivitet og tilfredshed (Gregersen & Wisler-Poulsen 2009). I vores designproces blev der gennemført to forskellige brugertests med fire testdeltagere hver. Alle testdeltager blev rekrutteret tilfældigt, men var alle inden for den primære målgruppe for nærmere karakteristika se afsnit 4.1 og 4.2. Brugertestene er gennemført efter tænke højt -metoden (Gregersen & Wisler-Poulsen 2009), fordi det blev vurderet, at brugernes begrundelser og refleksioner på siden er interessant. Det er en viden, som ikke ville være mulig at få indsigt i ved kun at foretage en observation af testdeltagernes brug. Til hver brugertest var en testleder og en observatører til stede. Det skete fordi, at flere personer med fordel kan opleve flere nuancer af testforløbet end en enkelt gør. Samtidig kunne intervieweren koncentrere sig om at spørge og lytte, mens observatøren tog noter og aflæste kropssprog og lagde mærke til hvordan brugeren brugte produktet. En nærmere beskrivelse af udførelsen af brugertesten (testlederens manuskript) kan findes i bilag FØRSTE BRUGERTEST Halvejs inde i processen havde vi fået mock-up af konceptet på plads, og ville derfor undersøge om vores idéer og tanker også blev opfattet på samme måde hos brugerne. Derfor tog vi en dag ud af kalenderen og gav os til at brugerteste. Vi havde lavet den første mock-up på papir og pap, men til brugertesten havde vi omsat den til en elektronisk prototype gennem programmet Appcooker, så prototypen fungerede på en smartphone. Det gjorde det lettere at teste produktet, at vores brugere kunne teste direkte på den tiltænkte platform. Formål med brugerstesten: At se om ikoner og menutitler var forståelige og brugervenlige. Om brugeren let kunne sætte sig ind i funktionerne og fandt den overskuelig. Om produktet var en god idé og om de ville bruge det, hvis de fik muligheden. 10

11 DET MOBILE REJSEKORT // Brugertest Selve testen: Testen foregik ved Det Natur -og Sundhedsvidenskabelige Fakultetbibliotek, hvor vi testede på fire studerende, der alle faldt inden for den primære målgruppe på år. Fælles for de fire testpersoner var, at de alle brugte offentlig transport. Ingen af dem havde et rejsekort, to havde uddannelseskort og de to sidste brugte klippekort. Testpersonerne var: Emil, 24 år, single, læser Forvaltning på RUC. Christian, 26 år, kæreste og barn på halvandet år, læser Forvaltning RUC. Anne-Sofie, 24 år, single, læser Journalistik RUC. Søren, 29 år, kæreste, medicin-studerende. 1. opgave brug af check-ind og ud: Her gik det ikke så godt. Tre af testpersonerne gik ind under menupunktet Rejser først. De var forvirrede. Christian skulle have forklaret teknikken bag GPS først. Kun Søren løste testen med det samme. 2. opgave Rejse med flere transportmidler: Her blev testpersonerne sat til at bruge vores app til at rejse fra Nørreport St. til DR Byen. Tre af vores testpersoner klarer opgaven uden problemer og med mindst antal klik. Christian, der ikke har en smartphone eller Rejsekort, brugte dog skift-funktionen og blev lidt forvirret under vejs. Han manglede en pop-up når han trykker på skift. 3. opgave find ud af hvad en tur til Kolding koster: Alle fire testpersoner klarer opgaven til perfektion. Første deltest forståelse af menuer: Vi satte vores testpersoner til at gætte, hvad de enkelte menuer indeholdte af funktioner. Her viste det sig, at tre ud af fire brugere havde problemer med at gætte, hvad menuen Rejser indeholdt. Alle brugere gættede rigtigt ved de andre menuer. Problemet med menuen Rejser var, at de troede, at de kunne planlægge deres rejse i menuen. Vores formål med menuen var, at man skulle se en oversigt over ens tidligere rejseaktiviteter. 4. opgave afmeld automatisk optankning: Der er lidt tvivl hos to af testpersonerne, om de skal gøre det under saldo eller profil. Alle klarede dog fint opgaven. Kommentarer til produktet: - App en er dejlig overskuelig. Det er godt, at man får en kvittering. Det løser nogle af de problemer, der er med det nuværende Rejsekort, Søren 29 år. - Menuerne er fine og enkle, Anne-Sofie 24 år. - Jeg kunne godt bruge en kortfunktion, så man kunne planlægge 11

12 DET MOBILE REJSEKORT // Brugertest rejsen og se hvor man var samtidig, Christian 26 år. BILLEDE FRA NØRREPORT Konklusioner efter første brugertest: Der var nogle problemer med menu-punktet Rejser. Det forvirrede. Derfor lavede vi det om til Mine rejser. Generelt var applikationen let at bruge for vores brugere. Der var nogle tekniske udfordringer ved at det kun var en mock-up, som de testede. Deres holdninger til forbedringer bestod mest i tilføjelser som link til Rejseplanen og en kortintegration. Vi konkluderede derfor, at vores produkt var ret godt, da forbedringer var yderligere funktioner og ikke store problemer med vores nuværende design. 4.2 ANDEN BRUGERTEST En uge senere i processen var prototypen af Rejsekorts-app en ko- Testpersonerne var: det færdigt. Vi havde brugt erfraringerne fra første brugertest til Kvinde, 26 år, et barn, bor i København, sygeplejerske, bruger ofte of- at tilpasse og udvikle vores prototype. Prototypen blev testet på en fentlig transport. Bruger klippekort, har ikke kendskab til Rejsekortet. iphone og blev hentet over en server på IT Universitetet. Vi ville teste produktet ved et trafikknudepunkt, hvor det var tiltænkt, Mand, 27 år, ingen børn, bor i København, studerende, bruger of- at det skulle bruges i virkeligheden. Derfor tog vi til Nørreport Sta- fentlig transport, bruger klippekort, har ikke Rejsekort, men har tion. Danmark mest benyttede trafikknudepunkt (Orestad.dk, 2013). kendskab til konceptet. Vi gik efter den primære målgruppe på år i vores udvælgelse, og gik efter folk der stod stille, eller tog en pause. Tourister og folk under Kvinde, 21 år, ingen børn, bor i København, studerende, bruger 18 år blev valgt fra. sjældent offentlig transport (cykler mest), bruger klippekort, har ikke et Rejsekort, men har kendskab til det. 12

13 DET MOBILE REJSEKORT // Brugertest Mand, 34 år, ingen børn, bor i København, bruger sjældent offentlig transport (har sidst taget en tur til Svendborg), bruger klippekort, har ikke kendskab til rejsekort-konceptet, har ingen smartphone. Første deltest Forståelse af menuerne: Ingen havde problemer med at afkode vores nye menuer og ikoner. Alle gættede rigtigt. - Jeg er positivt overrasket. Det er lige til og meget logisk. Jeg er ikke i tvivl om noget undervejs, kvinde 21 år. Forbedringer: - Betalingsinfo kunne godt stå lidt højere oppe, så man ikke skal scrolle ned, Lars 27 år. Der mangler lidt info om hvordan man bruger Rejsekortet, hvis man ikke kender til det nuværende system. 1. opgave Forestil dig, at du skal bruge app en til at komme hjem: Alle klarede opgaven uden problemer. 2. opgave Hvad koster en rejse til Kolding: Igen havde ingen af testpersonerne problemer og fandt hurtigt prisen. Også de to personer uden smartphones, kvinden på 21 år og manden på 37 år, indtaster let stationerne i menuen Beregn pris. 3. opgave afmelding af automatisk optankning Alle testpersonerne gik hurtigt ind i profil, fandt menupunktet og klarede opgaven med det mindst antal klik muligt. Konklusioner efter anden brugertest: Vi fik løst de problemer som der var ved den første prototype. Ved anden brugertest var der ingen af de fire personer, der havde problemer med opgaverne undervejs. Det viser, at vi har lavet et produkt med et overskuelige menuer og ikoner. Det vi har taget med os fra anden brugertest er små forbedringer, som placeringen af funktioner og at der måske mangler en smule info til førstegangsbrugere, der skal bruge check-ind og ud funktionen for første gang. Kommentarer: - Jeg synes generelt, at Rejsekortet er et håbløst projekt, men jeres app virker nem og mange vil få gavn af den. Det er en positiv forenkling, Lars 27 år. 13

14 DET MOBILE REJSEKORT // Informationsarkitektur 5. INFORMATIONSARKITEKTUR I dette afsnit præsenterer og redegører vi for opbygningen af vores færdige prototype. Derudover redegører vi for hvilke tanker vi har gjort os omkring navigation, strukturering og brugervenligheden i udarbejdelsen af app en. Informationsarkitektur dækker over, hvordan man strukturerer sit indhold på en given platform. Det essentielle for informationsarkitekturen er, at den understøtter brugernes behov. Brugerne skal let kunne finde forskellige informationer, samt navigere rundt uden større problemer og forvirring. En velstruktureret informationsarkitektur er usynlig for brugerne og man bemærker den kun, hvis den ikke fungerer (Morville & Rosenfeld, 2007: s.41). For at skabe den gode struktur, var det vigtigt at visualisere den. Det første skridt var at organisere og strukturere, hvad og hvor meget indhold app en skulle bestå af. Vi tog udgangspunkt i Rejsekortets hjemmeside, og fandt frem til det vigtigste indhold, der skulle med i app en. Vi begyndte dernæst at sortere i indholdet for at skære ind til benet, og kun udvælge det som brugeren har brug for, samt tilføre mangler (Lynch & Horton, 2008). Det var herefter vigtigt at gruppere og adskille indholdet, og finde frem til det indhold der passede logisk sammen. Herefter opdelte vi indholdet i kategorier og gav dem navne. Da disse overvejelse var på plads, kunne vi begynde at planlægge navigationen i app en. Det endte med fem menupunkter, med tilhørende undersider der alle kan ses i nedenstående flowchart. Det essentielle var, at brugeren hurtigt og nemt kunne nå i mål. Altså at brugeren med få tryk med lethed skulle opnå det ønskede scenarie. Vi forsøgte derfor at begrænse antallet af undersider. FLOWCHART Ind/Ud Kontrol Skift/Ud Kvittering Mine Rejser Loading screen Login Saldo Beregn pris Oversigt Betaling Tilmelding Pris Kvittering Kvittering Betalingsinfo Korttype Betalingsinfo Kortnummer Mobil By Postnummer Adresse Udløbsdato Sikkerhedskode 14

15 DET MOBILE REJSEKORT // Designprincipper 6. DESIGNPRINCIPPER Rejsekortet er forholdsvis nyt, og ikke alle danskere har kendskab til det. Det erfarede vi gennem vores brugertest. Det var derfor vigtigt, at vi havde genkendelighed og ensartethed i højsædet i udarbejdelsen af den visuelle identitet og designet til app en. Vi ville ikke gøre folk forvirrede. Samtidig var det vigtigt for os at vise, at det fysiske og mobile Rejsekort ikke var to uafhængige ting med to forskellige afsendere. Vi har derfor arbejdet hårdt på, at den eksisterende visuelle identitet i form af hjemmesiden og det fysiske rejsekort, skinnede igennem i vores design af det mobile Rejsekort. Hvis vi skal kigge nærmere på designet, har vi fulgt nogle designprincipper, for at skabe en rød tråd og en overskuelighed igennem designet. Især følgende designprincipper er gennemgående i designet og den visuelle identitet: - Ensartethed - Genkendelighed - Enkelhed - Brugbarhed Vi har haft fokus på ensartethed igennem hele designet. Det er de samme farver, former og størrelser der ofte går igen. Det kommer dermed til at fremstå mere struktureret og overskueligt (Wisler- Poulsen, 2012: s.35) Samtidig har genkendeligheden også været i fokus. Brugeren skal ikke blive forvirret i anvendelsen af app en. Det skal være let for brugeren at bruge app en. Det er essentielt, at brugeren opnår den samme følelse ved brugen af app en som ved brugen af det fysiske rejsekort. Oplevelsen skal være så identisk som muligt. Vi stiler efter at opretholde brand-security (Wisler-Poulsen, 2012 : s.61). Derfor har vi prøvet at holde designet så enkelt som muligt. Vi har benyttet os af KISS-principper (keep it simple, stupid) Alle unødvendige elementer og de såkaldte darlings har vi forsøgt at skære væk. Da det er en rejse-app, skal brugeren også kunne benytte sig af den hurtigt uden for mange unødvendige elementer, der nedsætter funktionaliteten og brugbarheden. Som usability-ekspert Jakob Nielsen udtaler: Websitet bør ikke indeholde information, som er irrelevant eller sjældent brugt. Enhver ekstra enhed af information i dialogen med systemet konkurrerer med de relevante enheder af information og formindsker deres relative synlighed (Wisler-Poulsen, 2012: s.29) Dette udsagn har vi taget til os, og vi har benyttet disse tanker i udformningen af app en. Alle informationer som man finder i app en er skåret ind til benet. Det er sket gennem vores brugertest, hvor vi erfarede hvilke menupunkter der var essentielle, samt hvad menupunkterne skulle hedde for at højne brugervenligheden. 15

16 DET MOBILE REJSEKORT // Visuel identitet 7. VISUEL IDENTITET 7.1 BOMÆRKE BOMÆRKE For at den visuelle identitet skal være opfyldt og komplet, skal der indgå fire elementer: Bomærke, Navnetræk, Farve og Typografi (Wisler-Poulsen, 2005: s.20). Som skrevet tidligere har vi fokuseret på at drage en klar parallel mellem Rejsekortets hjemmeside og app en. Vi har derfor designet næsten samme bomærke, der i høj grad minder om det eksisterende. Dette bomærke er designet i Adobe Illustrator, og sat sammen af ni cirkler, hvor de alle er transparente undtagen den yderste, som har den helt oprindelige blå farvekode, som Rejsekortet anvender på hjemmesiden rejsekortet.dk. 7.2 NAVNETRÆK Rejsekortet har betalt for at få udviklet og designet en font specielt til navnetrækket. Det er ikke muligt at bruge den præcis samme. Fonten som vi har brugt til navnetrækket er Arial. Det er en sans serif font, som er god til web og som de fleste brugere har. Samtidig minder den meget om Rejsekortets font. Navnetrækket står i versaler, da det fremstår stærkt og dermed også er let læseligt. Det er vigtigt i de små formater, der er på smartphones. Vi har valgt en bold garniture, da det er mere iøjnefaldende. Arial er også god til overskrifter, da fonten fremstår tydeligt. Det ville have været et problem, hvis vi havde benyttet den til brødtekst, da sans serif fonte tit bliver klumpet og utydeligt, hvis man skal læse meget. Det sker fordi den ikke har fødder. NAVNETRÆK REJSEKORT 16

17 DET MOBILE REJSEKORT // Visuel identitet 7.3 FARVE FARVER Der er tre farver, der er benyttet igennem hele designet. Det er den blå farve som er repræsenteret på logoet, navnetrækket, aktivitetsknapper og de forskellige ikoner. Den blå farve er valgt for at bibeholde farveidentiteten, samt fremhæve og styrke logoet og ikonerne. Derudover er der to variationer af grå. En meget mørkegrå, som bliver brugt på skriften igennem hele app en, og en meget lysegrå, som indrammer forskellig tekst. Den lysegrå fremhæver de forskellige lukkede bokse, for at skabe en kontrast til den hvide CMYK: 89,54,0,0 RGB: 2,112,183 #: 006fb7 CMYK: 11,8,9,0 RGB: 223,223,223 #: dfdfdf CMYK: 79,63,54,45 RGB: 47,62,70 #: 2f3e46 baggrund. Ved at der er en forholdsvis stor kontrast mellem den blå og de grå farver opretholder man et visuelt hierarki. 7.4 TYPOGRAFI Rejsekortet.dk bruger tre fonte. Helvetica, Arial og en serif font som er specielt designet til identiteten. For at holde det enkelt, har vi valgt nedenstående css-kode, hvor Helvetica er den førstkomne typografi. Vores app består i høj grad af illustrationer, fremfor tekst. Vi vurderede derfor at én font var passende. Det var essentielt at denne font fremstod tydelig og letlæselig, da vi arbejder i et lille format. Helvetica er en sans serif font, som fungerer godt, når det typisk er overskrifter og underskrifter der bliver anvendt. Hierakiet i typografien bliver derfor skabt ved hjælp af forskellig punktstørrelse i overskrifter, underoverskrifter og brødtekst. TYPOGRAFI AaBb123 abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Helvetica Bold CSS KODE {font-family: Helvetica,Arial,sans-serif} 17

18 DET MOBILE REJSEKORT // Visuel identitet 7.5 IKONER Vi blev opmærksomme på vigtigheden af ikoner og symbolikken i vores brugerundersøgelse. Den viste, at ikke alle opfattede og fortolkede symbolikken af ikonerne ens. Der var samtidig nogle af testpersonerne der havde svært ved at identificere teksten til ikonerne i menuen, og misforstod betydningen af selve ikonet og menupunktet. Med udgangspunkt i resultaterne fra brugerundersøgelserne har vi designet fem ikoner og fem menutekster. Menuen er dermed en kombination af ikoner med tilhørende tekst. Det sker for at øge brugervenligheden. Vi har anvendt bomærket som check ind/ud/ skift ikon, for at sikre ensartethed og enkelhed i brugeropfattelsen. De fremstår på forsiden, da vi vurderede at de ville blive de mest benyttede ikoner i app en. MENU IKONERNE CHECK IND IKON Ind 18

19 DET MOBILE REJSEKORT // Kodning 8. KODNING I det følgende afsnit vil vi se nærmere på den tekniske udførelse af app en, som vi har kodet med hjælp af HTML5, CSS og jquery Mobile. Her vil vi endvidere beskrive de udfordringer/ problemstillinger vi har mødt undervejs i kodningsprocessen. 8.1 MOBILE PLATFORME Der er grundlæggende set fire måder at skabe mobile platforme på: MOBILE WEBSITES designes som normale websites og optimeres til mobile platforme ved hjælp af media quieries og responsive design. Mobile websites bliver vist i den mobile enheds browser og kræver netadgang. WEB APPS designes i frameworks som fx jquery Mobile og Sencha Touch, der kombinerer HTML5, CSS3 og JavaScript. Web apps bliver vist i den mobile enheds browser og kræver netadgang. NATIVE APPS designes fra bunden i specifikke udviklingsmiljøer (SDKs) og kodes i de dertil hørende sprog, fx Objective-C for ios og Java for Android. Native apps er typisk preloadet på den mobile enhed og kræver derfor ingen netadgang. HYBRID APPS designes som web apps og indpakkes derefter i en native container vha. fx Phone Gap. Dvs. den kombinerer fordelene ved web apps og native apps (se figur 1 til højre). Adgang til mobilens hardware (API) FIGUR 1. NATIVE APPS: - Platform specifik udvikling - Hurtig - app en er preloadet - God udnyttelse af mobilens hardware (APIs) fx geolocation - AppStore distribution. - Raffineret og lækker brugeroplevelse HYBRID APPS: Platform tilgængelighed - Cross-platform udvikling vha. HTML5, CSS3 og JavaScript - Loades via mobilen (hurtigere pga. preloading) - Adgang til mobilens hardware (APIs) - AppStore distribution WEB APPS: - Cross-platform udvikling vha. HTML5, CSS3 og JavaScript - Loades via webserveren (løbende opdatering) - Ikke knyttet til én platform - derfor ingen faste rammer. Da opgaven var at udvikle en prototype ud fra de formelle krav om, at der skulle benyttes de kodningssprog som er dækket på kurset, dvs. HTML5, CSS og jquery, kunne en native app meget hurtigt udelukkes. Valget stod derfor mellem et mobil website eller en web app. Ud fra perspektivet om, at konceptet kræver en app-løsning, hvor geolocation er en central funktionalitet. Og at man kan lave en web app om til en hybrid app, så at den kan få adgang til mobilens APIs, valgte vi at udvikle prototypen som en web app med jquery Mobile som framework. På denne måde kunne vi udvikle en prototype, der i design og funktionalitet kommer til at ligne og opføre sig mest muligt som en native app. 19

20 DET MOBILE REJSEKORT // Kodning 8.2 JQUERY MOBILE JQuery Mobile er et HTML5/CSS3/JavaScript UI-framework, der bygger på JavaScript biblioteket, jquery (Jquerymobile. com, 2013). Fordelen ved jquery Mobile er, at man kan generere touch -optimerede mobile web apps uden at skrive en eneste linje JavaScript. App en skrives i HTML, hvor elementerne klassificeres efter et bestemt data-role-system (se afsnit 8.4), hvor de automatisk får en tilsigtet funktionalitet. jquery Mobile er kompatibel med mange forskellige mobile enheder, hvilket gør at prototypen bliver tilgængeligt på mange forskellige platforme (Jquerymobile.com, 2013). Det er en stor fordel for konceptets formål. 8.3 GENEREL OPBYGNING Prototypen består overordnet af en index-fil, 28 undersider i mappen pages (alle sider er html-filer), en mappe med billeder (images) samt forskellige JavaScript og CSS-filer. Samtlige sider er udviklet vha. jquery Mobile hvilket betyder, at hver enkelt side har følgende JavaScript- og CSS-filer placeret i <head>: <link rel= stylesheet href= custom.css /> Det vil sige, at det samlede design/formatering udgøres af to css-filer. Ingen formatering er anvendt i selve html-dokumenterne. I prototypen anvendes to tilpassede default-themes fra jquery Mobile, data-theme= c og data-theme= b. Det skal bemærkes, at datatheme= b kun bruges til de blå knapper samt listevisningen under Mine rejser. På grund af, at det er ret vanskeligt at tilpasse jquery Mobiles CSS med vores eget CSS (en af de store ulemper ved jquery Mobile) er der nogle gange blevet foretaget en direkte tilpasning af jquery Mobiles data-theme. Som eksempel de blå knapper, hvor den blå farvekode er blevet tilpasset direkte i jquery.mobile min.css ved søg- og erstat metoden og ikke i custom.css <link rel= stylesheet href= jquery.mobile min.css /> <script src= jquery min.js ></script> <script src= jquery.mobile min.js ></script> Dertil kommer en egen generet CSS-fil, som primært tilpasser defaultdesignet fra jquery Mobile til vores eget rejsekort-design: 20

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

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

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

Læs mere

Portfolioudvikling. Line la Fontaine. Multimediedesigner

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

Læs mere

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

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

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE GRAFISK PRODUKTION OG WORKFLOW PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE 04 INDHOLDSFORTEGNELSE Dokumentation 05

Læs mere

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

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

Læs mere

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 Se webappen på din mobil

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

Læs mere

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

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

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

Læs mere

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

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

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

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

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

Rapport. Udarbejdet af: Mayianne Nøks Pedersen. Skole login: knmape68. E-mail: mypedersen@gmail.com

Rapport. Udarbejdet af: Mayianne Nøks Pedersen. Skole login: knmape68. E-mail: mypedersen@gmail.com Rapport Udarbejdet af: Mayianne Nøks Pedersen Skole login: knmape68 E-mail: mypedersen@gmail.com URL til brugerundersøgelsen: http://web328.webkn.dk/hjemmeside/image/laering/sem2brugerundersogelse/brugerundersogelse/

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

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

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

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

Stilen skulle gerne være feminin og primærfarven rosa.

Stilen skulle gerne være feminin og primærfarven rosa. Grafisk design // Grafisk Design Hjemmesideløsning for syerske Sorami er et enmands-firma med mere end 25 års erfaring, som tilbyder omforandring af tøj og tøj syet efter eget design, samt håndlavede smykker.

Læs mere

Rejsekort A/S idekonkurence Glemt check ud

Rejsekort A/S idekonkurence Glemt check ud Rejsekort A/S idekonkurence Glemt check ud 9. marts 2015 1 Indhold 1 Introduktion 4 1.1 Problembeskrivelse........................ 4 1.2 Rapportens opbygning...................... 4 2 Ordliste 5 3 Løsning

Læs mere

Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum

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

Læs mere

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

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

Læs mere

Grafisk Design. fra idé til visuelt udtryk Benett

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

Læs mere

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

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

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

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og

Læs mere

MARIA SKAU MADSEN SVENDEPRØVE 2015 WWW.BY-M.DK

MARIA SKAU MADSEN SVENDEPRØVE 2015 WWW.BY-M.DK DOKUMENTATION MARIA SKAU MADSEN WWW.BY-M.DK INDHOLDSFORTEGNELSE OPGAVE BESKRIVELSE.... 5 RESEARCH.... 5 DESIGN.... 5 SPECIFIKATIONER DET TRYKTE MEDIE.... 5 NUVÆRENDE IDENTITET... 6 PRIMÆR OG SEKUNDÆR MÅLGRUPPE....................6

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

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

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

Læs mere

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

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

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

Læs mere

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

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

Læs mere

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

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

Læs mere

Rejsekort-app idékonkurrence. Check ud

Rejsekort-app idékonkurrence. Check ud Rejsekort-app idékonkurrence Check ud 1 Rejsekort-appen Check ud Rejsekort a/s har med udviklingen af en app - der giver slutbrugeren mulighed for at checke ud, uden at bruge en rejsekortstander - mulighed

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

REDESIGN AF PORTFOLIO 16. jan. 2015

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

Læs mere

WBS. Inledning. Afsluttende projekt 1. sem

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

Læs mere

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

- opgave 3, Semester 2. Gruppe xx - The Cook Club Project/2. Claus Buus Christensen claus.buus@hotmail.com http://cbuus.dk

- opgave 3, Semester 2. Gruppe xx - The Cook Club Project/2. Claus Buus Christensen claus.buus@hotmail.com http://cbuus.dk Responsive Design Mul-a 2013 RAPPORT - opgave 3, Semester 2 Gruppe xx - The Cook Club Project/2 Claus Buus Christensen claus.buus@hotmail.com http://cbuus.dk Ole Jørgen Hansen ohan@post.tele.dk www.gribskovweb.dk

Læs mere

KODNING AF RESPONSIV DESIGN

KODNING AF RESPONSIV DESIGN Grafisk Workflow REDEGØRELSE GRAFISK WORKFLOW 39 OPGAVEN Frk. Nielsens rengøringsfirma kom til os for at få lavet ny hjemmeside. Hun var træt af den gamle, da hun ikke kunne rette i indholdet, og valgte

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

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Redesign af website for bilforhandleren PerB. Opgave har jeg stillet mig selv med det formål at lave en simpel men indbydende udgave af PerB s website.

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

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING

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

Læs mere

Portfolio Redesign Kamilla Klein 1. Semester eksamen

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

Læs mere

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

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)

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

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

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

Læs mere

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Grafisk w o rk f l ow jemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Deres vision er at skabe enkle og inspirerende

Læs mere

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

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

Læs mere

GRAFISK DESIGN. Kenneth Friis Petersen

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

Læs mere

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

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

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

Læs mere

Delaflevering FUA.4 Betina Korsbro, Mi Louise Hansen, Jesper Led Lauridsen og Knud Back

Delaflevering FUA.4 Betina Korsbro, Mi Louise Hansen, Jesper Led Lauridsen og Knud Back Delaflevering FUA.4 Betina Korsbro, Mi Louise Hansen, Jesper Led Lauridsen og Knud Back 1 Indhold 1.1 Generelt i forhold til projektet 1.1.1 Problemformulering Kalundborg kommune har gennem de senere år

Læs mere

Grafi sk Design Grafi sk Design

Grafi sk Design Grafi sk Design Grafisk Design Grafisk Design 3 Grafisk design Grafisk Design 4 Opgave beskrivelse Design udgangspunkt Kongehusets nuværende hjemmeside, med en fiktiv bannerreklame for deres ny lancerede smartphone app.

Læs mere

Dette dokument beskriver SUMOshop Frontend v3, primært med fokus på ændringer ift. Frontend v2.

Dette dokument beskriver SUMOshop Frontend v3, primært med fokus på ændringer ift. Frontend v2. SUMOshop Frontend v3 Dette dokument beskriver SUMOshop Frontend v3, primært med fokus på ændringer ift. Frontend v2. Fra foråret 2013 laves alle nye shops og redesigns i v3. Da fuld overgang til v3 kræver

Læs mere

Procesbeskrivelse - Webprogrammering

Procesbeskrivelse - Webprogrammering Procesbeskrivelse - Webprogrammering Indholdsfortegnelse Forudsætninger... 1 Konceptet... 2 Hjemmesiden... 2 Server-side... 3 Filstrukturen... 3 Databasehåndtering og serverforbindelse... 4 Client-side...

Læs mere

Multimediedesigner. Vedvarende. energi

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

Læs mere

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

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 DESIGN SVENDEPRØVE 2013. Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

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

Læs mere

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

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

3 usability-tests. med udgangspunkt i Køge Boldklubs web site. Gangstertest. Ekspertvurdering. Kortsortering. Side 1

3 usability-tests. med udgangspunkt i Køge Boldklubs web site. Gangstertest. Ekspertvurdering. Kortsortering. Side 1 3 usability-tests Gangstertest Ekspertvurdering Kortsortering med udgangspunkt i Køge Boldklubs web site Side 1 Køge Boldklubs web site Side 2 Gangstertest I gangstertesten har testpersonen fået stillet

Læs mere

# Redesign af copenhagenskatepark.dk

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

Læs mere

Byg web sider. Introduktion:

Byg web sider. Introduktion: Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se

Læs mere

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

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

Læs mere

Arbejdsproces. Designparametre

Arbejdsproces. Designparametre REDEGØRELSE Om opgaven Til denne opgave skal der laves et design til easynets nye hjemmeside. Den skal være moderne, simpel i udtryk og overskuelig. Fokus på brugervenlighed. Der skal designes forside,

Læs mere

Kunsten på Silkeborg Højskole - en online kunstregistrant

Kunsten på Silkeborg Højskole - en online kunstregistrant GRAFISK DESIGN Design af responsiv hjemmeside til Silkeborg Højskoles nye kunstregistrant. Oprettelse af ny side på Silkeborg Højskoles primære hjemmeside. Kunsten på Silkeborg Højskole - en online kunstregistrant

Læs mere

Bilag 3A.7 Brugergrænseflader

Bilag 3A.7 Brugergrænseflader Bilag 3A.7 Brugergrænseflader Version 0.8 26-06-2015 Indhold 1 VEJLEDNING TIL TILBUDSGIVER... 3 2 INDLEDNING... 4 3 USER EXPERIENCE GUIDELINES (UX-GUIDELINES)... 5 3.1 GENERELLE UX-GUIDELINES... 5 3.1.1

Læs mere

Min Kirke. - En kort introduktion. HappyHill v. Stefan Lykkehøj Lund ::: info@happyhill.dk ::: 23707131

Min Kirke. - En kort introduktion. HappyHill v. Stefan Lykkehøj Lund ::: info@happyhill.dk ::: 23707131 Min Kirke - En kort introduktion Introduktion Dette dokument beskriver kort en app som firmaet HappyHill har udviklet kaldet Min Kirke. Dette dokument skal fungere som en slags appetitvækker. App en findes

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Dokumenter Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 5 Opgave... Side 8 Få adgang til filerne fra din computer... Side 16 Vejledende løsning... Side 17 GoogleDocs Dokumenter 2

Læs mere

GRAFISK WORKFLOW Hjemmesidedesign

GRAFISK WORKFLOW Hjemmesidedesign GRAFISK WORKFLOW www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline

Læs mere

Afsluttende projekt(kom/it): E-learning Hjemmeside om ballonprojekt Af: Kevin, Martin og Sara

Afsluttende projekt(kom/it): E-learning Hjemmeside om ballonprojekt Af: Kevin, Martin og Sara Afsluttende projekt(kom/it): E-learning Hjemmeside om ballonprojekt Af: Kevin, Martin og Sara Roskilde Teknisk Gymnasium Dato 02/04/13 08/05/13 Side 1 af 9 Indhold Problem... 3 Overvejelser... 3 Produkt...

Læs mere

Projekt 5 - Porfolio Redesign

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

Læs mere

SmartWeb Brugermanual

SmartWeb Brugermanual SmartWeb Brugermanual Table of Content Table of Content... 1 Best Practice SmartWeb:... 2 Implementering... 4 Egenskaber:... 5 Filer:... 7 Oprettelse af Kategori... 9 Sider og Tekster:... 11 Slideshow...

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

Typo3 Manual TDC Landsklub Kommunikations setup version 2010.03.21

Typo3 Manual TDC Landsklub Kommunikations setup version 2010.03.21 Typo3 Manual TDC Landsklub Kommunikations setup version 2010.03.21 Der findes yderligere hjælp på www.typo3support.com Copyright Vision Team ApS 1 www.visionteam.dk Content Page 1 Log ind på intranettet...

Læs mere

Mark André Lyhne. Eksamen 2012. 12web1b

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

Læs mere

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

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

Læs mere

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

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

Læs mere

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

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

Læs mere

15. oktober. Maskine Udlejning. Jacob Weng, Jeppe Boese og Mads Anthony. Udlejningsvirksomhed. Roskilde Tekniske Gymnasium 3.4

15. oktober. Maskine Udlejning. Jacob Weng, Jeppe Boese og Mads Anthony. Udlejningsvirksomhed. Roskilde Tekniske Gymnasium 3.4 Maskine Udlejning 15. oktober 2010 Jacob Weng, Jeppe Boese og Mads Anthony Roskilde Tekniske Gymnasium Udlejningsvirksomhed 3.4 Indholdsfortegnelse Problemformulering:... 2 Planlægning:... 2 Analyse af

Læs mere

Multimediedesigner, Cph Business Lyngby 2. Semester - 2. Projekt - Ferbruar/Marts 2015 E-zine

Multimediedesigner, Cph Business Lyngby 2. Semester - 2. Projekt - Ferbruar/Marts 2015 E-zine Multimediedesigner, Cph Business Lyngby 2. Semester - 2. Projekt - Ferbruar/Marts 2015 E-zine Pernille Sjøgreen Kathrine Amalie Russell Harder Line Rasmussen www.pernillesjoegreen.com www.kathrineharder.com

Læs mere

TESTPLAN: SENIORLANDS WEBSHOP

TESTPLAN: SENIORLANDS WEBSHOP TESTPLAN: SENIORLANDS WEBSHOP Indledning Vi vil i vores brugervenlighedsundersøgelse teste Seniorlands webshop 1. Vi vil teste hvor at webshoppen fungerer set ud fra en bruger af Internet. Vi vil blandt

Læs mere

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING DANSKE BEDEMÆND august 2014 v1.4 1 P a g e INDHOLDSFORTEGNELSE Adgang... 3 Overordnet om Umbraco... 4 Højreklik muligheder i oversigten...

Læs mere

Grafisk Design. Dansk Center For Organdonation

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

Læs mere

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

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves nyt hjemmesidedesign til Inhouse Graphic skolepraktik på Aarhus Tech. Hjemmesiden skal kort og godt fortælle om de elever, der arbejder i skolepraktikken og om deres

Læs mere