1. No category

GRAFISK WORKFLOW
AF MARIE PROKOPEK
MARIE
PROKOPEK
Redegørelse gr afisk 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 25-45 å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-
Indkomst er hovedsageligt i middel gruppen til mellem høj.
LUX er ikke ’den nye i klassen længere’ og skal re-positioneres – med andre
De er kvalitets- design og mode-bevidste, status er vigitgt, de vil gerne
ord ’udkomme’ i en ny og forbedret udgave og bruge denne katalysator til
udstråle overskud. Vil gerne reklamere for sig selv og for POMPdeLUX på
igen at være ’top of mind’ i kundens bevidsthed.
sociale medier, hovedsageligt Facebook og Instagram, som målgruppen
Krav: POMPdeLUX vil gerne relanceres på ovenstående punkter – men i en
er der kan rives ud af magasinet og printes ud på den nye content
er storforbrugere af. Dette er et vigtigt salgselement for POMOPdeLUX.
let grad så kunderne stadig kan genkende det stærke brand, der står for
website. Ideen er at plakaterne som skulle hjælpe med at få kunderne
Desuden er en stor del af vores varer købt via tablets, hvilket gør at den
god kvalitet og lækkert design. POMPdeLUX vil gerne udstråle ny energi og
til at reklamere for os mens de reklamerer for dem selv og et designg
responsive og mobile del er super vigtig for POMPdeLUX! Jeg har derfor
være først til at skabe trends. Alle børn – især de store (mellem 7-10 år)
deres liv.
også valgt at den primære platform er tablets.
der sætter højere og højere krav til moden – skal kunne se sig selv i tøjet.
Sekundær målgruppe: Bedsteforældre 60+. Her vil primær-målgruppen
Referencer: POMPdeLUX konkurrerer på 8 markeder og disse markeder er
have så stor indflydelse, at jeg ikke vælger at fokucere på denne gruppe.
meget forskellige – men de største konkurrenter er H&M, NAME IT, ZARA,
Afsender: POMPdeLUX.
Hümmel og diverse supermarkeders tøjlinjer. POMPdeLUX skal afspejle den
Pompdelux åbnede dørene op for et nyt dansk børnetøjsmærke i 2006 (for
position de hele tiden har haft i dette felt af børnetøjsmærker, men i en
børn i str. 80-152 cm) og vækstede stort fra dag et. De to salgskanaler er
mere moderne udgave.
webshoppen www.pompdelux.com og via konceptet Home Shopping. I dag
POMPdeLUX ønsker indsigt og dokumentation for arbejds- og designproces-
befinder POMPdeLUX sig i 8 lande med cirka 400 Shopping Advisors – som
sen samt moodboard/inspirationskilde.
er navnet på de ’værtinder’ der afholder disse Home Shopping events i
Ligeledes forventes tanker og argumenter fremlagt.
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: http://www.inspiredbykids.dk/)
• Responsiv
• Opbygning, indhold og udseende (ift. udtryk)
• Hvordan kan POMPdeLUX selv bruge og opdatere en side som denne?
MARIE PROKOPEK |
SVENDEPRØVE PORTFOLIO
| J U N I 2 015
målgruppens private hjem.
2
form af en fuldt funktionel og responsiv hjemmeside.
• Jeg redesignede katalog, med mere redaktionelt indhold og en ny
designmanual over fonte og elementer.
• Desuden lavede jeg en ny ting hertil, #WallartByPOMPdeLUX, plakat-
• Redesignede logo samt logos med taglines til WallartByPOMPdelux og til
den nye hjemmeside POMPdeLUXkiddo.
Se det færdige resultet her: http://marieprokopek.com/pompdeluxkiddo/
Tidslinje gr afisk workflow
Research og ideudvikling
Indhold på website
Kundemøde
Upload
Jeg går igang med research og ideud-
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
vikling 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.
opgaven af kunden, POMPdeLUX,
Jeg uploader med Cyperduck.
Kundemøde
Flowchart
Klargørring af filer
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.
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.
Jeg modtager opgaven
Jeg bliver bliver briefet på
eget domæne marieprokopek.com og uploader til en underside her.
grafiske designer.
Tidsplan
Godkendelse af grafisk linje
Skitser/Layout
Jeg laver en tidsplan for at kunne over-
Jeg modtager godkendelse på den
Jeg laver skitser/oplæg i Photoshop.
holde deadline, som er 21 arbejdsdage til
grafisklinje og logo.
Præsentation
Jeg præsenterer det færdige produkt til den
Korrektur
Overdragelse
Jeg læser korrektur på layoutet og
POMPdeLUX godkender.
mødes igen med designeren og modtag-
NB. -Da jeg har valgt at kode i Bootstrap
er rettelser og korrigerer.
skal siden efterfølgende tilkobles et CMS,
at lave både website, katalog og logos .
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
CSS, HTML, PHP og javascript.
nå ud til så mange som muligt.
katalog og website.
3
SVENDEPRØVE PORTFOLIO
| J U N I 2 015 | M A R I E P R O K O P E K
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ÆØÅ
0123456789
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æøå 0123456789
Georgia regular | bold italic
size 14| leading 16 | tracking 75 |
abcdefghijklmnopqrstuvwxyzæøå
0123456789
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
80-152 cm of high quality and at a favourable price.
We are in love with the colours of spring and summer.
Size 110-152 cm
Size 110-152 cm
and colourful shades made especially for this collection.
entire wardrobe in one
An easy way of shopping your child’s
place only!
Size 80-104 cm
Size 80-104 cm
4
Page 40
| J U N I 2 015
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 80-104 cm to older chil-
your children will be very well dressed.
– and where of course you will be intro-
dren in size 110-152 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 http://www.inspiredbykids.dk/ &
hen you buy kids clothes at
23
Elementer i designet
GALLERI
Pinterestgalleri
inspiration
INSTAGRAM PLUG-IN
OG SOCIALE LINKS
Endeligt layout
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
• Script til plugin plageret nederst i html koden for hurtigere load.
• Links til sociale medieri footeren
SLIDER
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
| J U N I 2 015 | M A R I E P R O K O P E K
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 2 015
6
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 2 015 | M A R I E P R O K O P E K
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
en PSD-fil til webdesign med flere enheder. Jeg har i min mappestruktur en
• Dreamwaver - Kodning
mappe udenfor mit site hvori jeg har mine layoutdele som psd filer.
• Crome - Testet/skrevet koder dirrekte
• 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
• Mappestruktur i layout mappen
Bootstrap 12 col grid forklarring
• Skærmdumps fra færdige filer
MARIE PROKOPEK |
SVENDEPRØVE PORTFOLIO
| J U N I 2 015
8
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.
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
Desuden har jeg fra start valgt at lave et filter så brugeren kan sortere efter det indhold der ønskes.
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
| J U N I 2 015 | M A R I E P R O K O P E K
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
| J U N I 2 015
10
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 2 015 | M A R I E P R O K O P E K
END OF
GRAFISK WORKFLOW
S V E N D E P R Ø V E P O R T F O L I O | J U N I 2 015 | M A R I E P R O K O P E K
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.