Portfolio - ThomasKnudsen

Transkript

1 Portfolio - ThomasKnudsen TK Hovedforløb1-2015

2 Indhold Redegørelse - Digital Design 4 Brainstorm til logoet 5 Inspiration til logoet 6 Skitser til logoet 7 Resultatet - Digital Design 9 Redegørelse - Typografi & Ombrydning 11 Velkommen til Jyllands-Posten 13 Redegørelse - Grafik & Billede 16 Resultatet - Grafik & Billede 18 Redegørelse - Grafisk workflow 20 Tidslinje 22 Inspiration - til Folketingsvalget 24 Skitser - til Folketingsvalget 25 Skitser - til Folketingsvalget 26 Flowchart - til Folketingsvalget 27 SVG ikoner - til Folketingsvalget 28 Ikonpakke - Folketingsvalget 30 Resultatet - Folketingsvalg DIGITAL DESIGN 2 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

3 Redegørelse - Digital Design Brainstorm til logoet Opgaven: Er et projekt for Østbirk Skole, som ligger i Horsens Kommune. De vil gerne have et nyt logo, da det nuværende logo ikke stemmer overens med skolens nye vision. Skolens nye vision er Flere lærer mere. Afsender: Østbirk Skole ligger i Østbirk by og er grundlagt i Østbirk er hovedbyen og et antal mindre landsbyer sender deres børn til skolen. Rigtig mange byboere har set mulighederne i området og har fundet en byggegrund til en fornuftig pris og bygget deres ønskehus her. Skolen er en tosporet skole fra årgang med ca. 40 elever pr. årgang. Siden 1. august 2008 har vi desuden haft et tilbud til hele kommunens elever med svære læsevanskeligheder, Fine Readers. Østbirk Skole arbejder med udvikling af de centralt besluttede indsatsområder, og de områder, som tidligere års evalueringer har vist, at der er behov for at udvikle yderligere. Modtager: Logoet henvender sig til alle, men den primære målgruppe er familier med børn i folkeskolen. Budskab Logoet består af en cirkel, puslespilsbrikker og 4 små motiver. Cirklen er et symbol for helhed og sammenhæng. Ligeledes repræsenterer cirklen en tænkning, hvor der ikke nødvendigvis er én begyndelse, men signalerer i stedet en mere flydende udvikling. I logoet bruges der fire forskellige farver: Rød repræsenterer: spænding, energi, passion, varme, mm. Grøn repræsenterer: venlighed, generøsitet, loyalitet og intelligens. Blå repræsenterer: fred, ro, harmoni, tillid og selvtillid. Gul repræsenterer: optimisme, lykke, idealisme og fantasi. Form: For at skabe et visuel udtryk, som symbolisere innovation, skabte jeg et puslespil. Med puslespiller vil jeg fortælle at når alle dele forbindes får man et bedre resultat. Procesbeskrivelse: Brainstorm. Inspirationssøgning. Hurtigt skitsering. Mere dybdegående skitsering. Farvene til logoet fastlægges. Hvorfor? Brainstorm bruges særligt, når der skal skabes mange ideer til at løse identificerede udfordringer, men kan også bruges, hvis der er brug for inspiration generelt. Brainstorm kan ske på baggrund af research, eller den kan tage udgangspunkt i deltagernes egen viden. En brainstorm giver dig mange ideer på kort tid, og metoden får sat deltagernes viden i spil på en struktureret måde. Resultat: Jeg fandt frem til to ord, som gik igen i min Brainstorm. Kreativitet og Udvikling. Det var udfra de ord jeg fandt på, at lave logoet som et puslespil. Puslespillet skal symbolisere, at skolen bygger på forskellige elementer gennem elevens skoleår. Spillet er samlet til en større helhed, som er tæt forbundet med det cirkulære og skolens vision. Tre udkast designes i Illustrator. Det færdige design gives videre til Østbirk Skole for godkendelse. Typografi: Mixolydian (sans-serif) Bruges til skolens navn under logoet Roligt at se på. Ikke for seriøs. Inspirationen til fonten kommer fra typografien, som bruges på vejskildte i USA Farve: Farverne var ikke fastlagte til at starte med, da deres nuværende logo var sort. Det valgte logo sendes i fire forskellige filformater:.ai -.pdf -.png -.jpg. Kvalitetsvurdering Det er første gang, at jeg har fået stillet en opgave i denne størrelse plus det er første gang jeg skal levere et logo til en virksomhed. Østbirk skole har hele tiden været klar over, hvad de gerne ville have i logoet, det har gjort mit arbejde nemmere. Eftersom mit første udkast til logoet blev godkendt, vil jeg sige jeg har leveret et godt produkt. 4 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

