Jobnet.dk designmanual. Version

Størrelse: px
Starte visningen fra side:

Download "Jobnet.dk designmanual. Version"

Transkript

1 Jobnet.dk designmanual Version Arbejdsmarkedsstyrelsen 2013

2 GENERELT Browser kompatibilitet Jobnet.dk udvikles med brug af CSS3, hvilket gør det væsentligt nemmere at vedligeholde alting. CSS3 gør det meget nemmere at lave f.eks. specielle skygger eller flotte animationer, som eventuelt skal kunne ændres med tiden. Det nye design bliver udviklet til at understørre browserne: Internet explorer 8, 9, 10, Chrome, Safari i OSX og Firefox. Ingen specielle effekter lavet i CSS3, som box og test shadow, bliver vist, når brugeren kommer i Internet explorer 8. 2

3 GENERELT Typografi Stag Sans (SS) er den primære typografi på jobnet.dk. Stag Sans Thin ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå Stag Sans Book Italic ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå Stag Sans Light ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå Stag Sans Medium - Photoshop font Stag Sans Book Bold - Web font ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå Stag Sans Book ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå Stag Sans Semi Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

4 GENERELT Fallback typografi Arial er fallback typografien på jobnet.dk. Fra Stag Sans til Arial Arial Regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå Arial Italic ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå Stag Sans Thin Stag Sans Light Stag Sans Book Stag Sans Book Italic Stag Sans Book Bold Stag Sans Semibold = Arial Regular = Arial Italic = Arial Bold Arial Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

5 GENERELT Typografi Specifikation Nedenfor er et eksempel på hvordan typografi vil blive specificeret løbende i designmanualen. Family Style Size Color SS Book 18/22px, #1D3847, 0.015em Line hight Letter spacing Specifikationer: Font family SS (Stag Sans) Font style Book (Thin, Light, Book, Italic, Medium, Semi Bold) Font size 18px Line hight 22px (vertikal linie højde) Color #1D3847 Letter spacing 0.015em (horisontal bogstavs mellemrum) 5

6 GENERELT Logo Logo original Logo til web med gradient RGB 202/209/28 RGB 153/183/217 Gradient RGB 0/69/120 RGB 0/69/120 6

7 GENERELT Logo størrelser Header 47px Footer 38px OBS! Header og footer logo fungerer som link til forsiden. 7

8 GENERELT Header Baggrund skal være 100% fuld bredde af viewport Ikke logget ind 22px 47px 91px 22px Logget ind OBS! Hvid baggrund med skygge, #

9 GENERELT Varsling Baggrund skal være 100% fuld bredde af viewport 75px 986px Gradient top, #D94848 Gradient bund, #CE4444 Varsling felt skubber alt indhold under sig 75px ned. Varsling felt skal horisontalt centreres i dets container. Varsling felt er dynamisk i højden. Specifikationer: Al tekst med 1px tekstskygge, #FFFFFF. Med maks w på 986px. Tekst VARSLING! er i KAPITALER. Baggrundsbilledet skal være lyst ved > Læs højt. Specifikationer: > Læs højt SS Book 12px, #1D3847. Tekst med 1px tekstskygge, #FFFFFF. Hover, underline. OBS! Rød baggrund med skygge, #

10 GENERELT Navigation - Dynamik Brugeren er ikke logget ind Brugeren er logget ind OBS! Topmenu skubber alt indhold under sig 53px ned. OBS! Topmenu felt er dynamisk i højden. 10

11 GENERELT Navigation - Topmenu Baggrund skal være 100% fuld bredde af viewport Mål 50px Gradient top, # 13293D Gradient bund, # 09182A States 1px streg, #FFFFFF dynamisk px Topmenu skubber alt indhold under sig 53px ned. Topmenu skal horisontalt centreres i dets container. Topmenu felt er dynamisk i højden. Specifikationer: Tekst altid i KAPITALER. OBS! Mørkeblå baggrund med 1px streg, #FFFFFF. Specifikationer: states Aktivt menupunkt, SS BOOK 14PX, #FFFFFF, 0.025em, med valgt boks. Inaktivt menupunkt, SS BOOK 14PX, #B9BCBF, 0.025em. Hover, SS BOOK 14PX, #FFFFFF, 0.025em OBS! Valgt boks, #FFFFFF over aktivt menupunkt er 10xdynamisk px. 11

12 GENERELT Footer 60px tekstfelt 229px 55px 95px 33px 52px OBS! Indhold allignes med sitets 12 kolonners grid. 12

13 GENERELT Footer Link hover 1px streg, #BFCFE7 Skygge, #

14 FORSIDE Grid 986px 73px 10px 14 OBS! Hele sitet følger et 12 kolonners grid med en bredde på 986px og 73px kolonne bredde med 10px margin.

15 FORSIDE Bannerbillede 1800 px Tile 504px OBS! Bannerbilledet skal horisontalt centreres i dets container. Der er lavet en Photoshop skabelon til banner billedet, containeren er 1800px bred og skabelonen sørger for at fade billedet ud mod en blågrå baggrundstile med patern. 15

16 FORSIDE Log ind Ikke aktiv Knapper ved hover. Inputfelt, aktivt med fokus 26px 28px Gradient top, #1f px 48px 322px 12px 115px 8px 21px 15px 23px 16px Gradient bund, #4E5B66 Gradient top, #1f px 332px 24px Gradient bund, #4E5B66 Specifikationer: baggrund Baggrund med 1px border, #FFFFFF, opacitet 15%. OBS! Gradient farve er målt op med opacitet. Specifikationer: inputfelt Baggrundsfill, #FFFFFF Inaktivt, med 1px border, # Aktivt, rydder standardteksten, samt fokus på inputfelt med 2px outline border, #7BB8BF. 16

17 FORSIDE Log ind fejlmeddelelse 25px 46px 25px 25px 360px Fejlmeddelelse boks er dynamisk i højden. OBS! Skygge rundt om fejlmeddelelses boks, # Specifikationer: fejl Fejl på inputfelt med 2px outline border, #C33E3E. Højden på fejlmeddelelsesboks er bestemt af fejlmeddelelsestekst. 17

18 FORSIDE Søgefelt Baggrund skal være 100% fuld bredde af viewport Inputfelt, ikke aktivt tile 490px 52px Inputfelt, aktivt med fokus 72px 494px 215px tekstfelt 300px 56px tekstfelt 156px OBS! Baggrund med gradient laves til tile. OBS! På Jobnet finder... tekst med 1px skygge, # OBS! Inputfelt tekst SS Book Italic 18px, # px Specifikationer: Inputfelt Baggrundsfill, #FFFFFF Inaktivt inputfelt med 1px border, # Aktivt inputfelt rydder standardteksten, samt fokus på inputfelt med 2px outline border, #7BB8BF. 18

19 FORSIDE Statistik felt Baggrund skal være 100% fuld bredde af viewport slize 32px 22px 158px 38px 40px 1px streg, #FFFFFF Felter og tal er dynamiske. Teksten til hver felt er statisk. Specifikationer: Baggrundsfarve, #7BB8BF. Al tekst har 1px skygge, #FFFFFF. Vertikal linie, #65838C OBS! Lyseblå baggrund med 1px streg i bunden, #FFFFFF. OBS! Centreret glow med 50% pattern laves til slize. 19

20 FORSIDE Link bokse 10px 2 10px 270px 60px 322px 654px OBS! Brødtekst fra boks til boks har samme højde, fylder maks 4 linier og afsluttes med 3 prikker (...) hvis der er mere tekst. 20

