PORT FOL IO 1/13. Grafisk Design Grafik & Billede Typografi & Ombrydning Produktion & Workflow. Sine Schrøder Christensen Kirk & Holm Skoleophold H2

Transkript

1 PORT FOL IO 1/ Grafisk Design Grafik & Billede Typografi & Ombrydning Produktion & Workflow

2 GRA FISK DE SIGN Opgaven Opgaven består i at udarbejde emballage/etiketter til en serie af personlige plejeprodukter. Der skal udvikles 5 forskellige produkter, og så skal der være mulighed for at kunne udvikle flere på sigt. Der skal laves forslag til selve emballagen, etiketter, logo, bomærke og navn. Der er ingen specifikke krav til nogle af delene på nuværende tidspunkt, da det er et produkt, som først skal sælges ind til et firma som hedder Allison. De er producenter af plejeprodukter, og når de har soldt det ind til fx. Matas, så kommer de helt konkrete krav til indhold. Afsender Afsenderen er primært serien Baobab, som gerne skulle blive købt og produceret af Matas. Derfor vil Matas også være en del af afsenderen. Men det vil kun fremgå meget diskret på bagsiden, da det skal være en selvstændig linie. Målgruppen I første omgang er målgruppen Matas, da de først skal købe serien. Men derefter er det almindelige mennesker med sans for lækre pleje produkter. Det er til den bevidste og moderne forbruger som går op i kvalitet og økologi. Der er ikke nogen bestemt alder på, men primært til folk fra år. Persona Det kune f.eks være Anne på 36, som bor i Århus og har en videregående uddannelse som f.eks. Markedsføringsøkonom. Hun har nu været på arbjedsmarkedet i nogle år og er stadig single. Hun handler primært i Føtex, Superbrugsen og specialforretninger, og kan godt lide at forkæle sig selv. I fritiden går hun i trænningscenteret og bruger tid sammen med veninderne. Enten til et godt glas rødvin eller en tur på en af byens mange cafeer. Hun har et moderne hjem og går også op i mode. Hun handler økologisk når det er muligt, men er ikke fanatisk og kører ikke langt for at købe bestemte varer. Hun er bevidst om hvad hun putter i sin krop. Man ville ofte se et Eurowoman- eller Iformblad på sofabordet. Hun kan lide at rejse og tager gerne afsted et par gange om året. Det kunne f.eks. være en weekendtur til Berlin eller en oplevelsesrejse til Vietnam. Budskab Baobab serien vil vise at økologiske plejeprodukter godt kan se moderne ud. Og det behøver ikke have sådan et frelst look. Det kan faktisk være rigtig eksklusivt og fange nogle af de yngre kunder. Det er lavet med økologiske råvarer fra forskellige dele af verden. Typografi Fonten til selve logoet er Pharma som har et meget yngt og specielt udtryk. Spaceringen er rettet til i forhold hvad der var optisk bedst. Og der er gennerelt lavet meget mere luft end i den originale typografi. Fonten er meget rund og giver et blødt og rundt udtryk. Det skulle gerne afspejle de forskellige produkter. Til at fremhæve tekst på emballagen, er der brugt ITC Lubalin, som giver en god kontrast med de tydelige serifer. Al øvrig tekst er skrevet i Pharma som er en sans serif og giver en helhed som med logoet. Alle fonte er købefonte, som skal købes for at kunne bruge dem til visitkort og hvad de ellers vil have lavet i fremtiden. Farver Logoet er holdt i sort for at give en neutral og stilfuld farve, som ikke kommer i kambolage med selve emballagens design. Til emballagen er der valgt en brunlig flaske som minder om de gamle apoteker flasker. Det er for at give en anderledes og renere stemning, som gerne skulle virke sund. Flasken har sort top, som passer til logoet og teksten på de forskellige labels. De forskellige produkter alskiller sig ved at have hver deres farve. Det selvefølgelig for at det er nemt at se forskel. Til farverne er der taget udgangspunkt i stemningen fra Afrika hvor baobab træet vokser. De er gjort støvet for at give det et savanne-agtig præg. Illustrationer Der er en enkelt lille illustration i logoet i form af toppen af et baobab træ. I stedet for at tegne det meget detaljeret som alle andre baobab produkter, et det gjort roligt og icon-agtigt. Billeder Billedet som skal bruges i forbindelse med imageannoncer er af baobab træer, som har de farver som går igen i emballagen. Stil og stemning Stilen skulle gerne lede ens tanker hen på noget rent og lækkert, så man føler at man forkæler sig selv. Man skulle helst føle at man får det godt af prduktet og at man bruge noget sundt på sin krop. Procesbeskrivelse Søgte inspiration om baobab produkter, baobab træer, baobab produktemballage. Brainstorm og hurtige skitser Søgte inspiration om alle former for baobab Brainstormede om mulige navne til logo Udviklede logo Testede prints Lavede nogle labels Testede det på nogle prøveflasker Færdiggørelse af labels Print af alle produkter Opsætning af præsentation Korrektur ved kunde Rettelser Afventer vores kunde som er ved at sælge det ind til Matas. Kvalitetsvurdering Jeg synes at det er blevet rigtig godt, og lige det udtryk som jeg gik efter. Jeg er meget tilfreds med logoet, det er super enkelt. Selve mærkaterne er også rigtig gode med den farvede bund. Nu er det jo selvfølgelig ikke færdigproduceret, men det bliver da sjovt at se når det er færdigt. Ud fra vores egne prints er jeg godt tilfreds. 2/33 Grafisk design Hvad går opgaven ud på

