VERSION TEGNET I GIMP. Responsiv webdesign. Rapport udarbejdet. side 1 af 16 Andreas Heise, Jonas Johansen & Henrik Pedersen

Størrelse: px
Starte visningen fra side:

Download "VERSION TEGNET I GIMP. Responsiv webdesign. Rapport udarbejdet. side 1 af 16 Andreas Heise, Jonas Johansen & Henrik Pedersen"

Transkript

1 VERSION TEGNET I GIMP Responsiv webdesign Rapport udarbejdet af: 1 af 16 Andreas Heise, Jonas Johansen & Henrik Pedersen

2 Formål... 3 De 6 faser... 3 Problemanalyse... 3 K-strategi... 5 Idéudvikling... 6 Medieproduktion... 9 Test... 9 Offentliggørelse... 9 Målgrupper Segmenter og livsstil Grafisk design Layout Farver og farvevalg Typografi Webkommunikation Kode Konklusion Ændringer/forbedrelse af 16

3 Formål Formålet med denne opgave er at designe- eller redesigne en ikke/ikke fungerende responsiv hjemme for et websted til nogen, der trænger til det. "Nogen" kan være: et firma, en butik, en klub eller lign. Vi har valgt en Bjarne Nielsens hjemme, han er den lokale låsesmed, "Nakskov låseservice" Et responsivt design vil sige at n ændre sig ifrohold til vinduets størrelse. Med et responsivt design tilpasser n sig hvis du fx bruger smart-phone, tablet eller phablet. De 6 faser De seks faser er er fra ide til et færdigt produkt, så når nu afslutter med fase 6 skulle være gerne være kommet frem til at færdigt produkt. I fase 6 kommer vi igennem Problemanalyse, k-strategi, ideudvikling, medieproduktion, test også offentligørelsen Billedet her viser cyklussen af de 6 faser. Problemanalyse Hvad er problemet med Bjarnes nuværende hjemme? Design Ingen brugerflade Ingen specifik målgruppe Manglende oplysninger Manglende responsive effekter Bjarnes hjemme ligner noget der kunne være designet af en folkeskole elev, ikke få at sige folkeskole elever ikke kan være kreative, Problemet er bare at Bjarne har set en hurtigt video på youtube om hvordan man laver en hjemme, og ud fra den video er han kommet frem til dette: 3 af 16

4 VERSION TEGNET I GIMP Hans gamle hjemme stråler af professionalitet, der ingen links til underr som omhandler, produkt oplysninger, kort over dækningsområde, kontakt information eller historie bag firmaet og ham selv. Hans hjemme minder om et opslag i telefon bogen. Der mangler informationer som gør os trygge, der mangler en venlig brugerflade der gør det let og enkelt at finde rundt til de forskellige oplysninger. Med denne hjemme som han har nu, er kunderne nød til at ringe og høre ham om han kan hjælpe dem med det de har brug for fordi han ikke har oplyst hvad han dækker og hvad hans arbejdsområde helt konkret er, det kan både spilde hans tid og kundens tid og måske kunden syntes han er alt for dyr, eller andet som måske kunne være oplyst på hjemmen, men det er ikke tilfældet her og derfor er der nogen som faktisk siger nej tak på forhånd uden egentligt at have gjort nogen intensioner ang. at bruge ham som låsesmed, kun fordi at hans hjemme ser ud som den gør, og det er jo synd og det mister han også kunder på. Så hvad har vi gjort anderledes? Nyt design Gjort målgruppen tydeligere Givet valgmuligheder i n - Priser - Produkter - Dækning - Kontakt Gjort den 100% responsiv 4 af 16

5 Den nye hjemme har fået et gevaldigt løft fra hvordan den så ud før, Designet er helt nyt og der er mere dybde i hjemme, der er lavet underr med priser, produkter, dækning og hans kontakt oplysninger, det har gjort hans målgruppe mere fast at hans produkter og dækning nu er oplyst via hans hjemme, det kunne fx være folk fra maribo ikke ringer når han ikke køre så til maribo. Hans hjemme er blevet mere troværdig, vi kender alle sammen at hvis vi skal købe et produkt på en hjemme, så bliver hjemmen nød til at se professionel ud ellers tør man ikke rigtigt tage chancen og bestille noget hvis det ikke ser ordentligt ud, det samme oplever vi med hans hjemme. K-strategi Vi har 5 forskellige kommunikations kulture indtil videre, men er Bjarne den i den rigtige, i forhold til den vi faktisk lever i, i dag. 1. Den mundtlige kultur 2. Skriftkulturen 3. Den trykte kultur 4. Den audiovisuelle kultur 5. Den digitale kultur Vi kan se at Bjarne ikke er kommet meget længere end den mundtlige kultur, som stammer fra den oldnordiske saga tid hvor sagaer blev bragt videre fra mund til mund. Hans hjemme er i hvert fald ikke det bedste bud på en digital kultur, men han har en hjemme men han kommer ikke længere end til den mundtlige kultur selvom han har en hjemme. Fordi han ikke har de nødvendige informationer på hans hjemme. På den måde kan det ikke hænge sammen, selvfølgelig er der stadig folk, ældre mennesker og personer som ikke har en computer og ikke kan finde en hjemme, men det er mindretallet, han bliver nød til at være tidsvarende og især med arbejde, han har brug for en hjemme som kan opfylde den digitale kultur. Så folk ikke skal ringe og have denne mundtlige samtale med ham omkring hans produkter og hvad han tilbyder, 5 af 16