21 FORSIDE Link boks 10px Tekst inaktiv 10px Tekst ved hover 2 300x166px 10px Når musen går over en boks skifter linkfarve samt teksten rykker 10px ind. Hele link boksen er klikbar. Specifikationer: Billede er 300x166px. Ramme er 322x220 med 1px border, #CCCACA. Padding om billedet 10px. 21

22 FORSIDE Video link boks 10px Boks inaktiv 10px Boks ved hover 2 10px Hele video link boksen er klikbar. Specifikationer: Billede er 300x166px. Padding om billedet 10px. Ramme er 322x220 med 1px border, #CCCACA. 22

23 FORSIDE Nyheds boks Ikke aktiv Link ved hover. 40px Gradient top, #FFFFFF 100px 270px 12px 12px 12px Fill, #FFFFFF Aktiv Inaktiv Gradient bund, #E8EBEC Fill, #1D3847 Hover Hele nyheds boksen er klikbar. Nyhedshjul skifter hvert 15 sek. Ved hover på boks standser nyhedshjulet ved den nyhed der er fremme. Specifikationer: Ramme er 322x270px med 1px border, #CCCACA. Nyhedshjul knapper er 12x12px med 2px border. Specifikationer: nyhedshjul knapper Inaktiv med fill, #FFFFFF og border, # Aktiv med fill, #1D3847 og border, # Hover med fill, #FFFFFF og border. #

24 FORSIDE Kampagne boks billede 40px 100px 270px billede Kampagne boks behøver ikke nødvendigvis altid følge de overordnede regler. Hele kampagne boksen er klikbar, også hvis den bliver præsenteret grafisk. Specifikationer: Billede er 652x268px. Ramme er 654x270px med 1px border, #CCCACA. 24

25 FORSIDE Kampagne boks billede 40px 100px 270px 654px Hele kampagne boksen er klikbar. Specifikationer: Billede er 652x268px. Ramme er 654x270px med 1px border, #CCCACA. 25

26 FORSIDE Quicklinks Hover Inaktiv 903x1px streg, #96A6AB 62px 15px 5px 63px 45px Gradient top, #FFFFFF Gradient top, #FFFFFF 18px 105px 65px 45px Gradient bund, #C8CFD2 Gradient bund, #E8EBEC 10px 239px Specifikationer: Knap SS Book 14px, #696868, 0.025em. 239x105px med 1px border, #

27 GENERELT Knapper Inaktiv Hover 166px 43px 42px Gradient top, #BFD345 Gradient bund, #8C9B33 Gradient top, #E7FF4C Gradient bund, #A2B335 14px 14px 16px 16px 21px 18px Gradient top, #A3D6DB Gradient bund, #88B2B7 12px 12px Gradient top, #C4FAFF Gradient bund, #89AFB3 13px 13px 292px Disabled Gradient top, #AAA8A8 Gradient bund, #CCCACA Slize OBS! Slize består af lodret skygge og pil med 1px skygge #FFFFFF. Specifikationer: knapper Primære knapper der kræver handling af brugeren er grønne. Sekundære knapper er blå. Tekst altid i KAPITALER, SS BOOK 14PX, #1D3847. Specifikationer: knap border Grønne knapper med 1px border, #A3BC0F. Blå knapper med 1px border, #96BDC2. Grå knap med 1px border, #A8A8A8. 27

28 GENERELT Knapper Inaktiv Hover dynamisk 43px 42px Gradient top, #BFD345 Gradient bund, #8C9B33 Gradient top, #E7FF4C Gradient bund, #A2B335 16px 16px Gradient top, #A3D6DB Gradient bund, #88B2B7 Gradient top, #C4FAFF Gradient bund, #89AFB3 13px 13px 12px 12px 16px 16px dynamisk 13px 13px Slize 21px OBS! Slize består af lodret skygge og pil med 1px skygge #FFFFFF. Specifikationer: knapper Primære knapper der kræver handling af brugeren er grønne. Sekundære knapper er blå. Tekst altid i KAPITALER, SS BOOK 14PX, #1D3847. Specifikationer: knap border Grønne knapper med 1px border, #A3BC0F. Blå knapper med 1px border, #96BDC2. Grå knap med 1px border, #BFBFBF. 28

29 IKONER OPDATERES LØBENDE GENERELT Knapper Inaktiv Hover 52px 48px Gradient top, #FFFFFF Gradient bund, #BEBDBE Gradient top, #FFFFFF Gradient bund, #9A999A Specifikationer: søg knap Inner shadow på knappen. Horisontal grafisk skygge i venstre side. Loop ikon med 1px skygge, #FFFFFF. OBS! Grafisk skygge i bunden ved hover. 68px Specifikationer: play knap #FFFFFF med skygge. OBS! 50% cirkel baggrund, #182B37. 29

30 GENERELT Inputfelt Inaktiv Fokus 15px 15px 13px 13px 292px Fill, #FFFFFF 40px Specifikationer: Inputfelt Baggrundsfill, #FFFFFF 1px border, # Inner shadow, # OBS! Aktivt inputfelt rydder standardteksten. OBS! Fokus på inputfelt med 2px outline border, #7BB8BF. 30

31 GENERELT Inputfelt Inaktiv Fokus Fejl 34px 12px 8px 38px 13px Fill, #FFFFFF Specifikationer: Inputfelt Baggrundsfill, #FFFFFF 1px border, # Inner shadow, # px outer shadow, #FFFFFF. OBS! Aktivt inputfelt rydder standardteksten, samt fokus på inputfelt med 2px outline border, #7BB8BF. OBS! Fejl med 2px outline border, #C33E3E. Tekst, #C33E3E. 31

32 GENERELT Checkbox / radiobutton Checkbox Inaktiv Aktiv Fokus Fejl Radiobutton Inaktiv Aktiv Fokus Fejl 15px 19px 15px 19px Fill, #FFFFFF Fill, #FFFFFF Specifikationer: checkbox/radiobutton Baggrundsfill, #FFFFFF 1px border, # Inner shadow, # px outer shodow, #FFFFFF. OBS! Aktiv sætter check/dot. OBS! Fokus med 2px outline border, #7BB8BF. OBS! Fejl med 2px outline border, #C33E3E. 32

33 IKONER OPDATERES LØBENDE GENERELT Ikoner Din status Kontakt dit jobcenter Kontakt supporten Aktuelle nyheder CV / Jobplan Post Besked fra Jobnet Møde / mødebooking Luk Fold ud / fold ind Søg loop/ knap pil Aktiv / inaktiv /hover nyhedshjul Internt /eksternt jobopslag Nyt jobopslag Del Ikke aktiv / aktiv farvorit 33

34 IKONER OPDATERES LØBENDE GENERELT Ikoner Rigtig god ferie! Tillykke med dit arbejde! Rigtig god bedring! Registrering / bekræftelse OBS! Fill #182B37 med 1px skygge, #FFFFFF 34

35 UNDERSIDE Grid 986px 73px 10px 35 OBS! Hele sitet følger et 12 kolonners grid med en bredde på 986px og 73px kolonne bredde med 10px margin.

36 UNDERSIDE Navigation Topmenu OBS! Ingen menupunkter er aktive i topmenuen på undersiderne. OBS! Tekst med KAPITALER, SS Book 14 px, #B9BCBF. Specifikationer: Hover, SS Book 14px, #FFFFFF, 0.025em. Brødkrumme Specifikationer: brødkrumme sti Brødkrumme tekst med Versaler, #1D3847, skal centreres vertikalt i tomrum mellem navigationsmenuen og underside containeren. Specifikationer: brødkrumme sti Inaktivt link SS Book 12 px, #1D3847. Hover ved link, underline. 36

