Hent dokumentation - Salling-design

salling.design.dk

Hent dokumentation - Salling-design

1 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

TYPOGRAFI OG OMBRYDNING


Typografi & ombrydning

Opgaven

opgaven bestod i at opsætte en personalebog til bilka/aZ, som skal bruges til alle ansatte

i hele landet. der er i personalebogen specielt fokus på informationer til nyansatte.

da bogen også fungerer som et slags opslagsværk, har det været vigtigt at gøre den

overskuelig og letlæselig for den ansatte. Jeg har i opgaven forsøgt at skabe et interessant

layout med billeder og tekst – og generelt gøre personalebogen indbydende for læseren.

Benyttede programmer

microsoft Word til råteksten. gemt som rfT - (rich Text format).

indesign CS5.5/CS6 til ombrydning og layout af personalebogen.

photoshop CS5.5/ CS6 til redigering af billeder, samt path på billede med Text Wrap/figursats.

illustrator CS5.5/ CS6 til rettelse af vectorgrafik.

adobe acrobat pro – tjek af trykklare pdf'er.

Generelt

formatet er bestemt til a4, med 3 mm beskæring – en god løsning rent økonomisk. (Tryk)

Afsender

dansk Supermarked – som ejer bilka og aZ. det har været et ønske for dem (dS), at få lavet en

personalebog til deres ansatte. bogen er fyldt med informationer om firmaet samt regler i alle

afskygninger. personalebogen findes også i en online-udgave, som bilka/aZ selv kan rette i.

Målgruppe

personalebogen er direkte målrettet mod ansatte hos bilka/aZ. det er et krav fra dansk Supermarked,

at alle ansatte skal læse denne personalebog – så derfor ryger alle ansatte med i

målgruppen i denne opgave.

Krav fra kunde

der har i denne opgave været en del krav fra kunden som skulle overholdes. "Stramt" layout

samt overskuelighed. Hvert emne skulle farveopdeles - som en lille præsentation af det

kommende afsnit og skulle præges af billeder som de valgte. 2 spalter med stort spaltemellemrum

(gutter) - for at gøre bogen letlæselig. En del billeder som alle skulle med i

bogen, deriblandt billedet til for- og bagside.

Arbejdsproces

» Skitser/rough (vedlagt fysisk portfolio)

» Tests og udvælgelse af skrift

» oprettelse af dokument inkl. marginforhold og spalter

» opsætning af grundlinjenet

» oprettelse af paragraph Styles

» oprettelse af layers

» manuel knibning af tekst

» Text wrap

» Uncial på introside

» placering af billeder og billedtekst

» Citat indsættes med "løse citationsstegn"

» opsætning af bullets (punktopstilling)

» grEp styling

» anchored object

» Tabel

» pdf exportering

2 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Typografi

Jeg har valgt skriftsnittet myriad pro som gennemgående typografi i personalebogen, da

den er god til tunge tekstmængder og samtidig giver et flot skriftbillede og er samtifig

letlæselig. Jeg har arbejdet med kontraster i overskrifter, ved afveksling mellem myriad

pro bold og myriad pro regular samt myriad pro Light – for at skabe en god dynamik på

opslagene.

i afsnittet om skriftvalg kommer jeg nærmere ind på mine overvejelser omkring skriften

og i afsnittet om paragraph Styles, kan man få et overblik over anvendt typografi i bogen.

Layout

Jeg har valgt at have to gennemgående masters til at styre mit layout. En a-master med to

spalter, som bruges til de teksttunge sider i bogen. mine a-masters har også faste elementer

i form af en top boks hvor selve emne-overskriften og billeder optræder. mine b-masters

bruges som en slags intro til hvert afsnit og her optræder der billeder samt overskrift.

på a- og b-masters er der tilført en tynd streg for at holde indholdet og pagina adskilt.

alt tekst samt de fleste billeder holder margin, hvilket giver en god ro på opslagene.

Øvrige virkemidler

» Text wrap på side 11, skaber et afbræk i den gængse opsætning

» Tabellen skaber et godt overblik i forhold til de mange informationer på siden

» billeder der understøtter tekstens indhold på de fleste sider

» Citat på flere sider med stor anførelsestegn

Tjekliste

» ingen horeunger (heller ikke de franske) (Keep options - paragraf styles)

» Korrekt orddeling

» ingen floder

» bindestreg ændret til tankestreg (i de fleste tilfælde)

» Citationstegn er rettet til ( »« )

» de fleste billeder flugter med tekstens x-højde

» Hair Space ved tegn som :, ;, !, ?, ()

» ingen slåfejl med dobbelt mellemrum

Kvalitetsvurdering

Jeg er generalt ret godt tilfreds med det endelige resultat af personalebogen. Jeg syntes

at jeg har opnået det som var kravet fra kunden; Overskuelighed, letlæselig og med et layout

som ikke bliver for "meget" (kundens ord).

Jeg har arbejdet med at få en god tekstombrydning og generelt skabe et godt skriftbillede

på trods af de mange mellemrubrikker - flere end man normalt ser. det har været en

udfording rent typografisk, at få dem til at passe ind på siderne.

bilka/aZ (dansk Supermarked) er en stor kunde - én af de største herhjemme - og det

kan man godt mærke når man samarbejder med dem. de vil meget gerne blande sig i alt fra

brug af billeder til en simpel tekstopsætning. de har f.eks. bestemt hvilket billede der skulle

bruges på for- og bagside. det valg ville jeg gerne have taget, da billedet ikke (ifølge mig),

fungerer optimalt. derudover har de bestemt hvordan indholdsfortegenelsen skulle sættes

op - den oprindelige var for lang og advanceret til dem.

Jeg har selv fået en masse ud af opgaven, da det har givet mig erfaring i at disponere

over siderne i en større tekstsag for et kendt firma og forberede et layout fra start til slut.


TesT af skrifTer

u

Til min brødtekst har jeg set på flere forskellige skrifter og vurderet hvad der

ville passe bedst til bogen.

Aa

abcdefghijklmn

opqrstuvxyzæøå

abcdefghijklmn

opqrstuvxyzæøå

adobe Caslon pro

regular

Kort om skriften:

Serif, karakteristisk Q, elegante og afbalancerede runde former.

anbefalet til tekst fra 6-14 pt., god til magasiner og bøger.

Aa

abcdefghijklmn

opqrstuvxyzæøå

abcdefghijklmn

opqrstuvxyzæøå

gill Sans

regular

Kort om skriften:

Sans serif, stort skriftsnit, skarpe kanter. bolle over å svæver meget.

Svær at styre i større tekstmængder.

3 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Aa

abcdefghijklmn

opqrstuvxyzæøå

abcdefghijklmn

opqrstuvxyzæøå

Hoefler Text

regular

Kort om skriften:

moderne antikva, skarpe former – tynd hårstreg. mange variationer.

Aa

abcdefghijklmn

opqrstuvxyzæøå

abcdefghijklmn

opqrstuvxyzæøå

myriad pro

regular

Kort om skriften:

Sans serif, open Type, stort skriftsnit, mange variationer.

afbalanceret, professionel, neutral og harmonisk.


u

skrifT valg

Et overblik over forskellige variationer

under skriftsnittet Myriad Pro:

4 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

overlængde

grundlinje

myriad pro X-højde

Underlængde

grundstreg

Skriften

myriad pro er en sans serif font i openType formatet. den har et bredt udvalg af forskellige styrker og bredder,

som giver en stor mulighed for variation i det typografiske billede.

fonten har nogle rene, åbne former, med gode forholdsmæssige proportioner og en harmonisk knibning, som

gør den både behagelig og letlæselig, hvilket var vigtigt i forhold til tekstmængden. derfor er det min valgte

skrift til bogen.