6 selvom det skaber en form for tillid at have denne samtale hjælper det ikke noget hvis det ikke er den ønskede målgruppe han rammer. Idéudvikling Idé udviklingen var lidt svær til at starte med men da vi først fandt Bjarnes hjemme, og derefter lagde alle hovederne i blød, kom vi frem til et rigtigt godt resultat som vi mener er den bedste løsning på problemet. Vores udgangspunkt i Bjarnes hjemme som havde et lettere forfærdeligt design, var at lave det så funktionelt som muligt. Hans nuværende som ikke rigtigt bragte os nogle steder hen, udover at det i hvert fald ikke kunne blive meget være. Så vi startede da godt ud. Næste punkt var at beholde hans logo, da hans logo er kendt i lokal området og han på den måde nok ville miste kunder hvis det blev ændret, så derfor holdt vi fast i logoet som var hovedemnet i dette design, vi redigerede logoet en smule som kan ses herunder på før og efter billeder Før Efter Vi gik derefter i gang med at tegne skitser, Andreas tegnede samtidigt med vi alle kom med inputs og ideer til hvordan det kunne se ud vores første skitse var en Web i normal computer format, med et godt stort logo(vi alle var enige om at logoet betød meget) det lagde ligesom hele grunden til resten af hjemmen som var bygget op af bobler med undergrupper i, vi havde overvejelser om boblerne skulle bestå af nøglehuller, men det ville bare gøre det til en gætteleg da vi ikke rigtigt havde en måde at vise hvilken undergruppe det var, vi kunne ha skrevet oven over eller under nøglehullet. Men samtidigt ville vi have at på for skulle der ikke være noget fritstående tekst, kun tekst i logoet og boblerne. Denne skitse kaldt vi den lige da designet som kan ses herunder var lige, boblerne var lige og logoet var symmetrisk med rne, det hele skulle være symmetrisk fra rne og med centerlinjen. 6 af 16

7 VERSION TEGNET I GIMP DESKTOP VERSION FRIHÅND IPAD VERSION FRIHÅND Vi var ret sikre da vi sad og snakkede og dette design og vi gik dernæst videre med en ipad/tablet og smartphone version, og da hjemmen skulle være responsiv, var det enkelt nok et tegne disse designs, Vi holdt stadig fast i det symmetriske logo, men nu skulle boblerne ikke ligge på linje, men i tablet versionen skulle der være 2 bobler under og 2 over, og på smartphone versionen skulle de ligge i en lang række nedadgående, Logoet skulle tilpasse sig efter hvilken størrelse skærm der blev brugt sådan at logoet ikke fylder det hele. Da vi så alligevel sad med papiret lavede vi en test med at lave det så boldene var placeret tilfældigt inden for hver deres boks og når man så genindlæste n ville boldene flytte placering, dette ville dog være en mere kompliceret måde at skulle lave det på når der skulle skrives kode til det. Så det hoppede vi hurtigt væk fra, men ikke kun på grund af arbejdet der lå bag i det men også på grund af udseendet, det ville skabe forvirring hos brugeren og at skulle flytte blikket mere en højst nødvendigt for at kunne læse det man ville frem til. 7 af 16

8 Vi syntes selv vi var færdige nu, og begyndte med et mere professionelt design med farver og rette linjer i stedet for blyant skitser, Andreas arbejde i Gimp og lagde farver på baggrund og logo, bolde osv. Jo tættere vi kom på vore blyant skitser, jo mere prøve vi at rykke rundt på boldene og placere dem i disse forskellige punkter på n. Vi fik så den idé at sætte dem på en parallel linje med logoens bue i stedet for, og det syntes vi gav et rigtig fedt udseende som en for. Indtil videre VERSION TEGNET I GIMP havde vi ikke skænket underrne en tanke og det blev vore næste mål, hvordan skulle de egentlig konstrueres, skal der komme en helt nye op med anden baggrund og hvordan skulle det egentlig se ud i praksis, vi sad et stykke tid og tænkte over hvordan det skulle opbygges. Vi var alle i gruppen enige om at baggrunden skulle forblive og logoet skulle have samme placering, men hvordan skulle det så forekomme med resten af det, vi havde forslag om at der bare skulle stå tekst når man klikkede på fx. priser at der så stod oplysninger omkring priser på hans udførte arbejde osv. Det ville bare være lidt kedeligt i længden at der kun var tekst, så derfor kom vi på den anden idé at den angivne undergruppe blev stående på den plads og der hvor de andre bobler så forsvandt, og der i stedet kom tekst, det var den idé vi var mest opsat på ang. undergrupperne. Der blev nu taget stilling til kodning osv. og imens vi kodede os frem til det ønskede resultatet, skete der igen forvandling i mellemtiden, ikke ang. forn, men med undergrupperne, nu fandt vi ud af at der skulle laves en fade animation hvor den undergruppe man klikkede på flyttede sig ind til center lige under logo, og der nu kom tekst under boblen i stedet og boblens navn ændrede sig til tilbage. For at komme tilbage skulle man bare klikke på boblen igen og man var tilbage til forn hvor man derefter kunne vælge en anden undergruppe, hvor der skete den samme animation, bare til den tilhørende undergruppe. 8 af 16