37 UNDERSIDE Layout 1800 px 40px OBS! Baggrund #E6EBF2 OBS! Baggrund tile med pattern OBS! Baggrund #FFFFFF 185px 15px 15px 766px 2 Footer 100px Baggrundsbilledet skal horisontalt centreres i dets container, som er 1800px bred. Baggrundsblilledet er slicet ud med transperens i kanterne, så det fader ud mod baggrundsfarven, #E6EBF2. 37

38 UNDERSIDE Nyhed 551px 185px 16px 40px dynamisk px 40px 26px OBS! Standard tekstfarve, #1D3847. OBS! Standard datoformat, dd-mm-yy. Specifikationer: billede Billede er 551xdynamisk px. 38

39 UNDERSIDER Video 551px 185px 40px 40px 26px OBS! På undersiden afspilles videoen automatisk. Hele video boksen er klikbar. Specifikationer: Video er 551x343px (16:9 format). 39

40 UNDERSIDER Tekst 551px 185px 40px 40px 26px 1 px, #D1D6D9 OBS! Kontakt dit jobcenter er out of scope i første omgang. OBS! Standard tekstfarve, #1D

41 MIN SIDE Layout 1800 px 40px OBS! Baggrund #E6EBF2 OBS! Baggrund #FFFFFF OBS! Baggrund tile med pattern OBS! Baggrund #FFFFFF 10px 10px 15px 15px 156px 610px 2 Footer 100px Baggrundsbilledet skal horisontalt centreres i dets container, som er 1800px bred. Baggrundsblilledet er slicet ud med transperens i kanterne, så det fader ud mod den blågrå baggrundstile, der er på alle jobnet sider. 41

42 MIN SIDE Overblik 550px 18px 18px 40px 14px 14px OBS! Standard tekstfarve, #1D

43 MIN SIDE Venstremenu - link Niveau 1 - link aktiv link Specifikationer: venstremenu Der tre overordnede navigationsprincipper: Link, dropdown og pageload. Specifikationer: link Ved klik på niveau 1, som ikke har dropdown funktionalitet, linkes der direkte til siden. Siden må ikke hoppe ved klik, foldind, foldud eller pageload i venstremenuen. Hele venstremenuen bliver inaktiv når et topmenupunkt vælges. 43

44 MIN SIDE Venstremenu - dropdown Niveau 1 - foldud Niveau 2 - foldind Automatisk transition Foldud pil flugter med bunden af teksten foldud foldind OBS! Klik på niveau 1 aktiverer foldind/foldud funktionaliteten og medfører ikke state change. Specifikationer: foldud Ved klik på niveau 1 - foldud foldes niveau 2 ud ved animeret transition. 44 Specifikationer: foldind Ved klik på inaktiv menupunkt på niveau 1, foldes hele niveau 2 menuen ud ved animeret transition. Specifikationer: automatisk transition Ved klik på MIN JOBSØGNING bliver niveau 2 til GIV BESKED automatisk foldet ind. Samtidig foldes MIN JOBSØGNING niveau 2 ud.

45 MIN SIDE Venstremenu - pageload Niveau 2 - pageload Niveau 1 - dynamik Automatisk transition aktiv valgt Niveau 1 og 2 (skjult) forbliver aktiv/valgt indtil næste pageload Aktiveres et andet menupunkt på niveau 2, bliver de forrige menupunkter inaktive OBS! Klik på niveau 2 aktiverer pageload og medfører state change på begge niveauer. Specifikationer: pageload Ved klik på niveau 2 bliver menupunktet valgt, siden loades og niveau 1 menupunktet bliver aktivt. 45 Specifikationer: dynamik Hvis valgt niveau 2 menu foldes ind, forbliver menupunkterne valgte indtil næste pageload. Specifikationer: automatisk transition Ved klik på MIN JOBSØGNING bliver niveau 2 til GIV BESKED automatisk foldet ind. Samtidig foldes MIN JOBSØGNING niveau 2 ud.

46 MIN SIDE Venstremenu - metrics Inaktiv Aktiv/valgt Hover 10px 10px 10px 156px 47px 34px Gradient top, #13293D Gradient bund, #09182B Gradient top, # Gradient bund, # px 12px OBS! Baggrund #FFFFFF 18px 18px Specifikationer: tekst Niveau 1 tekst i KAPITALER. Niveau 2 tekst i Versaler. 46 Specifikationer: foldud/ind pil Foldind fold ud pilen har samme farve som inaktiv, aktiv/valgt, og hover tekst. OBS! Der er ikke hover state på aktiv/ valgt menupunkt.

47 MIN SIDE Venstremenu - linjer og knapper Specifikationer: skygge Skyggen i venstremenuen skal ligge ovenpå menupunkter og linjer. Inaktiv Aktiv/valgt Hover linje 1px, #C4D0D0 prik linje 1px, #9DA4AB Box bottom border 1px, #FFFFFF med 1px skygge, #FFFFFF Gradient top, #13293D Gradient bund, #09182B Gradient top, # Gradient bund, # Skygge 10px Specifikationer: linjer Ved overgang fra aktivt til valgt menupunkt er der hvid linje. Ved valgt niveau2 som ikke grænser op til aktivt menupunkt skal der ikke være prikkede linjer. Specifikationer: menupunkt Hele menupunktet skal fungere som en knap. dvs. det skal være klikbart og skal kunne få synligt fokus rundt om knappens kant. 47

48 MIN SIDE Jobopslag Spørg teamet: Bør vi fjerne linket i brødteksten, når overskriften fungerer som link? Vi vist at der linkes forskellige steder hen ved interne/eksterne jobopslag ved brug af mouseover. Hvad gør vi ved jobopslag som ikke har et billede? Hvordan håndter vi prik prik prik px Ikon dynamisk px 18px dynamisk px 18px Ikon Grafisk skygge #D1D6D9 Ikoner 550px Logo maksimum størrelse 120x80px, logoet loater left container. Specifikationer: Jobopslag er 550xdynamisk px. Jobtitel er dynamisk. Jobbeskrivelse kan være maksimum fire linjer. Hvis der bruges et link i beskrivelsen, skal det regnes med i de fire linjer. Grafisk skygge i højre bund af boksen. 48

49 MIN SIDE Jobopslag Inaktiv Hover / Valgt Eksternt job Grafisk skygge Inaktiv Internt job Grafisk skygge Valgt 49

50 MIN SIDE Genveje 265px Inaktiv dynamisk px 222px Inaktiv 18px dynamisk px Hover 550px 50

51 MIN SIDE Tjek jobforslag 4 Gradient top, #AFDDE2 50px 190px 16px 15px Linje #769AA2 12px 550px Gradient bund, #95BCC1 Inaktiv Gradient top, #25546D Gradient bund, #1D3948 Hover Gradient top, #2D6D90 Gradient bund, #1E3A49 Specifikationer: Boks er 550x190px med 1px border, #9DBCBF. Tekst i versaler SS Book 18/22px, #1D3847. Specifikationer: knap Tekst altid i versaler SS Book 18 px, #FFFFFF. Knap tekst med 50% 1px tekstskygge, #OOOOOO. Knap er 420x50px med 1px border, #BFEBF0. 51