4 Inspiration til logoet Skitser til logoet 6 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

5 Skitser til logoet Resultatet Digital Design 8 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

6 Redegørelse - Typografi & Ombrydning Typografi & Ombrydning Opgaven Jeg skiftede Udviklingsafdelingen ud med Markedtings afdelingen da udviklingsafdelingen ikke kunne give mig en opgave til tryk. Jeg fik stillet en opgave, som jeg havde en uge til at løse. Opgaven gik ud på, at jeg skulle redesigne Jyllands-Postens velkomsthæfte til nye ansatte. Tekst, fonttyper og billeder til hæftet var fastlagt. Ellers havde jeg frie hænder. Dokument opsætning A3, 297x420 mm. Margen: Top 15 mm, Bund 25mm, Inderst 12 mm, Yderst 20mm. Master Sidefod med titel, logo og pagina. Rubrik 35/39 pt, AntannaCond Bold, venstrestillet. 35/39 pt, AntannaCond Bold, centreret. Dansk orddeling. Underrubrik 20/24 pt, AntannaCond Bold, venst restillet. Dansk orddeling. Brødtekst 10/11 pt, ITC Stone Serif std. Medium, venstrestillet. Låst til grundlinienet. Dansk orddeling. Mellemrubrik 10/11 pt, ITC Stone Serif std. Bold, venstrestillet. Låst til grundlinienet Dansk orddeling. Bullet list 9/11 pt, ITC Stone std. Medium, venstre indrykning: 4 mm, Første linje indrykning: -4 mm, Afstand efter: 1 mm, venstrestillet. Ikke låst på grundlinienet. Dansk orddeling. Billeder Billeder var fastlagt på forhånd. Kvalitetsvurdering Eftersom jeg ikke har arbejdet med Indesign eller tekstombrydning siden endt Grundforløb på Aarhus Tech synes jeg opgaven blev løst på bedste vis. 10 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

7 Velkommen til Jyllands-Posten Paragraph Styles: 1. Rubrik venstre: 35/39 pt, AntannaCond Bold, venstrestillet. 2. Underrubrik: 20/24 pt, AntannaCond Bold, venstrestillet. 3. Brødtekst: 10/11 pt, ITC Stone Serif std. Medium, venstrestillet, låst til grundlinienet. 4. Mellemrubik: 10/11 pt, ITC Stone Serif std. Bold, venstrestillet. Procesbeskrivelse: 1. Der oprettes de nødvendige Paragrapg Styles. 2. Paragraph Stylen Rubrik venstre oprettes (se billede 1-1A) 3. Paragraph Stylen Brødtekst oprettes (se billede 2) 4. Paragraph Stylen Bullet List oprettes (se billede 3) 5. Bullet list: 9/11 pt, ITC Stone std. Medium, venstre indrykning: 4 mm, Første linje indrykning: -4 mm, Afstand efter: 1 mm, venstrestillet. Billede 1 Billede 1A 12 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

8 Billede 2 Billede 2A FØR EFTER Billede 3 Billede 3A Grafik & Billede FØR EFTER 14 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

