GRAFISK WORKFLOW AF MARIE PROKOPEK MARIE PROKOPEK

Transkript

1 GRAFISK WORKFLOW AF MARIE PROKOPEK MARIE PROKOPEK

2 Redegørelse grafisk workflow pompdeluxkiddo.com pompdeluxkiddo.com pompdeluxkiddo.com REDEGØRELSE GRAFISK WORKFLOW MÅLGRUPPE UDFORDRING MIT BIDRAG TIL OPGAVEN. Kunde: POMPdeLUX Primær: Kvinder (mødre) i alderen år. POMPdeLUX har fået mange modspillere igennem de sidste 9 år. Der er Jeg designede en ny hjemmeside og lavede et designoplæg af denne i Grafisk Designer: Marie Prokopek I Danmark, Norge, Sverige, Tyskland, Østrig, Schweitz, Finland og Holland. flere konkurrenter på markedet og markedet er generelt afmattet. POMPde- form af en fuldt funktionel og responsiv hjemmeside. OPGAVEN Opgaven gik ud på at jeg modtog et kundebrief fra POMPdeLUX som ønskede et redesign af og design af følgende: Redesign af Katalog/Magasin (Opslagssider + oversigt) herunder (ift. udtryk): Tekstombrydning (valg af fonte, behandling af disse) Farve, illustration og fotobrug Redesign af logo Logo og dettes brug. Nyt design til ny hjemmeside En anden end webshoppen, en hygge side til kunderne og børnene. Content-website en side med redaktionelt indhold. (ref: Responsiv Opbygning, indhold og udseende (ift. udtryk) Hvordan kan POMPdeLUX selv bruge og opdatere en side som denne? Indkomst er hovedsageligt i middel gruppen til mellem høj. De er kvalitets- design og mode-bevidste, status er vigitgt, de vil gerne udstråle overskud. Vil gerne reklamere for sig selv og for POMPdeLUX på sociale medier, hovedsageligt Facebook og Instagram, som målgruppen er storforbrugere af. Dette er et vigtigt salgselement for POMOPdeLUX. Desuden er en stor del af vores varer købt via tablets, hvilket gør at den responsive og mobile del er super vigtig for POMPdeLUX! Jeg har derfor også valgt at den primære platform er tablets. Sekundær målgruppe: Bedsteforældre 60+. Her vil primær-målgruppen have så stor indflydelse, at jeg ikke vælger at fokucere på denne gruppe. Afsender: POMPdeLUX. Pompdelux åbnede dørene op for et nyt dansk børnetøjsmærke i 2006 (for børn i str cm) og vækstede stort fra dag et. De to salgskanaler er webshoppen og via konceptet Home Shopping. I dag befinder POMPdeLUX sig i 8 lande med cirka 400 Shopping Advisors som er navnet på de værtinder der afholder disse Home Shopping events i målgruppens private hjem. LUX er ikke den nye i klassen længere og skal re-positioneres med andre ord udkomme i en ny og forbedret udgave og bruge denne katalysator til igen at være top of mind i kundens bevidsthed. Krav: POMPdeLUX vil gerne relanceres på ovenstående punkter men i en let grad så kunderne stadig kan genkende det stærke brand, der står for god kvalitet og lækkert design. POMPdeLUX vil gerne udstråle ny energi og være først til at skabe trends. Alle børn især de store (mellem 7-10 år) der sætter højere og højere krav til moden skal kunne se sig selv i tøjet. Referencer: POMPdeLUX konkurrerer på 8 markeder og disse markeder er meget forskellige men de største konkurrenter er H&M, NAME IT, ZARA, Hümmel og diverse supermarkeders tøjlinjer. POMPdeLUX skal afspejle den position de hele tiden har haft i dette felt af børnetøjsmærker, men i en mere moderne udgave. POMPdeLUX ønsker indsigt og dokumentation for arbejds- og designprocessen samt moodboard/inspirationskilde. Ligeledes forventes tanker og argumenter fremlagt. Jeg redesignede katalog, med mere redaktionelt indhold og en ny designmanual over fonte og elementer. Desuden lavede jeg en ny ting hertil, #WallartByPOMPdeLUX, plakater der kan rives ud af magasinet og printes ud på den nye content website. Ideen er at plakaterne som skulle hjælpe med at få kunderne til at reklamere for os mens de reklamerer for dem selv og et designg deres liv. Redesignede logo samt logos med taglines til WallartByPOMPdelux og til den nye hjemmeside POMPdeLUXkiddo. Se det færdige resultet her: MARIE PROKOPEK SVENDEPRØVE PORTFOLIO JUNI

3 Tidslinje grafisk workflow Jeg modtager opgaven Jeg bliver bliver briefet på opgaven af kunden, POMPdeLUX, grafiske designer. Research og ideudvikling Indhold på website Kundemøde Upload Jeg går igang med research og ideudvikling Jeg beslutter emner og indhold på web- Mødes igen med designeren og modtager Nu ville jeg, hvis sitet skulle oploades og i brug med det samme, købe på en visuel identitet, som er sitet, tegner skitser, skriver funktionerne rettelser - laver skitser og noter til mig selv. et domæne og oprette hosting hos udbyder. Jeg anvender i stedet mit sammenhængende for hele opgaven. de forskellige sider skal have. eget domæne marieprokopek.com og uploader til en underside her. Kundemøde Flowchart Klargørring af filer Jeg uploader med Cyperduck. Præsentation Kunden og jeg mødes flere gange og jeg Jeg laver et flowchart så jeg hele tiden har Jeg klargør filer til sitet i Photoshop og Illustrator. Jeg præsenterer det færdige produkt til den modtager rettelser på oplæggene og retter til. et overblik og præsenterer dette og ideen for grafiske designer. Forklarer om vedligeholdelse POMPDeLUX. og kodning. Tidsplan Jeg laver en tidsplan for at kunne overholde deadline, som er 21 arbejdsdage til at lave både website, katalog og logos. Godkendelse af grafisk linje Jeg modtager godkendelse på den grafisklinje og logo. Skitser/Layout Jeg laver skitser/oplæg i Photoshop. Korrektur Jeg læser korrektur på layoutet og mødes igen med designeren og modtager rettelser og korrigerer. Overdragelse POMPdeLUX godkender. NB. -Da jeg har valgt at kode i Bootstrap skal siden efterfølgende tilkobles et CMS, så den kan vedligeholdes af alle Oplæg Bootstrap Plugins/kodning Test i browsere Jeg laver oplæg på den grafiske linje Ud fra kundens ønsker og pga. tidspress Jeg henter plugins ned til forskellige dele Jeg tester løbende sitet i forskellige browsere med logo, fonte og elementer vælger jeg at bruge elementer fra en af sitet. Jeg koder og anvender Dream- og på forskellige devices, for at tilpasse (se toolbox), som skal anvendes til både Bootstrap template til designet weaver til styling og kodning af sitet med designet og sikre det hele fungerer og kan katalog og website. CSS, HTML, PHP og javascript. nå ud til så mange som muligt. 3 SVENDEPRØVE PORTFOLIO JUNI 2015 MARIE PROKOPEK

4 Design og process DESIGNPROCESS To o l b o x n e w d n a Min designprocess var stor med både design af katalog, elemtenprimary logo ter, fotos, website logo mm. Jeg har derfor kun et lille udpluk af N I C E TO S E YO U! processen med her. Jeg researchede kundens nuværende digitale elementer. Secondary logo MOODBOARD Special logo for kiddo web S p e c i a l lo g o Wa l l a rt #pompdeluxkiddos colors POMPdeLUX Webshop - DK & Instagram profil pt. PA N TO N E Girlz Boyz Black Dusty Creamy 872 c Rose green Diamond grey White Dette er hovedfarverne, men der må gerne Idroppes farver fra billeder på opslag og hvor det giver mening og ro. Fonts Rubrikker og H elementer GILL SANS REGULAR SIZE 57 LEADING 68 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ MOODBOARD, PINTEREST & TOOLBOX Jeg oprettede mit eget moodboard med nogle af de elementer POMPDeLUX havde, som farver og billeder samt ideen om plakaten. T Brødtekster, billedtekster og a + p styles Men jeg brugte også Pinterest meget og lavede forskellige boards derinde. I starten af min designproces oprettede jeg min Toolbox, som blev et virkelig godt værktøj til både design, web/workflow og min ombrydning af kataloget. Manchet, mellemrubrik og forfatterinfo IKKE TIL WEB! ahoma l Normal l Regular size 10 l leading 18 l abcdefghijklmnopqrstuvwxyzæøå Georgia regular bold italic size 14 leading 16 tracking 75 abcdefghijklmnopqrstuvwxyzæøå Størstedelen af fonte anvendes PANTONE 872 C SS15 COLLECTION Toolboxen viser den grafiske linje med logo, fonte og elementer, som skal ABOUT Secondary marks anvendes til både katalog og website. YO U R L I F E I S A M S UO RM PRISE S O YO U N E V E R I KLNOOVWE W YO U HEN MO R UE RT GHUAMN YO IS GONNA POP ICE CREAM! LIFE IS GOOD IN FLIP FLOPS THE CONCEPT What is so special about POMPdeLUX? Text: POMPdeLUX W Design elements Now A big thanks to... EN FANT children s shoes who provided us with the most beautiful shoes! Page 16 Rolige baggrunde, men gerne med lidt kant The colours of the SPRING/SUMMER15 collection. sun, the sandy beaches, the windy waves and the fading flowers characterize our Dive into the details and prints to see the many beautiful POMPdeLUX designs children s clothes in size cm of high quality and at a favourable price. We are in love with the colours of spring and summer. Size cm Size cm and colourful shades made especially for this collection. entire wardrobe in one An easy way of shopping your child s place only! Size cm Size cm 4 Page 40 J U N I GET THE FULL PICTURE SVENDEPRØVE PORTFOLIO 11 P r e s e n tat i o n e l e m e n t s 4 GIRL 16 BOY 30 LITTLE GIRL 40 LITTLE BOY 48 OVERVIEW MARIE PROKOPEK Page 30 Page 4 ET 53,95 / 400,00 / 520,00 / 65,90 Moreton SHIRT 23,95 / 180,00 / 230,00 / 29,90 Niles SHORTS 29,95 / 220,00 / 290,00 / 35,90 Jeg lavede en del skitser undervejs og havde meget fokus på responsivt design til tablet og mobil. COVER GIRL: Lockport HAIRDECO (5-pack) 12,95 / 100,00 / 130,00 / 15,90 Capanda TOP 18,95 / 140,00 / 180,00 / 22,90 Dillon SKIRT 23,95 / 180,00 / 230,00 / 29,90 COVER BOY: Newcastle JACK- NameIt, var mine hoved inspirationssider. Prices listed as: EUR / DKK / SEK + NOK / CHF... the little girls and boys who made us smile again and again during the photo shoots! w w w.p om p de lu x.com SKITSER Our clothes are high quality and fan- Our SPRING/SUMMER collection in the POMPdeLUX you only need tastic design at a favourable price. It early spring and AUTUMN/WINTER col- to shop one place to get is inspired by the latest trends within lection in the late summer. a complete quality wardrobe for your adult fashion without forgetting it is to Have a look at our Online shop where children. be worn by children. It is comfortable you can buy everything from night wear We have clothes for children of all ages, to wear, it is easy to wash and above all to outerwear, daily wear and party wear from baby size cm to older chil- your children will be very well dressed. and where of course you will be intro- dren in size cm. We launch two collections per year; duced to our mix and match ideas. Eindhoven CARDIGAN 30,95 / 230,00 / 300,00 / 37,90 Joplin SS TSHIRT 18,95 / 140,00 / 180,00 / 22,90 Gosford SKIRT 19,95 / 150,00 / 200,00 / 24,90 Before Hummel, Bestsellers & hen you buy kids clothes at 23

5 Elementer i designet GALLERI Pinterestgalleri inspiration Endeligt layout INSTAGRAM PLUG-IN OG SOCIALE LINKS I konceptet er Instagram og sociale medier vigtige. Derfor var det vigtigt med et link til Instagram og andre sociale medier i Footeren. - Brugeren i målgruppen er vandt til at søge brugbare links i footeren. Envidere har jeg oprettet en side med et plugin som viser nyeste billeder med hashtagget så brugerne kan følge andre brugeres oplæg. Site med plugin - billeder linker til brugere på instagram. Plugin i html koden Jeg vidste at et af hovedelementerne på min side skulle være et responsivt og bevægeligt/levende galleri alla Pinterest SLIDER Script til plugin plageret nederst i html koden for hurtigere load. Links til sociale medieri footeren Et andet element var en stor slider som jeg indsatte en slider i toppen af sitet for at give det liv. Og har placeret alle scripts i bunden af,mit html doc for at undgå flaskehalse og optimerer loadningen af siden. FAVICON Selv om siden hovedsageligt er tilpasset tablets har jeg valgt at lave et favicon til omnibaren. Grunden hertil er at jeg i designet er blevet bedt om at redesigne logoet også. Og det bomærke jeg er endt ud med synes jeg er relevant at vise kan bruges her. 5 SVENDEPRØVE PORTFOLIO JUNI 2015 MARIE PROKOPEK

6 responsivt design pompdeluxkiddo.com pompdeluxkiddo.com pompdeluxkiddo.com Der er stor forskel på hvad der kan være på en mobil, og på en imac 27, så her har jeg selvfølgelig PÅ ALLE DEVICES. Jeg ville gerne have der var liv på index siden, så jeg indlagde en slider i toppen som kører selv. tilpasset de forskellige devices. Det har jeg blandt andet gjort ved at mange elementer, er bygget op med class= row-fluid og span som gør at elementerne flyder på plads til de devices de bliver bedt ISOTOPE ALA PINTEREST. om. Menuen og filtrene kollapser fra de kommer på mobil dev. Der er mange elementer der skal tale sammen på siden, så derfor valgte jeg et filter så brugervenligheden i det er bedre. Jeg kan godt lide den måde Pinterest løser det på så det tog jeg udgang- Disse funktioner er en af grundene til jeg har valgt at bruge Bootstrap elementer. spunkt i. Desuden ville jeg også gerne have liv i denne, så jeg fandt denne kode på nettet med De udvikler de sig heletiden i en sikker retning med tendenserne og alt er gennemtestet så længe du Isotope filterering hvor elementerne bytter plads ved hjælp af Jquery. På ipad ændrer rækkerne sig fra selvfølgelig gafler det de gode steder som på Github. Men det er også super nemt at kode dig vej til at være 4 til 3 i portræt tilstand og på mobilen er der kun en kolonne. det design du gerne vil have med de forudindstillede Bootstrap elementer. MARIE PROKOPEK SVENDEPRØVE PORTFOLIO J U N I

7 f low c h a rt TRENDS OG VALG Tendensen i tiden netop nu, er at onepage sites og scroll effects er meget oppe i tiden lige nu og er virkeligt lækkert designmæssigt og brugervenligt. Desværre skulle siden her indeholde en helt masse blog-elementer, hvilket gjorde at det var svært at forsvare at lave en onepage site. Derfor har jeg valgt at lave siden som vist herunder i mit flowchart med flere undersider. Index Blog Blog indlæg #POMPdeLUXkiddo Wallart Contact site Formular sender til min mail Gallery Alle sider linker til vores webshop via Footeren Denne underside er der mange af, da det er blog indlæg. Registrer - fiktivt/dødt link Instagram til vores hashtag 7 SVENDEPRØVE PORTFOLIO J U N I M A R I E P R O K O P E K

8 Tesnisk workflow PROGRAMVALG. IMAGE ASSETS Da der er mange billeder der skal være i samme størelse, på f.eks blog sitet, har jeg valgt at anvende imageassets i Photoshop og generere mange billeder fra en fil. Det kan især være praktisk at generere billedaktiver fra Dreamwaver - Kodning Crome - Testet/skrevet koder dirrekte en PSD-fil til webdesign med flere enheder. Jeg har i min mappestruktur en mappe udenfor mit site hvori jeg har mine layoutdele som psd filer. Cyperdock -FTP upload Safarri, Crome og Firefox- browser tests Photoshop - layoout og klargørring af billeder til web Illustrator - Logo og svg filer. SEO Der er kodet i HTMl5 Der er i head sektionen på hver side oprettet forskelline meta-tags for at vise hvilke søgeord der skal vises i Google. KOMMENTERING OG STRUKTUR jeg har i både min css og html skrevet kommentarer til mig selv eller kommende kodere. Jeg har holdt en god struktur i min kodning og renset ud undervejs. Både for at gøre det overskueligt for mig selv og andre men også for loadningens skyld. SCRIPTS -er placeret i bunden af HTML koden for at optimere loadning af sitet. GRIDS Der er anvendt grids fra Bootstrap, hvor der arbejdes med et gridsystem delt i 12 kolonner hvilket gør det nemt at kode et responsiv site. Kommentarer god læsbar struktur Psd fil med lag oplakdt med.jpg Bootstrap 12 col grid forklarring Mappestruktur i layout mappen Skærmdumps fra færdige filer MARIE PROKOPEK SVENDEPRØVE PORTFOLIO JUNI

9 Usability Jeg har valgt at låse min menu i toppen af sitet så brugeren heletiden kan navigere rundt. Jeg har valgt at lave en active style på mine links, så brugeren kan se hvor han eller hun er på sitet, ved at linket er en andenfarve der hvor den er aktiv. Da sitet mest er tænkt til tablets og touch platforme har jeg ikke valgt at fokucere på hover funktioner i mine ul og li elementer. På bloggersitet er der en menu med links til andre artikler og dele på sitet så brugeren heletiden bliver fristet til at surfe videre. Desuden har jeg fra start valgt at lave et filter så brugeren kan sortere efter det indhold der ønskes. I bunden af min side har jeg også valgt at lave en scroll to top funktion så brugeren hurtigt kan komme til toppen af siden igen Alle eksterne links til printable PDFer har jeg valgt skal åbne på et target blank- altså en blank side, da jeg synes det giver en god måde at navigere på. Jeg har valgt at fylde footeren med overskuelig info af kontakt og links til firmaet, webshoppen og sociale medier. Her har jeg anvendt gridet igen og delt det så der er 4 colonner ved at kalde <div class= span3 > op.( på mobil er der kun en kolonne.) 9 SVENDEPRØVE PORTFOLIO JUNI 2015 MARIE PROKOPEK

10 Formular og php KONTAKT FORMULAR DER VIRKER Til kontaktsiden er der en formular der gør at du kan sende en besked, for at det virker skal der være en php der fungerer og connecterde rigtige oplysninger med Hosten. Her kan du se jeg har indsat min egen mailadresse. Når der sendes en besked fra formelen, modtager jeg det hele i min mail som vist herunder. Her udfyldes formlen Her ses den mail jeg modtog få sekunder efter der blev trykket send på websitets kontaktformular. Når kontaktformularen er korekt udfyldt og du trykker send, kommer denne succes box frem. MARIE PROKOPEK SVENDEPRØVE PORTFOLIO JUNI

11 Test & kodning crome Test i Ipad 3 og 4 Test i Iphone 5 size CSS HTML kode Jeg tester sitet på rigtige devices når jeg oploader. Men undervejs tester jeg også rigtig meget direkte i Google Chrome, hvor jeg kan kontrolerer elementer. For eksembel tester jeg styles direkte i CSSen, ser om stylingen virker, finder og løser problemer og en helt masse andet. Ofte tester jeg styling her og kopierer det over i min egen css når det virker. 11 SVENDEPRØVE PORTFOLIO J U N I M A R I E P R O K O P E K

12 END OF GRAFISK WORKFLOW SVENDEPRØVE PORTFOLIO JUNI 2015 MARIE PROKOPEK KVALITETSVURDERING Det har været et kæmpe projekt at klare alene og det har været en hård og meget lærerig process. Der har været store udfordringer i at få tid og krav til at passe. Jeg er super glad for resultetet og synes klart det kunne relevant at sende i luften efter noget mere test & udvikling. HVAD KAN DER MERE GØRES? Da jeg har valgt at kode i Bootstrap skal siden efterfølgende tilkobles et CMS, så den kan vedligeholdes af alle. HVAD KUNNE GØRES ANDERLEDES? Jeg kunne, hvis jeg havde haft mere tid, kodet i et CMS system fra start. SIDSTE TANKER Jeg synes det er blevet et godt resultat. Jeg har måtte undervejs lave nogle designmæssige kompromisser ud fra POMPdeLUX ønsker og pga. tiden. Men i sidste ende var alle parter meget tilfredse og det er jo det vigtigste, så alt i alt super godt.