Project 5: Portfolio Remake

Save this PDF as:
 WORD  PNG  TXT  JPG

Størrelse: px
Starte visningen fra side:

Download "Project 5: Portfolio Remake"

Transkript

1 Project 5: Portfolio Remake Art is a tree of life. William Blake December 2014 Januar semester, MulA, Multimediedesigner uddannelse Copenhagen Business Academy, Lyngby

2 Indholdsfortegnelse 1. Forberedelse Opgavens analyse og formulering Brugertest af den gamle hjemmeside Inspiration Moodboard Design Brief Website Content Map (PBS) Work Breakdown System (WBS) Gantt-diagram Risk Management Informationsarkitektur Content skrivning Website hierarki Grid Wireframes Skitser af siderne Visuel identitet Videre-udvikling af det gamle koncept: 3-Identitets Træ Skrifttype Andre visuelle elementer Kodning Kodning med grid Kode struktur Validering og redigering Konklusion...24

3 1. Forberedelse Jeg begyndte at arbejde på dette projekt ved at undersøge alle mulige emner: andre studerendes hjemmesider fra tidligere år, web-agencies hjemmesider og andre spændende designerwebsites. Jeg har også gennemgået nogle undervisningsmaterialer på Fronter og kigget igennem studiebøgerne for at danne et overblik over hvad jeg skulle skrive på min ny hjemmeside og hvordan den burde se ud. Men først og fremmest skulle jeg definere opgaven selv, ikke kun følge lærernes krav, men også mine personlige mål med den Opgavens analyse og formulering I opgave beskrivelsen, som vi fik fra lærerne, står der at formålet med porteføljen er at præsentere og dokumentere vores faglige niveau og vise vores faglige udvikling samt gøre os bevidst om, hvad vi har arbejdet med, og hvad vi har lært. Således består opgaven i at redesigne den nuværende portefølje (projekt 1) at opdatere porteføljens indhold Som jeg forstod det, skulle man gennem redesign af websitet demonstrere sin tilegnede viden inden for de 4 læringsområder som vi fik undervisning i gennem 1. semester. De områder er: 1. Kommunikation 2. Design og visualisering 3. Interaktion 4. Virksomhed Krav til porteføljens indhold var at: dokumentere udviklingsprocessen under design af porteføljen: projektplanlægning, informationsarkitektur, designskitser, wireframes, mockups etc.; inkludere dokumentation af tidligere projekter, som linker til de oprindelige løsninger, projektbeskrivelser og rapporter; inkludere remakes af tidligere projekter (i betragtning af lærernes kommentarer og egne forbedringsideer); reflektere over sin læring på en gennemskuelig måde for at vise sin udvikling. Spørgsmål til svar: Hvad har jeg lært under forløbet? Hvordan hænger det sammen med mit forhåndskendskab til emnet og denne opgavetype? Hvad forventede jeg at lære? Hvad har jeg mere brug for at lære? Hvad vil jeg foretage mig for at komme til at lære dette? ANASTASIA KELLER 1

4 Udover ovenstående krav har jeg også sat mine egne mål med opgaven: 1) at vise hvad jeg kan lave ved hjælp af mine tidligere kompetencer (projektledelse, kommunikationsplanlægning, konceptudvikling, tegning), 2) at anvende mine nye tilegnede evner og viden (kodning, designteori) og 3) at øve mig i de kundskaber (fx visse programmer), som jeg ikke nåede at udvikle tilstrækkeligt i løbet af semestret Brugertest af den gamle hjemmeside En af opgavens krav var også at lave en brugertest af den gamle hjemmeside før man begynder at redesigne. Tilsyneladende var formålet at finde fejl som skal rettes og at evaluere websitets udseende i forhold til brugbarhed og designprincipperne som vi lærte senere i semestret. Jeg har lavet gangstertest og bruger evaluering på Forsiden og Projekter-siden. På Projekter-siden nedunder er der et problem med navigation til undersider, hvor Header ikke svarer til undersidens navn. Der er også forbedringsanbefalinger til Forsiden nedunder. ANASTASIA KELLER 2

5 ANASTASIA KELLER 3

6 1.3. Inspiration Jeg har kigget gennem hundredevis af hjemmesider under hele projektforløbet - først for at få overblik over det jeg skal lave og så senere for at lede efter designideer og en rigtig stemning. I begyndelsen var det interessant at se hjemmesider af andre studerende fra forrige år. Jeg blev især imponeret af en hjemmeside af Olena Mikhanosha i forhold til dens struktur og grundighed. Jeg fik også inspiration fra som udstiller de bedste designer- og web-agencies hjemmesider. Der fandt jeg en hjemmeside, som udstrålede den helt rigtige stemning, jeg ville have på min egen hjemmeside. I stedet for menu på dens forside er der en tegning af et kort, hvor side-titler virker som stednavne. Jeg synes den er meget kreativ og stadig funktionel. En fragment af forsiden på ANASTASIA KELLER 4

7 Moodboard Når vi lærte om designprocessen, blev vi introduceret til moodboards - en metode, hvor man indsamler og sammensætter inspirerende billeder eller andre objekter omkring et projektet-relaterede Moodboard emner. Mange designere bruger denne metode. Det gjorde jeg også ANASTASIA KELLER 5