Her ses Myriad Pro i brug. Fonten er flittigt brugt.

akse


grid og masTer

u

mål og forhold på masterside opslag.

faste elementer placeres.

u

på mastersiderne indstilles marginer og spalter. mest luft i toppen (pga top-bjælken), dernæst i bunden og mindst

i siderne. Kunden har valgt af køre med to spalter igennem hele dokumentet og har valgt afstanden imellem disse

til at være 15 mm.

u Jeg tjekker i bunden af siden det kommer til at passe med bund margin

- og derfor sættes denne til 27,1 mm, da det så går op med et helt antal linjer.

5 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Grids

for at brødteksten kan holde register hele vejen igennem dokumentet, indstilles document grid i preferences.

da jeg har besluttet min brødtekst skal være 10/13 pt. skal increment every stå til 13pt -

brødtekstens skydning. derefter trækker jeg en hjælpestreg ned til grundlinjen på den første brødtekstlinje. Herefer aflæser

jeg hjælpestregens y-koordinat, som i dette tilfælde er 58,93 mm, og indsætter det så mit grid starter her i forhold til

toppen af siden.


grid og masTer

u mål og forhold på masterside opslag. mine faste elementer placeres her.

Her vises mine a-masters, som er de sider hvor min tekst samt top-bjælke vil optræde.

Emne overskrift u tTop-bjælke

paginering u

10 mm

72,5 mm 15 mm 72,5 mm

25 mm 25 mm

216 mm

6 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

27,1 mm

54 mm

3mm beskæring p

28,5 mm


grid og masTer

u Jeg har valgt at lave 2 forskellige masters, for at holde mit layout opdelt. de fungerer som en lille

præsentation af det kommende afsnit og er præget af billeder. faste elementer i form af billeder og en

overskrift placeres her, så det bliver ensformigt på alle sider.

14,5 mm

14,5 mm

7 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

56 mm

152,5 mm


layers

u

når man bruger mange forskellige elementer i sit layout og opsætning er det altid en god

idé at bruge Layers/lag. man får et bedre overblik over sine elementer, hvilket gør processen

nemmere og mere overskuelig. derudover kan Layers låses - så mine billeder ikke kan

flyttes når de er placeret. Herunder ses et eksempel på brug af Layers/lag.

8 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


paragraph sTyles

u oversigt over mine paragraph Styles til formatering af tekst.

u

9 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Brød

myriad pro, regular, 10/13 pt., fast for-

og bagkant, align to grid, keep options

Brød indryk

myriad pro, regular, 10/13 pt., fast for-

og bagkant, align to grid, første linje indryk med

3,528 mm (geviert) (Em-space)

Mellemrubrik 1 linje

myriad pro, bold, 11/14 pt., venstrestillet, luft

før 3,528 mm (10 pt), luft efter 0,706 mm (2 pt)

Mellemrubrik 1 linje top

myriad pro, bold, 11/14 pt., venstrestillet, align

to grid, baseline shift 1 pt.

Mellemrubrik 2 linjer

myriad pro, bold, 11/14 pt., luft før 3,175 mm

(9pt), luft efter 0,706 mm (2 pt)

Mellemrubrik 2 linjer top

myriad pro, bold, 11/14 pt., Venstrestillet, align to grid

- first line only, baseline shift -1 pt.

Emne-overskrift

myriad pro, bold, 35/38 pt., venstrestillet, character

colour white. Kerning: optical

Overskrift

myriad pro, light, 33/37 pt., orddelinger ikke tilladt,

venstrestillet, character

colour gray

Underoverskrift

myriad pro, regular, 20/23 pt.,

orddelinger ikke tilladt, venstrestillet

Billedtekst

myriad pro, italic, 9,5/ 11,5 pt.

venstrestillet

Bullet tekst - 1 tekst linje

myriad pro, regular, 10/13 pt.,

Venstrestillet, align to grid: none

Bullet tekst - flere tekst linjer

myriad pro, regular, 10/13 pt.,

venstrestillet, space before:1,6 mm,

space after: 1,2 mm, align to grid: none

(Et krav fra kunden)


Udregning af mellemrUbrikker

u for at få luften over og under mellemrubrikker til at passe med brødteksten, der er låst til grundlinjenettet, har

jeg vha. en udregning defineret luften over og under afhængig af hvor mange linjer mellemrubrikken går over,

så den går op i et helt antal linjer i brødtekstens skydning.

u

Brødtekst: 10/13pt

Mellemrubrik: 11/14pt

Mellemrubrik 1 linje

(brød)

(mellemrub)

2x13=

1x14=

26pt

14pt

Luft tilovers 12pt

den overskydende luft har jeg så fordelt som

10 pt over og 2pt under mellemrubrikken.

u der oprettes en paragraph Style til 1 linjes mellemrubrik.

pt. bliver omregnet til mm.

Mellemrubrik 2 linjer

10 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

(brød)

(mellemrub)

3x13=

2x14=

39pt

28pt

Luft tilovers 11pt

den overskydende luft har jeg fordelt som

9 pt over og 2pt under mellemrubrikken.

u placering af 1 linjes mellemrubrik.

u placering af 2 linjers mellemrubrik.

Mellemrubrik i toppen af spalte

Jeg har flere steder i personalebogen mellemrubrikker som

starter i toppen af en spalte. Her kræves en anden frengangsmåde

end "normalt".

1. først laver jeg en kopi af min 1 linjes mellemrubrik.

2. derefter fjernes luft over og under rubrikken.

3. mellemrubrikken låses til grundlinjenettet og teksten løftes eller

sænkes med baseline Shift.

u der oprettes en paragraph style til 2 linjers mel-

u Luft fjernes over og under - låses derefter til u

i dette tilfælde, er min mellemrubrik blevet løftet 1

lemrubrik. pt. bliver omregnet til mm.

grundlinjenettet.

pt, så det ser bedre ud rent optisk.


u

bUlleTs

Jeg har flere steder i bogen brugt punktopstilling/bullets, og har derfor oprettet en paragraph

style til mine punktopstillinger. Jeg har i stylen defineret punktets udseende, luft imellem punkt

og tekst, samt luft efter hvert afsnit. Jeg har derudover oprettet en character style, som definerer

farven på punktet. det giver mig mulighed for at skifte farve i forhold til hvilket afsnit det skal

bruges i.

u Tab position er sat til 3,528 mm da hvilket svarer til en Em space/geviert i forhold brødtekstens størrelse.

11 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u Kunden ville gerne have meget luft før og efter punktopstillinger med flere linjer, for at øge læsbarheden samt gøre det

mere overskueligt for læseren. Kunden har altid ret!

i punkopstillinger med kun en linjes brødtekst er der kun luft før, og ikke efter.

u

de røde "kors" placeret ved begyndelsen af hver sætning,

er tegnet for hængende indryk (indent to here),

og styrer de efterfølgende linjer så de holder en pæn

forkant med første linje. Her ses et eksempel på

punktopstilling med flere linjers brødtekst.


u

u

CharaCTer sTyles

Jeg har i personalebogen anvendt flere forskellige Character Styles til f.eks. mine

punktopstillinger.

Eksempel på mine Character Styles som kan bruges til at style udvalgte tegn

u

mine bullets tildeles farven "minarbejdsplads Turkis" i Character Stylen med mine

foruddefinerede farver.

12 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

i min paragraf Style vælger jeg min nyoprettede

Character Style, som nu har givet

mine bullets farve.

u

Tabel

Jeg har i personalebogen anvendt tabelfunktionen til at lave et skema, for lettere

at kunne aflæse informationer om personalegoder.

opsætning af tabel. antallet af rækker og kolonner bestemmes. 7 x 6.

u der sættes en fast

(exactly) bredde på

cellerne i tabellen, så

det kommer til at passe