52 MIN SIDE Tjekket jobforslag 62px Gradient top, #AFDDE2 50px 190px 16px 15px Linje #769AA2 12px Gradient bund, #95BCC1 550px Specifikationer: Boks er 550x190px med 1px border, #9DBCBF. Specifikationer: ikon Ikon med 1px skygge, #FFFFFF. Ikon er 62x50px. 52

53 MIN SIDE Tjek jobforslag 4 Gradient top, #4E4E4E 110px 50px 22px Gradient bund, #C2C2C2 Slize 140px 96px Disabled 550px Gradient top, #6A6A6A Gradient bund, # Specifikationer: boks Boks er 550x110px med 1px border, #C0C0C0. Tekst i versaler SS Book 18/22px, #1D3847. Specifikationer: knap Tekst i KAPITALER SS Book 18 px, #FFFFFF, 0.05EM. Knap tekst med 50% 1px tekstskygge, #OOOOOO. Knap er 420x50px med 1px border, #F1F1F1. 53

54 MIN SIDE Tjek jobforslag fejlmelding 4 Gradient top, #AFDDE2 110px 50px Gradient bund, #95BCC1 550px Gradient top, #A0CACF Gradient bund, #93BABF Specifikationer: Boks er 550x110px med 1px border, #9DBCBF. Specifikationer: knap Tekst altid i versaler SS Book 18 px, #FFFFFF. Knap tekst med 50% 1px tekstskygge, #FFFFFF. Knap er 420x52px med 1px border, #83ABB2. 54

55 IKONER OPDATERES LØBENDE MIN SIDE Notifikationer 550px dynamisk px 14px linje 1px, #A4BA29 dynamisk px 14px dynamisk px grafisk skygge 10px 10px Foldud pil flugter med bunden af teksten Specifikationer: notifikation Boks er 550xdynamisk px med 1px border, #A4BA29. Boks baggrund, #D1DE7D. Foldud/ind baggrund, #EAF3B5 Grafisk skygge i højre bund af boksen. OBS! Notifikationer kan have et link/flere link. Ved flere links er afstanden mellem hvert link. 55

56 IKONER OPDATERES LØBENDE MIN SIDE Notifikation 54px 10px 13px Inaktiv linje 1px, #A4BA29 Ikoner skal være centreret i en 54px container Streg, #A4BA29 17px Hover 12px 10px 10px grafisk skygge Specifikationer: notifikation Boks er 550xdynamisk px med 1px border, #A4BA29. Boks baggrund, #D1DE7D. Grafisk skygge i højre bund af boksen. Specifikationer: ikoner Ikoner skal være centreret i en 54px container Ikoner har 1px skygge, #FFFFFF. Ikonfarve er #1D

57 IKONER OPDATERES LØBENDE MIN SIDE Notifikation foldud 10px 10px 10px 10px linje 1px, #A4BA29 Foldud pil flugter med bunden af teksten grafisk skygge Specifikationer: Foldud funktionalitet Ved klik på læs mere/foldud knap foldes tekstboks ud ved animeret transition, se næste side. Specifikationer: notifikation Boks er 550xdynamisk px med 1px border, #A4BA29. Boks baggrund, #D1DE7D. Foldud/ind baggrund, #EAF3B5 Grafisk skygge i højre bund af boksen. 57

58 IKONER OPDATERES LØBENDE MIN SIDE Notifikation foldind 10px 10px 22px linje 1px, #A4BA29 Foldind pil flugter med bunden af teksten dynamisk px 40px grafisk skygge Specifikationer: Læs mere Baggrund er #EAF3B5. Grafisk skygge i højre bund af boksen. Specifikationer: Foldind Ved klik på læs mere/foldind knap foldes tekstboks ind ved animeret transition, se forrige side. 58

59 IKONER OPDATERES LØBENDE MIN SIDE Bekræftelse 550px Gradient top, #AFDDE2 100px 16px Gradient bund, #95BCC1 148px 1 402px grafisk skygge SS Book 16/18px SS Book Bold 26px Specifikationer: Boks er 550x100px med 1px border, #9DBCBF. Al tekst #1D3847. Ikonerne er centreret i 120x100 container. 59

60 MIN SIDE Kvittering 16px #C4D0D0 dynamisk px Specifikationer: Baggrund er #FFFFFF med 1 px outline border, #C4D0D0. Grafisk skygge i højre bund af boksen. Al tekst #1D px grafisk skygge

61 MIN SIDE Tabel 184px 108px #A4BA29 10px 12px 16px 16px linje 1px, #A4BA29 Foldud pil flugter med bunden af teksten grafisk skygge Specifikationer: tabel Baggrund er #D1DE7D med 1px outline border, #A4BA29. Al tekst #1D3847. Grafisk skygge i højre bund af boksen. 61

62 MIN SIDE Tabel dialog 10px linje 1px, #A4BA29 skygge border 1px, #C4D0D0 Foldud pil flugter med bunden af teksten grafisk skygge 10px Specifikationer: dialog Baggrund er #FFFFFF med 1px border, #C4D0D0. Al tekst #1D

63 MIN SIDE Tabel dialog 10px linje 1px, #A4BA29 Foldud pil flugter med bunden af teksten skygge border 1px, #C4D0D0 grafisk skygge Specifikationer: dialog Baggrund er #FFFFFF med 1px outline border, #C4D0D0. Al tekst #1D

64 MIN SIDE Kalender 14px 242px 14px Måned og år Dag 40px Top nav: Gradient top #AFDCE1 Gradient bund #95BCC1 Inaktiv linje Aktiv linje Aktiv dato 243px Aktiv baggrund: Gradient top #EDEDED Gradient bund #DEDEDE Valgt baggrund: Gradient top #AFDDE1 Gradient bund #95BCC1 Inaktiv dato 33px 35px Inaktiv baggrund: Gradient top #F6F6F6 Gradient bund #EFEFEF OBS! Aktiv linje, #BBBBBB. 1px skygge, #FFFFFF. OBS! Inaktiv linje, #DDDDDD. 1px skygge, #FFFFFF. Specifikationer: tekst Måned og år, #1D3847. Tekst i Versaler. Dag, SS BOOK 10PX, #1D3847. Tekst i KAPITALER. Inaktiv dato, SS Book light 13px, #1D3847. Aktiv dato, SS Book Bold 13px, #1D3847. Dags dato, SS Book Bold 13px, #1D3847. Valgt dato, SS Book Bold 13px, #1D3847. OBS! Valgt state trumpfer dags dato. OBS! 1px dags dato boxborder #1D px skygge, #FFFFFF indeni box. Specifikationer: top navigation Ved klik på frem og tilbage pil kan man se forrige/næste måned/år. Måned og år, #1D3847. Top navigation boks, 1px border, #AFDCE1. Top navigation boks, pile og tekst centreres i container. 64

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

Designmanual BUTLER FM

Designmanual BUTLER FM Designmanual BUTLER FM 2015 Grontmij A/S, Facilities Management Forfatter: Rikke Carlsen, RIC Indhold Grid... 3 Afstande... 5 Fonte og typografier... 6 Farver... 7 Tabeller... 8 Andre elementer... 10 Ikoner...

Læs mere

Indholdsfortegnelse. Designmanual Borsen.dk 1. Farver 01. Fonte 02. Ikoner og knapper 03. Menuen 04. Bannere 05. Generelle mål 06. Grafikelementer 07

