portfolie det hele
-
Upload
marie-prokopek-prokopek -
Category
Documents
-
view
226 -
download
5
description
Transcript of portfolie det hele
Portfolie Grundforløb
Indhold3 GrafiskdesignogProcess//21Grafikogbillede//31TYPOGRAFIOGOMBRYDNING//45Grafiskworkflow//
GrafIsk desIGn oG Process//
4
Idé
Redesign af en hjemmeside/webshop for Inn Sale In-ternational Aps. Den eksisterende side www.innsale.dk, er pt. uoverskuelig, rodet og udstråler slet ikke den eks-klusivitet og indbydende linje firmaet ellers står for. Den giver desuden et indtryk af at den ikke blevet behandlet i mange år. Kodningen vil ske efter eksamen, så jeg har således udelukkende stået for design-delen af dette pro-jekt. Min ide var at designe en enkel og indbydende side, i tråd med firmaets værdier og produkter. Grundideen tog udgangspunkt i et menukort/drinkskort - nemt, overskueligt og appetitvækkende.
Kunden og Målgruppen og sloganet
Inn Sale International, er en dansk import /eksport virk-somhed, og sælger produkter til professionelle indenfor restaurationsbranchen. Produkterne strækker sig fra barudstyr, maskiner og udklædning, til dekoration og sirup, og mix til drinks. Hovedsagligt fokuseres der på varer fra Monin. Monin er verdenskendt for sine alkoholfri mixer sirupper til drik-kevarer, der fås i et hav af forskellige varianter. ISI’s koncept er altså at sælge produkter til at drive en smagfuld forretning inden for deres kundegruppe. Ved målgruppen og dennes behov, er der tale om indkø-bere for diskoteker, barer, cafeer, restauranter, hoteller
GrafIsk desIGn oG Process
}Opgavenlød:Designellerredesignetprodukt.Derkanfritvælgesmellemområderne,tekstil,mode,arkitektur,møbler,bygninger,brugsgenstandetilkøkkenoghjemsamtgrafiskdesign.Opgavenerindividuel.Krav;dokumentationafdesignproces,skriftligredegørelse,visningafproduktogevt.Mockup,samtevaluering
samt beslægtede virksomheder såsom catering-bran-chen. Målgruppen er bred fra provins-cafe ejere, til store hovedstads diskoteker. Men fælles for disse er at de har med finger på pulsen og ønsker eksklusivitet og mode-bevidsthed i de varer de køber. Skal målgruppen katego-riseres er det generelt, designinteresserede byboere med en husstandsindkomst i den højere ende. Så der var in-gen tvivl om, at designet skulle fremstå mere eksklusivt end dét ISI allerede havde. Kundens ønsker var „Bevar logoet, ryd op i butikken og lav et slogan”Ellers havde jeg frie hænder. Mine tankeoverskrifter fra start var, ap-petitvækkende eksklusivitet, overblik/brugervenlighed og en rød tråd.
Proces
I processen har jeg brugt brainstorm, skitser, kamera og fotos.Min idé om et menukort, indebar fotos af drinks som „splasher”. Jeg udførte derfor en del forsøg med ka-mera. Resultatet efter redigering i Photoshop, er blevet som ønsket. Undervejs har jeg været i tæt kontakt med John Lund Andersen, direktør for ISI og Allan Søren-sen, tekniker og webansvarlig for ISI, omkring design og det tekniske. Jeg var nødsaget til at undersøge mulig-hederne til bunds, for brugen af mit design ved Scan-net, udbyderen for WebShopen ISI har i dag og fortsat ønsker at bruge. Jeg har derfor sat mig grundigt ind i opbygningen har undervejs brugt demoer fra Scannet.
5
Under forløbet har jeg fået godkendt og rettet designet, i samråd med John. ISI har godkendt det endelige resul-tat og ønsker et samarbejde til kodning af designet.
Resultat og kvalitetsvurdering
Processen har igen lært mig en hel del, om hvordan jeg kalkulerer min tid og organiserer mit arbejde. Selv er jeg tilfreds med resultatet.
Processen
slutstart
udleverInG af oPGave
recearche oG InsPIratIon
intruduktionsmøder med kunden
Qa & Godkendelse
overleverInG
redeGørelse oG dokumentation
møder med kunden ændrinGer
desIGn & fotoGraferInG
skItserInG
6
GrafIsk desIGn oG ProcessskærmdumPs af isi’ s WebshoP inden redesiGn
Kundenønskersammewidth-målogfortsatscroll,menovertalestilmindreafdet.}
7
InsPIratIon
InsPIratIon
8
likör farver
Hjerne storm
orden
eksklusIvItet
smaG
enkelthed
menu kortdrInks kort
coctailglas
lIme
jordbær
sPlashdråber
fest
PInklimegrønaPPetitvækkende
overblik
Glæde
frIskhed
med På beatet
modecafelIv
Grafisk desiGn oG Process// brainstorm 1
i idéProcessen var min første idé drinkskort med flotte billeder med floW i.
9
resarGe af WebshoPs fra scannet
monIns hjemmesIde InsPIratIon
GrafIsk desIGn oG Process// research- oG defInItIonsfasen
10
Helvetica Neue (tt) ultraligHt 24 ptHelvetica Neue (tt) ultraligHt 12 pt
Helvetica Neue (TT) Light 9 pt
Helvetica Neue (TT) Light 12
menu redIGerInG oG målGruPPetanker
font oG farvevelG
GrafIsk desIGn oG Process
Brainstormmenuredigeringogmålgruppetanker
11
ideudviklinG brainstorm 2 & første skitser oG farvevalG
12
GrafIsk desIGn oG Process// skItserendelIGe skItser
Påallesidererderibundenetbilledistilogstemningmeddenaktuellesidesindhold.}
13
GrafIsk desIGn oG Process//sloGan oG headder
Vi sætter smag på din Verden
Headderenhavdejegfrastartenideomskullelyseafpinkoggrønidrinks,enfrozenogensplashcoctailvargrundideen.HererresultatetISIsælgersmagsoplevelsertilfleresanser,synssansen,følesansenogfremforaltsmagssansen.Detteudvikledesigiminetankerunderprocessenmensjegfotograferede,pludseligpoppededetopimithoved-„ISI-Visættersmagpådinverden„Sloganetkomaltsålidtafsigselv.
}
Inn Sale International Vi sætter smag på din Verden
14
udsnit af billeder fra fotoforsøG
GrafIsk desIGn oG Process// fotos
Allebillederblevoptagetiraw
15
billeder fra fotoProsessen
Testaffotosiphotoshopforatseomisooglukketidvarregulerekorrekt
Altformegetstøjmentætterepåmålet
16
GrafIsk desIGn oG Process//fotos
Detvarsværtatfindedenrigtigemådeatsplashevandpå.Jeglavedeflereforsøgmedatdumpefrugter.Dettegavogsåengodeffekt,menjegvillegernehavecoctailenhavdeetspecieltflowivæsken,somomdenligevarlandethårdtpåbordetogskvulpedehårdtmodhøjremedfastfrosnedråber.Dettekunnekunløsesmedluft.Herervistforsøgmedminikompressorogairbrushpistonsomvistesigatgivedetrigtigesplash.}
17
forsøG med airbrush Pistol oG komPressor
18
redIGerInG af udvalGte fotos
GrafIsk desIGn oG Process//
Brugaflevelscurvesoghuesaturationvarenstordelafprocessendajegønskedemegetklarefarver.Mangebilledererheltfarvetom,foratfådetlidtsyntetiskeneonagtigeudtrykjegønskede.}
19
udsnit af fritlæGninG.
Jegharfritlagt,optimeretoglaveteffekterpåsamtligebilledertildenfærdigeopgaveiphotoshop.Detteerderforkunetmegetlilleudsnit}
ekstra Info
Grafik oG billede //
22
blomsten og jeg har valgt at præsentere bogen i to for-skellige farver, sort og pink.
Kvalitetsvurdering
Jeg synes udfaldet er blevet rigtig godt. Omslaget har en god stop effekt og stemningen fra stil perioden rammer også med den nutidige retro-minimalisme jeg ønskede at frembringe.
Krav: Gyldendals logo på forside og ryg, hvor forfat-terens navn samt bogens titel ligeledes skal placeres. Titlen skal indeholde teksten Krop og Klær. Udleveret tekst samt billede af forfatteren, skal placeres på flappen. Yderlig krav, en forside illustration. Resten er frit, her-under format.
Design og grafik
Jeg valgte at fokusere på udviklingen fra 50’erne til 70’erne, en tid hvor ikoner som Twiggy, Chanel, Hep-burne og Marimekko blomsten, var tilbagevendende emner i min brainstorm. Jeg valgte ud fra tankerne om Marimekko, at illustrere Twiggy og Hepburne i vectore, ved hjælp af Illustrator. Jeg ville gerne have at den „flade illustreering blom-sten har skulle gå igen men ikonerne skulle give farve kontrast hertil.Jeg søgte fotos på nettet af Twiggy og Hepburne. Herefter kopierede jeg billedet til illustrator og voctoriserede ved hjælp af pen tool og koblede de enkelte paths i grupper.
Font og farve
Valget af fonte tog jeg ud fra Chanel logoet, som oghså havde indvirkning på mit valg af overskrift.Bagside tek-sten skrev jeg selv ud fra mit kendskab til perioderne og forfatteren.Farve valget er også taget ud fra Marimekko
Grafik oG billede // vector Grafik
Opgavenlød:Vælgenstilperiode.DesignetsmudsomslagtilenbogafRudolfKristianAlbertBroby-Johansen.Tidtilløsningafopgaven,8timer.Opgavenvarindividuelsåjegharproduceretaltselv.}
23
Orginalfotofør
EfterPhoposhop
før oG efter PhotoshoP
24
Iphothoshoplavedejeg1lagkopi,justeredelevelsogcurves,lavedeyderligere2kopier.Konverteredeetbilledetilblackandwhite.Rettedehue&saturationibilledetmedfarve,såkjolenfremstodunaturligtrød.}
Grafik oG billede //billede rediGerinG
25
}Herefterbrugtejegquickselectiontool markededekjolenoglidtaføreringeneiblackandwhitelaget.Invertededemarkeringenoglavedeenmaske.Tilsidstsamledejeglageneogtilføjedelidtekstrakunstast
26
Grafik oG billede // vector Grafik
JegflyttedeherefterbilledettilIllusrtator,hvorjegoprettedeetnytlag.Vedhjælpafpenntoolkortedejegfarvetonernenedtilenkeltereneflader.Enlangmenprecisprocess,ogmegetmereestetiskendlivetrace”.Desudenerwebfotoetaltforlavtopløsttilatillustratorvilkunnedelelagenepænt.Heroversesudsnitafudviklingeniopbygningenafvectoren.}
27
28
t
Krop og klær No 5
“Fashion fades, only style remains the same” COCO CHANEL
Modens historie fra figenbladet til korsettet, fra parykken til skaldeiss-sen, fra ringbrynjen til lårkort, set med Broby-Johansens altseende øjne og beskrevet med hans tæft for markante formuleringer.
“Klær er kunst, bundet til tid og sted, som alt andet mennesker former og farver”
Fra Hepburne og Twiggy, til Hepburne igen
“Fashion is not something that exists in dresses only. Fashion is in the sky, in the street, fashion has to do with ideas, the way we live, what is happening.” COCO CHANEL
70’erne
50’erne
60’erne
KROP OG KLÆR NO 5Er 5. bind af Broby Johansens serie om modens stilhistorie. I denne udgave bliver vi taget i hånden gennem 50’erne og op til 70’erne, og ser hvordan mode udspringer, blomster og dør – nogle forbli-ver mange genopstår..
En rejse gennem 3 årtier som Broby-Johansen absolut har en mening om. Hans egne favoritter, som Hepburne, Twiggy, Monroe og Bond Pigerne, bliver gået efter i sømmene, vendt på hovedet og vurderet, overfor det han fandt absolut, forvrænget, forkert og forkasteligt.
Tag med på en rejse i modebilledet og følg den kultur-kritiske forfatters fængende fortællende mod-etolkninger.
Rudolf Kristian Albert Broby-Johansen (25. november 1900 i Ålborg - 9. august 1987) var kunst pædagog, kommunist, engageret debattør og oprører. Broby-Johansen var flittig en skribent, der bevægede sig inden for et bredt fagligt spek-trum med vedkommende fæn-gende og kritisk kulturjournalistik. Han kæmpede for at få sine artikler publiceret, mens det senere gik langt lettere med bøger. Hans lange række af kunstforklarende bøger havde det til fælles, at han ønskede at formidle det grundlæggende kunst-forklarende budskab, at alle kan se på billeder. Blandt de hædersbevisninger, som Broby-Johansen blev tildelt, var Holberg-medaljen (1970), Dansk Forfatterforenings Faglitterære Pris (1975), LO’s Kulturpris (1980), PH-prisen (1984) samt en udnævnelse til æresdoktor ved Odense Univer-sitet i 1985.
AF :RUDOLF KRISTIAN ALBERT BROBY-JOHANSEN
Krop
og
klær N
o 5
AF :R
UD
OLF K
RISTIAN A
LBERT BRO
BY-JOH
AN
SEN
SMUSDOMSLAG KORTTIDS OPGAVE I DESIGN OM STILARTERNES MODE
Grafik oG billede // vector Grafikdet færdiGe resultat i Pink
29
KROP OG KLÆR NO 5
“Fashion fades, only style remains the same” COCO CHANEL
Modens historie fra figenbladet til korsettet, fra parykken til skalde-isssen, fra ringbrynjen til lårkort, set med Broby-Johansens altseende øjne og beskrevet med hans tæft for markante formuleringer.
“Klær er kunst, bundet til tid og sted, som alt andet mennesker former og farver”
FraHepburneogTwiggy,tilHepburneigen
70’erne
“Fashion is not something that exists in dresses only. Fashion is in the sky, in the street, fashion has to do with ideas, the way we live, what is happening.” COCO CHANEL
KropogklærNo5
50’erne60’erne
KROP OG KLÆR NO 5Er 5. bind af Broby Johansens serie om mod-ens stilhistorie. I denne udgave bliver vi taget i hånden gennem 50’erne og op til 70’erne, og ser hvordan mode udspringer, blomster og dør – nogle forbliver mange genopstår..
En rejse gennem 3 årtier som Broby-Johansen absolut har en mening om. Hans egne favorit-ter, som Hepburne, Twiggy, Monroe og Bond Pigerne, bliver gået efter i sømmene, vendt på hovedet og vurderet, overfor det han fandt absolut, forvrænget, forkert og forkastel-igt.
Tag med på en rejse i modebilledet og følg den kultur-kritiske forfatters fængende fortæl-lende modetolkninger.
RUD
OLF K
RISTIAN ALBERT B
ROBY-J
OH
ANSEN
Rudolf Kristian Albert Broby-Johansen (25. november 1900 i Ålborg - 9. august 1987) var kunst pædagog, kommunist, engage-ret debattør og oprører. Broby-Johansen var flittig en skribent, der bevægede sig inden for et bredt fagligt spektrum med ved-kommende fængende og kritisk kulturjournalistik. Han kæmpede for at få sine artikler publiceret, mens det senere gik langt lettere med bøger. Hans lange række af kunstfor-klarende bøger havde det til fælles, at han ønskede at formidle det grundlæggende kunst-forklarende budskab, at alle kan se på billeder. Blandt de hædersbevisninger, som Broby-Johansen blev tildelt, var Holberg-medaljen (1970), Dansk Forfatterforenings Faglitterære Pris (1975), LO’s Kulturpris (1980), PH-prisen 81984) samt en udnævnelse til æresdoktor ved Odense Universi-tet i 1985.
Af Rudolf Kristian Albert Broby-Johansen
SMUSDOMSLAG KORTTIDS OPGAVE I DESIGN OM STILARTERNES MODE
det færdiGe resultat i sort
ekstra Info
Grafik oG billede // vector GrafIk
Grafik oG billede // vector GrafIk tYPoGrafi oG ombrYdninG//
32
Kn
pskrå streger i minuskel E-rne. Den store størrelseskontrast mellem brødtekstens 10 pt og rubrikkens 56 pt er bevidst og skaber en god sam-menhæng mellem fonte og det grafisk design. Den mini-male afstand mellem rubrik og brød på 0,5 mm blev gav bedst læsbarhed og harmoni. Kontrasterne understøtter det utraditionelle, kvadratiske og frimodige look, jeg ønskede i designet.Billedteksterne er i Helvetica Neue (TT), 37 Thin Condensed 9 pt. som er let og luftig. Jeg arbejdede med at designe en ligatur af titlen, resul-tatet blev dog luft mellem P KogN, som giver fornem-melse af ligatur, men er nok mere en display typografi. Der er to tekstspalter på hver side, som gennemsnitligt indeholder 50,5 anslag pr. linje og holder sig herved under den almindelige grænse for god læsbarhed, 60-65 anslag. Billede og tekst er tilpasset så de holder register.Brød-teksten er venstrejusteret for at undgå floder, og indryk-kene er med til at give holdepunkter til orientering i teksten. Placeringen af spalternes margin giver en harmonisk placering af tekstfelter og billeder, der holder sig cen-treret og fremhæver tekst og billeder på opslagssiderne som noget, der hænger sammen. Paginering og bund-billedtekster er henholdsvis ven-stre- og højrejusteret og flugter op til ydermarginerne. Rubrikker flugter med brødtekst og topmargin.
Krav: smudstitelside, titelside, kolofon forord, indholds-fortegnelse og mindst 8 indholdssider. Trykark med for-matet 74x52 eller 72x102 cm prima/sekunda. Hvis ekstra tid, design smudsomslag. Mit valg faldt af stilarter var Popart og nutid. Jeg øn-skede at henvende mig til læseren, som gerne vil have mening og viden med eftertanke om de valgte perioder og tog udgangspunkt i, at skrive en samfundskritisk og atypisk gennemgang af stilperioderne. For at give bogen et kvadratisk og fangende udtryk, valg-te jeg et bogformat i 200x200 mm. Jeg udførte forskellige analyser af klummestørrelse, ud fra Van de Graf og Jan Tschhold. Den bedste indstilling var dog InDessigns forslag. Alle forsøg med trykark gav spildplads, men jeg vurderede at bogformatet var vigtigere for bogens udtryk.I produktionsmetoderer der bl.a brugt. Para-graphstyles, mastersider og regulering af grundlinienet.i InDesign.
Begrundelse for typografi
Valget af font til gennemgående rubrik og til stopeffekt på forside, var vigtig.- Den skulle give, sige noget om stilarterne og udstråle eksklusivitet og enkelthed. Fonten Matra gav den ønskede virkning. I kontrast hertil valgte jeg som brødtekst, Legacy Serif, en antikva, fra skrift-gruppe 1, fonten er frisk, let læselig og moderne med de
tYPoGrafi oG ombrYdninG
Opgavenlødfremstil,medenrødtrådmellem,enbogogenhjemmesideomtostilperioder.Skriventekstpåmindst12000anslag,fordeltmellem2til4stilperioder.Redegørforvalgafbogformatogmarginforhold.Lægvægtpå,design,layout,typografiogombrydning.Opgavenerindividuel.}
33
Virkemidler
Kontrast i billeder, fonte og farver skal lede læseren nemt og underholdt igennem bogen. I bevidsthed om det gyldne snit og læseretning, er samtlige rubriktoner valgt ud fra toner i billedet på samme opslag. Billederne forholder sig til tekstindholdet. De dynamiske udtryk og farver i billederne giver sam-spil og kontrast, til den statiske tekst og det kvadratiske design. Variationen af baggrunds farve og negativ skrift, skaber liv. Rubrik-typografien er sammen med billeder og farve, med til at understrege opslagenes sammen-hæng og emne, så det grafiske design fanger læserens opmærksomhed.
Kvalitetsvurdering
Jeg er rigtig godt tilfreds med mit arbejde og har fået et dragende forhold til typografi og ombrydning. Tekniks har de fleste standard regler har sat sig på rygraden.
Mereendisplaytypografiendligatur.Menresultatetergodt.
34
tYPoGrafi oG ombrYdninG// ParaGraPh stYlesskærmdumP af mastersider
skærmdumP af indstillinGer & sidetal - master d som eksembel
RATIONELLEPRODUKTIONSMETODERDereroprettetfleremastersider,medblandtandetpaginering,marginfor-hold, tekstbokse,baggrundsfarverogreguleringafgrundlinjenettet,mm. }
35
skærmdumPs: udsnit oG oversiGt over ParaGraPh stYles
36
tYPoGrafi oG ombrYdninG
37
13mmbottommargin
12,7mmtopmarign12,7mminsidemargin
12,7mmoutsidemargin
Collums2stk
Baselinegridstart26,46mm
Pagineringenervenstrejusteretisintekstboksogflugteroptilydermarginen.
38
Grundlinjenettettilsvarerbrødtekstensskydningogertilpassetsåledes,atrubrikkensx-højdeflugtermedtopmarginen.
Allebillederflugtermedmarginforholdeller/ogcollums
Eksempelpåcitatflugtermedindholdibilleder-mundenpåsomudtaltecitatet
tYPoGrafi oG ombrYdninG
39
Allebillederflugtermedmarginforholdeller/ogcollums
Allebilledteksteribundenafsiderne,følgerpagineringen
40
tYPoGrafi oG ombrYdninG// reGister oG læseretninG
rubrik billeder oG læseretninG er nøje tilPasset På samliGe ideer udfra indhold oG læseretninG
valG af farver i rubrik er På hver side udvalGt udfra toner i billederne oG læseretninG
41
billeder oG rubrik holder reGister oG marGin
alt efter billedernes toner skifter baGGrundsfraven melllem sort oG hvid for blikfanG oG læsbarhed
42
tYPoGrafi oG ombrYdninG// reGister oG læseretninGeksembel På farvealG til rubrik udfra billeder
43
En samfundskritisk bog om
Pop-art og nutiden Af Marie Prokopek
Pop Kunst Nutid
„Flot og fængende. Interessant vægtindhold”Magasinet Vingaard.
„Inspirerende Tankegang”Politikken
”Forarget forelsket og fordrejet”Tidens tanker
PopKunstNutid
Pop kunst nutid er en atypisk gennemgang af stilperioder.De typiske gab-fremkaldendelser opslagsbøger ellers kan give, vendes til dirrekte spørgsmål til læseren og her i en refl ekterende Stilperioderne, jeg vil vise dig lidt om er, pop-art og nutiden.Pop-arten er en af de stilperioder, der har fanget mig, givet mig en lyst til at spejle mig, og har åbnet min horisont på mange områder. Derfor vil jeg også tage dig med på en lille rundtur på nutidens stil og stemning.
Alt udspringer af noget. Verdens farver blomstrer af de frø, der tidligere er sået.Du og jeg er en blomst i nutidens buket, plukket i ældgamle bede.Et væld af afblomstrede ismer og stilarter vælter rundt i historien og synes ofte uoverskuelig, konstruktivisme, impressionisme, ekspressionisme, dadaisme, isme isme isme… Hvad var hvor, og hvem var hvad. Enhver har en blomst, de synes er den smukkeste eller den mest tiltalende. Jeg har fl ere favoritter.
Ville din hverdag fungere, hvis internet, computer, mobiltelefoner, GPS og alkohol blev skiftet ud med leksikon, skrivemaskine, mønttelefoner, landkort og Rynkebysaft. Ville du så nå igennem din hverdag til tiden?
Hvor var vi nu, hvis forbruget var fortsat?
Hvis EGOismen tilføjes som en stilperiode, synes du sikkert straks det er mere spændende. Hvis du pludselig kan se dig selv i historien og forstår, at du er et produkt af stilperioderne, vil du så alligevel en tur ned i dybet?
Tag med på en smafundskritisk malende tur igennem poparten og nutidens stilistiske tendenser og opråb
En samfundskritisk bog om Pop-art og nutiden Af Marie Prokopek
KUNSTNUTID
POPMarie Prokopek f.982, Mediegrafi ker elev og freelance journalist, til blandt andet Livsstilsmagasinet C´est, og menings opråbende klummer på internettet.
Marie har siden 2006 lavet journalistisk arbejde, for forskellige magasiner og platforme på internettet.Hendes artikler og klummer er malende, metaforiske og fyldt med hendes mening om mennesket og livet.
Trodsdetatformateter100%kvadratiskvildetoftesomhersynevertikaltaflangt.Denneeffektarbejdedejegbevidstarbejdedemed.}
Underprojektetsøgtejeginfoomcopyrightpåbillederne,jegkomtilfældigvisikontaktmed,KristianVonHornslethselv,somønskeratfremvisebogenpåsinhjemmeside.}
ekstra Info
Grafisk WorkfloW//
46
ker i gang hos målgruppen så de skal prøve sig lidt frem og gå på opdagelse. Menuen viser tydeligt hvad de fo-skellige sider linker til.
Typografi
Teksten der står skrevet på websitet er valgt ud fra de-signet af bogen. I menulinien var det vigtigt for mig at ordene stod tæt mod kanterne af linien og var enkelte. Jeg har valgt gennemgående at bruge font family Arial, Helvetica, sans-serif, da jeg synes det gav den bedste brugervenlighed og opfyldte mine ønsker.
Browserkompatilitet
Websitet er testet i Firefox, Safari og Internet Explore, hvor de på alle sammen virker fint og ligner hinanden.
Kvalitetsvurdering
Jeg ville gerne have websitet bare var en ”appetitvækker” til bogen og jeg synes siden lever på til mine forventninger. Det eneste problem der har været under projektet har været at ar-bejde med mit template.
Layout
Layoutet er enkelt og holdt i sort hvid, som er i tråd med forsiden og indholdet i bogen. Desuden er dette valgt ud fra at kontrasterne skaber blikfang og giver bruger-venlighed. Jeg har valgt at bruge fonten Matra som jeg også anvender til forside og rubrikker i bogen. Jeg valgte at lade det ordene skifte fra side til side. Skriften er ikke web sikker så og anvendte derfor et baggrundsbillede på hver wrapper og indsatte menulinie for sig herefter. Jeg har derfor ikke valgt at bruge en template.
Komposition
Jeg valgte at lave en forside som leder videre til index-siden. Dette faldt mig logisk da en bog også har en sådan.Web-sitet er bygget op med følgende, en wrapper, (billedet i wrapperen forskelligt fra side til side da jeg synes det gav det bedste resultat. Der er derfor heller ingen head-der da billedet opdeler siden) menulinje, bokse til bille-der animation og tekst. Dette går igen på alle sider, men indholdet er forskelligtfra side til side.
Usability
Der er taget højde for brugervenligheden på websitet. Bogen og siden er skabt, ud fra en idé om at sætte tan-
StorryboardogskeletforwebstilartMarie
Grafisk WorkfloW
Opgavenlødlavenhjemmesideogenbogomstilarter.Websitetskalbeståafenindex-sidesamt3underliggendesiderogtofiktivesider.Sidenogbogenskalhaveenrødtåd.Derskallavesfrimærkeskitser,storyboard,skeletogsitemap.Deterindividuelt,såjegstådforheleproduktionenbagdetteprojekt.}
47
P tag font-size: 10px, color: #FFF, margin L 8px Teksten venstre-stilles font-size: 18px, color: #CCC
Font valg Skriftvalg - brødtekst Arial 12px
abcdefghijklmnopqrstuvwxyzæøå
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
Skriftvalg – menu a Arial 26 px
ABCDEFGHIJ-KLMNOPQR-STUVWXYZÆØÅ abcdefghijklmnopqr-stuvwxyzæøå
Storyboard
Betingelser gældende for alle sider Alle billeder og ami-mationer findes i mappen ‘findes i mappen „images”.’ og al tekst findes i mappen ‘txt’.Sitet skal være centreret i browseren. Font family, Arial, Helvetica, sans-serif, fs10 px, lh 14 px.
Wrapper H 600px,W 900px, margin-right og left, auto, bg colour #FFFFFF, img varierer fra side til side, se skelet.
Billedpil img :Hjem/billedpil img tright pil_03.gif” Pilen placeres i toppen i venstre side af headeren i en id-box(float left, h 72px w126px ) linkes til side 1 via hotspot- Pilen er det eneste sted der linker tilbage til side 1
Menu Menuen består af en id box (float left, W 588 px, H 23 px, margin left 310 px) som indsættes efter Menupunkternes rækkefølge: Pop Kunst, Kunst Nutid, Bogen
#Menu a font-size 26 px, font-w lighter, font-v normal, farve #fff, text decoration NONE. Padding: T 2 px, L 10 px. Margin: T 3 px, L 40 px.
StorryboardogskeletforwebstilartMarie
Grafisk WorkfloW // floWchart oG storYboard
dødt link hotsPot boG
index.html
side.html
PoPside. html kunstnutid.html boGen.html
dødt link
48
4 font-size: 10px line-height: 14px color: #333
1 2
3 4
wrapper Background-image: url(bogweb/images/index-logo.png
1 menu float: left H 23px, W 588px Margin: T 198px, L 310px 2 #menu a font-size: 24px; font-weight: lighter color: #FFF, font-variant: normal margin: L88px , T2px float: left
3 tekstbox float: left H 50px, W400px padding: T 50px margin: L335px, T100px font-size: 14px font-weight: lighter
Grafisk WorkfloW // storYboard oG skelet
index.html
600p
x
900px
49
13
45
wrapper background-img bogweb/images/side-1.png)
1 billedpil float: left H 72px, W 126px img :tright pil_03.gif”
2 Img:flags.jpg” H 295 px, W100 px Margin: T 20 px, L 400px
3 Animation box float right margin: T 4px img: animation-raucg.gif
4 billleds1, img crybaby img H 200px, W 200px float: L. Margin: T 168px, L 10px
5 tekst1 box float: left. H 350px, W420px Margin T 20px, background-color: #000
6 Billed1pop float: left H 200px, W 200px Margin: T 128px, R 20px, L20px
6
2
side.html
600p
x
900px
50
5 billed3popside float: left H 200px, W 200px margin: T 168px, L 10px img: pop/rl.jpg
600p
x
900px
12
3
5
wrapperpop,
background-image: url(bogweb/images/pop-side.png) 1 #billedpil float: left H 72px, W126px img :tright pil_03.gif”
2 . billedwar float: right margin:T 22px, B 28px img: electri2.gif 3 tekstbox float left H 350px,W 420px,margin: T 20px, L 10px background-color: #000 margin-left:
4 billed1popside float: left H 200px, W 200px margin: T 20px, L 20px, img: /pop/war.jpg
4
Grafisk WorkfloW // storYboard oG skelet
PoPside.html
51
5 Dillerbox H200 px, W200 px margin T 150 img: diller.png
wrapperkunst background-image: url(bogweb/images/nutid.png) 1. billedpil float left, H 72px, W126px, img :tright pil_03.gif”
2 . Billed top,W 173px, H 188px, float right Img: hornsketh_02.jpg 3 Tekstbox H 350px,W 420px, float left margin-r 10px Tekst folat left, marg R 10 px
4 animations box float left H222px, W222 px margin L 30 px, T 20 px Img: horn-animation.gif
12
3
5
600p
x
900px
4
kunstnutid.html
52
4 #tekstboxsmudslink H 30px, W451px float: left margin L 200px
H2
12
4
wrapperbla background-image: url(bogweb/images/side-1.png)
1 billedpil float: left
H 72px, W126px img :tright pil_03.gif”
2 img: ego.jpg float: right margin-top: 24px
3 smudsbox float: left height: 217px width: 551px margin: R auto, L200px, T 100px img; smudslink.jpg hotspot link: http://issuu.com/mptp/docs/endelig-bog-web?mode=window&pageNumber=1
3
Grafisk WorkfloW // storYboard oG skelet
boGen.html
600p
x
900px
53
KunstNutid
Kunst NutidPop Kunst BogenHornsleth
KunstNutid
Pop Kunst
Kunst Nutid
Bogen bag
Grafisk WorkfloW // ideudviklinG
PopKunstNutid
Pop Kunst
Kunst Nutid
Bogen bag
PopKunstNutid
Popart
Bogen
Nutiden
Nutiden
PopKunstNutid
Popart
Bogen
Popart
Bogen
Nutiden
PopKunstNutid
Pop Kunst Kunst Nutid Bogen
En samfundskritisk web-site om popart og nutidenaf Marie Prokopek
En samfundskritisk bog om Pop-art og nutiden Af Marie Prokopek
Pop Kunst Nutid
„Flot og
fænge
nde.
Interes
sant væ
gtindho
ld”
Magasin
et Ving
aard.
„Inspire
rende
Tankeg
ang”
Politik
ken
”Forarg
et fore
lsket o
g fordr
ejet”
Tidens
tanker
Pop
Kunst
Nutid
Pop ku
nst nu
tid er
en aty
pisk g
ennem
gang a
f stilpe
rioder.
De typis
ke gab
-fremkal
dendel
ser op
slagsb
øger e
llers k
an giv
e, vend
es til d
irrekte
spørg
smål t
il læser
en og
her i e
n
refl ekt
erende
Stilperio
derne,
jeg vil
vise d
ig lidt
om er,
pop-a
rt og n
utiden.
Pop-ar
ten er
en af
de stilp
erioder
, der h
ar fang
et mig,
givet m
ig en ly
st til a
t spejle
mig,
og har
åbnet
min h
orisont
på m
ange o
mråder.
Derfor vi
l jeg o
gså tag
e dig m
ed på
en lille
rundt
ur på
nutide
ns stil
og ste
mning.
Alt udsp
ringer
af noge
t. Verd
ens far
ver blo
mstrer af
de frø
, der tid
ligere
er såe
t.
Du og je
g er e
n blom
st i nu
tidens
buket,
plukke
t i ældg
amle b
ede.
Et væld a
f afblo
mstrede
ismer
og stila
rter væ
lter ru
ndt i h
istorien
og sy
nes oft
e uove
rskuel
ig, kon
struktiv
isme,
impressio
nisme, e
kspres
sionis
me, dada
isme, i
sme is
me isme…
Hvad va
r hvor
, og hv
em va
r hvad
. Enhve
r har e
n
blomst,
de syn
es er
den sm
ukkest
e eller
den m
est tilt
alende
. Jeg h
ar fl ere
favorit
ter.
Ville d
in hver
dag fun
gere, h
vis inte
rnet, c
omput
er, mobi
ltelefo
ner, G
PS og
alkoho
l blev
skiftet
ud m
ed lek
sikon,
skrive
maskine
, mønt
telefon
er, lan
dkort o
g Rynk
ebysaf
t. Ville
du så
nå ige
nnem din
hverd
ag til t
iden?
Hvor va
r vi nu
, hvis f
orbrug
et var f
ortsat?
Hvis EG
Oismen
tilføjes
som en
stilpe
riode, s
ynes d
u sikk
ert stra
ks det
er m
ere sp
ændende
. Hvis
du plu
dselig
kan se
dig se
lv i his
torien
og fors
tår, at
du er
et prod
ukt af
stilperio
derne,
vil du
så all
igevel
en tur
ned i
dybet?
Tag m
ed på
en sm
afunds
kritisk
male
nde tur
igenne
m popar
ten og
nutide
ns stili
stiske
tenden
ser og
opråb
En sam
fundsk
ritisk b
og om
Pop-a
rt og n
utiden
Af Marie
Proko
pek
KUNST
NUTIDPOP
Marie Pr
okopek
f.982, M
ediegr
afi ker
elev o
g freel
ance jo
urnalis
t, til
blandt
andet
Livsst
ilsmaga
sinet C
´est, o
g meni
ngs
opråbe
nde klu
mmer på
interne
ttet.
Marie ha
r siden
2006 lavet j
ournal
istisk a
rbejde
, for
forskel
lige m
agasin
er og
platfor
me på in
ternette
t.
Hendes
artikle
r og k
lummer
er male
nde, m
etafori
ske
og fyld
t med
hendes
meni
ng om
menn
esket o
g livet
.
PopKunstNutidPop Kunst
Forskelligeprøveraflayoutudfrabogenssmudsomslag.Pinkringviserendeligmukup.}
54
Grafisk WorkfloW // laYout
Detendeligelayoutafde5sideropsatiphotoshop,slicetogafmålt.}
55
Grafisk WorkfloW // animation
MineanimationererlavetiPhotoshopCS5.Samtligebilleder-forhelesitetiøvrigteroptimeretiPhptoskopindendeerslicetJeghargivetanimationenenfeatherimellembillederforatgivedetetstiletudtryk.Jegvalgteatlaveanimationertrodsdetatdetikkevaretkrav,forjegsyntessidenskulle„leve”lidt.}
56
Grafisk WorkfloW // css#wrapper { height: 600px; width: 900px; margin-right: auto; margin-left: auto; background-image: url(bogweb/images/side-1.png); } @charset ”UTF-8”; body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 14px; color: #333; margin-top: 0px; padding-top: 0px; } #wrapperkunst { height: 600px; width: 900px; margin-right: auto; margin-left: auto; background-image: ); background-image: ; background-image: url(bogweb/images/nutid.png); }#wrapperpop { background-image: url(bogweb/images/pop-side.png); height: 600px; width: 900px; margin-right: auto; margin-left: auto; padding-top: 0px; } #menu { float: left; height: 23px; width: 588px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 310px; } .anima { float: right; margin-right: 700px; padding-right: 0px; padding-left: 20px; padding-top: 20px; } #menu a { font-size: 26px; font-weight: lighter; color: #FFF; text-decoration: none; font-variant: normal; margin-top: 3px; margin-right: 0px; margin-bottom: 0px;
margin-left: 40px; padding-right: 0px; padding-top: 2px; float: left; padding-left: 10px; } .bolledhorn { float: right; margin-top: 8px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .billedwar { float: right; margin-top: 22px; margin-right: 0px; margin-bottom: 28px; margin-left: 0px; } #boxbund { float: left; height: 382px; width: 900px; background-color: #000; } #urboks { float: left; height: 222px; width: 222px; margin-top: 20px; margin-left: 30px; } #tekstnu { height: 350px; width: 420px; float: left; margin-right: 10px; } p { font-size: 10px; color: #FFF; margin-left: 8px; } .billed1 { float: right; margin-top: 4px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #billedpil { float: left; height: 72px; width: 126px; } #dillerbox { float: left; height: 200px; width: 200px; margin-top: 150px;
57
width: 200px; margin-top: 168px; margin-left: 10px; } .ego { float: right; margin-top: 24px; } #smudsbox { float: left; height: 217px; width: 551px; margin-right: auto; margin-left: 200px; margin-top: 100px; } #tekstboxsmudslink { height: 30px; width: 451px; margin-top: 0px; float: left; margin-left: 200px; } #dodtlink1 { float: right; height: 20px; width: 150px; margin-top: 2px; margin-right: 20px; margin-bottom: 2px; margin-left: 2px; font-size: 24px; color: #FFF; text-decoration: none; background-color: #000; } #dødtlink2 { float: right; height: 20px; width: 150px; margin-top: 2px; margin-right: 40px; margin-bottom: 2px; margin-left: 10px; background-color: #000; font-size: 24px; color: #FFF; text-decoration: none; } #dødtlink2 a { color: #FFF; text-decoration: none; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000; }
} #billleds1 { float: left; height: 200px; width: 200px; margin-top: 168px; margin-left: 10px; } #billed1popside { float: left; height: 200px; width: 200px; margin-top: 20px; margin-left: 20px; } #wrapperbla { background-image: url(bogweb/images/side-1.png); height: 600px; width: 900px; margin-right: auto; margin-left: auto; } h1 { font-size: 18px; color: #CCC; font-weight: lighter; margin-left: 8px; } #Billed1pop { float: left; height: 200px; width: 200px; margin-top: 128px; margin-right: 20px; margin-left: 20px; } #tekst1 { float: left; height: 350px; width: 420px; margin-top: 20px; background-color: #000; } .flag { float: left; margin-top: 20px; margin-left: 400px; margin-bottom: 0px; } #tekstpopside { float: left; height: 350px; width: 420px; margin-top: 20px; background-color: #000; margin-left: 10px; } #billed3popside { float: left; height: 200px;
58
Ekstrainfo,vedforbedringkunnesidenfåmereluftførwrapperoghervedfåmereluftogcentrering.Herudoverkunnederarbejdesmeremedtekstopsætning.Herudoverkunnecssoggennemgåesforunødvendigeoplysninger.}
ekstra Info
59
60
61