med mine marginforhold.

u Her ses den færdige tabel. Header til overskriften indsættes. Teksten er justeret, så den er nem og

overskuelig at aflæse. alt tekst er tilpasset tekst til center.


u

u

TexTwrap

bilka/aZ ønskede et specifikt billede ind på side 11 i personalebogen, og jeg har derfor påført

textwrap, hvor jeg synes det giver et godt sammenspil mellem tekst og billede. Jeg har

brugt "wrap around object shape" med en afstand på 5 mm, baseret på min alpha Channel,

da billedet ikke var fritlagt. Efterfølgende har jeg lavet et par småjusteringer på stien, hvilket

gør at min alpha Channel automatisk bliver ændret til en User-modified path.

i normalmode justere jeg min textwrap, så teksten lægger sig pænt omkring

billedet. Jeg er opmærksom på orddelinger og at teksten hverken bliver knebet

for meget eller at der opstår floder.

13 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u indstillinger på min Text Wrap.

u Text wrap, set i preview mode.


grep sTyling

u Jeg har brugt grEp Styling på mine paragraph styles til brødtekst (med og

uden indryk), for automatisk at få en anden typografi end den brugte, på alle

steder i teksten hvor www.dsg.dk bliver nævnt.

u

Her ses et par fremhævede eksempler. Www.dsg.dk bliver nu altid skrevet med kursiv –

endda med den korrekte paragraph style. Smart og tidsbesparende!

14 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u Jeg har i forvejen lavet en character style

med kursiv font, som jeg vælger i grEp

menuen, under apply style. Stylen bliver

så derefter påført min valgte tekst; www.

dsg.dk

anChored objeCT

u

Jeg har lavet min pagina/ skillestreg samt min pagina-tekst i ét anchored object.

for at elementerne følger med teksten, er de oprettet som anchored objects.

u

i options menuen får mine elementer de rette koordinater

på x- og y aksen, ift den ønskede placering.

u Her er både pagina, skillestreg og pagina-tekst sat sammen som ét object. anchored object.


u

plaCering af billeder

for at få en harmonisk sats, har jeg placeret billeder så de holder optisk over- og

underkant med brødteksten. dvs. de holder overkant med brødtekstens x-højde og

underkant med brødtekstens grundlinje.

u optisk overkant med brødtekst

15 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

billedTeksT

u billedtekstens placering er tilpasset x-højden.

u opmåling af x-højde.

u optisk underkant med brødtekst

u Korrekt placering af billedtekst.

u

i Text frame options indstilles en margin i toppen

af billedtekstfeltet, der passer med x-højden.

i dette tilfælde 1,5 mm, som Ca. svarer til

min x-højde.


knibning

u flere steder i brødteksten har jeg været inde og knebet den, for at få en pænere

ombrydning, samt for at undgå floder og horeunger.

Jeg har reguleret teksten efter reglen;

maks knibning= +15/tusindedele geviert.

16 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u Teksteksempel inden knibning

u fremhævet med blåt hvor jeg har

lavet manuel knibning.

Knibning på -15 for at få mellemrubrikken

til kun at fylde én linje.

u Teksteksempel inden

ombrydning

u

Jeg spærrer her teksten med

5, for at få »p-pladser« og »ppladserne«

ned på næste linje, og

undgår dermed en grim deling af

begge ord.

u

u

u

binde- og TankesTreg

binde- og tankestreg bliver ofte forvekslet med hinanden og jeg har derfor været omhyggelig med

at gennemgå teksten for disse forvekslinger. bindestregens formål er at binde to eller flere ord

sammen (-). Tankestreger bruges ved indskudte sætninger; en-space/halv geviert (–).

Vha. find/Change menuen har jeg gennemgået alle binde- og tankestreger. i eksemplet her var der brugt

ukorrekt bindestreg.

bindestreg bliver erstattet af en tankestreg.


CiTaTionsTegn

u i teksten fra bilka/aZ er der gennemgående, brugt dobbelte løftede citations-

u

tegn, til tale eller udtryk. i stedet for disse, har jeg valgt dobbelt citations-vinkler.

i find/Change gennemgåes teksten.

u find what: "

u Change to: «

17 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

find/Change - lUfT efTer Tegn

i forbindelse med brug af blanke tegn mellem ord, bogstaver, tal og tegn har jeg brugt find/Change til hurtigt at

komme igennem teksten.

u find: »:« u Change to: »^|« - hairspace før kolon

u find: »;« u Change to: »^|« - hairspace før semikolon

u find: »!« u Change to: »^|« - hairspace før udråbstegn

u find: »%« u Change to: »^|« – hairspace før procenttegnet


u

sTavekonTrol

dynamisk stavekontrol er sat til for at finde potentielle stave- eller slåfejl i teksten.

dynamisk stavekontrol kan vælges under Edit i preferences, eller tilkobles sine paragraf Styles.

Jeg har valgt den sidste mulighed, nemlig via paragraf Styles.

u dynamisk stavekontrol vælges under Edit

u Her fanger stavekontrollen en taste/stave-fejl, som herefter ændres.

u

i preferences ses indstillingerne for stavekontrollen

18 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

UnCial

u Jeg har på min intro-side valgt at gøre brug af et uncial.

u

først indsættes en hairspace før og efter uncial-bogstavet.

1. afstanden bestemmes for de sidste uncial-linjer ved + - kerning

af afstand mellem uncial og hairspace.

2. derefter bruger jeg kerning + - (max. -1000) til at trække sammen

mellem hairspace og første lille bogstav.

3. Sidst justeres den optiske forkant ved + - kerning mellem den

første hairspace og unicialet.

3

u det færdige uncial med + - kerning.

2

1

1


opslag

u Se vedlagte proof i fysiske portfolio, for opslag i 100%

opslaget vises her i 75%

4 Personalehåndbog · Bilka/AZ · 2010

19 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Kære nye medarbejder

D

et er mig en stor glæde at byde dig

velkommen til en af Danmarks al lerstørste

og mest kendte butikskæder.

Vi er stolte af vores virksomhed, og

ikke mindst vores varehuse, hvor kunder,

varer og medarbejdere danner grundstenene

for vores daglige arbejde.

Ud over det store og brede vareudvalg er

vi kendt for skarpe priser, god kundeservice,

kvalitet og Danmarks bedste bytte-

og reklamations-politik.

Grundlaget for den succes, som vi har

opnået, er ikke mindst de mange dygtige

medarbejdere, der gennem årene er

og har været ansat hos os. DU er blevet

ansat, fordi vi mener, du sammen med

dine kollegaer kan være med til at gøre

en forskel i fremtiden.

En del af din introduktion er denne personalehåndbog.

Den skal give dig nyttig

viden om din nye arbejdsplads, og

jeg forventer naturligvis at du læser den

grundigt igennem. Er der noget du mangler

svar på – eller gerne vil have uddybet

– så spørg din jobpilot eller afdelings chef.

Velkommen på holdet.

Med venlig hilsen

Henrik Libak

Direktør

Personalehåndbog · Bilka/AZ · 2010

5


opslag

u Se vedlagte proof i fysiske portfolio, for opslag i 100%

opslaget vises her i 75%

Personalegoder

Bilka – Sport

Virksomheden ønsker at støtte sunde aktiviteter

for de ansatte i kæden. Aktiviteterne er lokalt bestemte

- se aktiviteterne på opslagstavler eller få

udleveret en folder i dit varehus. Det er vigtigt for

arbejdsmoralen/kroppen og psyken, at holde sig i

god form. Gerne hver dag.

Festtilskud/julegave

En gang om året holdes en fest i de enkelte afdelinger.

Varehuset giver et fast tilskud til et arrangement,

som fx kan være en julefrokost, en

sommerfest og/eller en julegave. Dette besluttes i