9 Redegørelse - Grafik & Billede Billeder 3 - Tilføjet en Mask til det øverste billede. Billeder 3 - Indstillinger for Brushes hårdhed. Opgaven Dette er en fiktiv opgave jeg selv har fundet på, da jeg ikke laver billederedigering på Jyllands-Posten. Jeg vil udarbejde en plakat. Jeg har taget udgangspunkt i HBO serien True Detective. Det er en serie jeg er stor fan af, ikke mindst den sorte grafiske undertone, som gør serien lidt dystre. Anvendte værktøjer Photoshop CS5. Procesbeskrivelse 1. Jeg tilføjer en Mask til billedet da jeg kan bruge Brusch Tool til, at fritlægge billedet da jeg kun skal bruge en silhuet af Matthew Mcconaughey. Der er mange andre måder at fritlægge en person på f.eks. kan man anvende Quick Selection Tool men i dette tilfælde er det nemmest at bruge en Mask til at få alle hans hår med på billedet. (Se billede 1) 2. Jeg tilføjer de to billeder til Photoshop, som skal indsættes inde i billedet af Matthew Mcconaughey. Ved at holde ALT knappen nede imens du er på Layet af silhuetten, kan du trykke på de andre billeder(layers), automatisk blive de kun synlige i silhuetten af Matthew Mcconaughey. (Se billeder 2) 3. Nu tilføjer jeg en Mask til det øverste billede da jeg skal have billederne til at flyde sammen. Det gør jeg ved, at bruge Brusch Tool med en Hardness på 10% da overgangen på billederne skal være meget fine. (Se Billeder 3) 4. Jeg tilføjer nu Desaturat(Image > Adjustment > Desaturat) det gør at billedet bliver sorthvid. Efter det vil jeg gøre billedet endnu mørkere, men hans ansigtet skal laves lysere her vil jeg bruge Levels. (Se billeder 4) Billeder 3 - Bruger Brushes til at laver en flydende overgang. Billeder 4 - Ansigtet skal laves lysere end resten. Billeder 1 - Tilføjet Mask til billedet. Billeder 1 - Fritlægger med Brusch Tool. Billeder 4 - Ansigtet skal laves lysere end resten. Billeder 2 - Holde ALT knappen nede og klip layene sammen. Billeder 2 - De to øverste billeder bliver indsat i silhuetten. 16 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

10 Resultatet Grafisk workflow 18 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

11 Redegørelse - Grafisk workflow Opgaven Gik ud på at jeg skulle designe, hvordan Folketingsvalget 2015 skulle se ud på Jyllands-Posten.dk. Projektet var en opgave på tværs af de tre bladhuse, som er ejet af Politikens Hus. Politiken skulle leverer UX arbejdet også var min opgave at forme det til et brugbar design. Valget var delt op i 4 faser: 1. Det første som skulle gå live var en online Kandidattest, hvor brugeren kunne tage en test, som fortalte dig hvem du var mest enig med. samt kunne du læse politiske meninger og personlige ting om kandidaten eller partiet. 2. Meningsmålinger skulle ligges online 2-3 dage før Valgaftenen. Det skulle designes til forsiden. 3. Under selve Valgaftenen skulle hele tæppet rulles ud. Her skulle du se hvert optalte Region og stemmested på et Danmarkskort. Senere på aftenen når de fleste valgsteder var talt op, havde vi en side som fortalte, hvor mange stemmer hver kandidat havde fået. Procesbeskrivelse Alt designarbejde er udarbejdet i Photoshop og alle ikoner er udarbejdet i Illustrator. Kvalitetsvurdering Det er den største opgave indtil videre, jeg har fået på JP. Det er noget jeg føler mig stolt over, at de tør lade en elev stå for Folketingsvalget da det er en stor begivenhed og tiltrække mange brugere og trafik til hjemmesiden. Undervejs i processen, mødte jeg store udfordringer og en del misforståelser fra min egen side. Kommunikationen kunne have været bedre, men det er svært når vores programmøere sidder i Kiev så alt kommunikation foregår over Skype. Alt i alt synes jeg, at min indsats var god og professionel. Når det er en så stor opgave er der ingen, som kan klare det alene derfor vil jeg sige Teamet, som var med til at lave Folketingsvalget fortjener en stor ros og et kæmpe klap på skulderen for nogle hektiske måneder. 4. Dagen efter Valget skulle brugeren kunne se, hvem der var stemt ind i det nye Folketing. 20 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

12 Tidslinje Jeg modtager opgaven Jeg bliver briefet på opgaven af pipeline lederen. Designmøde 1 Pipeline lederen, programmøerne og jeg holder møde. Skitser/Layout Jeg laver skitser/oplæg til senere møder. Klargøring af filer Designfilerne bliver klargjort i Photoshop og sendt til programmørerne. Demomeetings Vi mødes og har demo præsentationer, hvor vi laver Hot Fixes Rettelserne sendes retur Rettelserne sendes retur. Research og ideudvikling Jeg går igang med research og ideudvikling på en visuel identitet, som er sammenhængende for alle sites. Godkendelse af grafisk linje Jeg får grafisk godkendelse af min designchef og pipeline lederen. Designmøde 2 Mødes igen med teamet. modtager rettelser - laver skitser og noter til mig selv. Løbene dialog med programmørerne Jeg er til rådighed, hvis programmørerne har spørgsmål til designet. Resultatet skal testes Jeg får tilsendt en URL, hvor jeg skal teste hjemmesiden og se om det stemmer overens med designet. Det går LIVE på jp.dk Det er Valgdag og projektet bliver uploadet til 22 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