3 3/33 Grafisk design Moodboard og inspiration

4 Geogrotesque Gotham Oranda BT Karbon Pacifico Neo Retro Draw Flama Bebas Neue Scala Sans Gira Sans Pharma Times Theinhardt Helvetica Trebuchet MS TStar DIN Archer 4/33 Grafisk design Font prøver

5 olie ekstrat BAO BAB BAO BAB med olie fra baobab med olie fra baobab med olie fra baobab CONDITIONER En mild conditioner med økologisk baobab olie med olie fra baobab oil med olie fra baobab med olie fra baobab med olie fra baobab BAO BAB oil tree oil Ree oil from baobab baboil bboil oil from baobab baobab B aob ab Woil boil WOIL b&b oil ree TREE baobab oil & baobab baobab oil from baobab BaoBaB oil from baobab BAO BAB med olie fra baobab with oil from baobab oil from baobab oil from baobab oil from baobab oil from baobab oil from baobab 5/33 Grafisk design Udarbejdelse af skitser - 1., 2. og 3. fase

6 6/33 Grafisk design Spacering og former

7 7/33 Grafisk design Afprøvning af farver

8 8/33 Grafisk design Logoet i forskellige størrelser

9 9/33 Grafisk design Eksempel på en label i fuld længde

10 10/33 Grafisk design Eksempel på stil af flasker/krukker med labels på og farver

11 11/33 Grafisk design Image- og billedestil

12 GRA FIK Opgaven - Vector grafik Fremstilling af en stor illustration som skal bruges til en profilbrochure. Formålet er at vise hvordan Global Gravitys system til olie-rør virker og hvordan de kommunikere. De har ingen nuværende illustration kun en håndtegnet skitser som der skal tages udgangspunkt i. Programvalg Der er udelukkende brugt Illustrator til udarbejdelse af grafikken. Anvendte værktøjer Pen tool Add anchor point Delete anchor point Ellipse tool Rectangle tool Rounded rectangle tool Line segment tool Stroke menu Type tool Pathfinder Align Expand Distribute space Dodge Tool Procesbeskrivelse Tegne platforme Tegne illustrationerne Udvikle skyggerne Lave de forskellige farve kombinationer finpusning Pilene mellem platformene Tekst Kvalitetsvurdering Jeg synes det er lykkedes at lave en overskulig og let forståelig illustration. Kunden har sagt at det lige var sådan at han havde tænkt og bedre. &BIL LEDE 12/33 Grafik & Billede Hvad går opgaven ud på

13 13/33 Grafik & Billede Skitsen tegnet af kunden Global Gravity