9 DESKTOP VERSION WEBSITE Medieproduktion Det gælder om at få hans hjemme ud til folket, og vise hans kunder at nu der altså kommet ny opgraderet version af hjemmen, det kunne fx foregår via Facebook, hans firmabil eller en form for brochure, avis opslag eller lignende. Test Vi testede det på et par personer, og syntes det så fornuftigt ud. Vi viste dem vores re-designede website og hans nuværende. Men de mente at man nok skulle have beholdt den gamle gule farve, da det er det man kender hans hjemme på. Men vi valgte at lave det om til en mere beroligende farve, som ikke er skrigende. De syntes det var fedt at på bolden kom der til at stå tilbage og på den måde ikke skulle hen på tilbage knappen i webbrowseren først. Offentliggørelse Vi vil tage kontakt til Bjarne for at vise ham n, og evt. høre om han vil have den så han kan gøre brug af den og overtage den. Ville han gøre brug af den, kunne man lave noget reklame på hans bil som man ofte ser i bybilledet, at han havde fået en hjemme. Det fx være "klik ind på min eller noget. Vi er helt sikkert interesseret i at han overtager n, og kan bruge den som sin officielle. 9 af 16

10 Målgrupper Låsesmedens målgrupper er bred, da han jo skifter låse og opsætter alarm systemer. Det er alle der har en dør, og fx skal have skiftet lås, eller sat låse i. Hjemmen skal være overskuelig, så målgruppen nemt skulle kunne finde rundt. Segmenter og livsstil Minerva-moddellen Herunder tager vi udgangspunkt i Minerva-moddellen Minerva-modellen anskueliggør, hvilken samfundsmæssig samt livstilstype målgruppe man har med at gøre i forhold til at skulle brande sig selv. Det er derfor hensigtsmæssigt at definere dette, således man kan markedsføre sig selv målrettet og dermed virkningsfuldt. Modellen er inddelt efter 4 overordnede segmenter: Materialistisk, Moderne, Idealistisk samt traditionelt, hvilket beskriver den samfundsmæssige/livsstilskultur den enkelte person agerer efter i sin dagligdag, når der skal handles. Den segment gruppe i Minerva modellen er en blanding mellem traditionel og idealistisk, altså dem som frygter vold, at der måske bliver indbrud, og gerne vil have orden i deres hus. Så de kan lægge sig til at sove og låse døren og være trygge. 10 af 16

11 Aida-modellen Aida-modelle er en forkortelse for Attention, Interest, Desire og Action. Ligesom kanylemodellen er denne model også en kommunikationsmodel. Opmærksomhed: Opmærksomheden falder på det stadig samme logo, men så vi har opgraderet lidt, med en ny baggrund og andre farver. Vi har valgt at beholde figuren, fordi det er det hans kunder kender ham på. Interesse: Her fås lysten til at kigge videre på n og læse om hvad det er de har gang i. Fx de nye bolde du kan klikke ind på og se nærmere på hans firma. F.eks. priser og hvilket område han dækker, Produkter han sælger og montere kan også ses derinde. Ønske: På n er der lagt vægt på, at Nakskov låseservices hjemme er blevet mere kundevenlig. At det ikke bare den kedeligt hvor du ikke har nogle valg, og bare kunne kan se kontakt oplysninger. Handling: Vi vil gerne gøre n lækker, så kunderne får lyst til at købe han ydelser/produkter. Vi vil også sætte certifikater ind, der viser at han er autoriseret fx "Ruko" forhandler. Det gør at kunderne bliver trygge når de er inde på n klikker rundt på hans produkter. 11 af 16