Indholdsfortegnelse. Designmanual Borsen.dk 1. Farver 01. Fonte 02. Ikoner og knapper 03. Menuen 04. Bannere 05. Generelle mål 06. Grafikelementer 07 Indholdsfortegnelse Designmanual Borsen.dk 1 Introduktion..................................................... 02 Farver 01 Fonte 02 Ikoner og knapper 03 Menuen 04 Bannere 05 Generelle mål 06 Grafikelementer

Læs mere

DESIGNGUIDE WEBSITE DESKTOP OG MOBIL 2016

DESIGNGUIDE WEBSITE DESKTOP OG MOBIL 2016 DESIGNGUIDE WEBSITE DESKTOP OG MOBIL 06 FARVER HOVEDFARVER SEKUNDÆRE FARVER Primary blue Secondary blue Primary teal Primary orange 80% 60% 40% 0% 80% 60% 40% 0% 80% 60% 40% 0% 80% 60% 40% 0% Hex: ##033f65

Læs mere

Portfolio - Grafisk Workflow

Portfolio - Grafisk Workflow Portfolio - Grafisk Workflow Opgaven gik ud på at designe et website for en tatovør. Der skulle indgå forskellige elementer på hver enkel side, samt overholdes nogle fastsatte krav. Vi skulle arbejde ud

Læs mere

Se hjemmesiden på:

Se hjemmesiden på: Se hjemmesiden på: www.share-connect.dk Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed

Læs mere

Designmanual BUTLER FM

Designmanual BUTLER FM Designmanual BUTLER FM 2015 Grontmij A/S, Facilities Management Forfatter: Rikke Carlsen, RIC Indhold Grid... 3 Afstande... 5 Fonte og typografier... 6 Farver... 7 Tabeller... 8 Andre elementer... 10 Ikoner...

Læs mere

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop Om opgaven: For et halvt år siden overtog nogle bekendte værtshuset Midtskiws i Skive. De havde derfor brug for en ny hjemmeside, som kunne fungere som et online informationssted og visitkort for deres

Læs mere

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow Grafisk Workflow REDESIGN AF GRAFISK FORUMS HJEMMESIDE Før Efter REDEGØRELSE OPGAVEN Da jeg ikke har noget med web at gøre på min elevplads, opfandt jeg en fiktiv opgave - nemlig at redesigne Grafisk Forums

Læs mere

KT OR LOW PRODUKTION // WORKFLOW

KT OR LOW PRODUKTION // WORKFLOW PR D O U ION KT // W KFKF OR LOW PRODUKTION // WORKFLOW // WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS HVAD? Opgaven er en fiktiv hjemmeside

Læs mere

Produkt. Index side GRAFISK DESIGN

Produkt. Index side GRAFISK DESIGN Grafisk design Produkt Index side Produkt Underside - kontakt Redegørelse OPGAVEN I forbindelse med valgfag, som jeg tog i København, havde vi lært forskellige nye funktioner, som vi skulle implementere

Læs mere

DESIGNMANUAL DIGITAL

DESIGNMANUAL DIGITAL DESIGNMANUAL DIGITAL Januar 2016 INDHOLD INDLEDNING 5 1. ELEMENTER 6 1.1 LOGOER 7 1.1.1 Primære logoer 7 1.1.2 Sekundære logoer 8 1.2 FARVER 9 Farver, Global 9 Farver, Kanal 4 9 Farver, 6 eren 9 Farver,

Læs mere

sådan gør du... [meld dig ledig]

sådan gør du... [meld dig ledig] [jobsøgende] sådan gør du... [meld dig ledig] som dimittend Meld dig ledig på Jobnet Dimittend Denne vejledning skal du kun anvende, hvis du kan sige ja til følgende: Du er nyuddannet, optaget eller på

Læs mere

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ Produkt Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen.

Læs mere

GRAFISK WORKFLOW Hjemmesidedesign

GRAFISK WORKFLOW Hjemmesidedesign GRAFISK WORKFLOW www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline

Læs mere

Digital designmanual / version 1.1 / Region Hovedstaden. P2 Design Manual

Digital designmanual / version 1.1 / Region Hovedstaden. P2 Design Manual Digital designmanual / version 1.1 / Region Hovedstaden P2 Design Manual 11 Designkoncept Univers Responsivitet Grundelementer Logo og navnetræk Farver Typografi Billedestill Grundskabeloner Design Sideeksempler

Læs mere

e-tinglysningsprojektet

e-tinglysningsprojektet E-BUSINESS SOLUTIONS FROM CSC e-tinglysningsprojektet Løsningsspecifikation: Design Guide Dokumentoplysninger Titel: Projekt: e-tl Løsningsspecifikation, Design Guide e-tl (Elektronisk Tinglysning) Placering:

Læs mere

sådan gør du... [meld dig ledig]

sådan gør du... [meld dig ledig] [jobsøgende] sådan gør du... [meld dig ledig] på kontanthjælp, starthjælp og introduktionsydelse Meld dig ledig på Jobnet Kontanthjælp Når du skal melde dig ledig, går du ind på forsiden af Jobnet.dk.

Læs mere

GRAFISK DESIGN. Min personlige e-portfolio

GRAFISK DESIGN. Min personlige e-portfolio GRAFISK DESIGN Min personlige e-portfolio 2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse

Læs mere

GRAFISK PRODUKTION & WORKFLOW. Endotest website

GRAFISK PRODUKTION & WORKFLOW. Endotest website GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere

Læs mere

Lav din egen forside i webtrees

Lav din egen forside i webtrees Lav din egen forside i webtrees Du behøver ikke at kunne kode eller gøre noget advanceret for at designe din helt egen forside i webtrees. Alt du skal gøre er bare at gøre brug af den indbygget editor.

Læs mere

Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8

Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8 Tabulex Hjemmeside Styling af sidemenuer Side 1 af 8 Styling af sidemenuer Sidemenuerne kan styles efter alle ønsker. Du skal vælge modulet: "Styling" på det niveau, hvor det skal have virkning. F.eks.

Læs mere

Kom godt i gang. Sitecore Foundry maj Version 1.1

Kom godt i gang. Sitecore Foundry maj Version 1.1 Sitecore Foundry 4 Kom godt i gang 26. maj 2014 - Version 1.1 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse Indledning...

Læs mere

sådan gør du... [meld dig ledig]

sådan gør du... [meld dig ledig] [jobsøgende] sådan gør du... [meld dig ledig] på dagpenge Meld dig ledig på Jobnet - Dagpenge Når du skal melde dig ledig, går du ind på forsiden af Jobnet.dk. Her klikker du på 'Meld dig ledig' i boksen

Læs mere

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv

Læs mere

GRAFISK DESIGN. webdesign af pl.dk

GRAFISK DESIGN. webdesign af pl.dk Webdesign af pl.dk Opgavebeskrivelse Bold.dk og 6 eren har slået sig sammen for at skabe Danmarks største Premier League fodboldportal, PL.dk. Hjemmesiden skal indeholde mange informationer, og samtidig

Læs mere

Målgruppe Mænd og kvinder i alderen 30 til 60 år, som er interesret i selvudvikling og ønsker et sundt arbejds- og privat liv.

Målgruppe Mænd og kvinder i alderen 30 til 60 år, som er interesret i selvudvikling og ønsker et sundt arbejds- og privat liv. Grafisk Design Kunden Mindfullife er en forskningsinvolveret undervisnings- og uddannelsesvirksomhed indenfor mindfulness-baseret intervention. De tilbyder kurser, retreats og uddannelse centreret omkring

Læs mere

Active Builder - Brugermanual

