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 


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æøå 



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 





gill Sans 

regular 


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

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


Aa 





Hoefler Text 

regular 


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

Aa 





myriad pro 

regular 


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: 


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. 


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.


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 


27,1 mm 

54 mm 

3mm beskæring p 

28,5 mm


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 


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 


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 


Venstrestillet, align to grid: none 

Bullet tekst - flere tekst linjer 


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 


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. 


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. 


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. 


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! 


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 


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. 


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: « 


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 


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 


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 



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. 


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 


✔ 

✔ 

✔ 


15

opslag 



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 


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 


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. 


19

opslag 



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. 


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. 


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


25

omslag 



Læs mere på www.dsg.dk 


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. 


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. 


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. 


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). 


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. 


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. 


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) 


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 


Kapitaler på kapitaler 

god struktur i bladet

håndTegnede logoer 

u Skitser, udkast og ideer til logo 


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 


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 


Gotham Narrow bold 


Gill Sans MT Light 


Agency FB regular 


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. 


enTegning på skærm - blade og sTrUkTUr 


enTegning på skærm - TesT sf farver 

godkendt af kunden 


skalering, graysCale TesT, valgTe farver 


#ca6666 

Farver 

#c47a33 

Grøn gradient

TesT på merChandise 


deT færdige resUlTaT 

benyttes på hvid baggrund 

benyttes som vist, på mørk baggrund. 


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:) 


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. 


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 


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 


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. 


websiTe 

u (rWd) inspiration 

u Enkelt layout for at tilpasse det til alle 

platforme. mobil udgaven til venstre, 

og fuldt format under. 


u 

fed ide med at bryde 

toppen med en farvebjælke. 

brinker noget 

dynamik ind på sitet.

websiTe 


u 

Selv Kongehuset bruger 

rWd - responsive Web design. 

fungerer godt med de store billeder 

i slideren. overskueligt site 


websiTe 


u Stor fokus på billeddelen, 

flotte billeder. 


u 

mobil-format

websiTe 


u 

Slider der bryder layoutet, og følger med 

ned til det mindste format, 480 px og mindre 


u Computer-format 

u mobil-format

websiTe 

u 

(rWd) inspiration - breakpoints 

Enkelt layout, overslueligt, nem navigation 


websiTe 

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

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


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 


websiTe 

u 

(rWd) inspiration - kontakt 

google map, kontaktformular, 

informationer. 


oversigT over billeder Til brUg på siTe 

u 

Tilsendte billeder fra kunden. disse til galleriet. 


oversigT over billeder Til brUg på siTe 

u 

Tilsendte billeder fra kunden. 


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 


#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 


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. 


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. 


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

hTml 


CasCading sTyle sheeT (Css) 

medieforespørgsler/ 

media Queries/ 

(CSS) Cascading Style Sheet (CSS) 


de færdige sider 


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


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 ӏ

Hent dokumentation - Salling-design

Create successful ePaper yourself

Delete template?

Save as template?