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

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

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

Læs mere

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

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

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

Jonas Michael Johansen. Kommunikation/IT. Facebook- side

Jonas Michael Johansen. Kommunikation/IT. Facebook- side Jonas Michael Johansen Kommunikation/IT Facebook- side Indholdsfortegnelse INDLEDNING... 3 LAYOUT... 3 MEDIA... 4 KOMMUNIKATIONSARBEJDETS 6 FASER... 4 KOMMUNIKATIONSMODELLER... 6 MÅLGRUPPE/ MINERVAMODELLEN...

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

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

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

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

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

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

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

Læs mere

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden

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

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

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

Læs mere

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

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

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

Læs mere

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

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

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

Læs mere

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

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

Redesign af Cinnober. Analyse af hjemmesiden Cinnober

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

Læs mere

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

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

Læs mere

NY IDENTITET TIL SCHWARZ

NY IDENTITET TIL SCHWARZ GRAFISK DESIGN NY IDENTITET TIL SCHWARZ Redskaber: Photoshop Illustrator Kundeprofil: Schwarz er en eksklusiv forhandler af senge og tilbehør i topklavlitet. Med deres store sortiment af kvalitetsmærker

Læs mere

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

Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt

Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt Roskildes tekniske gymnasium Kulløse Mijlømesse Afsluttende kom/it projekt Casper Hansen og Christian Hansen 26-04-2009 Indhold Indledning... 3 Planlægning... 3 Overvejelser... 3 Hvordan man kommer til

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

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Grafisk design Grafisk design l 3 Grafisk design l 4 Identitet til ny tøjbutik i form at logo, visitkort, paper bags, stickersmærker,

Læs mere

GRAFISK WORKFLOW - RESPONSIV WEBSIDE

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

Læs mere

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

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

Læs mere

KT OR LOW PRODUKTION // WORKFLOW

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

Læs mere

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

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

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

Grafisk produktion & workflow

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

Læs mere

Programvalg Dreamweaver CC, html Photoshop CC 2015

Programvalg Dreamweaver CC, html Photoshop CC 2015 Grafisk design Opgaven Opgaven er fiktiv. Denne hjemmeside skal ses som en lille appetitvækker. Hvad er Troldhede og hvad kan man finde i naturen, der er rundt om byen? Jeg har selv stået for design af

Læs mere

WORKFLOW & PRODUKTION

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

Læs mere

Grafisk 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

Infographic Klasse arbejdsmiljø

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

Læs mere

OPGAVEBESKRIVELSE. Grafisk design process for Kolding Motion, logo, frontend hjemmeside samt t-shirt og skilt.

OPGAVEBESKRIVELSE. Grafisk design process for Kolding Motion, logo, frontend hjemmeside samt t-shirt og skilt. 01. OPGAVEBESKRIVELSE Grafisk design process for Kolding Motion, logo, frontend hjemmeside samt t-shirt og skilt. OPGAVE Re-design Kolding Motions logo, nyt layout til deres hjemmeside samt kodning. Ny

Læs mere

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

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

Læs mere

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

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

Læs mere

Event. Projektbeskrivelse: (ALLE) Planlægning. Navne: Carina, Heise, Peter. Kommunikationsteori: Navne: Carina, Heise, Peter

Event. Projektbeskrivelse: (ALLE) Planlægning. Navne: Carina, Heise, Peter. Kommunikationsteori: Navne: Carina, Heise, Peter Projektbeskrivelse: (ALLE) Planlægning Event Formål: Navne: Carina, Heise, Peter Vores formål var at bygge et sammenhold i afdelingen samt at lave et markedsføringsprojekt for uddannelse HTX. Grunden til

Læs mere

GRUPPE 5 Line - Nanna - Thea - Sarah

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

Læs mere

# 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

HTX BUBBLEFUN EVENT