samarbejdsudvalgene i husene.

Jubilæum 10, 15, 20, 30 og 35 år

Vi sætter pris på at vores medarbejdere bliver

hos os i en længere årrække. Derfor markerer vi

10,15,20,30,35 års jubilæum med en gave og kaffebord

til hele afdelingen.

20 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Personalekantine

I kantinen kan du spise medbragt mad eller købe

salat, brød, lune, varme retter og meget mere til lave

priser. Vi tilbyder et stort udvalg i mad og drikke. Kaffe

og the er gratis. – Vær opmærksom på kantinens

åbningstider.

Personalerabat

Efter 1 mdr. ansættelse kan du få udleveret et eller

to rabatkort. Kortet giver dig rabat i Bilka, føtex, Tøj

& Sko og Netto. Rabatkortet må kun bruges til husstandens

forbrug. Se særlig folder »indkøbsregler

og rabatordninger«. Du kan hente dit rabatkort på

personalekontoret.

Personalerabat for efterlønsmodtagere/

pensionerede medarbejdere

Har du efter 10 års ansættelse status som efterlønsmodtager,

må du bibeholde din rabatordning,

hvis du stadig arbejdsmæssigt er tilknyttet varehuset

ved at arbejde op til 200 timer pr. År. Arbejder

du ikke mere i Dansk Supermarked, skal du have

været ansat i mindst 15 år for at beholde din rabatordning.

Rabatkortet ombyttes til et guldkort.

Oversigt over personalegoder 2010

Personalerabat Mærkedage Festtilskud/julegave

Jubilæum

10, 15, 20, 30 og 35 år

Jubilæum

25, 40 og 50 år

Fri med løn ✔ ✔

Julefrokost/Sommerfest

og/eller julegave

Gave og kaffebord

til afdelingen ✔ ✔

Rabatkort udleveres efter 1

mdr. ansættelse. Kan bruges i

Bilka, Føtex, Tøj & Sko og Netto

Jubilæumsreception, privat

fest betalt af firmaet, gave

og kaffebord med afdelingen

samt jubilæumsgratiale

Jubilæum 25, 40 og 50 år

Når en medarbejder har været ansat i 25, 40 eller

50 år, afholder varehuset en jubilæumsreception,

hvor kollegaer, familie og venner deltager. Efterfølgende

afholder jubilaren en privat fest for den Rabatordninger

nærmeste familie- og vennekreds, denne betales

Vi tilbyder også, spareklub med høj rente, rabat på

af virksomheden efter aftale med Varehuschefen.

enkelte hoteller, billeje, rejser og varer fra firmaer,

Derudover får man gave fra huset, kaffebord med

som vi har indgået aftaler med. Du kan finde af-

afdelingen og et jubilæumsgratiale.

talerne i en mappe på personalekontoret, i vores

medarbejderblad INSIDE og på varehusets interne

Mærkedage

opslagstavler. Er du i tvivl, kan du altid forhøre dig

Ved særlige mærkedage kan du få fri med løn, hvis

hos din leder.

den falder på en arbejdsdag. Mærkedage er eget

bryllup, sølvbryllup, guldbryllup, 25 års jubilæum Sommerhuse

og 50, 60 og 70 års fødselsdage. Samme regler er

Dansk Supermarkeds feriefond ejer mange som-

gældende ved dødsfald i den nærmeste familie på

merhuse i Danmark. På dsg´s intranet under per-

døds- og begravelses dagen. Husk at underrette

sonale – fritid- og personalesommerhuse kan du

din daglige leder, så der i den forbindelse ikke sker

se placering, indretning, størrelse samt hvordan og

misforståelser.

hvornår du kan søge. Vi tilbyder meget fornuftige

priser i forbindelse med udlejning af sommerhuse

Personaleforeningen

til vores ansatte. Mange ansatte gør brug af denne

Du bliver ved din ansættelse tilmeldt, hvis du ikke

ordning, så her gælder »først-til-mølle princippet«.

ønsker at være medlem skal du kontakte perso-

Hvis du er i tvivl kan du spørge på dit personanalekontoret

for ud melding. Vi anbefaler dog at

lekontor. Du kan også forhøre dig hos din daglige

deltage i personaleforeningen, da det giver dig en

leder, eller tillidsmand som sikkert vil være dig

hel del fordele i firmaet, samt mulig social samvær. behjælpelig med dine spørgsmål.

DHL-stafetten i Århus 2009: Direktør, Henrik Libak

14 Personalehåndbog · Bilka/AZ · 2010




Personalehåndbog · Bilka/AZ · 2010

15


opslag

u Se vedlagte proof i fysiske portfolio, for opslag i 100%

opslaget vises her i 75%

Min arbejdsplads

Ansættelsesforhold

Dit ansættelsesforhold fremgår af din kontrakt.

I kontrakten står der at du kan forvente at skulle

arbejde i andre jobfunktioner i en kortere periode.

Det er fordi din fleksibilitet er vigtig for os, så vi

altid kan yde den optimale service til kunderne.

Arbejdstid og pauser

På din arbejdsplan kan du se, hvornår du skal

arbejde, og hvornår du har pauser. Du skal være

klædt om og klar til at gå i gang med arbejdet på

de tidspunkter, der står i arbejdsplanen. I forbindelse

med f.eks. ombygninger, jul, påske osv. vil

der blive aftalt over- eller merarbejde med afdelingens

ledelse, hvis det bliver nødvendigt.

Ejerforhold

A.P. Møller – Mærsk har i dag aktiemajoriteten i

Dansk Supermarked A/S, der i blandt er Bilka, som

er en af flere kæder i selskabet.

Ferie

Du optjener 25 dages ferie i løbet af et kalenderår

– altså 2,08 dage pr. måned. Du skal afholde den

optjente ferie året efter. Ferieåret går fra 1. maj til

30. april. Sommerferien afholdes i perioden fra 1.

maj til 30. september. Normalt kan du max. holde

tre ugers ferie i den periode. Resten holdes i den

øvrige del af ferieåret. Hvis du ikke har optjent 25

dages ferie, kan du stadig godt afholde ferie. Det

sker dog uden løn eller feriegodtgørelse fra os.

Du kan max. overføre én uges gammel ferie til

det nye ferie år. Du skal huske at aftale det med din

afdelingschef og personalekontoret.

Feriefridage

Du har ret til feriefridage, når du opfylder de overenskomstmæssige

krav. Er du i tvivl, kan du tale

med din afdelingschef eller henvende dig på personalekontoret.

Reglerne omkring feriefridage

står i den enkelte overenskomst.

Fortrolighedsklausul

Du må ikke videregive de informationer, du modtager

og får kendskab til under dit ansættelsesforhold

til personer uden for virksomheden. Du må

heller ikke videregive nogen informationer over

18 Personalehåndbog · Bilka/AZ · 2010

nettet. Heller ikke fotos af butikken og butikkens

ansatte må videregives uden tilladelse fra varehuschefen.

Hvis du ikke overholder dette, kan det

få konsekvenser for dit ansættelsesforhold.

Garderobe

Vi har indrettet en garderobe ved personaleindgangen,

hvor større tasker osv. skal anbringes.

Kontanter og værdigenstande opbevares på eget

ansvar. I de fleste varehuse er der omklædningsrum,

med badefaciliteter og skabe.

Informationer

Din afdeling holder løbende møder, hvor emner

med betydning for din afdeling og virksomheden

bliver drøftet. På opslagstavlerne i huset og i vores

medarbejderblad INSIDE kan du løbende holde

dig orienteret om, hvad der sker i virksomheden.

Jobbørs

Du kan følge med i de nye stillinger, der bliver slået

op af Dansk Supermarked Gruppen på opslagstavlerne

i huset eller på vores hjemmeside www.dsg.dk.