12 Grafisk design Hvordan vores visuelle design på hjemmen egentlig er komponeret i forhold til udseende og udtrykkelse. Layout Omkring BOV (balance, overblik, variation) Balance vedrører placeringen af elementer i en samlet grundstruktur og har betydning for, om målgruppen oplever layoutet som harmonisk eller disharmonisk. Overskuelighed mangler, kan målgruppen ikke orientere sig intuitivt mellem elementer, der hører sammen og er adskilte. Variationen mangler, bliver kompositionen kedelig og det visuelle hierarki uklart. B - balance, når man bare kigger på hjemmen kan man tydeligt se symmetrien i hjemmen. Vi har en centerlinjen ned gennem n, man kan tydeligt se venstre og højre spejler sig i hinanden. Det vi har prøvet at skabe er en symmetri mellem logo og boblerne, det har vi gjort på den måde at boblerne benytter samme buede linje logoet skaber, og bruger den i boblernes placering. Centerlinien Logoens buedelinje Samme buede linje forstørret men parrallel med boblernes placering O - overskuelighed, omhandler gestaltloven 1. Loven om figur og (bag)grund 2. Loven om nærhed 3. Loven om lukkethed 4. Loven om symmetri 5. Loven om lighed som består af 5 love 12 af 16

13 1. Lov, omkring figur og baggrund, man får ikke denne fortvivlelse når man kigger på vores web hvad der er baggrund og hvad der er figur, vi har en tydelig opfattelse af at boblerne ligger oven på den orange baggrund og at den orange baggrund ligger oven på den grå baggrund, da vi har lavet en skygge både over og under den orange baggrund giver det en dybde effekt og man for den forståelse at den ligger oven på den grå baggrund. 2. Lov, nærheden i billedet, nå vi igen kigger på hjemmen angående boblerne og tænker på emnet nærhed, så for vi den opfattelse af at der ikke er en form for forbindelse mellem boblerne, men mere at de her emner er adskilt fra hinanden men samtidig indgår i hjemmens helhed, det der bliver lidt svært her er at skabe en nærhed i hjemmen så den ikke virker så fjerne, derfor blev vi også ned til at ligge boblerne på den måde som vi har gjort med logoets bue osv. fordi når du kigger på boblerne så minder det dig om din oldemors fine perle kæde hvor perlerne hænger på snoren om hendes hals, det er også den effekt vi har prøvet at skabe her, at de er forbundet gennem en usynlig perlekæde. 3. Lov, lukketheden i hjemmen, hvor er den egentlig lukket? Vi har ikke rigtigt nogen form for lukkethed udover at teksten i boblerne er lukket inde i selve boblen, det er den eneste effekt vi kan se hvor vi opfatter det som lukket, og det er jo også meget godt fordi så er boblerne forbundet med teksten og omvendt. 4. Lov, Symmetrien har vi været inde på, og vi vægtede symmetrien i hjemmen virkelig højt, derfor har vi fået dette resultat. 5. Lov, ligheden i forhold til farvene der er valgt er ens, ens farve til bobler så de forbindes med hinanden på en helt anden måde end hvad vi ser i nærheden. Det gør også at hjemmen bliver meget ens, men der er ikke brug for meget forskellighed i hans hjemme, da størrelsen på den ikke er det helt vilde. V - Variation og kontrast. Kontrast er et af de vigtigste grafiske virkemidler til at skabe variation, så læseren intuitivt kan orientere sig mellem vigtigt og mindre vigtigt. Kontrast betyder at etablere en modsætning mellem elementerne fx. De 4 typer kontraster rund - kantet = Form kontrast stor - lille = Størrelses kontrast mørk - lys = Styrke kontrast oppe - nede = Placerings kontrast Form kontrast, der er en tydelig form kontrast i forhold til baggrund, logo & boblerne, baggrunden har de her skarpe kanter som en firkant, logoet har det afslappede ovale look og bobler har den her cirkel formede bold. Det syntes vi skaber et rigtigt godt sammenspil med 3 forskellige former, hvis man begynder at putte flere forskellige former ind, vil det give et ret indviklet udeende alt i forhold til størrelsen på hjemmen selvfølgelig. Størrelses kontrast, i størrelsen er der ikke så stor det forskel, men der er en forskel som er stor nok, det vi gerne vil skabe er balance med hvilke ting der er vigtige, derfor er hans logo den tand stører end cirklerne, det viser at logoet er vigtigere end cirklerne, da det er logoet der er hans "image" ud til de lokale, det er det de kender, og boblerne er mindre af den årsag at når man har set hans logo så får man øjnene på dem og det giver brugeren interesse et der tekst og derfor klikker de på boblerne for at komme videre. Styrke kontrast, vi ser en form af kontrast mellem disse 3 farver der er anvendt i selve figur forbindelsen, vi har holdt det sådan at alle farver er kontrast af hinanden, nogen mere end andre, men den mørkegrå og orange, har en flot kontrast da de ingen af dem er helt ude i helt sort, eller helt gul. De har begge en mørk nuance i det i forhold til den lysegrå, som skiller sig meget ud, det giver god forbindelse hvor ting slutter og starter, og kontrasten mellem den lysegrå og teksten i boblerne er tydeligt da tekst virkelig skal fremstå som noget vigtigt. 13 af 16