8 Oprindeligt var min porteføljes designkoncept bygget op omkring et billede af et æbletræ (3-identitets træ). Dette billede ville jeg beholde på den nye hjemmeside, men den skal selvfølgelig udarbejdes videre. Dette moodboard viser forskellige slags billeder af æbletræer. Nogle af dem valgte jeg fordi de kunne hjælpe mig med at tegne træelementer, såsom æbler og blomster, rigtigt. Nogle andre billeder viser bare en stemning, som jeg gerne ville formidle gennem visuelle elementer på min hjemmeside. Oprindeligt tænkte jeg på at inkludere et animeret dyr, som et egern eller en kanin på forsiden. Men jeg droppede ideen, fordi den var for kompliceret i forhold til konceptet og dens implementering. 2. Projektplanlægning I andet trin af projektforløbet nedbryder jeg opgaven i mindre dele og udarbejder en plan over hvordan og hvornår jeg skal implementere dem. For at forstå opgaven endnu bedre skriver jeg først et designbrief, som er en kort beskrivelse af projektets omfang, målgruppe, formål og nogle andre formalia. Jeg har allerede defineret projektets krav og mål, både eksterne og interne, i sektionen 1.1 Opgavens analyse og formulering. I designbriefet skriver jeg også om projektets formål, men mere specifikt Design Brief I design briefet ville jeg give svar på nogle af spørgsmålene fra studiebogen 29 spørgsmål. En moderne retorik til planlægning af kommunikation 1. De spørgsmål er almindelige når man vil lave et design, hvis formål er at kommunikere noget til en gruppe af modtager, fx en reklame eller pr kampagne. Ved dette her projekt promoverer jeg mig selv, som en dygtig studerende (forhåbentlig) og som en god designer i fremtiden, samt som et interessant og kreativt menneske. Jeg valgte kun at svare på få basale spørgsmål: Hvem? Laver Hvad? Til Hvem? Vil sige hvad? Til hvilken effekt? Hvem er afsenderen? Jeg, som er en studerende på multimediedesigner uddannelse på CPH Business, samt en projektleder og kunstner. Hvad er produktet? Primær definition: Produktet er et website som læringsprojekt på multimediedesigneruddannelsen spørgsmål. En modern ritorik til planlægning af kommunikation af Jan Krag Jacobsen (s ), 1. semester, multimediedesigner uddannelse ANASTASIA KELLER 6

9 Sekundær definition: En prototype af en designerportefølje, som jeg løbende vil udarbejde og bruge i fremtiden som min personlig profil til arbejdsgivere eller evt. kunder (hvis jeg bliver en selvstændig designer). Hvem er målgruppen? Primær målgruppe er lærerne, som vurderer mine kundskaber og den viden jeg har tilegnet mig under 1. semester. I fremtiden, når jeg begynder at søge arbejde, ville arbejdsgivere bliver den primære målgruppe. På det tidspunkt ville jeg justere hjemmesiden til det formål. Sekundær målgruppe er andre interesserede og studerende på CPH Business. Hvad vil jeg sige? Ud over lærernes krav til indhold på min hjemmeside, der var nævnt tidligere i sektionen 1.1 Opgavens analyse og formulering (projektrapporter, links til tidligere udarbejdede løsninger og deres remakes, og beskrivelse af læringsprocessen), ville jeg også demonstrere andre kundskaber, som jeg havde udviklet tidligere. Jeg ville også vise min personlighed gennem designet af hjemmesiden. Jeg tror det er lige så vigtigt at kommunikere klart om mine personlige evner og tilbøjeligheder, som om mine professionelle kundskaber. Hvad vil jeg nå med det? Som jeg har defineret før, er det primære formål med opgaven at demonstrere sine kundskaber til lærerne og beskrive læringsprocessen. Derfor er den primære målgruppe er lærerne. Desuden fungerer porteføljen som et præsentationsmedium til 1. semesters eksamen. Mit formål er således at præsentere mine medlærte kundskaber bedst muligt og at få dermed en god karakter Website Content Map (PBS) I forberedelsesfasen har jeg indsamlet nogle filer og billeder relaterede til tidligere projekter, som jeg ville bruge i porteføljen. Men da omfanget over alle hjemmesidens elementer var så stort, besluttede jeg at sortere dem i en slags Content Map (Indholdskort), for at få bedre overblik over hvilke sektioner ville der være brug for på hjemmesiden. Under lektionerne om projektplanlægning hos Frederik lærte vi om Product Break System (PBS), som er en sorterings- grupperingsmetode omkring alle produktelementer med henblik på at identificere de opgaver, man skal udføre i produktionsfasen. I begyndelsen var det klart for mig at indholdet på fleste hjemmesider falder i 3 hoved kategorier: tekstuelle, visuelle og funktionelle. ANASTASIA KELLER 7

10 Website Content Map nedunder viser alle elementer inden for hver kategori. Tekst Billeder Funktionelle elementer Projekter (1,2,3,4,5): - opgave beskrivelse - rapport (link) - remake (link) - website (link) Læring: - omkring hver projekt (1-5) - inden for4 læringsområder - beskrivelse af kompetencer Om mig: - tekst om mig - CV Vejledende beskrivelser på sider - Kontakt oplysninger Forsidens billede: træ Logo Portrait billede til siden Om mig Identitets ikoner: - æbler, - blade, - blomster - evaluerings grene Kompetence-ikoner: - Il, Ph, Id, Ea, Html, Css, Jq - kom-on, projekt led., design, teamwork, koncept udv., osv. Andre visuelle elementer: - design knapper - fil tags (PDF) - socialle media tags (Fb, lign.) Knapper - menu knapper - link knapper (PDF) - links Kontakt formular Gallery slides ANASTASIA KELLER 8