Evakuerings- og katastrofeplan

Du og din afdeling har nogle bestemte opgaver,

som I skal gennemføre, hvis der sker en ulykke.

Du vil få oplyst af din afdelingschef, hvilke opgaver

det drejer sig om.

Læge- og tandlægebesøg

Læge- og tandlægebesøg foregår i din fritid. Hvis

det ikke er muligt, skal du spørge din afdelingschef,

om du kan få fri. Akut behov for læge- og

tandlægebesøg kan sidestilles med sygdom og vil

blive behandlet som sådan.

Løn

Din løn betales månedsvis bagud og bliver sat ind

på din lønkonto den sidste bankdag i måneden.

Er du timelønnet, beregnes lønnen på baggrund

af din timerapportering i EDB systemet, hvor bl.a.

antal arbejdstimer, sygedage mv. registreres. Din

timeregistrering opgøres ca. den 18. i hver måned.

Er du månedslønnet, får du udbetalt den faste løn

for en hel kalendermåned med tillæg eller fradrag

for overtimer, fritimer m.v. Tillæg og fradrag bliver

21 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

opgjort ca. d. 18. i hver måned. Har du spørgsmål

i forbindelse med dette, kan du kontakte din leder

eller økonomiafdelingen.

Opsigelser/fratrædelse

Hvis du vil sige op, skal du aflevere en skriftlig opsigelse

i 2 eksemplarer til din afdelingschef. Personalekontoret

har en standardformular liggende,

du skal benytte. Du skal aflevere opsigelsen i så

god tid, at opsigelsesvarslet i din overenskomst

overholdes. Husk at få en kopi fra din afdelingschef.

Hvis du er i tvivl om din opsigelsesvarsel, så

kontakt din afdelingschef eller personale kontoret.

Overarbejde

Hvis du arbejder over, skal det aftales med afdelingens

ledelse og aflønnes eller afspadseres efter

overenskomsten.

Parkering

Du skal parkere din bil eller cykel på bestemte

p-pladser. Du kan altid spørge din afdelingschef,

hvor p-pladserne er.

Personalehandel

Det er yderst vigtigt, at du overholder nedenstående

regler omkring personalehandel. Reglerne

er til for at beskytte dig imod eventuel mistanke

om tyveri, som kan resultere i bortvisning. Når du

skal købe noget, skal du gøre det i din pause eller

uden for din arbejdstid.

Når du har betalt for dine varer, skal du kontrollere,

at antal og varer stemmer overens med kassebonen.

Hvis det hele er, som det skal være, så

lukker du dine poser, sætter et kontrolnummer på

og stiller dem på den anviste plads. Husk altid at

få dit personalenummer på kasse bonen. Har du

ikke et kort endnu, skal du gøre serviceassistenten

opmærksom på, at det er personalehandel. Du må

ikke have dine varer til at stå i afdelingen eller i dit

garderobeskab. Det vil medføre hårde restriktioner

hvis dette ikke overholdes, og kan medføre bortvisning

hvis det ikke overholdes.

Personaleejendomsbevis

Medbringer du varer, som skal byttes eller returneres,

skal du henvende dig i port kontrollen, in-

den du går ind i salgsområdet. Her skal du have

et personaleejendomsbevis, som er et bevis for, at

varen er din, og at du har betalt for den. Forsøg

på at medbringe varer uden gyldig kasse bon eller

foreskreven attestation vil medføre øjeblikkelig

ophævelse af ansættelsesforholdet. Hvis du vil

have pengene retur, skal du henvende dig i informationen.

Skal varen byttes, henvender du dig i

afdelingen, hvor varen er købt. Når varen er byttet,

skal den stilles, hvor øvrige varer skal opbe vares.

Personaleejendomsbeviset afleveres samme dag

i portkontrollen, når du går hjem.

Personlige ejendele

Deodoranter, hygiejneartikler, slik, cigaretter , frugt

og grønt er ikke omfattet af de krav om »dokumentation

af ejendomsforholdet«. Dog skal nye

og uåbnede ting være påskrevet/påstemplet ved

indgangen eller være vedlagt kassebon.

Andre medbragte ejendele som MP3 afspiller,

cykellygter, mobiltelefoner osv. er ikke underlagt

dokumentationskravet, når det tydeligt kan ses,

at de er brugte. Det er altid dit ansvar, at der ikke

kan opstå tvivl om, hvorvidt en vare tilhører dig

eller os.

Portkontrol ; personaleind- og udgang

Inden du går ud, skal du trykke på kontrolknappen

ved personaleindgangen. Viser lampen grønt,

går du videre. Viser den rødt, skal du vise, hvad du

har i tasker, pakker osv. Du skal vise bon eller nota

for eventuelle varer, som kan købes i butikken. Pas

derfor godt på din bon/nota, så der ikke opstår

tvivl om, at dine varer er betalte. Butikken/Intern

revision kan til enhver tid gennemføre kontrol af

alle, der forlader arbejds pladsen.

Skattekort

Skattekort indberettes automatisk fra skat. Har du

ikke hovedkort, men frikort, vil vi i stedet modtage

dette. Ønsker du at benytte bikort, skal du meddele

det til dit personalekontor. Hvis det er første

gang, du er på arbejds markedet, skal du selv kontakte

Skat, så der kan blive dannet et skattekort,

som vi herefter vil modtage elektronisk. Hvis du

undlader dette, trækker skat 60 %. Kontakt din leder

eller økonomiafdelingen hvis du er i tvivl.

Personalehåndbog · Bilka/AZ · 2010

19


opslag

u Se vedlagte proof i fysiske portfolio, for opslag i 100%

opslaget vises her i 75%

Andre politikker

Koncernpersonale politik – med 15 bud

Læs folderen, som du får i din velkomstpakke. Ekstra

eksemplar kan fås på dit personale kontor eller

hos din daglige leder.

Støtte til uddannelse

Du skal ikke selv betale udgifter til kursus gebyr og

bogkøb til eksempelvis akademi merkonom- eller

HD-studier. Det gør vi, så længe følgende betingelser

er opfyldt:

» Du skal have været ansat mindst 3 mdr. før

studiestart.

» Studiet skal være relevant for dit daglige

arbejde eller dine fremtidige muligheder i

virksomheden.

» Ledere søger støtte til relevant uddannelse

direkte af virksomheden. Medarbejdere kan

søge via kompetencefonden.

» For at du kan få refunderet dine udgifter i

forbindelse, skal kursustilmeldingen være godkendt

af din afdelingschef samt af personale-

eller varehuschef.

Politik for sundhed, sikkerhed og miljø

Dansk Supermarked prioriterer de ansattes sikkerhed,

sundhed og trivsel højt. Desuden prioriteres

vores kunders sikkerhed og sundhed samt de

medarbejdere, som vores samarbejdspartnere har

på vores arbejdspladser. Vi tager hensyn til miljø i

vores daglige drift af virksomheden.

Vores mål er at forhindre ulykker og arbejdsskader

og mindske negativ miljøpåvirkning. Vi

forventer, at du som medarbejder deltager i samarbejdet

om sikkerhed og sundhed. Du har pligt

til at overholde og efterleve sikkerhedsforskrifter

samt påtale fejl og mangler så vi kan forebygge.

Graviditetspolitik

For at kunne tage mest muligt hensyn til den gra

vide medarbejder er det vigtigt at orientere afdelingschefen

for, at individuelle hensyn og tilpasninger

kan planlægges og sættes i gang. Din sikkerhedsgruppe

udarbejder en arbejdspladsvurdering

( APV ), når varehuset får kendskab til din graviditet.

24 Personalehåndbog · Bilka/AZ · 2010

Hvis du vil have yderligere oplysninger om, hvordan