14 Placerings kontrast, den væsentligste placering kontrast er at det som er højere er vigtigt, der tænker vi at logoet er højst og derfor det vigtigste på hans hjemme, det er tydeligt at se hvad hans hjemme omhandler. Boblerne kommer som det nederste da men ligesom har skabt sig et overblik og nu er klar til at klikke på en af boblerne og læse lidt mere om ham. Farver og farvevalg Kulør den kendte kulør er orange som er en sekundær farve, den har vi valgt mest på grund af at det er noget folk genkender ham på, da både hans skilt og hans firma bil er denne farve, også fordi det er en enormt afslappende farve, den er ikke vild og aggressiv gul som hans foregående hjemme var. Intensitet/mætningen er lige tydeligt, på den måde at den har den her matte behagelige farve dvs. der er ingen skin i den. Nuance, lysheden i den orange farve er på et behageligt niveau, så folk ikke bliver blindet af farven, men stadig har et overblik. Logo og farvevalg, vi har valgt at lave logoet som et monokromt logo dvs. at der er stor kontrast forskel mellem logoet og dets baggrundsfarve. Boblernes tekst farve, det er ikke 100% sort, men har en grå intensitet, brugeren finder den ikke grå men mere sort, men kigger man nærmere kan man tydeligt se den ikke er 100% sort Typografi Typografien er Arial Black for at gøre skriften tydelig og let læseligt, både for gamle og unge, det er ikke en svært skrifttype at tyde, og kontrast forholdet mellem baggrund og tekst er høj. Det underrne er der ikke valgt nogen form for tekst da vi ikke har fået svar ang. div oplysninger. Webkommunikation Med vores meget simple design, kan brugere med det samme finde svar på de spørgsmål, som de måtte have. Det er utrolig vigtigt når det kommer til webkommunikation, at brugeren med det samme kan finde det personen leder efter, hvis brugeren ikke kan det går personen videre til en ny med det samme. Vi har fokuseret meget på at n skal være brugervenlig. Det har vi opnået ved at have absolut minimalt indhold når man kommer ind på n, og en meget overskuelig måde at navigere på n. Når man kommer ind på n, har man 4 muligheder, man kan se priser, hvilke services han udfører, hvor stort et område han er villig til at tage ud i og kontaktinformation. Når man så har trykket på det man gerne vil vide mere om, får man hurtigt overskuelig information om det emne man har valgt og så kan man gå tilbage og kigge videre på de andre emner. Vi har lavet et Flow chart der viser hjemmens opbygning, det er enkelt og overskueligt. 14 af 16

15 Kode Når man skal kode en hjemme, er det vigtigt at huske hvilke programmeringssprog, der bliver brugt til hvad. Til at styre hvad der skal være på hjemmen, bruges der HTML. Til at bestemme layout og udseende, bruges der CSS. Til at styre ns adfærd, bruges der JavaScript. Det første vi gjorde når det kom til kodning af n, var at sætte en Viewport op, som bliver brugt senere til at bestemme hvordan n skal ændre sig alt efter om man er på mobil, ipad eller computer. Derefter galt det om, at få sat elementerne ind i HTML filen, så vi kunne begynde at styre layout. Det tog ikke lang tid før at vi indså, at vi ikke kunne få logoet til at sidde som vi gerne ville, så vi endte med at dele det i to, så den øvre del af logoet, kom i en div for sig selv, og det samme med den nedre del. Så kunne vi sætte baggrundsfarve for billederne individuelt. Vi valgte at bruge det samme princip til at afskille de øvre bobler, fra de nedre eftersom at hvert div tag starter en ny linje som standard. Når vi så havde sat alle vores elementer ind i HTML filen, begyndte vi på at arbejde på layoutet i CSS. Vi havde fået billederne til at sidde nogenlunde som de skulle, så vi begyndte på at tilføje breakpoints til den responsive del af webn. Efter at have tilføjet de breakpoints vi syntes var nødvendige, begyndte vi på at overveje hvordan n skulle reagere på at man trykkede på de forskellige menuer. Idéen var at boblerne skulle slide ud når man trykkede på en af dem, hvorefter teksten til det billede man trykkede på, skulle komme frem. Det viste sig så at det ikke var muligt at bruge en slide funktion, på grund af den måde som de fleste browsere behandlede billederne på. Nogen af billederne ville flytte sig ud af den div som de var i, og derefter slide videre ud. Det så helt forkert ud, så vi valgte at prøve med en fade effekt i stedet. Det virkede fint, lige indtil at vi opdagede at når man trykke på et af de billeder der havde float: right; stilen ville flytte sig til et forkert sted, efter man trykkede tilbage. Sådan var det i alle browsere, bortset fra Firefox hvor det virkede helt fint. Men man kan jo ikke designe en hjemme efter at alle bruger en specifik browser, så vi begyndte at lede efter workarounds altså en alternativ måde at gøre tingene på som ikke ender med at gøre tingene forkert. Det endte så med at i stedet for at vise boblerne igen, måtte vi få n til at genindlæse når man trykkede tilbage. 15 af 16