13 Inspiration - til Folketingsvalget 24 ThomasKnudsenPortfolio 2015 Skitser - til Folketingsvalget ThomasKnudsenPortfolio

14 Skitser - til Folketingsvalget Flowchart - til Folketingsvalget Højrespaltemenu til Folketingsvalget 2015: Index Hvem kan jeg stemme på? Tag kandidattesten Sammenlign partier Menningsmålinger Navigation på kortet til Folketingsvalget 2015: Kort Index Vælg storkreds Dropdown Vælg storkreds Klik på kortet Zoom ud Hele landet Hovedstaden Hovedstaden Midtjylland Midtjylland Sjælland- Syddanmark Sjælland- Syddanmark 26 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

15 SVG ikoner - til Folketingsvalget Billede 4 - Ikonet sidder ikke korrekt på Griddet Billede 4 - Ikonet sidder korrekt på Griddet Redegørelse SVG er et filformat, der muliggøre todimensionelle billeder, der vises i XML på nettet. PNG og GIF er det vi har været vant til at bruge, men i takt med at der produceres flere og flere responsive hjemmesider, vil SVG filformatet begynde at skubbe PNG og GIF ud på sidelinjen. Hvorfor er det et problem, at bruge PNG til ikoner? Det er sådan set ikke et problem, men med SVG har du muligheden for at gøre dit arbejde nemmere. Hvis du skal lave en Responsiv hjemmeside, som skal fungere på alle enheder (Alle opløsninger til PC, Tablet og Mobiler) skal du udarbejde et PNG-ikonsæt for hver opløsning, som hjemmesiden skal vises på. Det smarte ved SVG SVG er ikke afhængig af en bestemt opløsning, da en SVG-fil anvendes, som en Font og kan styles med PX eller EM i ens Stylesheet. Hvis du anvender SVG skal du kun lave en ikonpakke, som anvendes til alle opløsninger. Flere tricks ved SVG Det er ikke den eneste trick SVG har i ærmet. SVG bruger XML til at definere de grundlæggende egenskaber såsom stier, former, skrifttyper og farver, og mere avancerede funktioner såsom gradienter, scripting og animation. Når SVG-filen er oprettet i koden, kan det derefter bruges igen og igen. Således kræves det færre HTTP-anmodninger, hvilket er godt for load tiden, især hvis du anvender hjemmesiden på en mobil enhed. Procesbeskrivelse 1. Opretter en ny fil i Illustrator. Husk at slå funktionen Align New Objects to Pixel Grid da det er altafgørende, at ikonet rammer 100% korrekt på hver eneste Pixel ellers ender du med at få et uskarpt ikon. Dokumentet skal laves i 72ppi da det er til skærmopløsning. (Se billede 1) 2. Indstillingerne for Dokumentes Grid skal instilles til at Griddet skal vise 1 Pixel af gangen. Det gør at du kan se hver eneste Pixel i Dokumentet. (Se billede 2 for instillinger og billede 3 for Grid) Billede 5 - Du vælger Save As i File menuen. Billede 5 - Du vælger SVG i format. Med en SVG-ikon er der ikke forskel på om du kigger på en gammel 1024 x 768 skærm eller på den nyeste iphone med retina skærm. 3. Bruger Pen Tool til at tegne ikonet. 4. Tilpasser ikonet så den sidder 100% korrekt i Pixel griddet. (Se billede 4) 5. Illustrator-filen skal gemmes til en SVG-fil. (Se billede 5) Billede 1 Billede 2 Billede 5 - Beholder standard indstillingerne PNG-ikon i en Browser SVG-ikon i en Browser Billede 3-100% zoomet Billede % zoomet 28 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

16 Ikonpakke - Folketingsvalget Resultatet 30 ThomasKnudsenPortfolio 2015 ThomasKnudsenPortfolio

17 Valmiit.