Grafisk workflow

Grafisk workflow//

Grafisk workflow

}

Opgaven lød lav en hjemmeside og en bog om stilarter.

Websitet skal bestå af en index-side samt 3 underliggende sider og to fiktive sider. Siden og bogen skal have en rød tåd.

Der skal laves frimærkeskitser, storyboard, skelet og sitemap.

Det er individuelt, så jeg ståd for hele produktionen bag dette projekt.

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 brugervenlighed. 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 indexsiden.

Dette faldt mig logisk da en bog også har en sådan.Websitet 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 headder da billedet opdeler siden) menulinje, bokse til billeder animation og tekst. Dette går igen på alle sider, men indholdet er forskelligtfra side til side.

Usability 46

Der er taget højde for brugervenligheden på websitet.

Bogen og siden er skabt, ud fra en idé om at sætte tan-

ker i gang hos målgruppen så de skal prøve sig lidt frem og gå på opdagelse. Menuen viser tydeligt hvad de foskellige sider linker til.

Typografi Teksten der står skrevet på websitet er valgt ud fra designet 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 arbejde med mit template.

Grafisk workflow // Flowchart OG Storyboard

Index.html side.html Popside. html

Kunstnutid.Html Dødt link

Storyboard Betingelser gældende for alle sider Alle billeder og amimationer 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.

Bogen.html

dødt link hotspot bog

P tag font-size: 10px, color: #FFF, margin L 8px Teksten venstrestilles font-size: 18px, color: #CCC Font valg Skriftvalg - brødtekst Arial 12px

Wrapper H 600px,W 900px, margin-right og left, auto, bg colour #FFFFFF, img varierer fra side til side, se skelet.

abcdefghijklmnopqrstuvwxyzæøå

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

Skriftvalg – menu a Arial 26 px

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.

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 47

GRAFISK WORKFLOW // STORYBOARD og skelet

2

600px

1

3

Index.html 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

48

3 tekstbox float: left H 50px, W400px padding: T 50px margin: L335px, T100px font-size: 14px font-weight: lighter

4

900px 4 font-size: 10px line-height: 14px color: #333

1

600px

2

3

4 side.html 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

5

6

900px 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

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

49

GRAFISK WORKFLOW // STORYBOARD og skelet 1

600px

2

4 3 5

Popside.html 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:

50

4 billed1popside float: left H 200px, W 200px margin: T 20px, L 20px, img: /pop/war.jpg

900px 5 billed3popside float: left H 200px, W 200px margin: T 168px, L 10px img: pop/rl.jpg

1

600px

2

4

3 5

Kunstnutid.Html wrapperkunst background-image: url(bogweb/images/nutid.png) 1. billedpil float left, H 72px, W126px, img :tright pil_03. gif�

900px 5 Dillerbox H200 px, W200 px margin T 150 img: diller.png

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

51

GRAFISK WORKFLOW // STORYBOARD og skelet 1

600px

2

3 Bogen.html 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-bogweb?mode=window&pageNumber=1

52

4

900px

4 #tekstboxsmudslink H 30px, W451px float: left margin L 200px H2

GRAFISK WORKFLOW // IDEUDVIKLING til list, rna gs jou nin ce me lan g ee t, o for e, g fr ´es ejd t. v o inet C et. le arb ette riske tt e s k er aga terne tisk tern fo et. pe fik alis in eta g liv ko gra tilsm å in urn e på de, m ket o Pro edie Livss er p jo n s e t rm ri M t m ve tfo ale nne Ma 82, ande klum 6 la pla r m e f.9 ndt de 00 og er e m m n n 2 er m g o bla råbe ide sin lum enin op r s ga k ha e ma r og es m e le d ri g Ma kelli artik d hen fors ndes t me He fyld og

p Po nst

og

n

p Po

sam

-art

p Po

in

tm

og

ne

nA tide nu

åb

om

r ha

og

kb ritis

dsk fun

ma

sam

er.

råd

om

m

go

bo

ek

kop

Pro

fun

En

En

på

tid

nt

riso

ho

e ng

arie

fM

k Pro

ek

op