16 Det der sker i koden overover, er at JavaScript ved hjælp af et plugin som hedder jquery, opdager når brugeren trykker på Tilbage billedet. På anden linje bruger vi så JavaScript til at ændre stilen display til none altså ingen, på teksten til det element vi trykkede på sidst. På tredje linje bruger vi igen jquery, denne gang til at afspille fade out animationen på vores tilbage element. Vi har givet fadeout funktionen to parametre, det første er hastigheden af animationen, og den anden er en funktion, som bliver kørt efter animationen er færdig. I vores tilfælde vil vi have n til at genindlæse. Funktionen location.reload(); har et parameter, som bestemmer om n skal genindlæses fra serveren, eller fra browserens cache. Standard indstillingen er at genindlæse fra browser cachen, som er det vi gerne vil have den til, for at undgå at man får den hvide skærm, som man normalt får inden en er helt indlæst. På den måde vil vores brugere faktisk ikke lægge mærke til at n er genindlæst, men tror egentlig bare at man kommer tilbage til hovedmenuen. At gøre det på den måde har tilladt vores kode at være betydeligt kortere, og vi undgår den fejl, hvor billederne bliver misplacerede. Konklusion Henrik: Selvom at der har været en del bøvl med at få n til at se ud som planlagt, syntes jeg at vi er kommet til et godt resultat, som opfylder de mål og forventninger som vi havde. Siden tilpasser sig som planlagt alt efter om den ses på en stor computer skærm, eller en mindre ipad / smartphone skærm. Nogle af de mennesker som vi bad om input på n fra, er generelt kommet med positiv feedback, som indikere at vi har ramt rimeligt godt, om ikke andet er det en opgradering i forhold til hvad n var før. Andreas: Alt i alt syntes jeg det er gået godt, og vi er kommet frem til et rigtigt godt resultat, selvom det har været hårdt, har det været arbejdet værd, der har været nogle få problemer og forhindringer men ingen som vi ikke har kunnet løse med diverse google søgninger osv. Vi alle har arbejdet godt og har gjort vores job godt, vi har alle været ind over det meste og har alle en god forståelse af både Kode og rapport skrivning og designmæssige valg. Jonas: Vi har formået at få en god responsiv hjemme ud af det. Lidt anerledes end de skitse vi tegnede og havde fået ideer til. Selvfølgelig er der plads til forbedring, da den ikke er færdig endnu, men man har et fornuftigt billede af hvordan hjemmen kommer til at kunne se ud. Næste træk kunne være at opsøge ham og vise ham n og høre om han ville være interesseret i at over tage n. Det kunne være rimelig fedt hvis han overtog den og brugt den som sin officielle. Ændringer/forbedrelse Vi kunne have gjort en bedre indsats med at skabe kommunikation med Bjarne og få hans indblik på n, det kan så komme på forbedrelse og vi kunne eventuelt kontakte han senere hen og høre om han var interreseret i vores idé og hjemme. Lavet det lidt mere velfungerende på tablet og smartphone. 16 af 16

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

Responsiv hjemmeside

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

Læs mere

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

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

Kommunikation/IT A 2014

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

Læs mere

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

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

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

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

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

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

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

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

# 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

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

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

Indholdsfortegnelse Valg af opgave... 2 Introduktion... 2 Problem... 2 Målgruppe... 2 Afsender... 2 Budskab... 2 Kodning... 3 Effekt...

Indholdsfortegnelse Valg af opgave... 2 Introduktion... 2 Problem... 2 Målgruppe... 2 Afsender... 2 Budskab... 2 Kodning... 3 Effekt... Indholdsfortegnelse Valg af opgave... 2 Introduktion... 2 Problem... 2 Målgruppe... 2 Afsender... 2 Budskab... 2 Kodning... 3 Effekt... 3 Information... 3 Programmering... 3 Design... 4 Brochure... 4 Hjemmeside...

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

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

det færdige resultat

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

Læs mere

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

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

Læs mere

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

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

Læs mere

Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding

Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding BRAINSTORM Tema: Vinter, alaska, bjerge, blå & hvide farver. Farver: Colourlovers eksempler: http://www.colourlovers.com/palette/605421/crystal_ice_palace

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

Portfolio Andreas Stjerneklar Kristensen. Multimedia Designer Eksamen 1. Semester

Portfolio Andreas Stjerneklar Kristensen. Multimedia Designer Eksamen 1. Semester Portfolio Andreas Stjerneklar Kristensen Multimedia Designer Eksamen 1. Semester Indledning Design Skitser ASK logoet Teknologivalg No database Javascript Eksempel Udviklingsmuligheder Mere relation mellem

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

GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST

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

Læs mere

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

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

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

Læs mere

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

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

Læs mere