du skal forholde dig med hensyn til dit arbejde i forbindelse

med graviditet, barsel og forældreorlov,

kan du læse mere på www.dsg.dk eller spørge på dit

personale kontor.

Seniorpolitik

Vi ved, at alder og erfaring hører sammen og derfor

bygger Bilkas seniorpolitik på, at du skal have de

bedst tænkelige arbejdsbetingelser i hele din seniorperiode.

I Bilka taler vi om seniorperiode fra 58

år og frem til din pensionsalder. Her tilbyder vi en

seniorsamtale med din personale- og afdelingschef

og herefter tilbydes samtaler med 2-års mellemrum

eller efter ønske. For uddybning af vores senior politik

henviser vi til www.dsg.dk, eller din afdelingschef.

Rygepolitik

Det er ikke tilladt at ryge indendørs, medmindre

der lokalt forefindes et rygerum. Rygning udendørs

må kun foregå på bestemte steder. Urtecigaretter

med eksempelvis mynte eller menthol omfattes af

reglerne om passiv rygning. Spørg din jobpilot eller

din afdelingschef ved tvivl. Se mere på www.dsg.dk

Alkoholpolitik

Det er ikke tilladt at indtage eller være påvirket af alkohol

i arbejdstiden. Varehuschefen kan godkende,

at der ved særlige lejligheder nydes en forfriskning.

Se koncernens alkoholpolitik på www.dsg.dk for

uddybning af reglerne. At være beruset i arbejdstiden

er strengt forbudt og kan medføre øjeblikkelig

bortvisning og en evt. samtale.

Narkotika

Det er ikke tilladt at indtage eller være påvirket af

euforiserende stoffer, når du er på arbejde. Du må

ikke indtage nogen former for rusmidler hverken i

arbejdstiden, dine pauser eller til fester afholdt af

virksomheden. Se mere på www.dsg.dk

Misbrugsproblemer og hjælp

På www.dsg.dk under politikker kan du også finde

oplysninger om, hvad virksomheden kan hjælpe

med, hvis du har misbrugsproblemer. Vi tager

hånd om dine problemer som arbejdsgiver , og vil

gøre alt hvad der kræves, for at dit liv fungerer.

22 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Ansat i salgter-afdelingen på arbejde ved kød pakkeren.

Personalehåndbog · Bilka/AZ · 2010

25


omslag

u Se vedlagte proof i fysiske portfolio, for opslag i 100%

opslaget vises her i 75%

Læs mere på www.dsg.dk

23 ӏ Typografi & ombrydning ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Personalehåndbog 2010


24 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

GRAFISK DESIGN


u

u

u

u

u

u

u

u

grafisk design

Opgaven - Responsive Web Design (RWD) - website

Tilbage i 2011 lavede jeg et site for en bekendt - en selvstændig anlægsgartner. Sidenhen

har han startet nyt firma (Jensen&frandsen anlæg) med en ny partner. i den forbindelse

ønskede de et nyt site - i en helt anden stil end det foregående.

den nye partner (dan Jensen), har været min sparringspartner i denne opgave. Han

havde fra start en idé om sitets udseende samt funktionalitet. Han ville gerne have et

site "i den nye stil - med store billeder", som ikke minder om alle de andre gartner-sites

på nettet (der findes mange som ikke er prangende). derudover skulle sitet, i modsætning

til det fra 2011, kunne vises på alle platforme.

det dan talte om, var selvfølgelig et responsive website - altså et site som kan ændre

format automatisk, alt efter hvilken platform det vises på. En spændende udfordring

som jeg aldrig havde prøvet før. da kravene til sitet var ret enkle (se "krav fra kunden"),

følte jeg at dette var den rigtige opgave til at kaste mig ud i et responsive webdesign.

Benyttede programmer

photoshop CS5.5/CS6 til mockups samt redigering af billeder

dreamweaver CS5.5 til opsætning og kodning af site

GRAFISKE DESIGNPARAMETRE

Typografi

mht. font besluttede jeg uden megen betænkningsid at holde mig til en af de sikre

webfonts, som næsten alle har på deres maskine. Som udgangspunkt var jeg indstillet

på en sans serif, da jeg gerne ville signalere noget mere moderne. Jeg havde

flere fonte med i mine overvejelser, men endte med at vælge Source Sans pro både

til overskrift og brødtekst. Source Sans pro er adobes allerførste open source skrifttype.

det er en sans serif skrifttype, der er designet til at forbedre læsbarheden i

brugergrænsefladens design. Et sikkert valg.

Farver