14 For at lave en platforn har jeg brugt Elipse tool til at lave 2 ovaler. Derefter har jeg lavet en firkant med Rectangle tool. Dernæst er de 3 dele lagt sammen via Unite tool For at få en halv rund oval med firkantede sider, har jeg så trukket en oval fra igen ved hjælp af Minus front tool. Så for at få denne platforn er der nu en halv rund form og en oval som ligger med lidt mellemrum men er grouped vha. Cmd+G Der skulle laves en streg der kunne forbinde nogle platforme. Den er lavet vha. Pen tool. For at bestemme tykkelsen på stregen har jeg brugt Stroke menuen. Den er sat til 2 pt. og så er der valgt at den skal ende med en pil. Teksten er lavet med type tool. For at sikre at tekst ikke ændre sig når kunden åbner filen er den blevet outlinet med Expand. 14/33 Grafik & Billede Arbejdsproces

15 For at holde styr på de forskellige ting har jeg valgt at ligge platformene, illustrationerne og skygerne i hver sit lag. Alle iconer er tegnet med Pen tool eller med forskellige shape tools. For at lave den gule bund, har jeg taget en copy af det blå skib. Derefter har jeg brugt Add anchor point for at tilføje nye punkter og resten er slettet med Detele Anchor Point. Skyggen er lavet ved at tage en kopi af skibet og så er hulerne fyldt ud med nogle shapes. Derefter er den lagt i sit eget lag, så man ikke ka se de grimme ender. For at lave holderne til rørene er der lavet en firkant hvor cirklerne er trukket fra. Bagefter har vi figurene der skal bruges. Derefter sættes de rør-ligende former ind, så man nu kan forestille sig at det er rør der ligger i nogle holdere. 15/33 Grafik & Billede Arbejdsproces

16 Efter at have tegnet denne man er han blevet grupperet, så jeg ikke ska klikke mange gange, hvis jeg skal flytte med ham. Derefter har jeg de 3 mænd, og for at få sammen afstand mellem dem markere jeg 3 grupperede mænd og bruger Distribute space. Det næste er at få dem til at stå på en lige linie i bunden vha. Vectical align bottom. For at bruge de rigtig farver, og for at de er lette at finde, har jeg gemt dem i swatches ved at oprette new swatch. Der er kun vist de farver jeg skal bruge, så jeg ikke kan bruge en anden ved et uheld. For let at kunne bruge en farve fra en anden form, har jeg også også valgt at bruge Eyedropper tool til at suge farven. 16/33 Grafik & Billede Arbejdsproces

17 17/33 Grafik & Billede Færdig illustration

18 18/33 Grafik & Billede Opslag fra profilbrochure med få rettelser i pilene