Grafisk Design. 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

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

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

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

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

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

Workflow REDEGØRELSE WORKFLOW OPGAVE WHO WOULD YOU SMACK FOR A NEW RECORD?

Workflow REDEGØRELSE WORKFLOW OPGAVE WHO WOULD YOU SMACK FOR A NEW RECORD? REDEGØRELSE WORKFLOW OPGAVE WHO WOULD YOU SMACK FOR A NEW RECORD? Forord Spil har altid været en stor del af mit liv, og har altid spillet meget Playstation, siden jeg var helt lille. Eftersom jeg blev

Læs mere

Projektdokumentation. Tidsplan. Dag 1. Dag 2. Dag 3. Dag 4. Dag 5. Dag 6. Dag 7. Dag 8. Dag 9. Dag 10. Dag 11. Dag 12

Projektdokumentation. Tidsplan. Dag 1. Dag 2. Dag 3. Dag 4. Dag 5. Dag 6. Dag 7. Dag 8. Dag 9. Dag 10. Dag 11. Dag 12 Projektdokumentation - af Dennis Iversen Tidsplan Dag 1 Research, mindmap, skitser til logo og start på logo. Dag 2 Færdiggørelse af logo, målgruppe og segment fastslået, skitser visitkort, start på visitkort.

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

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

WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm

WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm WOODKID The Golden Age Banner Projekt - 1 Semester, CPH Business, MUL-A13E Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm Projektbeskrivelse Vi har designet og animeret tre forskellige bannere

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

Yosef Saleh, Ilyas Tulumcu Oguzhan Polat, Mohammad Kaddoura Kom/IT C Kl. 1.2

Yosef Saleh, Ilyas Tulumcu Oguzhan Polat, Mohammad Kaddoura Kom/IT C Kl. 1.2 1/ Indholdsfortegnelse Indledning... 3 Dokumentation... 4 Hjemmeside og logo design... 14 Valg af skrifttype... 15 AIDA... 16 Arbejdsroller og opgaver... 17 Logbog for vores proces (Ugevis)... 19 Konklusion...

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

Afsluttende projekt. KOM/IT afsluttende projekt. Kevin, Mads og Thor 6/5/2011

Afsluttende projekt. KOM/IT afsluttende projekt. Kevin, Mads og Thor 6/5/2011 Afsluttende projekt KOM/IT afsluttende projekt Kevin, Mads og Thor 6/5/2011 Indholdsfortegnelse Case... 2 Problemformulering... 3 Målgruppe analyse og defination... 3 Laswell kommunikationsmodel... 3 AIDA

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

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

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

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

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

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

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

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

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

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

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio Endeligt layout Forside Om mig Portfolio 1 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe

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

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

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

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

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

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

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

Sommerens Store Dille 2014

Sommerens Store Dille 2014 Sommerens Store Dille 2014 Site: http://chicdesigns.dk/hulahopring/index.html Af 1 Shiko Nzorubara Klasse: Mula A 2. Semester Vejleder: Merete Lindemann & Ivan Rosenvinge Frederiksen TABLE OF CONTENTS

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 5 STK. ØL / DRINKS / VAND. Opgaven. Farver. Målgruppe. Logo. Stil og stemning Familie, hygge og samvær.

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

Læs mere

Kommunikation/IT C - Afsluttende opgave 2011

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

Læs mere

Ud fra ovenstående vil den typiske Maileg kunde kunne placeres i det grønne segment i følge Minerva modellen. GRAFISK DESIGN. Moderne.

Ud fra ovenstående vil den typiske Maileg kunde kunne placeres i det grønne segment i følge Minerva modellen. GRAFISK DESIGN. Moderne. Opgave Vi er på vej til at lave en ny hjemmeside hvor vi fremadrettet skal til at sælge vores produkter direkte til kunderne. Vi vil gerne lave en hjemmeside som både virker legende men også overskuelig,

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

G R A F I S K D E S I G N L O G O

G R A F I S K D E S I G N L O G O GRAFISK DESIGN LOGO Andreas Ernst Tørnqvist / Grafisk Design Opgavebeskrivelse Jeg fik stillet opgaven at designe en iden ti tet til min vens nye It-support firma. Opgaven var fri, der var ingen krav,

Læs mere

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

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

Læs mere

Kommunikation/IT Samfundsfag. Frederik Adamsen, 3.5

Kommunikation/IT Samfundsfag. Frederik Adamsen, 3.5 Kommunikation/IT Samfundsfag Frederik Adamsen, 3.5 Contents Problemanalyse... 3 Projektmål og produktmål... 3 Diskussion og valg af løsning... 3 Platform... 4 Udformning... 4 Skitser... 6 Typografi og

Læs mere

Rapport Undervisningsmateriale.