HTX BUBBLEFUN EVENT HTX BUBBLEFUN EVENT - 2015 PLAKAT RAPPORT VIDEO Lavet af: Andreas Heise, Mathias Larsen Indledning Denne rapport er delt op i 2 dele. Da den er udarbejdet fælles i klassen og internt i grupper. Del 1 er

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

Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016

Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016 Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016 GRAFISK DESIGN PROCES Opgaven Jeg designer og laver mine egne plakater i min fritid både illustrationer, manuelt grafik og fotografier

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

FACEBOOK SIDE. Udeboende studerende på SU. Mathias Larsen & Carina Hansen

FACEBOOK SIDE. Udeboende studerende på SU. Mathias Larsen & Carina Hansen FACEBOOK SIDE Udeboende studerende på SU Mathias Larsen & Carina Hansen Indhold Indledning:... 2 Brainstorm:... 2 Emnevalg:... 2 De seks faser:... 2 Problemanalyse:... 2 K strategi:... 3 Idéudvikling:...

Læs mere

Grafisk Design 70% Skitser

Grafisk Design 70% Skitser Grafisk design Grafisk 2 PRODUKT Som et led i den online markedsføring af BBQ Wing it, har jeg valgt at lave et website, med fokus på information. Det er et website, der er baseret ud fra lærte funktioner

Læs mere

GRAFISK 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

AFSLUTTENDE PROJEKT KOM/IT

AFSLUTTENDE PROJEKT KOM/IT 5/5-2017 AFSLUTTENDE PROJEKT KOM/IT Daniel & Frederik Klasse 1.1 Indledning Vi startede med at få valget stillet om vi ville lave noget med e-learning, databehandling og præsentation eller vi kunne lave

Læs mere

Gruppe 9 Visuel Interface Design, 27/09/2011

Gruppe 9 Visuel Interface Design, 27/09/2011 Gruppe 9 Visuel Interface Design, 27/09/2011 Først øvelse. Lav en designanalyse i tekst og billeder af det udleverede website www.kariyer.net. Vi startede med en hjemmeside, der så ud som følgende: Gennemgående

Læs mere

GRAFISK PRODUKTIONSFORSTÅELSE

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

Læs mere

Se hjemmesiden på:

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

Læs mere

Analyse af websiden FeelgoodBakery.dk

Analyse af websiden FeelgoodBakery.dk 1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Analyse af websiden FeelgoodBakery.dk Link til redesign af webside: http://nadiacah.com/uge40/landingpage.html Hvem

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

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

Guds Fred Grafisk produktionsforståelse

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

Læs mere

Forside 1: Bagside og bogryg:

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

Læs mere

GRAFISK WORKFLOW. Hjemmeside design til Chem-Tec Plating

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

Læs mere

Oliver Marco van Komen Afsluttende opgave 02-05-2014. Kost ved slidgigt. Case 2. Personlig fysisk hjælp

Oliver Marco van Komen Afsluttende opgave 02-05-2014. Kost ved slidgigt. Case 2. Personlig fysisk hjælp Kost ved slidgigt Case 2. Personlig fysisk hjælp Problemobservering Sygdommen slidgigt også kaldes artrose er den mest udbredte led sygdom overhovedet, det kan medføre voldsomme smerter. Sygdommen påvirker

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

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

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

FACEBOOK SIDE! Kommunikation & IT!! Andreas Heise Christiansen - 25. feb. 2014! FACEBOOKSIDE - KOM/IT

FACEBOOK SIDE! Kommunikation & IT!! Andreas Heise Christiansen - 25. feb. 2014! FACEBOOKSIDE - KOM/IT FACEBOOK SIDE Kommunikation & IT Andreas Heise Christiansen - 25. feb. 2014 1 Introduktion til projektet 3 DE 6 FASER 3 Fase 1: Problemanalyse 3 Problem 3 Markedsundersøgelse 4 Fase 2: K-strategi 4 Kommunikationstrategi

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

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

WORK- FLOW PLATFORM WEBSITE H2

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

Læs mere

GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE

GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE WEBSHOP TIL KLITMØLLER COLLECTIVE Klitmøller Collective er et nyt lifestyle brand, som udspringer fra fiskerlejet Klitmøller i det nordvestlige Jylland.