19 TYPO GRAFI & OM Opgaven Vi skulle lave en velkomst brochure for Billund Kommune. I den forbindelse ville vi gerne lave et magasin til kommunen også. De var meget åbne overfor ideen, så vi skulle lave en dummy, så de bedre kunne forstille sig det. Opgaven er løst i samarbejde med Rosendalhls trykkeri, som skulle stå for at trykke dummyen og en kasse der kunne præssentere magasinet. Til magasinet har vi udarbejdet hele den grafiske linie i form af format, opsætning, valg af typografi, billedestil og alle grafiske elementer. Det måtte gerne adskille sig fra Kommunens designmanual. Jeg fandt navnet Playground da Billund gerne vil være både de voksnes og børnenes legeplads. Al brødtekst er Loren ipsum, men til rubrikker, underrubrikker er der taget udgangspunkt i noget fra deres hjemme side eller fra en avis om Billund Kommune. Afsender Afsenderen er Billund Kommune, men det skulle ikke skrige kommune. De ville gerne have at det lignede et almindeligt livstilsmagasin. Målgruppen Målgruppen er kommunens beboer, men i den grad også de mange pendlere og mulige tilflyttere. Ud over at det skulle stå ved foreninger, forlystelser, ejendomsmæglere og hoteller, så skal det gives til alle der har været til jobsamtale i Kommunen sammen med velkomstbrochuren og det enkelte firmas materiale i en samlet mappe. Derfor er målgruppen i den grad også unge, familier og karrieremennesker, som kunne tænke sig at bo i Billund Kommune eller som gerne vil flytte pga. et job. Typografi Der er brugt 3 forskellige fonte. For at imødekomme kommunen har vi valgt at bruge deres egen font The Serif til al brødtekst. Det er en slab serif, så den er let at læse i store mængder. Til rubrikker, underrubrikker og bokse er der brugt Pharma som er en sans serif skrift. Det er forskelligt om den bliver brugt som versaler eller majuskler. Det er en meget moderne font som skulle give et ungt og frisk look. For at pifte nogle af overskrifterne op er der valgt en tredje font, som skulle give det et livligt og menneskeligt præg. Dette er gjort med Script MT Std som er en slags kursiv håndskrevet font. De 3 fonte tilsammen skulle gerne give en tiltrækkende variation i artiklerne. Margin & Komposition Der er lavet et grid med nogle guides og med 5 spalter. Der er 4,5 mm gutter med dem. Der er meningen at man skal kunne variere siderne. Fx. kan der på en side være 2 tekstbokse, som i alt fylde 4 spalter, men som kan sidde forskelligt på sidderne. Og det giver noget luft på siden da der er en spalte tilovers. Der kan også være sider, hvor at man kan vælge at bruge alle 5 spalter seperat (se side 14-15). Det ulige antal af spalter giver mulighed for at lave meget luft og stor variation i siderne, så det bliver let og apetitlig at læse. Det betyder også at der gennemsnitlig er 44 anslag på hver linie og holder sig under som er grænsen for læsbarhed. Der er ikke lavet fast bagkant da det bliver mere fleksibelt. Paginering er henholdsvis højre- og venstrejusteret så den ligger sig op at ydermarginen. Længere inde samme sted er der lavet en kolumnetitel så man altid kan se hvad det er man læser. Virkemidler For at kunne variere artiklernes opbygning er grided en rigtig god hjælp. De vekslene overskifter, gør det også muligt at fremhæve de mere interesante artikler som skal have mere fokus. Der er lavet forskellige variationer for at lette læsningen og fange læseren. Som fx. bobler med korte budskaber, faktabokse med info, store fremhævet citater, mange billeder og så har man tilføjet nogle moderne lidt støvede farver. Produktionsmedtoder Magasinet er lavet ud fra en A-master, som går igen på alle sider. På denne side er der margin, tekstbokse, paginering, trompet, magasin-title og guides. Baseline grid følger brødtekstens skydning. Der er lavet nogle paragraphstyles for at gøre det let at opsætte magasinet. Procesbeskrivelse Inspiration Skitser Internt møde Skitser Opsætning af mastersider og paragraphstyles Sætte tekster/lorem ipsum ind Sætte billeder ind Opsætning af artikler Finde billeder fra internettet Nye Skitser Møde Rettelser Møde med Rosendahls Korrektur ved projektleder Rettelser Korrektur Klargøring af tryklare pdf er Sende til tryk Klargøring af præsentation Kvalitetsvurdering Billund Kommune var helt blæst væk og fuldstændig vild med magasinet. Så det tolker jeg, som om at det er blevet rigtig godt. Efter min egen mening kan man jo altid lave forbedringer ved fx. ombrydningen af typografien. Men med tidspresset og det begrænsede udvalg af billeder er det blevet et meget fint resultat. Det var fedt at have Rosendahls med ind over, så de fik den dummyen i hånden, og ikke bare så det på en pdf. Det er klar at hvis Billund Kommune ikke vælge at få taget nogle ordentlige billede til det rigtige magasin, så kan det hurtigt gøre standarden noget lavere. Der er heller ikke arbejdet med rigtige artikler, men blot taget udgangspunkt i nogle eksisterende. Det kan også ændre på resultatet, men deres journalist er heldigvis meget åben overfor at få det til at passe ind i designet. Alt i alt et moderne kommune magasin, som jeg personligt synes de kunne være stolte af. BRYDNING 19/33 Typografi & Ombrydning Hvad går opgaven ud på

20 Linie som markere hvor toppen er. Top margen er 22,1, som også er der hvor x-højden starter. Siden er bygget op efter et 5 spaltet grid med 4.5 i gutter. Kommunens sejl Baseline grid Skydning 11,7 260 mm Hjælplinier Brødteksten flugter med bundlinienettet og bundmargen Paginering Kolumnetitel 200 mm 20/33 Typografi & Ombrydning Masterside