Active Builder - Brugermanual Active Builder - Brugermanual Version: Release 2.0 Sprog: Dansk Copyright 2014 - Talk Active ApS INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE... 2 1. HURTIGT OVERBLIK... 4 1.1 Vælg URL:... 4 1.2 Vælg en skabelon:...

Læs mere

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst

Læs mere

FIBREWATER DESIGN MANUAL NOVEMBER FIBREWATER Designmanual

FIBREWATER DESIGN MANUAL NOVEMBER FIBREWATER Designmanual DESIGN MANUAL NOVEMBER 2017 FORORD På de følgende sider finder du FibreWaters design manual. En håndbog til at designe løsninger til de grafiske flader. Formålet med denne design manual er at samle virksomheden

Læs mere

Vigtige funktioner i Word 2003

Vigtige funktioner i Word 2003 Vigtige funktioner i Word 2003 Indhold Husk... 2 Skrifttype... 2 Skriftstørrelse... 3 Overskrifter... 4 Andre vigtige funktioner... 5 Margen... 6 Linjeafstand... 7 Ordoptælling... 8 Sidetal... 10 Sidehoved

Læs mere

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 2 Log ind... 2 Ret i en artikel, der allerede er oprettet... 3 Opret ny artikel... 6 a) Skriv direkte i tekstfelt... 7 b) Indsæt tekst

Læs mere

Designguide. NemID Designguide / Kontrapunkt / Marts 2010 1

Designguide. NemID Designguide / Kontrapunkt / Marts 2010 1 Designguide h NemID Designguide / Kontrapunkt / Marts 2010 1 Indhold Logo Logo / Minimum afstand / Placering / Co-branding / Fejlagtig brug Elementer Farver / Tal og piktogrammer / Typografi / Supergrafik

Læs mere

Brugermanual til vandværkshjemmeside. Opsætning af sider og menu er

Brugermanual til vandværkshjemmeside. Opsætning af sider og menu er Brugermanual til vandværkshjemmeside Opsætning af sider og menu er 1 Forside 3 Liste Tre sideopsætninger: 1 Forside 2 Standard 3 Liste 2 Underside Sideopsætninger Siden er opdelt i: Kolonner & Afsnit Alt

Læs mere

Portfolio - sunestenild.dk

Portfolio - sunestenild.dk Portfolio - sunestenild.dk Grafisk produktion og workflow Anvendte programmer: Opgavebeskrivelse: Jeg vil gerne lave en hjemmeside som promoverer mig selv i forhold til kommende arbejdsgivere og eventuelle

Læs mere

Designmanual. Generelt. NyreNyt + pjecer. Logo 2 Farver 2 Typografi 3 Billede 3