11 2.3. Work Breakdown System (WBS) Efter jeg fik styr på indholdet, lavede jeg WBS. Opgaverne, som evt. kan nedprioriteres, er markeret i lyseblå. Portfolio Remake: Projektplanlægning Foreberedelse Projektplanlægning Informationsarkitektur Visuel identitet Kodning Testing og redigering Rapport Opgave analyse og formulering Design Brief Content skrivning og struktur Koncept udvikling HTML sider Validation Rapport skrivning Content indsamling PBS-WBS Website hierarki Logo og forside billede design CSS styling Brugertest Tilføj rapporten til websitet Brugertest af den gamle portfolio Gantt Chart Grid, Wireframes Farve- og fontvalg JQuery og animationer Debugging Aflevering Inspiration fra andre sider Risk Management Skitser af siderne Ikoner og andre visuelle elementer Content uploading Tekst redigering Moodboard Evt. mock-ups Responsive design Tilføjning af sidste elementer - - Projekt-trin - Hoved opgaver - Ekstra opgaver (kan undgås, hvis ikke der nok tid ANASTASIA KELLER 9

12 2.4. Gantt-diagram Så udarbejdede jeg et Gannt-diagram, som viser opgavernes rækkefølge og varighed. Men jeg har ikke fulgt det præcist, da der stadig er en masse opgave, som jeg har ikke nok erfaring i, især i design og kodning. ANASTASIA KELLER 10

13 2.5. Risk Management Jeg var usikker på hvor meget tid nogle af opgaverne ville tage, primært fordi jeg gjorde nogle ting for første gang. Derfor lavede jeg Plan A og Plan B. I WBS skemaet ovenfor er alle opgaverne markeret enten i lysegrøn, som betyder høj-prioriteret eller i lyseblå, som betyder nedprioriteret. Plan A er den oprindelige plan, som kan ses i WBS. Plan B består af at jeg skal droppe alle eller nogle af opgaverne markeret i blå hvis jeg kommer til at mangle tid. Risk Management er selv markeret som en 2. prioritet i WBS, men jeg syntes det var vigtigt at nævne hvad jeg mener med sådan en farvekode. Senere i forløbet har jeg besluttet at droppe Mockups og Brugertest pga. sygdom. Den slags uventede tilfælde skal man også forudse i sin plan. Til gengæld har jeg reserveret noget buffertid i den sidste uge af projektforløbet, hvor der kun er Testing og Content uploading tilbage. 3. Informationsarkitektur For at forstår hvordan man organiserer information på en hjemmeside på en struktureret måde, skal man først analysere indholdet man vil have på sin hjemmeside. Jeg har allerede tidligere lavet et content map i afsnittet 2.2. Website Content Map (PBS), som viser 3 forskellige indholdskategorier til hjemmesiden: tekstuelle, visuelle og interaktive ellementer. Først fokuserer jeg på at udarbejde alle de tekstuelle elementer, fordi der er særlige krav til hvilke oplysninger jeg skal have på hjemmesiden. Og så skal jeg bygge det visuel design omkring teksterne Content skrivning I begyndelsen har jeg defineret alle krav og mål med projektet (i sektion 1.1. Opgavens analyse og formulering) og opsamlet de oplysninger jeg allerede havde fra tidligere projekter: rapporter, designdokumentation, content fra den gamle hjemmeside, osv. Men jeg skulle også skrive masse af nye tekster: beskrivelse af dette projektets forløb, samt beskrivelser omkring læring gennem alle andre projekter. I dette trin handler hjemmesiden om at vise min læringsudvikling. Derfor ville jeg også beskrive læringen omkring de kompetencer vi fik undervisningen i løbet af semestret. Alle kompetencer ligger inden for 4 undervisningsområder: Design og visualisering, Interaktion, Virksomhed og Kommunikation. Blandt kompetencerne er der alle de programmer vi øvede os i: Photoshop, Illustrator, InDesign, EdgeAnimate, DreamWeaver, samt viden omkring designprincipperne, projektledelse metoder og brugbarhedstest. ANASTASIA KELLER 11

14 Så skrev jeg tekster omkring 15 forskellige kompetencer og beskrev min læringserfaring til hvert projekt. Jeg besluttede at bruge den gamle beskrivelse om mig fra den tidligere hjemmeside med hensigt på at skrive den om i fremtiden Website hierarki Efter jeg var færdig med at skrive, kunne jeg se at der var for meget tekst til kun at have det i en sektion, Læring. Derfor besluttede jeg at fordele læringsbeskrivelse på 2 sider: Projekter og Kompetencer. Således ser Websitets Hierarki sådan ud: Anastasia Keller Portfolio Forside Projekter Læring Kunst Om mig Kontakt Overblik Overblik Kunst projekter Om mig Semester 1 Semester 1 Udstillinger CV Semester 2 Semester 2 Galleri Semester 3 Semester 3 Semester 4 Semester 4 ANASTASIA KELLER 12

15 3.3. Grid I løbet af design- og visualiseringsundervisningen lærte vi at det er meget nyttigt at bruge grids i sit design. De hjælper med at sætte struktur på information, samt at designe alle elementer ifl. designprincipperne, såsom princippet om det Gyldne snit 2, hvor man skal sikre at vigtige oplysninger og designelementer ligger inden for øverste eller nederste tredje dele af feltet. Derudover er det lettere at genskabe det samme design på alle sider med et grid, hvilket er vigtigt for genkendeligheds skyld. Der findes mange forskellige typer grids: fx med 7, 8, 12 og 16 spalter. Jeg valgte et standard 12-spaltet grid i 960 px x 650 px størrelse fra Det er let at skille i 4, 3 og 2 lige grupper spalter (60 px hvermed 20 px imellem) for at placere forskellige mængder af oplysninger og adskillige design elementer. Jeg brugte det som skabelon, når jeg tegnede skitser og wireframes, og også under kodning. På billedet kan man se at jeg har også opdelt grid et i 6 horisontale lige rækker. Gylden snits linjer er fremhævet i rød Designprincipper af Ian Wisler-Poulsen (s ) ANASTASIA KELLER 13

16 3.4. Wireframes Baseret på det valgte grid lavede jeg wireframes af 3 typer sider: Forside, en side med tekst og en galleriside. Under udarbejdelsen tog jeg hensyn til de fejl jeg fandt på min gamle hjemmeside ved hjælp af Gangstertest i afsnit 1.2. Brugertest af den gamle hjemmeside. Blandt de forbedringer jeg lavede på den nye hjemmeside er der: Brødkrummesti er tilføjet; Menuen er flyttet til midten og lokal navigation er markeret tydeligere (evt. med hjælp af farver); Kontakt og sociale media tilføjet til footeren; Website id tag om Multimediedesign tilføjet. Wireframe 1: Forside Wireframe 2: Tekstuel-side Wireframe 3: Galleri-side ANASTASIA KELLER 14

17 3.5. Skitser af siderne Både før og efter jeg havde lavet wireframes, tegnede jeg mange forskellige varianter af siderne i hånd. Det var vigtigt for mig at visualisere præcist hvor forskellige elementer skulle være på siderne: både tekstuelle og visuelle. Her kan ses en hurtig tegning af Forsiden lavet i Illustrator. ANASTASIA KELLER 15

18 4. Visuel identitet Da websitets struktur var klar, gik jeg i gang med at tegne de visuelle elementer. Men først ville jeg færdiggøre websitets koncept. Jeg har allerede besluttet at bruge konceptet fra den gamle hjemmeside, som jeg dog vil tilpasse til nuværende indholds krav. I sektionen Moodboard fandt jeg på en stemning til min hjemmeside, hvor hovedelementet er et æbletræ på Forsiden, tegnet i en eventyrlig tegnefilmsstil blandet med illustrationsstil. Det betyder, at alle linjer skal tegnes nøjagtigt igennem med stærke, klare farver. Således er farvevalg meget vigtigt Videre-udvikling af det gamle koncept: 3-Identitets Træ Den oprindelige ide bag det 3-identitets træ var at det viser 3 retninger i min personlige udvikling: erfaring som projektleder og kommunikator (baseret på min første uddannelse og arbejdserfaring), som kunstner (baseret på min hobby) og som designer (som jeg drømmer om at blive). Tilsvarende har træet 3 grupper grene: en med blomster der symboliserer min kunst, en med blade der symboliserer min uddannelse og professionelle baggrund, og en med æbler der hentyder til resultater fra tidligere erfaringer, nemlig designprojekter. For at imødekomme projektets indholdskrav, havde jeg ændret definitionen på de 3 grupper grene sådan, at de blomstrede grene skal stå for min kunst (som før), grenene med blade repræsenterer mine kompetencer og æblerne på den 3. gruppe grene står for mine projekter i løbet af undervisningen i skolen. Derudover vil jeg lave de 3 greneområder til navigations knapper, som fører til tilsvarende menu-sektioner: Projekter, Kompetencer og Kunst. Det 4. tekstuelle sektion Om mig vil jeg præsentere med min portræt på træet med et skilt Om mig under, der man kan også trykke på. Undersiden Kontakt behøver ikke at være præsenteret på træet. Ideen med re-design var at lave træet selv til en navigationsobjekt på forsiden i stedet for menuen. Jeg tænkte på at lave en ekstra knap i toppen af forsiden, som man kunne trykke på for at evt. åbne menuen. Selvfølgelig ville menuen være visibel på alle andre sider. Men jeg droppede ideen for enkelheds skyld. Desuden ville det være svært at kode. Nedunder kan man sammenligne det gamle 3-identitets træ med det nye 3-identitets træ: ANASTASIA KELLER 16

19 Gammel 3-identitets træ Nye 3-identitets træ 4.2. Farvevalg til 3-identitets træ Farverne på træet er en del af konceptet, derfor tror jeg det er ok at jeg bruger mange farver. Der er dog kun 4 hoved farver, som navigationsmenu punkter: lyserød som på blomsterne til Kunst-siden, grøn som på bladene (en af de grønne nuancer) til Kompetencer-siden, orange som på æblerne (blanding af rød baggrund og gule højlys på æbler) til Projektersoden og blå som på skiltet Om mig og min bluse på portrættet til Om mig-siden. Alle andre farver er enten nuancer af de hoved 4 farver eller farver til en naturlig træ-palet, fx brun. ANASTASIA KELLER 17

20 Farverne og deres id numre kan ses nedunder på den Basic Palet. Jeg valgte at bruge de samme hoved farver, men mindre mættede på menu knapper, når de bliver aktiveret med hover funktion. De kan ses i Menu-paletten nedunder. Til undermenu punkter, Projekter og Kompetencer, bruger jeg endnu mindre mættede farve, som kan ses i den Sekundære palet. Alle andre visuelle elementer på hjemmesiden er tegnet ved brug af disse farver. Til teksterne bruger jeg sort og mørkebrun fra den Basic palet og 2 nuancer af orange til links i almindelig og hover funktion. ANASTASIA KELLER 18

21 4.3. Logo redesign Det gamle logo Selv om det gamle logo også inkluderer et billede af et træ (halvdelen af det), repræsenterer det et helt anderledes koncept. Regnbuen på den anden halvdel af logoet står for kreativitet og inkluderer 7 regnbuefarver. Det tænkte jeg ville være for meget, både i forhold til farverne og til konceptet. Derudover er 3 konceptuelle gren-retninger ikke ordentligt fremhævet. Og mit navn er ikke tydeligt nok i denne håndtegnede skrift. Derfor besluttede jeg at ændre logoet. Det gamle logo Logo version 1 Da jeg ville lave min hjemmeside enkel, men elegant, besluttede jeg at bruge 3-identitets træet også på logoet. Men til gengæld skulle det være enklere end hovedbilledet for at få det til at fungere i forskellige størrelser, med og uden farver. Så jeg prøvede først at sætte en sort silhuet af det træ jeg havde tegnet i en cirkel. Sådan ser den første nye version ud. Logo version 1 ANASTASIA KELLER 19

22 Logo version 2 final logo Der er for mange detaljer i den første version. Så tegnede jeg et andet billede af et træ, hvor 3 grenområder er markeret på en enklere måde med kun 3 elementer (blomster, blade, æbler) på hver gren. Træet er let at se i forskellige størrelser. Jeg har også tilsat mine initialer i rødt under træet, samt mit navn med en flot kaligrafisk skrifttype til højre fra bogmærket. Under navnet står der en motto: Art- Concept-Design, som beskriver de områder jeg positionerer mig selv inden for. Under design processen brugte jeg princippet om Det Gyldne Snit, som kan ses på skitserne nedunder. Logo version 2 i alternative farver (med grid linjer) Final logo version uden og med navnetræk ANASTASIA KELLER 20

23 4.4. Skrifttype Til logoet brugte jeg 2 skrifttyper: Pinyon Script til navnet og Nunito til motoen. Den første skrifttype er elegant og kalligrafisk. Den ser ud som en signatur på et kunstværk og det var min mening. Den anden skrift er mere læsbar, men stadig kreativ. De bløde, afrundede kanter giver en behaglig afslappet fornemmelse og passer godt med initialerne under træet. For at vise de andre siders tilknytning til konceptet demonstreret på Forsiden bruger jeg nogle visuelle elementer fra forsidens billede på de andre sider. Iflg. navigationsindikationen på 3-identitetstræet fører æblerne til Projekter-siden, bladene til Kompetencer-siden og blomsterne til Galleri-siden. Tilsvarende ville jeg bruge æble-ikoner for at indikere projekter på Projekter-siden (i en individuel farve til hvert semester), bladene som evaluerings skala til Kompetencer-siden og blomsterne i forskellige lyserøde toner for at indikere forskellige typer kunstværker på Galleri-siden. Her er eksempler på designet af de visuelle elementer: På hjemmesiden anvender jeg 2 andre skrifttyper: Raleway til menuen og Multimediedesignerteksten, Lato til resten af indholdet. Den første er enkel nok, men stadig dekorativ og spiller godt sammen med Nunito skrifttypen på logoet. Lato skrifttypen er en Open Sans Serif skrift, som er godt tilegnet til at anvende i mindre størrelse til konventionelle tekster på hjemmesider Andre visuelle elementer Alle visuelle elementer har jeg tegnet mest i Illustrator. ANASTASIA KELLER 21

24 5. Kodning Det tog mig rigtig meget tid at tegne alle visuelle elementer til hjemmesiden, fordi der var mere arbejde i det end jeg troede. Så der var kun 1 uge tilbage til kodning og redigering. Jeg har også besluttet at droppe Testing-trinnet (Brugertest). Jeg ville koncentrere mig om at kode hjemmesiden så præcist som muligt iflg. min vision Kodning med grid Igen brugte jeg grid som et baggrund billede i min design, som kan ses nedenunder. Med grid et er det meget lettere at placere elementerne på det rigtige sted og at give dem den rigtige størrelse. ANASTASIA KELLER 22

25 5.2. Kode struktur Det var en ren fornøjelse at skrive koden i DreamWeaver, som er meget lettere at arbejde med end Notepad++, som jeg havde brugt før. Blandt andre muligheder i programmet anvendte jeg template funktion til alle sider, hvilket hjalp med at bevare konsistensen og genkendelighed på hjemmesiden og at spare tid når jeg ændrede i bl.a. menuen. Det var stadig en udfordrende opgave at færdiggøre koden, samt opstille alle elementer og validere det hele. Jeg har arrangeret koden i flere mapper ifl. de regler vi havde lært i interaktionsundervisningen. Websitets kode struktur kan ses nedunder: Code index.html sider Templates css img pdf js projekter Standardpage.dwt css-reset.css icons presentations validateform.js kompetencer style.css other reports galleri menu.css opgaver om mig kontakt ANASTASIA KELLER 23

26 På kodestrukturen kan man se at jeg har ændret websitets struktur lidt. Jeg har nemlig udskiftet menu-sektionen Kunst med Galleri og fjernet underpunkterne til den. Jeg gjorde det for at forenkle websitets struktur og designprocessen. Oplysningerne i sektionen Kunst var ikke en del af opgavens krav og havde til formål af at vise min personlige udvikling uden for undervisningen i skolen. Det kan jeg sætte ind senere. Indtil videre vil jeg sætte nogle af mine kunstværker der. Jeg kom ikke til at bruge jquery til den her hjemmeside, men jeg planlægge at gøre det som videreudvikling senere. Det samme gælder for responsive design. Jeg planlagte faktisk at gøre det, men det var svært at forstille mig hvordan hjemmesiden skal ser ud til sidst, så begyndte jeg at kode uden hensyn til responsive design, og så blev det for kompliceret at ændre det til sidst. Jeg håber at lave hjemmesiden responsive senere Validering og redigering Efter jeg var færdig med at sætte alle elementer ind på siderne, validerede jeg koden. Det er heldigvis rigtig let at gøre i DreamWeaver. Og der var oprindeligt heller ikke mange fejl i koden. Til Kontakt-siden brugte jeg en eksisterende valideringsformular fra Jeg har også tilpasset styling på siderne lidt mere og redigerede tekst i steder hvor det var nødvendigt. Og så uploadede jeg koden på min domain: Hvorefter skrev jeg den her rapport færdig. Jeg håber den giver god overblik og refleksion over designprocessen af min første hjemmelavede hjemmeside. 6. Konklusion Det var et både spændende og udfordrende projektforløb. Jeg synes der var for mange krav til tekster, så til sidst var jeg nødt til at skrive nogle af dem hurtigt færdigt. Så jeg bør sige at web-skrivning og det tekstuelle indhold var ikke mit fokus i dette projekt. I stedet valgte jeg at koncentrere min indsats omkring konceptudvikling og design af visuelle elementer. Selvom det måske stod i vejen for et af mine personlige mål om at udvikle de svageste kundskaber, føltes det på en måde som det rigtige at gøre. På den ene side tror jeg at design handler om en god ide eller et koncept som skal skinne igennem hele websitet. Det giver en følelse af helhed og mening. På den anden side hjalp denne tilgang mig med at udvikle mine kompetencer inden for de mest interessante områder, såsom design og billedredigering i Photoshop og Illustrator, samt at udføre mine designideer gennem koden. Jeg nåede dog ikke at øve mig i det andet vigtig område: animation vha. Edge Animate og jquery. Jeg håber at jeg får mulighed for at komme videre med det i de næste semestre. Og jeg glæder mig til at lære endnu flere interessante kundskaber. ANASTASIA KELLER 24

Project 5: Portfolio Remake

Project 5: Portfolio Remake Project 5: Portfolio Remake Art is a tree of life. William Blake December 2014 Januar 2015 1. semester, MulA, Multimediedesigner uddannelse Copenhagen Business Academy, Lyngby annastacy.k@gmail.com Indholdsfortegnelse

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

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

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

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

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015 1. Semester afsluttende Projekt Charlotte Bruhn MUL A December 2014 - Januar 2015 Redesign af online portfolio www.cbruhn.dk Side 1 Indholdsfortegnelse Formål 3 Planlægning 4 Designvalg 5 Moodboard 6 Informationsarkitektur

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

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

EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen

EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen Pia Jensen cph-pj103@cphbusiness.dk 1. semester eksamensprojekt MUL-A 2013 mul33.itkn.dk/eksamensprojekt/index.html EKSAMENS PROJEKT DECEMBER 2013 JANUAR 2014 Lærere: Thomas Hartmann Jesper Hinchely Ian

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

Portfolio Redesign Kamilla Klein 1. Semester eksamen

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

Læs mere

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

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

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

Afsluttende semesterprojekt - 1. Semester

Afsluttende semesterprojekt - 1. Semester Afsluttende semesterprojekt - 1. Semester Portfolio Redesign Multimediedesign CPH business Akademi Emilie Arved Eriksen MULA 2014-2015 Indholdsfortegnelse Mind-map... 4 PBS... 5 WBS... 5 GANTT... 6 Brugertest...

Læs mere

PROJEKT 4: WEBSITE DESIGN

PROJEKT 4: WEBSITE DESIGN Copenhagen Business Academy - Lyngby Samværsfestival for ældre Traditionen tro November 2014 1. Semester, Multimediedesigner uddennelse, MulA 1 Indholdsfortegnelse 1. Opgave beskrivelse.. 2 2. Web-agency

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

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

Multimediedesign på CPH-Business URL: www.gracet.dk. Eksamensopgave. Redesign af Portefølje. Grace Grigoria Tsatsaris

Multimediedesign på CPH-Business URL: www.gracet.dk. Eksamensopgave. Redesign af Portefølje. Grace Grigoria Tsatsaris Multimediedesign på CPH-Business URL: www.gracet.dk Eksamensopgave Redesign af Portefølje Grace Grigoria Tsatsaris 14 1 Brainstorm og ideudvikling: Jeg startede med at danne mig et overblik over projektet

Læs mere

Michella+Serritzlew+Jacobsen+

Michella+Serritzlew+Jacobsen+ Designmanual+ Afsluttende+projekt+1.+Semester++ Michella+Serritzlew+Jacobsen+ CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Indholdsfortegnelse PBS...3 WBS...3 Brainstorm...4 Wireframes...5

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

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

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

DOKUMENTATION AF EKSAMENS PROJEKT 2015

DOKUMENTATION AF EKSAMENS PROJEKT 2015 DOKUMENTATION AF EKSAMENS PROJEKT 2015 KATHRINE AMALIE RUSSELL HARDER CPH BUSINESS ACADEMY MUL-B 1 Indledning Til vores eksamens projekt fik vi til opgave at redesigne vores Wordpress portfolio som var

Læs mere

Dokumentation. Efter dokumentationsdelen findes der en stilguide, hvor der argumenteres for de endelige valg i forhold til udseendet.

Dokumentation. Efter dokumentationsdelen findes der en stilguide, hvor der argumenteres for de endelige valg i forhold til udseendet. Dokumentation På de følgende sider findes dokumentation for arbejdsforløbet under portefolioprojektet. Dette består primært af forskellige illustrationer af brainstorm, overvejelser vedrørende informationsarkitektur

Læs mere

Projekt 2, Bannere. Reklamebanner og landing-page for kulturnatten 2012. http://www.cph64.webkn.dk/banner/index.html. Vejledere: DSK, MORO, FDTA, IWPO

Projekt 2, Bannere. Reklamebanner og landing-page for kulturnatten 2012. http://www.cph64.webkn.dk/banner/index.html. Vejledere: DSK, MORO, FDTA, IWPO Projekt 2, Bannere Reklamebanner og landing-page for kulturnatten 2012 http://www.cph64.webkn.dk/banner/index.html Vejledere: DSK, MORO, FDTA, IWPO CLmul-a12e 1. Semester, 2. projekt Lasse Mathias Bruun

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

Multimediedesigner. Identitet. Adventuresport

Multimediedesigner. Identitet. Adventuresport Multimediedesigner Identitet Adventuresport Projekt 1 2. sem. feb. 2014 1. Indledning I bliver bedt om at designe forslag til en prototype til et selvstændigt website og den tilhørende visuelle identitet.

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

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

Grafisk produktionsforståelse

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

Læs mere

Førsteårsprøven 2015. Projektbeskrivelse 2. Semester Multimediedesigner

Førsteårsprøven 2015. Projektbeskrivelse 2. Semester Multimediedesigner Førsteårsprøven 2015 Projektbeskrivelse 2. Semester Multimediedesigner Projektbeskrivelse Formål Som afslutning på første studieår skal I gennemføre et tværfagligt projektforløb, der skal afspejle væsentlige

Læs mere

GRAFISK DESIGN GRÅ ROSA VIOLET. BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf.

GRAFISK DESIGN GRÅ ROSA VIOLET. BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf. GRAFISK DESIGN BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf. KRAV TIL UDTRYKKET Moderne Enkelt Minimalistisk Responsivt Brugervenligt

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

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

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas INDHOLD GRUPPEMEDLEMMER...3 DESIGNBRIEF...4 KOMMUNIKATIONSANALYSE...4-5 KOMMUNIKATIONSMODEL...5 ARGUMENTATION FOR DESIGNPRINCIPPER...6

Læs mere

Gruppe: 2 Hold: MulB Årgang 2013 Lærere: Merete Geldermann Lützen & Jesper Hinchely

Gruppe: 2 Hold: MulB Årgang 2013 Lærere: Merete Geldermann Lützen & Jesper Hinchely Bannerpage: http://spicegirls.creativefolder.dk/bannerpage/ Landingpage: http://spicegirls.creativefolder.dk/ René Skovgaard Andersen cph-ra73@cphbusiness.dk Stig Hamborg Nielsen cph-sn9@cphbusiness.dk

Læs mere

3. Semester Mul-A PROJEKT 3 FUNDING. Louise Marie Bonke Charlotte Bruhn Stine Dorry Meulengracht Madsen. http://cbruhn.dk/cfunding

3. Semester Mul-A PROJEKT 3 FUNDING. Louise Marie Bonke Charlotte Bruhn Stine Dorry Meulengracht Madsen. http://cbruhn.dk/cfunding 3. Semester Mul-A PROJEKT 3 Louise Marie Bonke harlotte Bruhn Stine Dorry Meulengracht Madsen http://cbruhn.dk/cfunding Projekt 3 Indholsfortegnelse Idéudvikling Indledning Målgruppeanalyse Moodboard Funktionalitet

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

Visuel ID. 2. projekt 2. sem. marts 2012. og kommunikation. Multimediedesigner

Visuel ID. 2. projekt 2. sem. marts 2012. og kommunikation. Multimediedesigner Multimediedesigner Visuel ID og kommunikation 2. projekt 2. sem marts 2012 www.knord.dk Trongårdsvej 44 DK 2800 Kgs. Lyngby > Så tager vi cyklerne frem.. Kampagne for mere cyklisme 1. Indledning I bliver

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

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

srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008

srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008 Gruppe 9: Besir Redzepi, Jacob Pedersen, Garwun Jeffrey Lai og Sean Rørgren srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008 Indholdsfortegenelse

Læs mere

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

Projekt 2, Banner. Project 02 - Banners. Gruppenummer: 8

Projekt 2, Banner. Project 02 - Banners. Gruppenummer: 8 Projekt 2, Banner Project 02 - Banners Gruppenummer: 8 Navne/mail: Kasper Nick Thomasen(k.n.thomasen@gmail.com), Christian Lund (christianlund_667@hotmail.com), Alexander Kofoed (laemse@hotmail.dk) Hold:

Læs mere

CSS CSS CODEING CODEING COLOUR HTML PORTFOLIO RAPPORT //2016 MARIE EGEBERG MULTIMEDIE DESINER MULB

CSS CSS CODEING CODEING COLOUR HTML PORTFOLIO RAPPORT //2016 MARIE EGEBERG MULTIMEDIE DESINER MULB Id COLOUR HTML CSS Ai CODEING CSS CODEING Ai PORTFOLIO RAPPORT //2016 MARIE EGEBERG MULTIMEDIE DESINER MULB 2016-18 09-01.17 INDHOLD s.01 Indledning s.02 Brainstorm s.03 Negativ brainstorm s.04 PBS s.05

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

E-magazine: Stop spild af mad PROJEKT 2, SEMESTER 2, MulA, marts 2015

E-magazine: Stop spild af mad PROJEKT 2, SEMESTER 2, MulA, marts 2015 E-magazine: Stop spild af mad PROJEKT 2, SEMESTER 2, MulA, marts 2015 af Anastasia Keller, Raquel Lorenzana Hesdorf, Benjamin Vinje og David Popescu 1. Den oprindelige ide Oprindeligt havde vi en ide om

Læs mere

MULTIMEDIEDESIGNER 1. ÅRS PRØVE

MULTIMEDIEDESIGNER 1. ÅRS PRØVE MULTIMEDIEDESIGNER 1. ÅRS PRØVE Eksamensprojekt, 2. semester, forår 2010 TEMA: E-HANDEL Erhvervsakademiet København Nord Udleveret mandag d. 3. maj 2010 Afleveres i 4 eksemplarer senest d. 28. maj kl.

Læs mere

Website design, projekt 4

Website design, projekt 4 Website design, projekt 4 Mette, Nikolaj, Alexander, Julie I dette projekt har vi fået et design- brief af markedsføringsøkonomerne. Designet- briefet omhandlede, at vi skulle lave en hjemmeside omkring

Læs mere

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk Kunde Bogforlaget Frydenlund A/S Produkt www.his2rie.dk Opgave Hjemmesiden før Redesign af hjemmesiden www.his2rie.dk, som ejes af forlaget. Min opgave lød på, at udforme et nyt design til hjemmesiden,

Læs mere

Grafisk 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

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

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

Læs mere

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

Visuel ID. 2. projekt 2. sem. marts 2011. og kommunikation. Multimediedesigner

Visuel ID. 2. projekt 2. sem. marts 2011. og kommunikation. Multimediedesigner Multimediedesigner Visuel ID og kommunikation Fly away Fly away I wish that I could fly Into the sky So very high I'd fly above the trees Over the seas in all degrees To anywhere I please Let's fade into

Læs mere

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

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

Læs mere

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING

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

Læs mere

# 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

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

Van, Olaf, Stine & Nicolette Style and Experience 02-12-2011

Van, Olaf, Stine & Nicolette Style and Experience 02-12-2011 Vi mener, at vi imødekommer brugergruppens behov og ønsker, da vi har skabt et nyt og anderledes design. Vores målgruppe stræber konstant efter nytænkning og søger events de kan deltage i med deres venner.

Læs mere

P ORTFOLIO 2017 MLTIMEDIA DESIGN M ARIE EGEBERG MUL B Marie Egeberg

P ORTFOLIO 2017 MLTIMEDIA DESIGN M ARIE EGEBERG MUL B Marie Egeberg P ORTFOLIO 2017 MLTIMEDIA DESIGN M ARIE EGEBERG MUL B 09.01.17 INDHOLD 1 2 Indledning Farver 10 11 Font Brainstorm 9 Design Principper Info. arkitektur 12 3 Negativ brainstorm Mockup 8 4 7 13 15 14 Redesign

Læs mere

Grafisk workflow. Se siden her: www.cormas.dk

Grafisk workflow. Se siden her: www.cormas.dk Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html

Læs mere

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

RAPPORT. Identitet - Mad og Livsstil. Jonna Gaardbo. Claus Buus Christensen. Sergio Calero. Ole J. Hansen. projekt 2

RAPPORT. Identitet - Mad og Livsstil. Jonna Gaardbo. Claus Buus Christensen. Sergio Calero. Ole J. Hansen. projekt 2 RAPPORT over projekt 2 Identitet - Mad og Livsstil http://thecookclub.cbuus.dk 2. semester Multimediedesigneruddannelsen udført af MULa - Gruppe 1: Jonna Gaardbo Claus Buus Christensen Sergio Calero Ole

Læs mere

PROJEKT 3, 1. SEM WEBSITE FROM CLIENT BRIEF

PROJEKT 3, 1. SEM WEBSITE FROM CLIENT BRIEF Links til portfolio Anna Emely Jensen Oliver Alexander Vedel Trojahn Maja Scheel Kvint Cecilie Sørensen http://www.annaemely.wordpress.com https://www.olivervedel.wordpress.com http://www.cphbusiness.makvi.dk

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

Kreativt brief. Line Hasse Kirkegård - HOLD B. Dato: 18. septemper 2015 Kunde: Line Hasse Kirkegård - Multimediedesign studerende Projekt: Portfolio

Kreativt brief. Line Hasse Kirkegård - HOLD B. Dato: 18. septemper 2015 Kunde: Line Hasse Kirkegård - Multimediedesign studerende Projekt: Portfolio Webdesign processen Line Hasse Kirkegård - HOLD B Kreativt brief Dato: 18. septemper 2015 Kunde: Line Hasse Kirkegård - Multimediedesign studerende Projekt: Portfolio Jeg har taget udgangspunkt i casen:

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

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

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

Læs mere

JB Plastics visuelle identitet... 2. Et nyt logo... 2 Visitkort og brevpapir... 4 PowerPoint... 6. Designprocessen... 6

JB Plastics visuelle identitet... 2. Et nyt logo... 2 Visitkort og brevpapir... 4 PowerPoint... 6. Designprocessen... 6 0 Indholdsfortegnelse JB Plastics visuelle identitet... 2 Et nyt logo... 2 Visitkort og brevpapir... 4 PowerPoint... 6 Designprocessen... 6 WBS (Work Breakdown Structure)... 6 Procesnedbrydning og SWOT...

Læs mere

CPH Business Academy. Lærere: JHI & TUJE www.ysy.dk/cfunding-it/index.html 04-10-2015

CPH Business Academy. Lærere: JHI & TUJE www.ysy.dk/cfunding-it/index.html 04-10-2015 Crowdfunding Modul 3 CPH Business Academy. Lærere: JHI & TUJE www.ysy.dk/cfunding-it/index.html 04-10-2015 Josephine Lorentzen Camilla Norqvist Hansen Shiya Yang Michella Serritzlew Jacobsen Kamilla Melnyczok

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

NANNA HANSEN - TLF. 28939031 - nanna-1993@hotmail.com http://bynannahansen.com. Ansøgning

NANNA HANSEN - TLF. 28939031 - nanna-1993@hotmail.com http://bynannahansen.com. Ansøgning Ansøgning I starten af 2016 skal jeg i praktik. Efter at ha gået 1 og 2 semester på uddannelsen multimediedesign, vil jeg sende uopfordret ansøgninger til virksomheder med grafisk design og kommunikation.

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

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

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

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

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

CSR. 2. Semester 1. projekt http://s733l.dk/csr/index.php. Udarbejdet af MulA: Anders Lauridsen. Casper Christiansen Casper.christiansen1992@gmail.

CSR. 2. Semester 1. projekt http://s733l.dk/csr/index.php. Udarbejdet af MulA: Anders Lauridsen. Casper Christiansen Casper.christiansen1992@gmail. CSR 2. Semester 1. projekt http://s733l.dk/csr/index.php Udarbejdet af MulA: Anders Lauridsen Andrs.lauridsen@gmail.com Casper Christiansen Casper.christiansen1992@gmail.com Jonatan Nielsen Jonatantwn@hotmail.com

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

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

REKLAMEBANNER FOR MEDINA

REKLAMEBANNER FOR MEDINA REKLAMEBANNER FOR MEDINA http://mul112.itkn.dk/medina/index.html Et projekt af gruppe 8, multimediedesign B, Cphbusiness 2013 CHRISTIAN SONNE ROSENDAHL, CPH-CR104@CPHBUSINESS.DK KAREN LISE KRAGELUND, CPH-KK151@CPHBUSINESS.DK

Læs mere

Visuel ID. 3. projekt 1. sem. okt. - nov. 2009. og kommunikation. Multimediedesigner

Visuel ID. 3. projekt 1. sem. okt. - nov. 2009. og kommunikation. Multimediedesigner Multimediedesigner Visuel ID og kommunikation 3. projekt 1. sem okt. - nov. 2009 www.knord.dk Trongårdsvej 44 DK 2800 Kgs. Lyngby En sund sjæl i et sundt legeme Informationskampagne til unge 1. Indledning

Læs mere

MONIQUE BOOTS-NIELSEN / GRAFIKER

MONIQUE BOOTS-NIELSEN / GRAFIKER SIZE 34-54 2014 AUTUMN COLLECTION shop online bonaparte.dk MONIQUE BOOTS-NIELSEN / GRAFIKER Grafisk Design Grafik & Billedbehandling Typografi & Ombrydnig Grafisk produktion & Workflow Et magasin om knogleskørhed,

Læs mere

Grafisk design. sundfertilitet.dk

Grafisk design. sundfertilitet.dk Grafisk design sundfertilitet.dk Sundfertilitet.dk er en klinik, der behandler mænd og kvinder til bedre fertilitet. Min opgave var at redesigne deres hjemmeside samt lave et logo til sundfertilitet.dk.

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

PPHansen.dk. Introduktion til websiden. En fag præsentationsside af Palle Preben Hansen

PPHansen.dk. Introduktion til websiden. En fag præsentationsside af Palle Preben Hansen Introduktion til websiden PPHansen.dk En fag præsentationsside af Palle Preben Hansen Eksamensopgave i Webdesign og Grafiske værktøjer, 5. semester SIV. Indholdsfortegnelse Indledning... 2 Udviklingsprocessen...

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

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 produktion og workflow

Grafisk produktion og workflow Grafisk produktion og workflow Helle Nicolaysen, mediegrafiker, 3. hovedforløb Introduktion Bylderup-Bov Rideklub har en hjemmeside, bestående af en template, hvor designet er fastlagt. Jeg er i kontakt

Læs mere

FORSTÅELSE FOR GRAFISK PRODUKTION

FORSTÅELSE FOR GRAFISK PRODUKTION FORSTÅELSE FOR GRAFISK PRODUKTION OPGAVEBESKRIVELSE Til DI s Digitaliseringsindsats, har jeg udarbejdet en håndbog, med gode råd og cases fra andre virksomheder, om hvordan de har implementeret digitalisering

Læs mere

Link til website:

Link til website: Link til website: http://nicolaiholm.dk/csr/index.html camillabreinbjerg.dk 1 mayaburkard.dk miaeriksen.dk nikolajdommergaard.dk nicolaiholm.dk Indholdsfortegnelse Forside..1 Indholdsfortegnelse. 2 Introduktion

Læs mere

Banner projekt. 1.semester

Banner projekt. 1.semester 1.semester 2013 33 Banner projekt Kamilla Klein: Kleinovich@gmail.com Asger Onsberg: Sofie Jensen: sofierough@gmail.com Cathrine Petersen: cathrinegpetersen@hotmail.com Gruppe nummer Hold Årgang Lærer

Læs mere

Grundforløbsprøve Projektbeskrivelse

Grundforløbsprøve Projektbeskrivelse Grundforløbsprøve Projektbeskrivelse Webintegrator Thomas á Rógvi 221191-2505 Indholdsfortegnelse Opgaven... 3 Tidsplan... 4 Målgruppe... 5 Layout... 6 Design... 7 Fonte... 7 Browser... 7 Bilag... 8 Det

Læs mere

Grafisk Workflow. Website til European Blues Challenge

Grafisk Workflow. Website til European Blues Challenge Grafisk Workflow Website til European Blues Challenge Opgaven: European Blues Challenge er en europæisk blues festival som skifter lokation hvert år. I 2017 kommer festivallen til Horsens, og vores kunde

Læs mere

Redtape.dk Grafisk Design

Redtape.dk Grafisk Design Redtape.dk OM KUNDEN Red Tape er et undergrunds pladeselskab. De udgiver musik under Creative Commons licens, som er en åben ophavsret, der gør det lovligt at dele og modificere musikken på lovlig vis.

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

Style & Experience 1. semester efterår 2011 25. november - 2. december

Style & Experience 1. semester efterår 2011 25. november - 2. december obligatorisk projekt Style & Experience 1. semester efterår 2011 25. november - 2. december Har du samme forhold til jazz? Odense Vinterjazz er en jazzfestival der finder sted hvert år i oktober. Koncerterne

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