21 8,5/11,7 CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. 9/12 CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. 8/11 CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. Der er lavet paragraph styles til de tekster som bliver brugt ofte i dokumentet. Brødtekstens læsbarhed og æstetiske udtryk er blevet testet ved at sætte nogle tekster op ved siden af hinanden og se hvad der var nemmest at læse og hvad der var pænt. 8,5/12 CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. 9/11 CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. 8,5/11 CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. 21/33 Typografi & Ombrydning Paragraph styles og brødtekst

22 Billedteksterne er lavet som om de hopper ud af billedet vha. line tool og stroke menuen er der lavet tunde ender på. Jørgen er flyttet til Billund pga. af jobbet. Han er glad for de mange tilbud til ham og resten af familien. Et væld af JOBMULIGHEDER Billund kommune har en vision om at være Børnenes Hovedstad og har sat gang i en række projekter, der skal gøre området attraktivt for børn og deres familier. Og der er masser af jobmuligheder i den internationalt orienterede kommune, som har indbyggere og over arbejdspladser af Lene Hundborg Koss Box lavet af rectangle og ellipse tool. Teksten sidder inde i boksen og vha. Text frame options er der lavet spacing fra kanterne. Info Billund kommune har konstant den laveste eller næstlaveste arbejdsløshed i Region Syddanmark. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam, sapelliqui at voloraepra de pe pla sum dem solori denimpor aruptat ectibus eum fugit illoriatque sa con nemoditasi cus ex essin prendus essimus estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat.» Beatiis inctor sed modisci aligeni hicidel et volore ent et quia volenim isse ne del int quideles quid quiam, omnis aut et « ARBEJDSPLADSER INDBYGGERE Nissunt uriatem doluptas aut in etur, mnihitia simaxim aut omnimod qui ducimet que rectum, que et alitatu reicabo. Ut elitinctat aut quae nimetur ressusda nesto ipis aditatiur. CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. Sapelliqui at voloraepra de pe pla sum dem solori denimpor aruptat ectibus eum fugit illoriatque sa con nemoditasi cus ex essin prendus essimus estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. KIDS NEWS Der ligger 5 skoler i Billund kommune, Lorem ipsumabore porera cullorepra con corepelest illautemque et faceseq uaspelit quae volupta tumenda ientur, solectibusam as eriatate verum sequi am, vellestem. 4 PLAYGROUND Billund Kommune 001 EFTERÅR EFTERÅR 2014 PLAYGROUND Billund Kommune 5 Illustrationen er lavet i illustrator og importeret i firkanten ved at trykke Cmd+D. Disse bokse er lavet runde i nogle af hjørnene med. 22/33 Typografi & Ombrydning Detaljer