Designmanual. Generelt. NyreNyt + pjecer. Logo 2 Farver 2 Typografi 3 Billede 3 Designmanual Generelt Logo 2 Farver 2 Typografi 3 Billede 3 NyreNyt + pjecer Forside 4 Inholdsfortegnelse 5 Sidetal / sidefod 5 Indhold 6 Tema / Tillæg 6 Typografi Rubrik (Overskrifter) Underrubrik (indl.

Læs mere

sådan gør du... [meld dig ledig]

sådan gør du... [meld dig ledig] [jobsøgende] sådan gør du... [meld dig ledig] uden ydelse Meld dig ledig på Jobnet Uden ydelse Når du skal melde dig ledig, går du ind på forsiden af Jobnet.dk. Her er der to muligheder. 1. Er du allerede

Læs mere

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder: Design en praktisk guide. Et design udtrykker dit websites grafiske udseende, lige fra hvilke skrifttyper der anvendes op til hvor navigationen er placeret og hvilke interaktive elementer der skal benyttes.

Læs mere

Designmanual / Forskningens Døgn

Designmanual / Forskningens Døgn 1/17 Designmanual / Forskningens Døgn Elementer 2 Logotype 2 Logotype på fotografi 3 Geometri 5 Forsk Geometri oversigt 6 Objekter 7 Forsk Objekt oversigt 8 Forhold mellem alle elementer 9 Farver 10 Font

Læs mere

Den Sociale Retshjælp

Den Sociale Retshjælp Den Sociale Retshjælp Design Manual 1 Indhold På de følgende sider finder du det designprogram, som Den Sociale Retshjælp arbejder ud fra. Med det ved hånden er du i stand til at designe løsninger til

Læs mere

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne

Læs mere

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15 DESIGNPROCES Indledende møde med

Læs mere

4 ARBEJDE MED SEKTIONER

4 ARBEJDE MED SEKTIONER 4 ARBEJDE MED SEKTIONER Sektioner er en ny måde at vise indhold på. I bund og grund handler det om, at vi opdeler en side i en eller flere sektioner, som kan vise indhold på en række forskellige måder.

Læs mere

Online annoncespecifikationer

Online annoncespecifikationer ClickTAG Streaming video Brugeraktiveret lyd Standardmål 728x90 15 sekunders animation Opdateret 24. juli 2008 Annoncering på BilBasen Fakta om BilBasen ApS Bilbasen.dk er Danmarks største bilsite med

Læs mere

V E J L E D N I N G. Sådan melder du dig ledig på Jobnet. Dimittend /Nyuddannet

V E J L E D N I N G. Sådan melder du dig ledig på Jobnet. Dimittend /Nyuddannet V E J L E D N I N G Sådan melder du dig ledig på Jobnet Dimittend /Nyuddannet Indhold: Side: 1 - MIN SIDE - Meld dig ledig 2 2 - Uddannelsesniveau 3 (Kun for borgere under 30 år) 3 - Vil du søge om en

Læs mere

TYPOGRAFI OG OMBRYDNING. Bog af Ib Møller På Vej.

TYPOGRAFI OG OMBRYDNING. Bog af Ib Møller På Vej. TYPOGRAFI OG OMBRYDNING Bog af Ib Møller På Vej. Produkt Redegørlese Hvad går opgaven ud på Jeg skulle i denne opgave ombryde en bog for Arkitekten og planlæggeren Ib Møller, som havde lavet denne bog

Læs mere

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk Kunde Bogforlaget Frydenlund A/S Produkt www.his2rie.dk Opgave Hjemmesiden før Redesign af hjemmesiden www.his2rie.dk, som ejes af forlaget. Min opgave lød på, at udforme et nyt design til hjemmesiden,

Læs mere

Designmanual for logo, film og webdesign

Designmanual for logo, film og webdesign Monkie Studio 19. december Designmanual for logo, film og webdesign Version 1.1 af designmanual. Denne manual gælder for Monkie Studios to logoer og webdesign. Derudover dækker den også filmen "Wake Up"

Læs mere

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner. GRAFISK DESIGN OPGAVEN Min kæreste er medstifter af en vinloge. Medlemmerne af logen kunne godt tænke sig et sted, hvor de bl.a. kunne få et overblik over, hvilke vine de har bedømt og hvornår næste loge

Læs mere

Meld dig ledig på Jobnet Dagpenge

Meld dig ledig på Jobnet Dagpenge Meld dig ledig på Jobnet Dagpenge Denne vejledning er for dig, som er medlem af en a-kasse og vil søge om dagpenge. Vær opmærksom på, at du tidligst kan få dagpenge fra den dag, hvor du er meldt ledig.

Læs mere

TYPOGRAFI & OMBRYDNING. Nørreport Centrets magasin

TYPOGRAFI & OMBRYDNING. Nørreport Centrets magasin TYPOGRAFI & OMBRYDNING Nørreport Centrets magasin OPGAVEN Nørreport Centret har et magasin der udkommer 8 gange i år. Hvert magasin kommer i forbindelse med en kampagne som kører i Nørreport Centret og

Læs mere

Release notes Januar 2014

Release notes Januar 2014 Release notes Januar 2014 Det er vigtigt, I sletter midlertidige filer i jeres browser efter et nyt release af borger.dk, for at browseren ikke stadig anvender ældre komponenter herfra. For OPIS redaktører

Læs mere

Grafisk produktion & workflow

Grafisk produktion & workflow Grafisk produktion & workflow WORKFLOW & PRODUKTION WEBSITE NATURSPEJDERNE Dokumentation I 2 OPGAVEN Opgaven Jeg har lavet dette fiktive website der kunne være en mulighed for en nyopstartet spejderforening.

Læs mere

V E J L E D N I N G. Sådan melder du dig ledig på Jobnet. Uden ydelse. 1 - MIN SIDE - Meld dig ledig Uddannelsesniveau 3

V E J L E D N I N G. Sådan melder du dig ledig på Jobnet. Uden ydelse. 1 - MIN SIDE - Meld dig ledig Uddannelsesniveau 3 V E J L E D N I N G Sådan melder du dig ledig på Jobnet Uden ydelse Indhold: Side: 1 - MIN SIDE - Meld dig ledig 2 2 - Uddannelsesniveau 3 (Kun for borgere under 30 år / under 25 år for a-kassemedlemmer

Læs mere

OPGAVE: WELOVEORGANIC.COM WEBSHOP

OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVEN OG AFSENDER: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker

Læs mere

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel Arbejdsgang - Skriv artiklens tekst - Gør billeder klar - Log-in på hjemmesiden - Opret ny artikel - Vælg kategori - Skriv overskrift - Indsæt tekst - Tilføj billeder - Gennemgå artiklens indstillinger

Læs mere

sådan gør du... [meld dig ledig]

sådan gør du... [meld dig ledig] [jobsøgende] sådan gør du... [meld dig ledig] på dagpenge Meld dig ledig på Jobnet - Dagpenge Når du skal melde dig ledig, går du ind på forsiden af Jobnet.dk. Her er der to muligheder 1. Er du allerede

Læs mere

Stilen skulle gerne være feminin og primærfarven rosa.

Stilen skulle gerne være feminin og primærfarven rosa. Grafisk design // Grafisk Design Hjemmesideløsning for syerske Sorami er et enmands-firma med mere end 25 års erfaring, som tilbyder omforandring af tøj og tøj syet efter eget design, samt håndlavede smykker.

Læs mere

Grafik & Billede weloveorganic.com webshop

Grafik & Billede weloveorganic.com webshop Grafik & Billede weloveorganic.com webshop Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt

Læs mere

Grafisk Design. rafisk Design

Grafisk Design. rafisk Design rafisk Design Svendeprøve 2016 Opgaven I forbindelse med at ReklameTryk ville lancere en webshop skulle vores hjemmeside opdateres. Den skulle fremstå enkelt, lys og nem at navigere rundt på og samtidig

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og

Læs mere

1.0 Velkommen til manualen for Editor 1. 1.1.1 Editorens typiske udseende 1. 1.1.2 HTML-kode 1. 1.1.3 Generelle funktioner og deres ikoner 2

1.0 Velkommen til manualen for Editor 1. 1.1.1 Editorens typiske udseende 1. 1.1.2 HTML-kode 1. 1.1.3 Generelle funktioner og deres ikoner 2 1.0 Velkommen til manualen for Editor 1 1.1 Editoren 1 1.1.1 Editorens typiske udseende 1 1.1.2 HTML-kode 1 1.1.3 Generelle funktioner og deres ikoner 2 1.2 Værktøjslinjer 2 1.3 Ikoner 2 1.3.1 Liste over

Læs mere

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

Lav en hjemme side der kan sælge fly billetter til en stor i Europa. EKSAMENS OPGAVE Lav en hjemme side der kan sælge fly billetter til en stor i Europa. Det første jeg startede ud med var at brainstorme hvad det var jeg skulle bruge i min side da jeg nu ved hvad den skal

Læs mere

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

Her er et udkast til hvad der skal laves funktionsbeskrivelse

Her er et udkast til hvad der skal laves funktionsbeskrivelse Her er et udkast til hvad der skal laves funktionsbeskrivelse Generelt til www.clipping.dk Markeret RØD er INTERN KOMMENTAR de er med i stedet for at slette dem Følgende sider/menuer/punkter, skal der

Læs mere

Vejledning til vedligehold af

Vejledning til vedligehold af Vejledning til vedligehold af www.ajsport.dk Udarbejdet af Helle M. Klausen Indhold Sådan logger du på... 2 Sådan logger du af... 2 Hvad er ikke tilladt under vedligehold af www.ajsport.dk?... 2 Kan www.ajsport.dk

Læs mere

V E J L E D N I N G. Sådan melder du dig ledig på Jobnet. Kontanthjælp / Uddannelseshjælp / Integrationsydelse

V E J L E D N I N G. Sådan melder du dig ledig på Jobnet. Kontanthjælp / Uddannelseshjælp / Integrationsydelse V E J L E D N I N G Sådan melder du dig ledig på Jobnet Kontanthjælp / Uddannelseshjælp / Integrationsydelse Indhold: Side: 1 - MIN SIDE - Meld dig ledig 2 2 Uddannelsesniveau 3 Kun for borgere under 30

Læs mere

Niks Frost & Line Søs Hold 32B

Niks Frost & Line Søs Hold 32B Niks Frost & Line Søs Hold 32B Landdrup Dans - Sitemap Forside Om Galleri Stilarter Hold Priser Tilmeld Åbningstider Kontakt Landdrup Dans. Forsiden linker til 8 undersider: 1: Om (info om firmatet) 2:

Læs mere

Designmanual. andersenbiler.dk

Designmanual. andersenbiler.dk Designmanual andersenbiler.dk 4 Logo 6 Anden 8 Ikoner 9 Brand Logoer 10 Skadecenter En verden af rap køreglæde Indhold 11 12 16 17 Farver Typografi Visitkort Brevark og faktura 18 Email Signaturer 19 Stempler

Læs mere

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som

Læs mere

Januar Designguide. Designguide til Nibe Bryghus. Lavet af:

Januar Designguide. Designguide til Nibe Bryghus. Lavet af: Januar 2015 Designguide Designguide til Nibe Bryghus Lavet af: Forord Design guide Nibe Bryghus Design Guiden er rettet mod Nibe Bryghus, så de let og hurtigt kan se, hvilke designelementer, som er blevet

Læs mere

Ud fra ovenstående vil den typiske Maileg kunde kunne placeres i det grønne segment i følge Minerva modellen. GRAFISK DESIGN. Moderne.

Ud fra ovenstående vil den typiske Maileg kunde kunne placeres i det grønne segment i følge Minerva modellen. GRAFISK DESIGN. Moderne. Opgave Vi er på vej til at lave en ny hjemmeside hvor vi fremadrettet skal til at sælge vores produkter direkte til kunderne. Vi vil gerne lave en hjemmeside som både virker legende men også overskuelig,

Læs mere

Designguide for Domstol.dk

Designguide for Domstol.dk Designguide for Domstol.dk Designguide December 2006 for Domstol.dk Indholdsfortegnelse Designelementer..................... 3 Navigationsprincipper................ 11 Tekstformatering....................

Læs mere

JOBLOG. Sådan bruger du din joblog

JOBLOG. Sådan bruger du din joblog JOBLOG Sådan bruger du din joblog INDHOLD 4 BRUG DIN JOBLOG AKTIVT 5 FÅ OVERBLIK OVER DINE JOBANSØGNINGER 6 STATUS PÅ JOBANSØGNING 7 OPRET NY JOBSØGNING 9 ARBEJDSTID 10 ANSØGNINGSMETODE 11 ANSØGNINGSDATO

Læs mere

Her kan man oprette et nyt slideshow ved at trykke på kassen med "Opret nyt slideshow". Dette fører en til "Rediger slideshow".

Her kan man oprette et nyt slideshow ved at trykke på kassen med Opret nyt slideshow. Dette fører en til Rediger slideshow. Hjælp til Praksisskærm Redigering i Praksisskærm Redigeringsdelen består af 2 sider. Den ene side - "Oversigt over slideshows" indeholder oversigten over ens slideshows. Den anden - "Rediger slideshow"

Læs mere

PORTFOLIO TYPOGRAFI & OMBRYDNING

PORTFOLIO TYPOGRAFI & OMBRYDNING PORTFOLIO TYPOGRAFI & OMBRYDNING Typografi & Ombrydning DOKUMENTATION Opgave beskrivelse Kunden ønsker at få en simpel bruchurer, som han kan dele ud i klubben. Han kunne godt tænke sig i denne brochure,

Læs mere

Grafisk workflow. Se siden her: www.cormas.dk

Grafisk workflow. Se siden her: www.cormas.dk Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html

Læs mere

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen. Validering 4 Nu skal vi især se på og samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden , men lad nu være alligevel, du får blot en masse valideringsproblemer.

Læs mere

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

sådan gør du... [meld dig ledig]

sådan gør du... [meld dig ledig] [jobsøgende] sådan gør du... [meld dig ledig] på kontanthjælp og med uddannelseshjælp Meld dig ledig på Jobnet Kontanthjælp/Uddannelseshjælp Når du skal melde dig ledig, går du ind på forsiden af Jobnet.dk.

Læs mere

Indhold. 1. Adgang og afslutning

Indhold. 1. Adgang og afslutning 1 Indhold 1. Adgang og afslutning 2. Menupunkter 3. Tekst 4. Billeder 5. Video 6. Lyd 7. Bannere 8. Bokse 9. Dokumenter 10. Links 11. Iframe 12. Markedspladsen 13. Nyheder 14. Job 15. Kalender 16. Selvbetjeningsbjælken

Læs mere

Meld dig ledig via Jobnet - Dimittend

Meld dig ledig via Jobnet - Dimittend Meld dig ledig via Jobnet - Dimittend Denne vejledning er for dig, som er nyuddannet og på vej til optagelse i en Arbejdsløshedskasse på baggrund af din uddannelse og endnu ikke dagpengeberettiget, dvs.

Læs mere

[jobsøgende] sådan gør du... [søg job via jobnet.dk]

[jobsøgende] sådan gør du... [søg job via jobnet.dk] [jobsøgende] sådan gør du... [søg job via jobnet.dk] Søg jobbet via Jobnet Du kan se ledige job på Jobnet.dk, og når du har fundet en stilling, kan du søge den. Er der i søgeresultatlisten ved annoncens

Læs mere

sådan gør du... [Joblog på Jobnet.dk]

sådan gør du... [Joblog på Jobnet.dk] [jobsøgende] sådan gør du... [Joblog på Jobnet.dk] Opret din joblog Joblog på Jobnet.dk Joblog er et værktøj, som hjælper dig med at dokumentere, organisere og målrette din jobsøgning. Med joblog får du

Læs mere

Tastemanual til Webbyggeren

Tastemanual til Webbyggeren Tastemanual til Webbyggeren Denne tastemanual er opbygget således, at eleverne skal lave deres hjemmeside i en allerede konstrueret hjemmesideskabelon, som de kan arbejde videre i, lægge tekst ind i, ændre

Læs mere

Manual til Dynamicweb Februar 2010

Manual til Dynamicweb Februar 2010 Manual til Dynamicweb Februar 2010 Login... 2 Skabeloner og formater... 3 Filarkivet... 4 Lav en PDF... 5 Opret en ny side... 7 Navngiv siden... 9 Aktiver siden... 9 Sorter sider... 9 Flyt siden... 11

Læs mere

Designguide. NemID Designguide / Kontrapunkt / Februar

Designguide. NemID Designguide / Kontrapunkt / Februar Designguide h NemID Designguide / Kontrapunkt / Februar 2010 1 Indhold Logo Logo / Minimum afstand / Placering / Co-branding / Fejlagtig brug Elementer Farver / Tal og piktogrammer / Typografi / Supergrafik

Læs mere

Hardeknud gruppe. Brugermanual. Tilegnet redaktører af gruppeweb hjemmeside

Hardeknud gruppe. Brugermanual. Tilegnet redaktører af gruppeweb hjemmeside Hardeknud gruppe Brugermanual Tilegnet redaktører af gruppeweb hjemmeside Indhold Indledning... 4 Om denne brugermanual... 4 Formålet med Gruppeweb... 4 Hjemmesidens opbygning... 4 Redaktører... 5 Log

Læs mere

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot til hjemmesiden. Mine indledende tanker bag hjemmesiden

Læs mere

Grafisk workflow. Hjemmeside til Bærkompagniet

Grafisk workflow. Hjemmeside til Bærkompagniet Grafisk workflow Hjemmeside til Bærkompagniet Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne

Læs mere

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

Grafisk produktionsforståelse

Grafisk produktionsforståelse 04 Grafisk produktionsforståelse Design og koding af steentrae.dk 24 Svendeprøveportfolio Steentrae.dk Responsivt website med CMS I forlængelse af min Grafisk design-del, har jeg her valgt at fokusere

Læs mere

BRUGERGUIDE Nfoo Concept Digital Skiltning

BRUGERGUIDE Nfoo Concept Digital Skiltning BRUGERGUIDE Nfoo Concept Digital Skiltning Herunder finder du en introduktion til de forskellige funktioner i administrationsmodulet til dit Nfoo Concept Digital Skiltning INDHOLD LOGIN OG INDSTIL SPROG...

Læs mere

Velkommen til manualen for Styleclasses Introduktion til Styleclasses Rediger styleclass

Velkommen til manualen for Styleclasses Introduktion til Styleclasses Rediger styleclass 14.2.0 Velkommen til manualen for Styleclasses 1 14.2.1 Introduktion til Styleclasses 1 14.2.2 Ny styleclass 1 14.2.3 Rediger styleclass 2 14.2.3.1 Custom 3 14.2.3.2 Setup 3 14.2.3.3 Slet 4 14.2.4 Problemer

Læs mere

Michella+Serritzlew+Jacobsen+

Michella+Serritzlew+Jacobsen+ Designmanual+ Afsluttende+projekt+1.+Semester++ Michella+Serritzlew+Jacobsen+ CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Indholdsfortegnelse PBS...3 WBS...3 Brainstorm...4 Wireframes...5

Læs mere

Weblayout til Pisiffik 2011

Weblayout til Pisiffik 2011 Nerrivik sisamanik issiavittalik Nerrivik igalaamineq sisamanik amiusamik qalilinnik issiavittalik kromstel aamma issiavittaa iigarfialu kiffiarsimasoq Juventus spisebord med 4 stole Juventus spisebord

Læs mere

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 TYPO3 manual DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 Det første afsnit, Introduktion til systemet, giver et hurtigt overblik over mulighederne.

Læs mere