Læs mere

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

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

Læs mere

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

Henrik Pedersen 3. HTX Jonas Johansen 16/01/2015. Visuel Identitet Ditlev Hellesøe

Henrik Pedersen 3. HTX Jonas Johansen 16/01/2015. Visuel Identitet Ditlev Hellesøe Visuel Identitet Ditlev Hellesøe 1 Indholdsfortegnelse Problemanalyse... 3 K Strategi... 3 Idéudvikling... 4 Medieproduktion... 5 Test... 6 Offentliggørelse... 6 Konklusion... 6 2 Problemanalyse Ditlev

Læs mere

Afsluttende opgave Webdesign Den 24. maj 2007 Klasse 1.2

Afsluttende opgave Webdesign Den 24. maj 2007 Klasse 1.2 Side 1 af 1 Afsluttende opgave i Kom/IT Den afsluttende opgave har jeg valgt at lave alene. Jeg har valgt opgave 1. webdesign, på grund af min interesse for dette. Opgaven går ud på at designe et brugervenligt

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

Kulløse Miljømesse. Nikolaj, Tobias og Jesper

Kulløse Miljømesse. Nikolaj, Tobias og Jesper Kulløse Miljømesse Nikolaj, Tobias og Jesper I denne rapport vil vi forklare hvordan vi lavede en reklame som handler Kulløse Miljømesse samt hvordan vi afprøvede den og fik resultater. Dette er et projekt

Læs mere

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

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

Læs mere

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

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

Læs mere

Analyse af websiden FeelgoodBakery.dk

Analyse af websiden FeelgoodBakery.dk Analyse af websiden FeelgoodBakery.dk Link til redesign af webside: http://nadiacah.com/uge40/landingpage.html Hvem er afsenderen? - Feelgoodbackery Hvem er målgruppen? - Den moderne familiemor - Det moderne-fællesskabsorienterede

Læs mere

Avisforside. Vi har skrevet en avis om studier ved Aarhus Universitet

Avisforside. Vi har skrevet en avis om studier ved Aarhus Universitet Avisforside Vi har skrevet en avis om studier ved Aarhus Universitet Vi vil meget gerne høre dine umiddelbare tanker om forsiden til avisen. Hvad forventer du dig af indholdet og giver den dig lyst til

Læs mere

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

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

Læs mere

Analyse af website: cinnobershop.dk

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

Læs mere

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

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

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

Læs mere

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

Kom/IT Grafisk design 13/12/2006

Kom/IT Grafisk design 13/12/2006 Farver og former Farver betyder en stor del i dit værk, om det er et grafisk værk, eller et kunstbillede, det vigtig ved at bruge farver er at det giver værket liv, det beskriver sin stemningen og giver

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

2/ Sofia Seidler H3 Svendeprøve

2/ Sofia Seidler H3 Svendeprøve GRAFISK DESIGN OPGAVEN: Jeg har valgt at lave en fiktiv opgave for et nystartet brand ved navn, som sælger t-shirts og plakater med dyreprint som motiver. Jeg har haft fokus på deres logo, visitkort, gogards,

Læs mere

GRAFISK WORKFLOW H1 MARIA SCHELDE

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

Læs mere

GRAFISK 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 PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016

GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016 GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016 grafisk WORKFLOW // DOKUMENTATION opgaven // Jeg har i min opgave lavet et responsive onepage website for et årlig event kaldet Dirt

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

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

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

Læs mere

Grafisk design. Opgavebeskrivelse. Stil og æstetik. Typografi: Briefing. styrker: svagheder: Målgruppe/segmentering. MuligheD: trusler:

Grafisk design. Opgavebeskrivelse. Stil og æstetik. Typografi: Briefing. styrker: svagheder: Målgruppe/segmentering. MuligheD: trusler: Grafisk design 17 Grafisk design Opgavebeskrivelse Design af Frankie & Liberty s hjemmeside i samarbejde med kunden. Henrik Borup, som også er medejer af diverse andre børnetøjsmærker. Min opgave gik ud

Læs mere