23 Normalt ville jeg gå ind og kigge lidt på knibningen af ord for at få en højre bagkant som ser pæn og æstetisk ud. Men da dette er en dummy med Lorem ipsum tekst har det ikke været nødvendigt. Gennegående danske citationstegn. For at undgå for mange orddelinger så teksten bliver svær at læse at der lavet nogle bestemte ordelingsindstillinger. Fortsat Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam, sapelliqui at voloraepra de pe pla sum dem solori denimpor aruptat ectibus eum fugit illoriatque sa con nemoditasi cus ex essin prendus essimus estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat.» Beatiis inctor sed modisci aligeni hicidel et volore ent et quia volenim isse ne del int quideles quid quiam, omnis aut et «Nissunt uriatem doluptas aut in etur, mnihitia simaxim aut omnimod qui ducimet que rectum, que et alitatu reicabo. Ut elitinctat aut quae nimetur ressusda nesto ipis aditatiur. CAMPUS I GRINDSTED Obist, te nonsecearum hictaqui comnihitae secab ipsaperumqui tem. Nam vitissint, conseria expliae et ut eum ende ilit ut fugia voluptio te sim voloritis volupta tincturiorro es debis et venihilis quis evel mos re simo dolores Familien nyder godt af de mange krydderurter på terrassen. auda voluptae. Que quatus nonest, omnis natios erehenis num quistias disquis ex et, nos que con remoluptatur sunt. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam. Estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. Blacereseque re cor sum et haruntesto tem et volupta sapelliqui at voloraepra de pe pla sum dem delli. Info Vorbasse ligger lige i midten. Der er ikke langt til omegnsbyerne og de store arbejdspladser. BILLUND VEJEN GRINSTED KOLDING VEJLE ESBJERG ODENSE ÅRHUS Børnene elsker deres nye have og de mange frugter og grøntsager. 15 km 19 km 19 km 34 km 34 km 50 km 100 km 105 km Så meget sparer du ved at BO I KOMMUNEN af Lene Hundborg Koss KOMMUNE Lupitatemolo temquis magnam entis ipienis magnihi lluptur as quasim doluptist, nosae voluptation nobist evelit evel imendae consequ iandeli. Temporepratus inctur, occabor alis que eiunt quidese quaspel lestrum acia quas sum quas quo to quia consed quam, sapelliqui at voloraepra de pe pla sum dem solori denimpor aruptat ectibus eum fugit illoriatque sa con nemoditasi cus ex essin prendus essimus estrum, ut laborrumque dollorp oresti blacereseque re cor sum et haruntesto tem et voluptat. Blacereseque re cor sum et haruntesto em et volupta sapel ectibus eum prendus essimus illoriatque sa con nemoditasi liqui at voloraepra de pe pla sum dem delli. BØRNEPASNING (i kr. pr. år) EJENDOMSSKATTER (i kr. pr. år) RÅDIGHEDSBELØB INKL BOLIGUDGIFTER (i kr. pr. måned) BILLUND NYBYGGERI I BILLUND OPUBLIS HACIA MED NU NONE NONSULEG ILIMERE. AALBORG ODENSE ÅRHUS KØBENHAVN FORSKEL IFT BILLUND KOMMUNE (i kr. pr. måned) Cirkel lavet med Ellipse tool og derefter er det sat tekst ind ved at klikke på den med Type tool. Symbol i enden af hver artikel der marker at den er færdig. Dette er en tabel som er lavet i InDesign med Insert table. 12 PLAYGROUND Billund Kommune 001 EFTERÅR EFTERÅR 2014 PLAYGROUND Billund Kommune 13 23/33 Typografi & Ombrydning Detaljer

24 24/33 Typografi & Ombrydning Forside og opslag

25 PRO DUKTION &WORK FLOW Opgaven Lave designet til en website for Arkitekt Vest med forskellige undersider. Den skulle indeholde en forside, sider til projekter, sider til at beskrive et enkelt projekt og en side omhandlende dem selv. Afsender Afsenderen er Akitekt Vest, som i mere end 35 år har tegnet diverse arkitekt løsninger. Målgruppen Det skal være en informerende siden om hvad de kan og har lavet. De henvender sig både til offentlig institutioner, private og erhverv. Det gælde både store og små projekter. Layout Selve websitet er centreret og er 1050 px. så det passer til de fleste computere. Logoet er i venstre top, hvor man bedst ser det og menuen i højre side. Fontene er Antonio til overskrifter(h1) og Arial til alt brødtekst(p). De er begge websikre og Arial er let at læse som brødtekst. Komposition Siden består af en topmenu, derunder en billedeslider. Derefter kommer selve sidens indhold centreret. Nederst er der en footer som. Top, footer og billederslider er næsten konsekvent på alle side. Der ern nogle enkelt vedr. projektbeskrivelse som ikke har en billedslider. Navigation Websitet er nemt at navigere i da man altid kan finde menuen øverst til højre. Den markere også hvor man befinder sig på siden. Det samme gælder al kontaktinfo der sidder bare nederst på siden. Det er også nemt at tilgå fra andre enheder end en computer da designet er resposive og selv tilpasser sig til mobil, ipad osv. Browserkompatibilitet Siden skal testes i Safari, Internet explorer, Google Chrome og Firefox, da den selvfølgelig skal passe til disse mest brugte browsere. SEO For at optimering søgningen på Arkitektfirmaet Vest er der lavet nogle gode H1 og H2 er med væsentligt beskrivende indhold. Der er også lavet meta tags som skulle få flere søgeresultater. Billeder og grafik Billederne er redigeret i Photoshop og saved for web som png-24-filer, da det giver den bedste kvalitet. Grafikken er tegnet i Illustrator og lagt over i Photoshop hvor den er beskåret, så den passer til. Procesbeskrivelse Brief på opgaven Søge informationer om kunden og andre arkitektfirmaer Søge inspiration Skitser i hånden internt møde om retningen Skitser i hånden og i Photoshop Internt møde Mock-up laves i Photoshop Internt møde Præsentation laves Præsenteres for kunden Kunden kommer med retelser 1. korrektur Websitet kodes 2. korrektur Siden rettes Sitet testes og optimeres 3. korrektur Websitet uploades Kvalitetsvurdering Jeg synes at det endelige resultat er noget bedre end det gamle lay-out. Nu kan man bedre se at det er et arkitektfirma som viser medstore billeder hvad de har lavet. Brugervenligheden er også meget bedre end før da man ikke har menu dobbelt længere og med masser af underpunkter. Nu er der bare en fast menu i toppen. Den viser hvor man er, så det er nemt at navigere i. Selve lay-outet synes jeg er blevet mere stilrent og lækkert æstetisk at se på. Det passer bedre til et arkitektfirma, og det passer til deres farver og profil brochure. Nuværende website: 25/33 Grafisk workflow Udarbejdelse af skitser