n , me ar e tivis r h uk hve nstr En , g , ko d. ,o er. ive on lig, hva od g mig ksik ue var jle eri kan t. k e le e lp p rs m så sti rs ed n. at s g. ove ve af elle er tide t til nin dm ? re se eu gh ng er nu en lys stem t u tiden ge oft or, o tter. ga sbøg an li g te g s d l if o m o gk rt mig til sk g ti ne hv ri r ti . ne g seli de de sy ar vo en psla p-a et ns s lev a ø, be og d v re fa lud po , giv tide l b erd kg ro ho in hv e fr amle rien Hva ar fle u p t? pis delse er, et mig på nu o d d ty f e a n is alk d om ng tur r a ldg isto … h en lde Hv i dyb og nem lidt r fa nd tre i æ t i h me Jeg råb er ka de. d ig r ha le ru op PS en ms et nd e is e. tid em en ne e d de lil og blo lukk r ru ism lend r, G å ig nu -fr nd tur vis der, en ne å n st ab ser ver p lte e lta vil erio d på spæ l en un e g en far ket, væ ism st ti lefo u s p k isk de jeg stilp me nd ilte ille d ere igeve ns s bu larter me, n me b te e m Po typ ren rne, af de e dig o is n ll V ti e rd r m ft.

Ve tide g s ada r de te åa De flekte ode r en så tag tisk ter, sa de du s et. nu er o e, d elle tilis re lperi en e g og pu eby og t i ss aks il om nk f n s ism ism ste Sti p-art vil je en str e, v r a blom ede ssion ukke t, c Ry Po rfor ert ern utid ge rne og ikk od rin r en mstr spre sm De gn inte dkort u s tilperi no dsp jeg e afblo e, ek r den d is e n u v s s rt e f , h r, la Alt og af ism es e sat? pa syn t a ere ne po fort Du væld sion syn e, duk ng lefo ar em od Et pres t, de tv g fu ntte nn eri t pro ge im ms ige rda mø stilp er e rbru tur hve ine, blo en u de is fo m r, at d din ask n v o h s le u, Ville rivem ma jes rstå vi n sk tilfø g fo tisk var en n o skri or nd ism rie Hv afu GO histo sm is E i en Hv selv å dig dp me Tag ld

s ti

de

ven

p Pounstid K Nut

spø

r

he

Nu

rg

kte

irre

g

no

ere

læs

-art

sk

riti dsk

e utid

arie

fM

nA

Ku

l til

å sm

n ie

P T O P UNSTID K NU

” de. old en dh ng gtin . g fæ væ ard t o ant inga ” „Flo ress inet V ng te ga In gas ke an Ma t” eT nd reje ere ford spir en og „In litikk et lsk Po fore et ker rarg tan o s ”F en Tid

Popart Bogen Nutiden

Popart Popart Bogen Nutiden

Bogen

Nutiden

}

Kunst Nutid

Pop Kunst Nutid

Pop Kunst

Kunst Nutid

Hornsleth

Kunst Nutid

Pop Kunst Nutid

Pop Kunst

Kunst Nutid

Bogen bag

Forskellige prøver af layout udfra bogens smudsomslag.

Pink ring viser endelig mukup.

Pop Kunst

Kunst Nutid

Bogen bag

Pop Kunst Nutid

Pop Kunst Nutid Pop Kunst Nutid Pop Kunst

Kunst Nutid

Pop Kunst

Bogen

En samfundskritisk web-site om popart og nutiden af Marie Prokopek

53

Bogen

GRAFISK WORKFLOW // LAYOUT

}

Det endelige layout af de 5 sider opsat i photoshop, slicet og afm책lt.

54

GRAFISK WORKFLOW // Animation

}

Mine animationer er lavet i Photoshop CS5.

Samtlige billeder -for hele sitet iøvrigt er optimeret i Phptoskop inden de er slicet Jeg har givet animationen en feather imellem billeder for at give det et stilet udtryk.

Jeg valgte at lave animationer trods det at det ikke var et krav, for jeg syntes siden skulle „leve”lidt.

55

GRAFISK WORKFLOW // CSS

56

#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;

} #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;

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; }

57

Ekstra info

}

Ekstra info, ved forbedring kunne siden få mere luft før wrapper og herved få mere luft og centrering. Herudover kunne der arbejdes mere med tekst opsætning.

Her udover kunne css og gennemgåes for unødvendige oplysninger.

58

59

60

61