Rapport Undervisningsmateriale. Skrevet af Morten & Jacob A. 1.5 HTX Roskilde 2011 Side 1 Rapport Undervisningsmateriale. Arbejdsgruppen bestod af: Morten, Jacob A. fra 1.5. Dato: 6. maj 2011 Skrevet af: Morten & Jacob A. Fag: Kom/IT.

Læs mere

Grafisk DESIGN. Hjemmeside

Grafisk DESIGN. Hjemmeside Grafisk DESIGN Grafisk DESIGN Hjemmeside indhold 3 Opgaven 0 Skitser 4 Inspiration Skitser/proces 5 Farvevalg og typografi Færdigt logo 6 Skitser 3 Proces 7 Fotostil 4 Udvalgte koder 8 Storyboard og flowchart

Læs mere

program * opsamling * skype foredrag * online markedsføring

program * opsamling * skype foredrag * online markedsføring dagens program * opsamling * skype foredrag * online markedsføring opsamling visuel identitet * hvad synes I? * pitch * s/h + negativ * farver Logo Logo Logo Web Tryk #0000ff Pantone Blue 072c C 100 M

Læs mere

Sensus. Grafisk design og tilgængelighed

Sensus. Grafisk design og tilgængelighed Grafisk design og tilgængelighed Mange tilgængelighedsproblemer bliver skabt allerede i forbindelse med udviklingen af netstedets grafiske udtryk. Tilgængelige netsteder er ikke nødvendigvis ensbetydende

Læs mere

Hotel Hans Egede. Designmanual (råskitseret) Version 0.7 / oktober 2012

Hotel Hans Egede. Designmanual (råskitseret) Version 0.7 / oktober 2012 Hotel Hans Egede Designmanual (råskitseret) Version 0.7 / oktober 2012 Introduktion 1 Hotel Hans Egede ønsker ny grafisk design identitet, og har i den forbindelse forespurgt på et oplæg fra forskellige

Læs mere

Projekt i Programmering C Menu til hjemmeside.

Projekt i Programmering C Menu til hjemmeside. Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller

Læs mere

Cykelhandler projekt KOM / IT

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

Læs mere

Projektbeskrivelse RSS Læser

Projektbeskrivelse RSS Læser HTX Roskilde 3.4 Projektbeskrivelse RSS Læser IT & Programmering Elev: Christian Pihlkjær Hjortshøj og Joans Henk Jensen Dato: 19-03-2013 1. Indledning Vi er i klasse 3.4 blevet introduceret til vores

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

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

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

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk GRAFISK DESIGn Webdesign Min chef ville gerne have lavet en webside til firmaets udlejningshus i Italien. Huset på 200 m² er et traditionelt toskansk landhus i tre etager og ligger i gåafstand fra middelalderlandsbyen

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

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

Photofiltre nr. 85 Lave grafikbillede hvor vi bruger plugins side 1

Photofiltre nr. 85 Lave grafikbillede hvor vi bruger plugins side 1 Lave grafikbillede hvor vi bruger plugins side 1 Vi skal nu sammensætte et grafikbillede hvor vi bruger 2 plugins som kan hentes på min hjemmeside www.pensionistedb.dk under Photofiltre. Denne hedder Image

Læs mere

Designmanual for websider

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

Læs mere

GRAFISK DESIGN. Proces. Ideudvikling. »Jeg er blevet bedt om at udvikle nogle ideer til at udvikle John Frandsens nuværende annoncesider«

GRAFISK DESIGN. Proces. Ideudvikling. »Jeg er blevet bedt om at udvikle nogle ideer til at udvikle John Frandsens nuværende annoncesider« P f t r o o i l o 1 H GRAFISK DESIGN»Jeg er blevet bedt om at udvikle nogle ideer til at udvikle John Frandsens nuværende annoncesider«proces For at udvikle annoncen måtte jeg først klarlægge, hvad der

Læs mere

Skærmlayout på websiden

Skærmlayout på websiden Skærmlayout på websiden Af Kaj Søndergaard En bog i et flot layout er dejlig at få i hånden. Man får lyst til at bladre i bogen for at finde ud af om indholdet ser ud til at være værd at ofre tid på. Hvis

Læs mere

PHP Quick Teknisk Ordbog

PHP Quick Teknisk Ordbog PHP Quick Teknisk Ordbog Af Daniel Pedersen PHP Quick Teknisk Ordbog 1 Indhold De mest brugte tekniske udtryk benyttet inden for web udvikling. Du vil kunne slå de enkelte ord op og læse om hvad de betyder,

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

GRAFISK WORKFLOW. 1 Grafisk workflow

GRAFISK WORKFLOW. 1 Grafisk workflow GRAFISK WORKFLOW 1 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet

Læs mere

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie Eksamensopgave 2012 Aarhusportalen Melissa Emilie Indhold Indhold... 1 Aarhusportalen... 2 Projektbeskrivelse... 2 Hvem er kunden... 2 Målgruppe... 2 Hvad ønsker vi at opnå... 2 Temaer... 2 Tidsplan...

Læs mere