26 Lave mock-ups Præsenteres og godkendes Test af site Upload endeligt website Research /inspiration Præsenteres for kunden Grafikker færdiggøres Test af browserkompabilitet Ideudvikling /skitser Tilpasse design Resposive skelet kodes SEO optimering 20. april september /33 Grafisk workflow Procesbeskrivelse/tidsplan

27 27/33 Grafisk workflow Før og efter

28 28/33 Grafisk workflow Inspiration

29 TEGNESTUE ARKITEKTUR KUNST Fugia quis dolor moluptate qui quas simpererios et ut am eate ipis imo do quiaecea corento eius volenim axi min ihit omnihillaut et odigend ebitat ommodic te sedici consequia. 8 BYGNIN Fugia quis dolor moluptate qui quas simpererios et ut. Fugia quis dolor moluptate qui quas simpererios et ut hun jilkm. Tui incientia de nobis dolorumque officipsum dentiant quia qui dolo rib usantem usonsis quiatempore. 12 mio. 4 AKTIONÆRER 367 ide 4 af 8 29/33 Grafisk workflow Stil, stemning, farve, typografi og elenmenter der bliver brugt på websitet. Fontene er Antonio og Arial som begge er websikre fonte.

30 Denne skitse imødekommer bedst designkriterierne for kunden. 30/33 Grafisk workflow Skitser og mock-ups

31 Responsive grid For at få et responsive website er photoshop filen bygget op omkring et responsive grid. Dvs. at alle billeder, grafikker og tekster skal følge disse linier. Den egentlig side er kun det man ser i midten. Billedeslideren fx. angivet i procent% så den altid følger størrelsen på et browser vindue. Hvor imod indholdet har en statisk bredde og højde. Flowchart Flowchart viser opbygningen af et website på en hurtigt og overskuelig måde. Dette kan både være til gavn for kunden og til den der skal udvikle det. Det giver også en et hurtigt indblik i hvor mange sider er skal kodes. Index Arkiv Erhverv Offentlig Instution Privat Profil Hvidbjerg Ældrebolig Oksbøl Nyt Henne Plejehjem Aktivitetscenter Tilbygning Blåvand Outrup hallen Soldaterhjem Garage Strandcamping Ældrehjem Udvidelse Sparekassen Pleje Boligere 31/33 Grafisk workflow Responsive grid og flowchart

32 100%x120px 173x64px Skelet og storyboard giver et overblik til udvikleren over hvilke grafikker der skal bruges og hvor der skal linkes hen til %x535px 1049x317px 1. logo.png 2. slider_1.png, slider_2.png, slider_3.png, slider_4.png, slider_5.png 3. fiskerhytterne.png 4. henne.png 5. blåvand.png 6. strandcamping.png 7. sparekasse.png 1049x1026px Korte tekster hentes fra Photoshop filen og de lange hentes i dokumentet erhvervsbyggeri.docx 300x164px 300x164px 300x164px x410px 300x410px 300x410px 300x164px 300x164px 300x164px x410px 300x410px 300x410px 1049x338px 100%x390px 32/33 Grafisk workflow Skelet og stoyboard

33 33/33 Grafisk workflow Færdigt website