generelle farver på sitet: grå (#515151) til brødteksten og få overskrifter, rød (#ca6666)

til mine overskrifter samt "knapper", En lys farve til tekst-baggrunden (#f9f9f9). En blå

til at bryde layoutet på tværs, i toppen af siden. Samme blå er også brugt til "knapper"

(#28343c). disse farver, er med til at skabe kontraster og dynamik på siden.

Stil og stemning

dynamisk via Jquery-slideren, men samtidig enkel i sin opbygning hvilket gør den

overskuelig og brugervenlig - et krav fra kunden.

Kontraster

Jeg har arbejdet med kontraster i form af skrifttypen i flere forskellige farver og størrelser.

derudover skaber billederne også store kontraster på siden når Jquery-slideren

kører. man får et nyt billede at forholde sig til med få sekunders mellemrum - billeder

som er fyldt med kontraster. Smukke naturbilleder.

Afsender

afsenderen er anlægsgartner-firmaet Jensen&frandsen anlæg. Et firma som til

daglig bliver drevet af dan Jensen og bo frandsen.

25 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Målgruppe

u mænd og kvinder fra alderen 20 år og opefter. Typisk mennesker som skal have lavet

noget som en anlægsgartner kan udføre. mange mennesker bruger anlægsgartnere når

de skal have udført en opgave i eller omkring deres have/belægninger/anlæg - derfor er

målgruppen ret stor her.

Krav fra kunde

u Kunden havde som udgangspunkt kun nogle få krav til designet.

Jeg fik af kunden disse punkter at forholde mig til inden start:

» Overskuelig

» brugervenlig

» moderne (i forhold til andre gartner-sider)

» Ingen grønne farver på selve sitet (der er nok grønne farver i billederne)

» Jquery-slider til at vise store billeder på de fleste sider.

» Skulle kunne fungere på alle platforme (computer/tablet/mobil/smartphones)

» Alle billeder i "Galleriet" skulle kunne vises i stor udgave (også på smartphone)

Arbejdsprocessen

u Startede ud med en mindmap for at få ideer til designet – indhold, form osv. derefter

skitser af hvordan siden kunne se ud. producerede flowchart for at danne mig et overblik

over, hvordan sidens struktur skulle være. Lavede derefter mockup til kunden.

Kunden skulle efterfølgende godkende flowchart + mockup, indholdet på index-siden

samt farver og font-valg.

Efter godkendelse af overstående, startede jeg med min index-side som det første. da

den blev godkendt, gik jeg derefter i gang med de sider som er bygget på index's indhold

- herefter siderne "galleri" med meget billedarbejde og "Kontakt" som den sidste.

Undervejs blev der lavet rettelser fra vores korrekturgange – dog i begrænset omfang,

da kunden var tilfreds med hvad han så, allerede efter første fremvisning. det har

primært været rettelser i teksten, samt brug af andre billeder end de tilsendte. derudover

har der også været rettelser i størrelser på overskrifter og dens farve (vises

senere i portfolioet).

Kvalitetsvurdering

u Jeg er glad for det endelige resultat og må indrømme det har været spændende at

arbejde med et site som dette (rWd). Jeg er dog glad for at kravene til sitet ikke var

større - det ville have givet mig problemer i forhold til at der er meget der skal gå op i

en højere enhed når vi taler responsive Web design. der skal ikke meget til, før hele

sitet ikke fungerer, når det skal fungere på alle platforme!

Jeg synes der er en god sammenhæng mellem de forskellige elementer på de forskellige

sider og det er også lykkedes at få den lavet enkel og overskuelig, hvilket var et

krav. Jquery-slideren fungerer perfekt, til stor glæde for kunden. Kunden var i sidste

ende meget tilfreds med at det er lykkedes at skabe et site som nu kan ses på både

Computer, Tablet og mobil/Smartphone, modsat versionen fra 2011.

det negative; Jeg er ikke selv tilfreds med linjelængden på brødteksten. den er efter min

smag, for lang. Jeg foreslog kunden 2 spalter, som også ville komme til at fungere på tablet/mobil-udgaven,

men han afslog og valgte at beholde den ene spalte gennemgående.

”Læsbarheden er fin i en spalte, så den behøver du ikke at røre ved” - sådan lød ordene

efter første korrekturgang. Kunden har altid ret!

u

u

u

u

u

u

u

u

u

u

Opgaven - logo til website

i forbindelse med det nye site, ville firmaet gerne have nyt logo til det

nye site. det er endnu besluttet om logoet skal optræde på alt deres

materiale (der skal produceres ny identitet i form at trykt materiale

som; brochure/folder, visitkort, klistemærker til firmabiler mm.

Benyttede programmer

illustrator CS5.5/CS6 til udvikling og rentegning af logo

GRAFISKE DESIGNPARAMETRE

Typografi

Til ordet "anlæg" har jeg brugt Britannic Bold og Agency FB regular til

"Jensen&frandsen". &-teget er hentet som et vecktorelement fra Shutterstock.com,

og jeg ved derfor ikke hvilken font der er brugt til.

Farver

rød (den samme som på sitet), brun (skov, natur, have), grøn (lavet

med en gradient, så den grønne farve varierer. Selve navnet er i hvid

eller sort, alt efter hvilken baggrund det vises på.

Stil og stemning

natur, skov, have, robusthed, bæredygtig.

Kontraster

Kontraster i valg af fonte samt farver.

Afsender

Jensen&frandsen anlæg.

Krav fra kunde

Kunden havde som udgangspunkt kun nogle få krav til logoet. matchende

til farverne brugt på sitet. robusthed samt noget som indikerer

natur/skov/have. i logoet skal der indgå et eller flere blade i

en anden farve end teksten.

Arbejdsprocessen

» mindmap

» inspiration – logo, blade, have-stemning

» Håndtegnede skitser

» Skærmskitser

» afprøvning af typografi

» rentegning i illustrator

» Endelige logo (+ skalerings tests)

Kvalitetsvurdering

Logoet til sitet er desværre blevet nedprioriteret i den samlede

opgave. Klart med fokus på selve sitet. men på trods af manglende

prioritering, er resultatet okay, og det fungerer godt på sitet.


mindmap - logo

u

Kapitaler, robustd, blad, lige linjer, bold

26 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


inspiraTion - logo

god blad/struktur

fed detalje med

cirklen og gr;s

27 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Kapitaler på kapitaler

god struktur i bladet


håndTegnede logoer

u Skitser, udkast og ideer til logo

28 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

Videre med dette udkast


TesT af forskellige skrifTTyper

Scene STD ultra black

ANLÆG

Kartika bold

ANLÆG

Impact

ANLÆG

Haettenschweiler

ANLÆG

Valgt til ordet anlæg

robust, holdbar, lige linjer.

Britannic Bold

ANLÆG

29 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

ANLÆG Myriad

Franklin Gothic Heavy

ANLÆG

Century Gothic bold

ANLÆG

Arial bold

ANLÆG

Soho Std Ultra Compressed

ANLÆG

Pro bold

JENSEN&FRANDSEN

Nyala

JENSEN&FRANDSEN

Gotham Narrow bold

JENSEN&FRANDSEN

Gill Sans MT Light

JENSEN&FRANDSEN

Agency FB regular

JENSEN&FRANDSEN

Valgt til ordet JEnSEn&frandSEn

Krøllet, lige linjer, kapitaler


håndTegnede skiTser - blade og sTrUkTUr

går videre med denne type blad.

fungerer godt med cirklen som brydes.

30 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


enTegning på skærm - blade og sTrUkTUr

31 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


enTegning på skærm - TesT sf farver

godkendt af kunden

32 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


skalering, graysCale TesT, valgTe farver

33 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

#ca6666

Farver

#c47a33

Grøn gradient


TesT på merChandise

34 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


deT færdige resUlTaT

benyttes på hvid baggrund

benyttes som vist, på mørk baggrund.

35 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


gammelT siTe / non-spiraTion

u Her vises siderne fra sitet tilbage fra 2011. Sitet minder lidt om mange andre gartner-sites, noget som

kunden ikke ønsker - altså en helt anden stil end det som vises her.

u Her vises sitet fra 2011.

Er ikke responsive

- og knap så kønt:)

36 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

Et lille overblik hvad der findes af

gartner-sider derude. det er netop

denne type side kunden ikke ønsker.

grøn med grøn på.


esponsive web design (rwd)

- består af tre overordnede elementer: En flydende struktur, fleksible billeder og medieforespørgsler.

Flydende struktur

u den flydende struktur gør sig gældende, når vi snakker skærmopløsning. på en

stor widescreen kan dit website f.eks. fylde 4 kolonner i bredden, hvilket kan reduceres

til 2 kolonner på en tablet, eller 1 kolonne på en smartphone (se billede

til højre). indholdet bliver altså distribueret fleksibelt i forhold til den givne opløsning,

til forskel fra det traditionelle design hvor man ender med en ekstra horisontal

scroll-bar, så snart website-opløsningen overskrider skærmopløsningen

Fleksible billeder

u når indholdet bliver distribueret på færre kolonner, er det vigtigt, at billederne

følger med i størrelsen, da de ellers vil ende med at fylde hele skærmen. billederne

skaleres sammen med opløsningen når der "breakes" (når der skiftes til

et andet format - fx. til tablet eller smartphone), så de på trods af en ellers høj

opløsning stadig vises proportionelt med resten af siden, selvom man browser på

en smartphone.

Medieforespørgsler/ Media Queries (CSS)

medieforespørgsler opsætter nogle betingelser for sidevisningen. når man åbner

et website på sin smartphone, kan man sætte nogle betingelser for, hvad der

skal vises alt efter opløsningen. Hvis skærmopløsningen er 480 px bred (som på

de fleste smartphones) eller derunder, kan man sørge for kun at vise visse, relevante,

ting. det kunne f.eks. være, at man ville fjerne banner reklamerne på mobile

platforme, men vise dem på større stationære skærme, eller som i eksemplet

til højre; fjerne billedet i toppen hvis det ikke har relevans på en lille skærm.

Indhold, indhold, indhold!

u der er naturligvis nogle tekniske aspekter i responsive Web design (fleksible

grids, fleksible billeder og procenter fremfor pixels), men det bærende element

er prioriteringen af indholdet.

det handler om at stille sig selv nogle spørgsmål, der for eksempel kunne lyde

sådan her:

1. Hvordan skal sidens indhold opdeles, hvis man sidder med Smartphone?

- I dette tilfælde næsten det samme som på index. Menu-linjen forsvinder

dog og erstattes af en dropdown-menu.

2. Skal sidens indhold opdeles anderledes for en smartphone-bruger alt

efter om telefonen holdes vertikalt (portræt) eller horizontalt (landskab)?

– nej, samme indhold ved vertikalt (portræt) og horisontalt (landskab)

3. Skal alt indhold vises til alle eller er det ok at klippe noget ud?

– ja, næsten alt indholdet skal vises på alle platforme. I smartphone-udgaven,

vælger jeg at skære menuen væk, så der vises en drop-down-menu i stedet.

37 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u Ca.-mål på de forskellige "breakes"

(når der skiftes til f.eks. tablet)

u

Her vises et eksempel på hvordan et layout kan gribes an. man

skal tænke meget i bokse/ rækker/ kolonner - meget mere end

normalt. Som man kan se, er dette layout delt op i 4, som bliver

mindre og mindre når der bliver "breaket".


idefase / mindmap & flowCharT

u mindmap med tanker omkring indhold og udtryk.

» grid-opsætning

» Enkelhed

» overblik

» nem navigation

» informativ

» Jquery-slider - store og indbydende billeder

» flere fotos fra kunden. Er dem jeg har, gode nok?

» overskueligt layout, så det passer

» Letlæse skrifttype

38 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u Her skitsen til mit flowchart.

fejlen her, er at jeg har placeret galleriet forkert i forhold til det aftalte. "om os" er i øvrigt index, så

den forsvinder fra flowchartet, og ind kommer "pleje&Vedligehold. der byttes efterfølgende plads

mellem de forskellige menu-punkter, så jeg ud med det rentegnede flowchart neders på siden.

Index

HAVEANLÆG BELÆGNING PLEJE&VEDLIGEHOLD GALLERI

KONTAKT

Flowchart

u

Hjemmesiden består af index med 5 undersider. fra venstre mod højre:

Haveanlæg, belægning, pleje&Vedligehold, galleri og Kontakt.


å-skiTser

u Udvalgte skitser.

flere skitser i trykt portfolio*

u Skitser til layoutet

39 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

u

Kundens valg (efter rådgivning fra mig selv, da det ligner noget der kunne fungere i "grids".

Vigtigt med en enkel opsætning, så sitet kan fungere på alle platforme.

Udgangspunktet for min indexside i forhold til den valgte skitse:

» baggrundsfarve øverst på siden, til at bryde slideren og menuen

» Header med logo øverst

» Horisontal menu - effekter senere

» Stor slider i toppen

» Tekstfelt i midten - måske 2 kolonner, hvis linjerne bliver for lange

» footer med oplysninger samt facebook-link


websiTe

u

(rWd) inspiration.

Store og små formater.

40 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


websiTe

u (rWd) inspiration

u Enkelt layout for at tilpasse det til alle

platforme. mobil udgaven til venstre,

og fuldt format under.

41 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

fed ide med at bryde

toppen med en farvebjælke.

brinker noget

dynamik ind på sitet.


websiTe

u (rWd) inspiration

u

Selv Kongehuset bruger

rWd - responsive Web design.

fungerer godt med de store billeder

i slideren. overskueligt site

42 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


websiTe

u (rWd) inspiration

u Stor fokus på billeddelen,

flotte billeder.

43 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

mobil-format


websiTe

u (rWd) inspiration

u

Slider der bryder layoutet, og følger med

ned til det mindste format, 480 px og mindre

44 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u Computer-format

u mobil-format


websiTe

u

(rWd) inspiration - breakpoints

Enkelt layout, overslueligt, nem navigation

45 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


websiTe

u - inspiration Jquery-slider u fed detalje når slideren skifter billede. bringer

dynamik ind på sitet. Kræver gode billeder.

46 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

Stor slider på tværs i toppen af sitet.

fin måde at vise sine flotte billeder.


websiTe

u (rWd) inspiration - galleri

opsætning i rækker/kolonner. overskueligt.

u

plads til beskrivelse

under billederne

47 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


websiTe

u

(rWd) inspiration - kontakt

google map, kontaktformular,

informationer.

48 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


oversigT over billeder Til brUg på siTe

u

Tilsendte billeder fra kunden. disse til galleriet.

49 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


oversigT over billeder Til brUg på siTe

u

Tilsendte billeder fra kunden.

50 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


sToryboard

u

Kopi af godkendt layout på index-siden i det største format. Her med de korrekte

mål, som danner grundlag for resten af siderne på sitet- altså et udgangspunkt.

#logo 215px X 70px

51 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

#header 1120px X 70px

#slider1120px X 550px

#maincontent 940px X 150px

#maincontainer 1120px X 400px

#footer 1120px X 150px

#backgroundbox px X 340px


u

moCkUp

- i flere forskellige formaTer

godkendt mockup på index-siden i alle formater.

Skaber grundlag for resten af siderne.

Logo

maincontainer

footer

maincontent

Slider

menu

52 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

F

Slider

maincontent

Logo

menu

maincontainer

footer F

Logo

dropdown menu

Slider

footer

maincontent

maincontainer

u min width 990px, før første break opstår

u min width 729px, før første break opstår

u

min width 480px, før første break opstår

(Storm skærm)

(Tablet vertikal)

F

(Smartphone)


u

Skriftvalg¢

srifTvalg og farver

Her vises en top-10 liste over de mest populære

google Web fonts - udvalg sendt til kunden.

53 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u

open Sans er en humanistisk sans serif

skrifttype designet af Steve matteson. open

Sans, blev oprindelig designet med åbne

former, og en neutral, men alligevel venligt

udseende. den er optimeret til print, web og

mobile platforme, og har fremragende læsbarheds-egenskaber

i sine bogstavformer.

open Sans er tilgængelig i en lang række

varianter for en font med en åben licens.

der er 5 forskellige varianter (300 book, 400

normal, Semi-bold 600, bold 700 og Extra

bold 800) Hver variant har desuden en kursiv

version, så der i alt er 10 varianter

- en meget populær skrift.

Størrelser og farve på mine skrifttyper

p

u

font-size: 16px; - fontweight: 300; - Color: #555555;

u h1

font-size: 36px; - Weight: bold; - Color: #ca6666;

u h2

font-size: 24px; - Weight: bold; - Color: #ca6666;

u h3

font-size: 36px; - fontweight: normal;- Color: #555555;

Farver

u afprøvning af brødtekst i grå/grayscale

u Har bevidst holdt siden meget stilren og enkel uden baggrundsfarver

og tekst i mange farver, men enkelte steder er tekst/ links fremhævet

med farver, der er forsøgt matchet med farverne brugt i materialet.

#28343c

#ca6666 #ffffff


korrekTUr - ændringer Undervejs

u Små-rettelser under vejs - hovedsageligt farveændringer på overskrifter, tekstrettelser og udskiftning af billeder.

u Udgangspunket var overskrifter i grå. u for lille overskrift - laves større. u Tekst tilføjelse - mere tekst ind..

u Kunden ønskede lidt mere opmærksomhed på h1-overskrifterne,

og de blev derfor ændret til rød (den samme røde farve som bruges

andre steder på sitet). u

overskrift efter ændring på størrelsen.

u omformulering af tekst i punktopstilling. Efter tekstrettelse u i punktopstilling.

54 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

u Tekst tilføjes som et helt afsnit for sig selv, som vist herunder.


hTml

55 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


CasCading sTyle sheeT (Css)

medieforespørgsler/

media Queries/

(CSS) Cascading Style Sheet (CSS)

56 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


de færdige sider

57 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


seo opTimering og faviCon

SEO

på indexsiden samt de vigtigste undersider har jeg indtastet mETa Keywords og

mETa description i mit tag – for en bedre placering i søgemaskinerne.

derudover har jeg rettet billedernes alternate Tekst (alt=””)

- kan ses herunder..

58 ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

Favicon

favicon også kaldet „website icon“, er det lille (16 × 16 px) logo/ikon man

kan placere, der hvor man taster hjemmesideadressen ind i browseren og i

favoritter/bogmærker. føglende kode er kopieret ind i mit tag:


59

ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ


60

ӏ grafiSK dESign ӏ porTfoLio 2013 ӏ HanS SaLLing ӏ

More magazines by this user
Similar magazines